/* Feature tiles: flat Phantom-style scenes on soft neutral cards, one small story per tile.
   Motion: one 5.2s story loop (.a) over ambient layers on their own clocks (.amb); it only runs while the tile is on screen. */
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/rethink-sans-latin.woff2) format('woff2'); }
.features { --ink: #17141F; --eo: cubic-bezier(.22, 1, .36, 1); --sp: cubic-bezier(.3, 1.22, .5, 1); --in: cubic-bezier(.55, 0, .75, .1); --io: cubic-bezier(.65, 0, .35, 1);
  position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--pad) clamp(64px, 12vh, 140px); overflow: clip visible; }
/* Phantom's row: a label pill on the left, a pair of arrows on the right, tiles sliding underneath */
.rowhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.rowhead .label { height: 44px; padding: 0 18px 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px;
  color: #F4F4F6; font: 500 17px/1 'Rethink Sans', Inter, system-ui, sans-serif; letter-spacing: -.01em; }
/* both controls are solid, the same surface as the showcase card */
.rowhead .label, .arrows { position: relative; background: var(--surface); }
.rowhead .label .i { width: 18px; height: 18px; }
.arrows { display: flex; gap: 2px; padding: 3px; border-radius: 999px; }
.arrows button { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: #F4F4F6; background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: background-color .2s, color .2s, opacity .2s; }
.arrows button:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.arrows button:disabled { background: transparent; box-shadow: none; color: #55555C; cursor: default; }
.arrows .i { width: 16px; height: 16px; }
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
.tiles::-webkit-scrollbar { display: none; }
/* room above and below so a tile leaning toward the pointer isn't clipped by the scrolling row */
.tiles { padding-block: 12px; margin-block: -12px; padding-left: 12px; margin-left: -12px; scroll-padding-left: 12px; }
/* entrance: each tile rises in once on the springy curve, one after another (tiles.js adds .pre, then .in) */
.features.pre :is(.rowhead, .tiles > *, .duo > *) { opacity: 0; translate: 0 44px; scale: .96;
  transition: opacity .45s ease, translate .9s var(--sp), scale .9s var(--sp); transition-delay: calc(var(--i, 0) * 80ms); }
.features.pre :is(.rowhead, .tiles > *, .duo > *).in { opacity: 1; translate: none; scale: none; }
.tiles > * { scroll-snap-align: start; }
.tile.next { display: grid; place-items: center; background: var(--surface); color: var(--faint); font-size: 14px; }
.tiles:not(.live) .a, .tiles:not(.live) .amb { animation-play-state: paused; }
@media (max-width: 960px) { .tiles { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 620px) { .tiles { grid-auto-columns: 86%; gap: 14px; } .rowhead .label { height: 40px; font-size: 16px; } }

.cream { --bg: #F3E7CF; --c1: #FAF3E4; --c2: #E9DBBD; --base: #E0CDA6; --blob: #FFB59C; --spk: #FFB443; }
.tile { position: relative; width: 100%; aspect-ratio: .78; border-radius: 28px; overflow: hidden; background: var(--bg); color: var(--ink); }
.tile h3 { font-family: 'Rethink Sans', Inter, system-ui, sans-serif; position: relative; z-index: 2; padding: 36px 34px 0; font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -.016em; text-wrap: pretty; }
.art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 360 / 320; overflow: visible; }
/* a hand-made edge: fine noise nudges every edge a little, so shapes read chalky and sketched (like a risograph).
   Stroked lines, faces and text stay crisp; background shapes get a looser edge. */
.art :is(path, rect, circle, ellipse, use) { filter: url(#fuzz); }
.art :is(path, rect, circle, ellipse, use)[stroke] { filter: none; }   /* a straight line has a zero-size box, and a filter would clip it away */
.art .bg.bg { filter: url(#fuzz-bg); }
.art .face.face, .art .face * { filter: none; }
.art text { font-family: 'Rethink Sans', Inter, system-ui, sans-serif; }

/* one loop tells the story; the ambient layer runs on its own clocks so it never looks repeated */
.a { transform-box: fill-box; transform-origin: center; animation: var(--n) 5.2s var(--ease, var(--eo)) infinite both; }
.amb { transform-box: fill-box; transform-origin: center; animation: var(--n) var(--t, 5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
/* groups whose contents animate inside them scale about their own centre (0,0), not their changing outline, so they never jump */
.a.pin { transform-box: view-box; transform-origin: 0 0; }

/* ambient */
@keyframes drift { 50% { transform: translate(var(--dx, 6px), var(--dy, -8px)) rotate(var(--dr, 8deg)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.04); } }
@keyframes float { 50% { transform: translateY(-3px) rotate(-.8deg); } }
@keyframes tw { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.4) rotate(45deg); opacity: .5; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes flick { to { transform: scale(1.1, .9) rotate(4deg); } }

/* story */
@keyframes card {
  0%, 5% { transform: none; opacity: 1; animation-timing-function: var(--in); }
  13% { transform: translate(-80px, 112px) scale(.18) rotate(-22deg); opacity: 0; }
  25% { transform: translate(-80px, 112px) scale(.18) rotate(-22deg); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  27% { opacity: 1; }
  42% { transform: translate(2px, -4px) scale(1.025) rotate(1.5deg); animation-timing-function: var(--io); }
  54%, 100% { transform: none; opacity: 1; }
}
@keyframes app {
  0%, 4% { transform: none; opacity: 1; animation-timing-function: var(--in); }
  14% { transform: translate(var(--fx), var(--fy)) scale(.25) rotate(30deg); opacity: 0; }
  44% { transform: translate(var(--fx), var(--fy)) scale(.25) rotate(30deg); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  46% { opacity: 1; }
  64%, 100% { transform: none; opacity: 1; }
}
@keyframes cam { 0%, 12%, 34%, 100% { transform: none; } 19% { transform: translateY(-5px) rotate(-5deg); } 22% { transform: translateY(-3px) scale(1.06, .92) rotate(-4deg); } 26% { transform: translateY(-1px) scale(.98, 1.03) rotate(-1deg); } }
@keyframes burst { 0%, 21.5% { transform: scale(.4); opacity: 0; } 24% { opacity: 1; } 38%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes squint { 0%, 19% { transform: scaleY(1); } 22%, 30% { transform: scaleY(.15); } 36%, 100% { transform: scaleY(1); } }
@keyframes conf { 0%, 23% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; } 26% { opacity: 1; } 46% { opacity: 1; } 58%, 100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r, 160deg)); opacity: 0; } }
@keyframes line { 0%, 5% { stroke-dashoffset: 0; } 8%, 46% { stroke-dashoffset: 200; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes area { 0%, 5% { transform: none; } 8%, 50% { transform: scaleY(0); } 72%, 100% { transform: scaleY(1); } }
@keyframes dot { 0%, 5% { transform: none; } 8%, 66% { transform: scale(0); } 72% { transform: scale(1.2); } 80%, 100% { transform: scale(1); } }
@keyframes num { 0%, 40% { transform: none; } 47% { transform: scale(1.07); } 56%, 100% { transform: none; } }
@keyframes chip { 0%, 5% { transform: none; } 8%, 54% { transform: scale(0); } 64%, 100% { transform: none; } }
@keyframes pill { 0%, 70% { transform: translateY(8px) scale(.6); opacity: 0; } 78% { transform: none; opacity: 1; } 91% { transform: none; opacity: 1; } 98%, 100% { transform: translateY(-6px) scale(.9); opacity: 0; } }
@keyframes spark { 0%, 56% { transform: scale(0) rotate(0); opacity: 0; } 64% { transform: scale(1) rotate(45deg); opacity: 1; } 82%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
@keyframes heart { 0%, 66%, 82%, 100% { transform: none; } 70% { transform: scale(1.14); } 74% { transform: scale(.97); } 78% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) { .a, .amb { animation: none; } }

/* Keep the streak lit: mint. The dashboard's upload card (same squares, gaps, blues and key as studio.js) as a 3D slab.
   The camera rides close behind Wick as he hops three weeks, each square lighting up; then the card turns clockwise
   and lies flat as it is on the dashboard, with the streak pill; then the camera swoops back in. Keyframes for the
   camera are sampled from mkstreak3d.py so the plane, its depth and Wick's counter-rotation stay in step. */
.mint { --bg: #CDEBD2; --c1: #DDF3E0; --c2: #C0E4C6; --base: #9DCDA6; --spk: #FFFDF8; }
.mint .slab { filter: url(#fuzz-thin); }          /* one filter pass for the whole card, not one per square */
.mint .slab * { filter: none; }
@keyframes ptop {
  0% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-215px, -86px); }
  2% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-215.401px, -86px); }
  4% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-216.543px, -86px); }
  6% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-218.333px, -86px); }
  8% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-220.679px, -86px); }
  10% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-223.488px, -86px); }
  12% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-226.667px, -86px); }
  14% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-230.123px, -86px); }
  16% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-233.765px, -86px); }
  18% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-237.5px, -86px); }
  20% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-241.235px, -86px); }
  22% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-244.877px, -86px); }
  24% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-248.333px, -86px); }
  26% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-251.512px, -86px); }
  28% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-254.321px, -86px); }
  30% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-256.667px, -86px); }
  32% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-258.457px, -86px); }
  34% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-259.599px, -86px); }
  36% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-260px, -86px); }
  38% { transform: translate(162.042px, 235.907px) scale(2.495) translate(0, 0px) scaleY(0.561) rotate(-44.896deg) translate(-259.741px, -86.021px); }
  40% { transform: translate(162.333px, 235.259px) scale(2.461) translate(0, 0px) scaleY(0.568) rotate(-44.167deg) translate(-257.926px, -86.167px); }
  42% { transform: translate(163.125px, 233.5px) scale(2.369) translate(0, 0px) scaleY(0.588) rotate(-42.188deg) translate(-253px, -86.562px); }
  44% { transform: translate(164.667px, 230.074px) scale(2.202) translate(0, 0px) scaleY(0.625) rotate(-38.333deg) translate(-243.407px, -87.333px); }
  46% { transform: translate(167.208px, 224.426px) scale(1.95) translate(0, 0px) scaleY(0.687) rotate(-31.979deg) translate(-227.593px, -88.604px); }
  48% { transform: translate(171px, 216px) scale(1.628) translate(0, 0px) scaleY(0.78) rotate(-22.5deg) translate(-204px, -90.5px); }
  50% { transform: translate(174.792px, 207.574px) scale(1.359) translate(0, 0px) scaleY(0.873) rotate(-13.021deg) translate(-180.407px, -92.396px); }
  52% { transform: translate(177.333px, 201.926px) scale(1.204) translate(0, 0px) scaleY(0.935) rotate(-6.667deg) translate(-164.593px, -93.667px); }
  54% { transform: translate(178.875px, 198.5px) scale(1.118) translate(0, 0px) scaleY(0.973) rotate(-2.812deg) translate(-155px, -94.438px); }
  56% { transform: translate(179.667px, 196.741px) scale(1.077) translate(0, 0px) scaleY(0.992) rotate(-0.833deg) translate(-150.074px, -94.833px); }
  58% { transform: translate(179.958px, 196.093px) scale(1.062) translate(0, 0px) scaleY(0.999) rotate(-0.104deg) translate(-148.259px, -94.979px); }
  60% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  62% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  64% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  66% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  68% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  70% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  72% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  74% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  76% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  78% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  80% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  82% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  84% { transform: translate(179.901px, 196.219px) scale(1.065) translate(0, 0px) scaleY(0.998) rotate(-0.247deg) translate(-148.368px, -94.951px); }
  86% { transform: translate(179.21px, 197.756px) scale(1.101) translate(0, 0px) scaleY(0.981) rotate(-1.975deg) translate(-150.941px, -94.605px); }
  88% { transform: translate(177.333px, 201.926px) scale(1.204) translate(0, 0px) scaleY(0.935) rotate(-6.667deg) translate(-157.926px, -93.667px); }
  90% { transform: translate(173.679px, 210.047px) scale(1.433) translate(0, 0px) scaleY(0.845) rotate(-15.802deg) translate(-171.528px, -91.84px); }
  92% { transform: translate(168.321px, 221.953px) scale(1.85) translate(0, 0px) scaleY(0.715) rotate(-29.198deg) translate(-191.472px, -89.16px); }
  94% { transform: translate(164.667px, 230.074px) scale(2.202) translate(0, 0px) scaleY(0.625) rotate(-38.333deg) translate(-205.074px, -87.333px); }
  96% { transform: translate(162.79px, 234.244px) scale(2.408) translate(0, 0px) scaleY(0.579) rotate(-43.025deg) translate(-212.059px, -86.395px); }
  98% { transform: translate(162.099px, 235.781px) scale(2.488) translate(0, 0px) scaleY(0.562) rotate(-44.753deg) translate(-214.632px, -86.049px); }
  100% { transform: translate(162px, 236px) scale(2.5) translate(0, 0px) scaleY(0.56) rotate(-45deg) translate(-215px, -86px); }
}
@keyframes pcard {
  0% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-215px, -86px); }
  2% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-215.401px, -86px); }
  4% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-216.543px, -86px); }
  6% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-218.333px, -86px); }
  8% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-220.679px, -86px); }
  10% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-223.488px, -86px); }
  12% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-226.667px, -86px); }
  14% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-230.123px, -86px); }
  16% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-233.765px, -86px); }
  18% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-237.5px, -86px); }
  20% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-241.235px, -86px); }
  22% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-244.877px, -86px); }
  24% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-248.333px, -86px); }
  26% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-251.512px, -86px); }
  28% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-254.321px, -86px); }
  30% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-256.667px, -86px); }
  32% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-258.457px, -86px); }
  34% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-259.599px, -86px); }
  36% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-260px, -86px); }
  38% { transform: translate(162.042px, 235.907px) scale(2.495) translate(0, 8.991px) scaleY(0.561) rotate(-44.896deg) translate(-259.741px, -86.021px); }
  40% { transform: translate(162.333px, 235.259px) scale(2.461) translate(0, 8.926px) scaleY(0.568) rotate(-44.167deg) translate(-257.926px, -86.167px); }
  42% { transform: translate(163.125px, 233.5px) scale(2.369) translate(0, 8.75px) scaleY(0.588) rotate(-42.188deg) translate(-253px, -86.562px); }
  44% { transform: translate(164.667px, 230.074px) scale(2.202) translate(0, 8.407px) scaleY(0.625) rotate(-38.333deg) translate(-243.407px, -87.333px); }
  46% { transform: translate(167.208px, 224.426px) scale(1.95) translate(0, 7.843px) scaleY(0.687) rotate(-31.979deg) translate(-227.593px, -88.604px); }
  48% { transform: translate(171px, 216px) scale(1.628) translate(0, 7px) scaleY(0.78) rotate(-22.5deg) translate(-204px, -90.5px); }
  50% { transform: translate(174.792px, 207.574px) scale(1.359) translate(0, 6.157px) scaleY(0.873) rotate(-13.021deg) translate(-180.407px, -92.396px); }
  52% { transform: translate(177.333px, 201.926px) scale(1.204) translate(0, 5.593px) scaleY(0.935) rotate(-6.667deg) translate(-164.593px, -93.667px); }
  54% { transform: translate(178.875px, 198.5px) scale(1.118) translate(0, 5.25px) scaleY(0.973) rotate(-2.812deg) translate(-155px, -94.438px); }
  56% { transform: translate(179.667px, 196.741px) scale(1.077) translate(0, 5.074px) scaleY(0.992) rotate(-0.833deg) translate(-150.074px, -94.833px); }
  58% { transform: translate(179.958px, 196.093px) scale(1.062) translate(0, 5.009px) scaleY(0.999) rotate(-0.104deg) translate(-148.259px, -94.979px); }
  60% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  62% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  64% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  66% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  68% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  70% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  72% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  74% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  76% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  78% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  80% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  82% { transform: translate(180px, 196px) scale(1.06) translate(0, 5px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  84% { transform: translate(179.901px, 196.219px) scale(1.065) translate(0, 5.022px) scaleY(0.998) rotate(-0.247deg) translate(-148.368px, -94.951px); }
  86% { transform: translate(179.21px, 197.756px) scale(1.101) translate(0, 5.176px) scaleY(0.981) rotate(-1.975deg) translate(-150.941px, -94.605px); }
  88% { transform: translate(177.333px, 201.926px) scale(1.204) translate(0, 5.593px) scaleY(0.935) rotate(-6.667deg) translate(-157.926px, -93.667px); }
  90% { transform: translate(173.679px, 210.047px) scale(1.433) translate(0, 6.405px) scaleY(0.845) rotate(-15.802deg) translate(-171.528px, -91.84px); }
  92% { transform: translate(168.321px, 221.953px) scale(1.85) translate(0, 7.595px) scaleY(0.715) rotate(-29.198deg) translate(-191.472px, -89.16px); }
  94% { transform: translate(164.667px, 230.074px) scale(2.202) translate(0, 8.407px) scaleY(0.625) rotate(-38.333deg) translate(-205.074px, -87.333px); }
  96% { transform: translate(162.79px, 234.244px) scale(2.408) translate(0, 8.824px) scaleY(0.579) rotate(-43.025deg) translate(-212.059px, -86.395px); }
  98% { transform: translate(162.099px, 235.781px) scale(2.488) translate(0, 8.978px) scaleY(0.562) rotate(-44.753deg) translate(-214.632px, -86.049px); }
  100% { transform: translate(162px, 236px) scale(2.5) translate(0, 9px) scaleY(0.56) rotate(-45deg) translate(-215px, -86px); }
}
@keyframes ptile {
  0% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-215px, -86px); }
  2% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-215.401px, -86px); }
  4% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-216.543px, -86px); }
  6% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-218.333px, -86px); }
  8% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-220.679px, -86px); }
  10% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-223.488px, -86px); }
  12% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-226.667px, -86px); }
  14% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-230.123px, -86px); }
  16% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-233.765px, -86px); }
  18% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-237.5px, -86px); }
  20% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-241.235px, -86px); }
  22% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-244.877px, -86px); }
  24% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-248.333px, -86px); }
  26% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-251.512px, -86px); }
  28% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-254.321px, -86px); }
  30% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-256.667px, -86px); }
  32% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-258.457px, -86px); }
  34% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-259.599px, -86px); }
  36% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-260px, -86px); }
  38% { transform: translate(162.042px, 235.907px) scale(2.495) translate(0, 3.492px) scaleY(0.561) rotate(-44.896deg) translate(-259.741px, -86.021px); }
  40% { transform: translate(162.333px, 235.259px) scale(2.461) translate(0, 3.435px) scaleY(0.568) rotate(-44.167deg) translate(-257.926px, -86.167px); }
  42% { transform: translate(163.125px, 233.5px) scale(2.369) translate(0, 3.281px) scaleY(0.588) rotate(-42.188deg) translate(-253px, -86.562px); }
  44% { transform: translate(164.667px, 230.074px) scale(2.202) translate(0, 2.981px) scaleY(0.625) rotate(-38.333deg) translate(-243.407px, -87.333px); }
  46% { transform: translate(167.208px, 224.426px) scale(1.95) translate(0, 2.487px) scaleY(0.687) rotate(-31.979deg) translate(-227.593px, -88.604px); }
  48% { transform: translate(171px, 216px) scale(1.628) translate(0, 1.75px) scaleY(0.78) rotate(-22.5deg) translate(-204px, -90.5px); }
  50% { transform: translate(174.792px, 207.574px) scale(1.359) translate(0, 1.013px) scaleY(0.873) rotate(-13.021deg) translate(-180.407px, -92.396px); }
  52% { transform: translate(177.333px, 201.926px) scale(1.204) translate(0, 0.519px) scaleY(0.935) rotate(-6.667deg) translate(-164.593px, -93.667px); }
  54% { transform: translate(178.875px, 198.5px) scale(1.118) translate(0, 0.219px) scaleY(0.973) rotate(-2.812deg) translate(-155px, -94.438px); }
  56% { transform: translate(179.667px, 196.741px) scale(1.077) translate(0, 0.065px) scaleY(0.992) rotate(-0.833deg) translate(-150.074px, -94.833px); }
  58% { transform: translate(179.958px, 196.093px) scale(1.062) translate(0, 0.008px) scaleY(0.999) rotate(-0.104deg) translate(-148.259px, -94.979px); }
  60% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  62% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  64% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  66% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  68% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  70% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  72% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  74% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  76% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  78% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  80% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  82% { transform: translate(180px, 196px) scale(1.06) translate(0, 0px) scaleY(1) rotate(0deg) translate(-148px, -95px); }
  84% { transform: translate(179.901px, 196.219px) scale(1.065) translate(0, 0.019px) scaleY(0.998) rotate(-0.247deg) translate(-148.368px, -94.951px); }
  86% { transform: translate(179.21px, 197.756px) scale(1.101) translate(0, 0.154px) scaleY(0.981) rotate(-1.975deg) translate(-150.941px, -94.605px); }
  88% { transform: translate(177.333px, 201.926px) scale(1.204) translate(0, 0.519px) scaleY(0.935) rotate(-6.667deg) translate(-157.926px, -93.667px); }
  90% { transform: translate(173.679px, 210.047px) scale(1.433) translate(0, 1.229px) scaleY(0.845) rotate(-15.802deg) translate(-171.528px, -91.84px); }
  92% { transform: translate(168.321px, 221.953px) scale(1.85) translate(0, 2.271px) scaleY(0.715) rotate(-29.198deg) translate(-191.472px, -89.16px); }
  94% { transform: translate(164.667px, 230.074px) scale(2.202) translate(0, 2.981px) scaleY(0.625) rotate(-38.333deg) translate(-205.074px, -87.333px); }
  96% { transform: translate(162.79px, 234.244px) scale(2.408) translate(0, 3.346px) scaleY(0.579) rotate(-43.025deg) translate(-212.059px, -86.395px); }
  98% { transform: translate(162.099px, 235.781px) scale(2.488) translate(0, 3.481px) scaleY(0.562) rotate(-44.753deg) translate(-214.632px, -86.049px); }
  100% { transform: translate(162px, 236px) scale(2.5) translate(0, 3.5px) scaleY(0.56) rotate(-45deg) translate(-215px, -86px); }
}
@keyframes unplane {
  0% { transform: rotate(45deg) scaleY(1.786); }
  2% { transform: rotate(45deg) scaleY(1.786); }
  4% { transform: rotate(45deg) scaleY(1.786); }
  6% { transform: rotate(45deg) scaleY(1.786); }
  8% { transform: rotate(45deg) scaleY(1.786); }
  10% { transform: rotate(45deg) scaleY(1.786); }
  12% { transform: rotate(45deg) scaleY(1.786); }
  14% { transform: rotate(45deg) scaleY(1.786); }
  16% { transform: rotate(45deg) scaleY(1.786); }
  18% { transform: rotate(45deg) scaleY(1.786); }
  20% { transform: rotate(45deg) scaleY(1.786); }
  22% { transform: rotate(45deg) scaleY(1.786); }
  24% { transform: rotate(45deg) scaleY(1.786); }
  26% { transform: rotate(45deg) scaleY(1.786); }
  28% { transform: rotate(45deg) scaleY(1.786); }
  30% { transform: rotate(45deg) scaleY(1.786); }
  32% { transform: rotate(45deg) scaleY(1.786); }
  34% { transform: rotate(45deg) scaleY(1.786); }
  36% { transform: rotate(45deg) scaleY(1.786); }
  38% { transform: rotate(44.896deg) scaleY(1.782); }
  40% { transform: rotate(44.167deg) scaleY(1.76); }
  42% { transform: rotate(42.188deg) scaleY(1.702); }
  44% { transform: rotate(38.333deg) scaleY(1.6); }
  46% { transform: rotate(31.979deg) scaleY(1.455); }
  48% { transform: rotate(22.5deg) scaleY(1.282); }
  50% { transform: rotate(13.021deg) scaleY(1.146); }
  52% { transform: rotate(6.667deg) scaleY(1.07); }
  54% { transform: rotate(2.812deg) scaleY(1.028); }
  56% { transform: rotate(0.833deg) scaleY(1.008); }
  58% { transform: rotate(0.104deg) scaleY(1.001); }
  60% { transform: rotate(-0deg) scaleY(1); }
  62% { transform: rotate(0deg) scaleY(1); }
  64% { transform: rotate(0deg) scaleY(1); }
  66% { transform: rotate(0deg) scaleY(1); }
  68% { transform: rotate(0deg) scaleY(1); }
  70% { transform: rotate(0deg) scaleY(1); }
  72% { transform: rotate(0deg) scaleY(1); }
  74% { transform: rotate(0deg) scaleY(1); }
  76% { transform: rotate(0deg) scaleY(1); }
  78% { transform: rotate(0deg) scaleY(1); }
  80% { transform: rotate(0deg) scaleY(1); }
  82% { transform: rotate(0deg) scaleY(1); }
  84% { transform: rotate(0.247deg) scaleY(1.002); }
  86% { transform: rotate(1.975deg) scaleY(1.02); }
  88% { transform: rotate(6.667deg) scaleY(1.07); }
  90% { transform: rotate(15.802deg) scaleY(1.183); }
  92% { transform: rotate(29.198deg) scaleY(1.4); }
  94% { transform: rotate(38.333deg) scaleY(1.6); }
  96% { transform: rotate(43.025deg) scaleY(1.726); }
  98% { transform: rotate(44.753deg) scaleY(1.778); }
  100% { transform: rotate(45deg) scaleY(1.786); }
}
@keyframes whopx {
  0%, 6% { transform: none; } 12%, 17% { transform: translateX(15px); } 23%, 28% { transform: translateX(30px); }
  34%, 84% { transform: translateX(45px); } 92%, 100% { transform: none; }
}
@keyframes wjump {
  0%, 6% { transform: none; animation-timing-function: cubic-bezier(.25, .7, .5, 1); } 9% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .75, .3); } 12%, 17% { transform: none; animation-timing-function: cubic-bezier(.25, .7, .5, 1); }
  20% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .75, .3); } 23%, 28% { transform: none; animation-timing-function: cubic-bezier(.25, .7, .5, 1); } 31% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  34%, 84% { transform: none; animation-timing-function: cubic-bezier(.25, .7, .5, 1); } 88% { transform: translateY(-34px); animation-timing-function: cubic-bezier(.5, 0, .75, .3); } 92%, 100% { transform: none; }
}
@keyframes wsq {
  0%, 3%, 10%, 14%, 21%, 25%, 32%, 37%, 81%, 89%, 95%, 100% { transform: none; }
  5%, 16%, 27%, 83% { transform: scale(1.14, .84); }
  7%, 18%, 29%, 86% { transform: scale(.9, 1.12); }
  12%, 23%, 34%, 92% { transform: scale(1.16, .82); }
}
@keyframes lite0 { 0%, 11.7% { transform: scale(0); } 14% { transform: scale(1.35); } 16.5%, 89% { transform: none; } 91%, 100% { transform: scale(0); } }
@keyframes land0 { 0%, 11.7% { transform: scale(.3); opacity: 0; } 13% { opacity: 1; } 21%, 100% { transform: translateY(-8px) scale(1.25); opacity: 0; } }
@keyframes lite1 { 0%, 22.7% { transform: scale(0); } 25% { transform: scale(1.35); } 27.5%, 87% { transform: none; } 89%, 100% { transform: scale(0); } }
@keyframes land1 { 0%, 22.7% { transform: scale(.3); opacity: 0; } 24% { opacity: 1; } 32%, 100% { transform: translateY(-8px) scale(1.25); opacity: 0; } }
@keyframes lite2 { 0%, 33.7% { transform: scale(0); } 36% { transform: scale(1.35); } 38.5%, 85% { transform: none; } 87%, 100% { transform: scale(0); } }
@keyframes land2 { 0%, 33.7% { transform: scale(.3); opacity: 0; } 35% { opacity: 1; } 43%, 100% { transform: translateY(-8px) scale(1.25); opacity: 0; } }
@keyframes best { 0%, 57% { transform: translateY(10px) scale(.6); opacity: 0; } 62% { transform: none; opacity: 1; } 80% { transform: none; opacity: 1; } 85%, 100% { transform: translateY(-8px) scale(.9); opacity: 0; } }

