.tile__anim {
  --a-ink: #425B9A;
  --a-deep: #2C3E6B;
  --a-sky: #76C0EC;
  --a-pink: #FF95A5;
  --a-cream: #FFF6DC;
  --a-tint: #EAF4FC;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--a-tint); overflow: hidden;
  transform: translateZ(24px) scale(1.02);
  transition: transform 600ms var(--ease);
}
.tile__media { aspect-ratio: 16 / 10; }
.tile:hover .tile__anim { transform: translateZ(40px) scale(1.06); }
.tile__anim svg { display: block; }

.tile__anim--store svg,
.tile__anim--map svg { width: 100%; height: 100%; }

.a1-ground, .a1-facade rect, .a1-facade line, .a1-canopy, .a1-door rect, .a1-door circle,
.a1-sign rect, .a1-sign line, .a1-moon path, .a1-sun circle, .a1-sun line, .a1-cloud,
.a6-ground, .a6-store rect, .a6-store line,
.a6-store polygon, .a6-person circle, .a6-person path, .a6-trail {
  fill: none; stroke: var(--a-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.a1-glass { fill: var(--a-cream); }
.a1-glow { fill: var(--a-pink); stroke: none; }
.a1-stripe { fill: var(--a-sky); }
.a1-stripe--ink { fill: var(--a-ink); }
.a1-canopy { fill: none; }
.a1-sign rect { fill: var(--a-pink); }
.a1-stars circle { fill: var(--a-ink); stroke: none; }
.a1-moon path, .a1-cloud { fill: var(--a-cream); }
.a1-sun circle { fill: var(--a-pink); }
.a1-stars { opacity: 0.4; animation: a1-stars 24s linear infinite; }
.a1-sun { opacity: 1; animation: a1-sun 24s linear infinite; }
.a1-moon { opacity: 0; animation: a1-moon 24s linear infinite; }
.a1-clouds { opacity: 1; animation: a1-clouds 24s linear infinite; }
.a1-cloud--a { animation: a1-drift-a 26s ease-in-out infinite; }
.a1-cloud--b { animation: a1-drift-b 31s ease-in-out infinite; }
.a1-sign text {
  fill: var(--a-deep); font: 600 8px var(--font-sans); text-anchor: middle; letter-spacing: 0.4px;
}
.a1-door { transform-box: view-box; transform-origin: 130px 90px; animation: a1-door 11s var(--ease) infinite; }
.a1-glow { animation: a1-glow 11s ease-in-out infinite; }
.a1-sign { transform-box: view-box; transform-origin: 71px 60px; animation: a1-swing 11s ease-in-out infinite; }

@keyframes a1-door { 0%, 24% { transform: scaleX(1); } 38%, 72% { transform: scaleX(0.34); } 88%, 100% { transform: scaleX(1); } }
@keyframes a1-stars { 0%, 34% { opacity: 1; } 46%, 88% { opacity: 0.14; } 96%, 100% { opacity: 1; } }
@keyframes a1-moon {
  0% { transform: translate(-30px, 4px); opacity: 0; }
  6%, 32% { opacity: 1; }
  42% { transform: translate(30px, 0); opacity: 0; }
  100% { transform: translate(-30px, 4px); opacity: 0; }
}
@keyframes a1-sun {
  0%, 46% { transform: translate(-34px, 3px); opacity: 0; }
  52%, 84% { opacity: 1; }
  92%, 100% { transform: translate(38px, 3px); opacity: 0; }
}
@keyframes a1-clouds { 0%, 40% { opacity: 0.18; } 50%, 86% { opacity: 1; } 96%, 100% { opacity: 0.18; } }
@keyframes a1-drift-a { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
@keyframes a1-drift-b { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(-6px); } }
@keyframes a1-glow { 0%, 30% { opacity: 0.4; } 42%, 72% { opacity: 1; } 84%, 100% { opacity: 0.4; } }
@keyframes a1-swing { 0%, 16% { transform: rotate(0deg); } 24% { transform: rotate(4.5deg); } 32% { transform: rotate(-3deg); } 40% { transform: rotate(1.2deg); } 46%, 100% { transform: rotate(0deg); } }

.tile__anim--truck { color: var(--a-ink); background: var(--a-tint); }
.tile__anim--truck svg { width: 92%; height: auto; }
.truck { --dur: 3s; }
.truck__body, .truck__line, .truck__outside1, .truck__outside2, .truck__outside3,
.truck__wheel, .truck__wheel-spin, .truck__window1, .truck__window2 {
  animation: truck-body var(--dur) linear infinite;
}
.truck__body { transform-origin: 17px 11px; }
.truck__line { animation-name: truck-line; }
.truck__outside1 { animation-name: truck-outside1; }
.truck__outside2 { animation-name: truck-outside2; }
.truck__outside3 { animation-name: truck-outside3; }
.truck__wheel { animation-name: truck-wheel; }
.truck__wheel-spin { animation-name: truck-wheel-spin; transform-origin: 6.5px 17px; }
.truck__wheel:nth-child(2) { animation-delay: calc(var(--dur) * 0.0625); }
.truck__wheel:nth-child(2) .truck__wheel-spin { transform-origin: 27px 17px; }
.truck__window1 { animation-name: truck-window1; }
.truck__window2 { animation-name: truck-window2; }
.a2-road { stroke: var(--a-ink); stroke-width: 1; stroke-dasharray: 3 2.4; animation: a2-road 1.2s linear infinite; }
.a2-parcel { transform: translate(0, 11px); }
.a2-parcel rect { fill: var(--a-cream); stroke: var(--a-ink); stroke-width: 0.7; }
.a2-parcel path { fill: none; stroke: var(--a-ink); stroke-width: 0.7; }
.a2-parcel--a { animation: a2-drop 4.4s ease-in infinite; }
.a2-parcel--b { animation: a2-drop 4.4s ease-in infinite -2.6s; }

@keyframes a2-road { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -5.4; } }
@keyframes a2-drop {
  0%, 14% { transform: translate(0, -3px); opacity: 0; }
  22% { opacity: 1; }
  48% { transform: translate(0, 11px); opacity: 1; }
  62%, 100% { transform: translate(0, 11px); opacity: 0; }
}
@keyframes truck-body {
  from, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, to {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0); transform: translate(0, 0) rotate(0);
  }
  6.25%, 18.75%, 31.25%, 43.75%, 56.25%, 68.75%, 81.25%, 93.75% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); transform: translate(0, 1px) rotate(-0.75deg);
  }
}
@keyframes truck-line { from { stroke-dashoffset: -18; } to { stroke-dashoffset: 78; } }
@keyframes truck-outside1 { from { stroke-dashoffset: 105; } to { stroke-dashoffset: -105; } }
@keyframes truck-outside2 { from { stroke-dashoffset: 168; } to { stroke-dashoffset: -42; } }
@keyframes truck-outside3 { from { stroke-dashoffset: 192; } to { stroke-dashoffset: -18; } }
@keyframes truck-wheel {
  from, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, to {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0); transform: translate(0, 0);
  }
  6.25%, 18.75%, 31.25%, 43.75%, 56.25%, 68.75%, 81.25%, 93.75% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); transform: translate(0, -1px);
  }
}
@keyframes truck-wheel-spin { from { stroke-dashoffset: -15.71; transform: rotate(0); } to { stroke-dashoffset: 15.71; transform: rotate(-4turn); } }
@keyframes truck-window1 { from { stroke-dashoffset: -21; } to { stroke-dashoffset: 189; } }
@keyframes truck-window2 { from { stroke-dashoffset: -39; } to { stroke-dashoffset: 171; } }

.rb-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--a-sky); opacity: 0.3; }
.rb-view {
  position: absolute; left: 0; right: 0; bottom: 8px; height: 120px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.rb-scale { height: 200px; transform: scale(0.6); transform-origin: 0 0; }
.rb-track { display: flex; width: max-content; animation: rb-scroll 30s linear infinite; }
.rb-set { display: flex; }

@keyframes rb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tile__anim--wrench svg { height: 100%; width: 100%; }
.a4-cog { transform-box: fill-box; transform-origin: center; animation: a4-spin 24s linear infinite; }
.a4-cog path, .a4-cog circle {
  fill: none; stroke: var(--a-ink); stroke-width: 2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.a4-cog--mid { animation: a4-spin 11s linear infinite reverse; }
.a4-cog--small { animation: a4-spin 15.5s linear infinite; }
.a4-hub { fill: var(--a-pink); }
.a4-wrench { transform-box: fill-box; transform-origin: center; animation: a4-turn 5.2s cubic-bezier(0.34, 1.1, 0.3, 1) infinite; }
.a4-wrench path { fill: var(--a-deep); }

@keyframes a4-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes a4-turn { 0%, 12% { transform: rotate(0deg); } 40% { transform: rotate(5deg); } 72%, 100% { transform: rotate(0deg); } }

.tile__anim--bongo svg { width: 96%; height: auto; }
.bongo-cat { fill: var(--a-cream); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.laptop-cover, .headphone .band { fill: none; }
.paw, .head { stroke: var(--a-ink); }
.laptop-base { fill: var(--a-sky); stroke: var(--a-deep); }
.laptop-cover { fill: var(--a-cream); stroke: var(--a-deep); }
.laptop-keyboard { stroke: var(--a-deep); stroke-width: 2; }
.terminal-frame { fill: var(--a-cream); stroke: var(--a-ink); }
.terminal-code { stroke: var(--a-deep); stroke-width: 4; }
.music .note, .paw .pads { stroke: var(--a-pink); }
.table polygon { fill: var(--a-tint); }
.table line, .headphone .band, .headphone .speaker path:nth-child(3) { stroke: var(--a-ink); }
.headphone .speaker path:first-child { stroke: var(--a-deep); }
.headphone .speaker path:nth-child(2) { stroke: var(--a-ink); }

.tile__anim--bongo .paw .up { opacity: 1; animation: a5-tap 0.24s linear infinite; }
.tile__anim--bongo .paw .down { opacity: 0; animation: a5-tap-off 0.24s linear infinite; }
.tile__anim--bongo .paw-left .up, .tile__anim--bongo .paw-left .down { animation-delay: -0.12s; }
.tile__anim--bongo .music-right { --note-shift: 0s; }
.tile__anim--bongo .music-left { --note-shift: -2s; }
.tile__anim--bongo .music .note {
  fill: none; animation: a5-note 12s linear infinite; animation-delay: var(--note-shift, 0s);
}
.tile__anim--bongo .music .note:nth-child(2) { animation-delay: calc(var(--note-shift, 0s) - 4s); }
.tile__anim--bongo .music .note:nth-child(3) { animation-delay: calc(var(--note-shift, 0s) - 8s); }
.tile__anim--bongo .music .note:nth-child(4) { display: none; }
.tile__anim--bongo .terminal-code line {
  stroke-dasharray: 72;
  animation: a5-type 2.8s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.1s);
}

@keyframes a5-tap { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes a5-tap-off { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes a5-note { 0% { transform: translateY(6px); opacity: 0; } 5% { opacity: 1; } 15% { opacity: 1; } 20%, 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes a5-type { 0% { stroke-dashoffset: 72; } 16%, 100% { stroke-dashoffset: 0; } }

.a6-glass { fill: var(--a-cream); }
.a6-awning { fill: var(--a-pink); }
.a6-trail { stroke-width: 2; stroke-dasharray: 6 5; animation: a6-march 2.6s linear infinite; }
.a6-node { stroke: var(--a-ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: a6-pop 6s var(--ease) infinite; }
.a6-node--1 { fill: var(--a-ink); }
.a6-node--2 { fill: var(--a-sky); animation-delay: 0.7s; }
.a6-node--3 { fill: var(--a-pink); animation-delay: 1.4s; }
.a6-node--4 { fill: var(--a-deep); animation-delay: 2.1s; }
.a6-parcel { transform: translate(42px, 80px); animation: a6-travel 6s linear infinite; }
.a6-parcel rect { fill: var(--a-cream); stroke: var(--a-ink); stroke-width: 2; }
.a6-parcel path { fill: none; stroke: var(--a-ink); stroke-width: 1.4; }

@keyframes a6-march { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -22; } }
@keyframes a6-pop { 0%, 100% { transform: scale(1); } 5% { transform: scale(1.5); } 11% { transform: scale(1); } }
@keyframes a6-travel {
  0% { transform: translate(42px, 80px); opacity: 0; }
  8% { transform: translate(42px, 80px); opacity: 1; }
  26.4% { transform: translate(84px, 80px); }
  41.3% { transform: translate(84px, 46px); }
  68.4% { transform: translate(146px, 46px); }
  86.8% { transform: translate(146px, 88px); }
  92% { transform: translate(158px, 88px); opacity: 1; }
  100% { transform: translate(158px, 88px); opacity: 0; }
}

.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .a1-door, .a1-glow, .a1-sign, .a1-stars, .a1-sun, .a1-moon, .a1-clouds, .a1-cloud,
  .a2-parcel, .a2-road, .rb-track, .a4-cog, .a4-wrench,
  .tile__anim--bongo .paw .up, .tile__anim--bongo .paw .down,
  .tile__anim--bongo .music .note, .tile__anim--bongo .terminal-code line,
  .a6-trail, .a6-node, .a6-parcel {
    animation: none !important;
  }
  .a1-glow { opacity: 1; }
  .rb::before { opacity: 1 !important; }
  .rb::after { opacity: 0 !important; }
  .a2-parcel { opacity: 1; }
  .tile__anim--bongo .music .note { opacity: 1; }
}