/* Incognito: a noir office at night. Wick pulls his fedora down and flips Hide channel, the card's channel is
   blacked out, a snooping lens finds nothing, and the revenue still shows. */
.noir { --bg: #17151F; --c1: #211E2C; --c2: #1D1A27; --base: #0C0B12; --spk: #8E86A8;
  --coat: #3B3548; --coat2: #2C2738; --coat3: #4B4459; --hat: #2E2A38; --hat2: #3A3446; --hat3: #17141F; color: #F4F1FA; }
@keyframes blinds { 50% { transform: translateX(14px); } }
@keyframes peek { 0%, 38%, 100% { transform: none; } 46%, 60% { transform: translateX(-2px); } 68%, 84% { transform: translateX(2px); } }
@keyframes tug { 0%, 8% { transform: none; } 12% { transform: translateY(-6px) rotate(4deg); } 17% { transform: translateY(5px) rotate(-2deg); } 21%, 84% { transform: translateY(3px); } 92%, 100% { transform: none; } }
@keyframes collar { 0%, 12% { transform: none; } 17% { transform: translateY(-4px); } 21%, 84% { transform: translateY(-2px); } 92%, 100% { transform: none; } }
@keyframes hsw { 0%, 9% { transform: none; } 13%, 86% { transform: translateX(11px); } 92%, 100% { transform: none; } }
@keyframes hon { 0%, 9% { opacity: 0; } 12%, 86% { opacity: 1; } 91%, 100% { opacity: 0; } }
.noir .red { transform-origin: 0 50%; }
@keyframes red { 0%, 14% { transform: scaleX(0); } 20%, 86% { transform: scaleX(1); } 93%, 100% { transform: scaleX(0); } }
@keyframes ava { 0%, 14% { transform: scale(0); } 19% { transform: scale(1.15); } 22%, 86% { transform: none; } 92%, 100% { transform: scale(0); } }
@keyframes mag {
  0%, 26% { transform: translate(200px, -30px) rotate(20deg); opacity: 0; }
  27% { opacity: 1; }
  36% { transform: translate(-6px, 2px); }
  44% { transform: translate(-38px, 20px) rotate(-6deg); }
  53%, 60% { transform: translate(4px, -4px); opacity: 1; }
  60% { animation-timing-function: var(--in); }
  68%, 100% { transform: translate(200px, -30px) rotate(20deg); opacity: 0; }
}
@keyframes qm { 0%, 44% { transform: scale(0); } 48% { transform: scale(1.2) rotate(-8deg); } 51%, 58% { transform: rotate(6deg); } 63%, 100% { transform: scale(0); } }

/* Claim your @: pink. Wick watches "@wick" type in, it comes back Yours, three share cards fan out signed @wick,
   and it's saved with Google. Letters are tspans fading in place, so the font sets their spacing. */
.pink { --bg: #F8CFDA; --c1: #FBE0E7; --c2: #F2BBCB; --base: #E3A2B5; --blob: #FFE89A; --spk: #FFFDF8; }
.pink .lt { animation: var(--n) 5.2s linear infinite both; }
.tiles:not(.live) .pink .lt { animation-play-state: paused; }
@keyframes t0 { 0%, 5.8% { fill-opacity: 0; } 6%, 91.0% { fill-opacity: 1; } 91.2%, 100% { fill-opacity: 0; } }
@keyframes t1 { 0%, 10.8% { fill-opacity: 0; } 11%, 90.1% { fill-opacity: 1; } 90.3%, 100% { fill-opacity: 0; } }
@keyframes t2 { 0%, 15.8% { fill-opacity: 0; } 16%, 89.2% { fill-opacity: 1; } 89.4%, 100% { fill-opacity: 0; } }
@keyframes t3 { 0%, 20.8% { fill-opacity: 0; } 21%, 88.3% { fill-opacity: 1; } 88.5%, 100% { fill-opacity: 0; } }
@keyframes caret { 0% { transform: translateX(0px); } 6% { transform: translateX(22.6px); } 11% { transform: translateX(28.1px); } 16% { transform: translateX(42.2px); } 21% { transform: translateX(55.7px); } 88.3% { transform: translateX(42.2px); } 89.2% { transform: translateX(28.1px); } 90.1% { transform: translateX(22.6px); } 91%, 100% { transform: none; } }
@keyframes cblink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes field { 0%, 24% { transform: none; } 27% { transform: scale(1.04); } 31%, 100% { transform: none; } }
@keyframes avail { 0%, 25% { transform: scale(0); } 29% { transform: scale(1.15); } 32%, 86% { transform: none; } 90%, 100% { transform: scale(0); } }
@keyframes fan {
  0%, 35% { transform: translate(var(--fx), var(--fy)) scale(.15); opacity: 0; }
  37% { opacity: 1; }
  45% { transform: translate(0, -4px) scale(1.05); }
  50%, 84% { transform: none; opacity: 1; }
  90%, 100% { transform: translateY(20px) scale(.6); opacity: 0; }
}
@keyframes saved { 0%, 55% { transform: translateY(10px) scale(.6); opacity: 0; } 61% { transform: none; opacity: 1; } 84% { transform: none; opacity: 1; } 89%, 100% { transform: translateY(-6px) scale(.9); opacity: 0; } }
@keyframes cheer { 0%, 25%, 40%, 100% { transform: none; } 28% { transform: translateY(4px) scale(1.08, .9); } 32% { transform: translateY(-16px) scale(.94, 1.08); } 36% { transform: translateY(0) scale(1.06, .94); } }
@keyframes look { 0%, 3% { transform: translate(0, 0); } 8%, 24% { transform: translate(2.5px, -3px); } 30%, 50% { transform: none; } 56%, 82% { transform: translate(3px, -2px); } 90%, 100% { transform: none; } }

/* Every number, one snapshot: stack. Four stat cards fly in and pile up, Wick's camera clicks (a sparkle pops off it), and the pile
   becomes one card with all of them on it. */
.stack { --bg: #CFE0FB; --c1: #DEEAFD; --c2: #BCD2F6; --base: #9FB9E6; --blob: #FFD9A0; --spk: #FFFDF8; }
@keyframes c0 { 0%, 9% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } 15% { transform: translate(0, -8px) scale(1.05); } 16% { transform: scale(1.06, .9); } 19%, 41% { transform: none; opacity: 1; } 44% { transform: scale(.85); opacity: 0; } 91% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0); opacity: 0; } 97%, 100% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } }
@keyframes c1 { 0%, 16% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } 22% { transform: translate(0, -8px) scale(1.05); } 23% { transform: scale(1.06, .9); } 26%, 41% { transform: none; opacity: 1; } 44% { transform: scale(.85); opacity: 0; } 91% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0); opacity: 0; } 97%, 100% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } }
@keyframes c2 { 0%, 23% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } 29% { transform: translate(0, -8px) scale(1.05); } 30% { transform: scale(1.06, .9); } 33%, 41% { transform: none; opacity: 1; } 44% { transform: scale(.85); opacity: 0; } 91% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0); opacity: 0; } 97%, 100% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } }
@keyframes c3 { 0%, 30% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } 36% { transform: translate(0, -8px) scale(1.05); } 37% { transform: scale(1.06, .9); } 40%, 41% { transform: none; opacity: 1; } 44% { transform: scale(.85); opacity: 0; } 91% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0); opacity: 0; } 97%, 100% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 1; } }
@keyframes snapbig { 0%, 42% { transform: scale(.5); opacity: 0; } 43% { opacity: 1; } 47% { transform: scale(1.06); } 51%, 86% { transform: none; opacity: 1; } 91%, 100% { transform: scale(.8); opacity: 0; } }
@keyframes pflash { 0%, 40% { transform: scale(0); opacity: 0; } 42% { transform: scale(1.4) rotate(30deg); opacity: 1; } 50%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
@keyframes shoot { 0%, 36%, 52%, 100% { transform: none; } 40% { transform: translate(4px, -10px) rotate(-8deg); } 42% { transform: translate(4px, -8px) rotate(-6deg) scale(1.08); } 46% { transform: translate(4px, -10px) rotate(-8deg); } }
@keyframes snapcheer { 0%, 52%, 66%, 100% { transform: none; } 55% { transform: translateY(4px) scale(1.08, .9); } 59% { transform: translateY(-16px) scale(.94, 1.08); } 63% { transform: translateY(0) scale(1.06, .94); } }
@keyframes snaplook { 0%, 4% { transform: none; } 10%, 20% { transform: translate(-1px, -3px); } 26%, 40% { transform: translate(3px, -2px); } 48%, 86% { transform: translate(3px, -1px); } 94%, 100% { transform: none; } }

/* Climb the leaderboard: trophy. @wick's row climbs from 5th to 1st, swapping past each creator as his count
   ticks up, then a crown drops on. The board isn't open yet, so it says Soon. */
.trophy { --bg: #FBE3A6; --c1: #FDEDC4; --c2: #F6D48A; --base: #E3B962; --blob: #FFB59C; --spk: #FFFDF8; }
.trophy .wn { animation: var(--n) 5.2s linear infinite both; }
.tiles:not(.live) .trophy .wn { animation-play-state: paused; }
@keyframes lbfade { 0%, 87% { opacity: 1; } 90%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes rw { 0%, 10% { transform: none; } 14%, 22% { transform: translateY(-40px); } 26%, 34% { transform: translateY(-80px); } 38%, 46% { transform: translateY(-120px); } 50%, 91.8% { transform: translateY(-160px); } 92%, 100% { transform: none; } }
@keyframes r0 { 0%, 46% { transform: none; } 50%, 91.8% { transform: translateY(40px); } 92%, 100% { transform: none; } }
@keyframes r1 { 0%, 34% { transform: none; } 38%, 91.8% { transform: translateY(40px); } 92%, 100% { transform: none; } }
@keyframes r2 { 0%, 22% { transform: none; } 26%, 91.8% { transform: translateY(40px); } 92%, 100% { transform: none; } }
@keyframes r3 { 0%, 10% { transform: none; } 14%, 91.8% { transform: translateY(40px); } 92%, 100% { transform: none; } }
@keyframes w0 { 0%, 12% { fill-opacity: 1; } 12.2%, 91.8% { fill-opacity: 0; } 92%, 100% { fill-opacity: 1; } }
@keyframes w1 { 0%, 12% { fill-opacity: 0; } 12.2%, 24% { fill-opacity: 1; } 24.2%, 100% { fill-opacity: 0; } }
@keyframes w2 { 0%, 24% { fill-opacity: 0; } 24.2%, 36% { fill-opacity: 1; } 36.2%, 100% { fill-opacity: 0; } }
@keyframes w3 { 0%, 36% { fill-opacity: 0; } 36.2%, 48% { fill-opacity: 1; } 48.2%, 100% { fill-opacity: 0; } }
@keyframes w4 { 0%, 48% { fill-opacity: 0; } 48.2%, 91.8% { fill-opacity: 1; } 92%, 100% { fill-opacity: 0; } }
@keyframes crown { 0%, 51% { transform: translateY(-34px) scale(.4); opacity: 0; } 52% { opacity: 1; } 56% { transform: translateY(3px) rotate(-12deg); } 60%, 86% { transform: rotate(-8deg); opacity: 1; } 89%, 100% { transform: translateY(-10px) rotate(-8deg); opacity: 0; } }
@keyframes lbcheer { 0%, 50%, 64%, 100% { transform: none; } 53% { transform: translateY(4px) scale(1.08, .9); } 57% { transform: translateY(-18px) scale(.94, 1.08); } 61% { transform: translateY(0) scale(1.06, .94); } }
@keyframes lblook { 0%, 6% { transform: none; } 12%, 86% { transform: translate(3px, -2.5px); } 94%, 100% { transform: none; } }

/* Under the row: Lightning fast across two columns, the streak tile in the third, lined up with the row's columns */
.duo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.duo .tile.wide { grid-column: span 2; }
.duo:not(.live) .a, .duo:not(.live) .amb { animation-play-state: paused; }
/* The wide tile: the title top left, the scene filling the whole card behind it, as tall as the streak tile */
.tile.wide { aspect-ratio: auto; height: auto; }
.tile.wide h3 { max-width: 13em; padding: 40px 40px 0; font-size: 30px; }
.tile.wide .art { top: 0; height: 100%; aspect-ratio: auto; }
/* two columns wide, the title sits like the other tiles' and the scene fills the card under it */
@media (min-width: 1001px) { .duo .tile.wide h3 { font-size: 26px; padding: 36px 34px 0; } .duo .tile.wide .art { top: auto; height: 72%; } }
/* narrower: the title on top and the scene below it, cropped to the page, with Wick running in front of its corner */
@media (max-width: 1000px) {
  .duo { grid-template-columns: 1fr 1fr; } .duo .tile.wide { grid-column: auto; }
  .tile.wide { height: auto; } .tile.wide .art { position: relative; display: block; top: auto; height: auto; aspect-ratio: 640 / 420; margin-top: 4px; }
  .fast .fwick { transform: translate(566px, 414px) scale(.8); }
}
@media (max-width: 620px) { .duo { grid-template-columns: 86%; gap: 14px; } .duo .tile.wide { grid-column: auto; } .tile.wide h3 { font-size: 26px; padding: 36px 34px 0; } }

/* Lightning fast: electric purple. One 5.2s loop: a new page slides in, its stats snap on, the clock reads 0.2s,
   then it all clears and the page slides away. Wick never stops running, so the loop has no seam. */
.fast { --bg: #7B5CFF; --c1: #8C72FF; --c2: #6A4BEF; color: #FFFDF8; }
@keyframes rush { 0% { transform: translateX(0) scaleX(.2); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(-380px) scaleX(1); opacity: 0; } }
@keyframes pfloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-.6deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes legs { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fpage {
  0% { transform: translateX(400px); animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
  9%, 84% { transform: none; animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  93% { transform: translateX(-400px); }
  93.01%, 100% { transform: translateX(400px); }
}
@keyframes flean {
  0% { transform: skewX(-15deg) scale(1.1, .93); }
  12% { transform: skewX(-7deg) scale(1.02, .99); animation-timing-function: var(--io); }
  50% { transform: skewX(-9deg) scale(1.03, .98); animation-timing-function: var(--io); }
  84% { transform: skewX(-7deg) scale(1.02, .99); }
  88% { transform: skewX(-2deg) scale(.96, 1.04); }
  93%, 100% { transform: skewX(-15deg) scale(1.1, .93); }
}
@keyframes fchip { 0%, 8% { transform: scale(0); } 12% { transform: scale(1.12); } 15%, 78% { transform: scale(1); } 83%, 100% { transform: scale(0); } }
@keyframes ftimer { 0%, 14% { transform: scale(0) rotate(-14deg); } 18% { transform: scale(1.12) rotate(3deg); } 22%, 78% { transform: rotate(-3deg); } 83%, 100% { transform: scale(0) rotate(-3deg); } }
@keyframes fspark { 0%, 16% { transform: scale(0) rotate(0); opacity: 0; } 21% { transform: scale(1) rotate(45deg); opacity: 1; } 34%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }