/* ===========================================================
   tap tap boom — landing
   Drenched golden-yellow brand, warm-black + hot pink, Anton
   poster type, cream arcade cards, cartoon-bomb mascot.
   =========================================================== */

:root {
  --acid:       #FBDE1A;                /* brand yellow (surface)   */
  --acid-deep:  #F4C915;               /* darker gold accent       */
  --ink:        oklch(0.18 0.018 90);  /* warm near-black          */
  --ink-soft:   oklch(0.32 0.02 90);
  --pink:       #F83E8E;               /* hot bubblegum pink       */
  --pink-deep:  #C7286B;
  --green:      #8FCB3E;
  --cream:      #F7F2E2;               /* warm paper (cards)       */

  --edge: 3px;                       /* comic ink outline weight */
  --shadow: 8px 8px 0 var(--ink);    /* hard offset, never soft  */

  --maxw: 1180px;
  --font-display: "Anton", system-ui, sans-serif;
  --font-poster: "Lilita One", "Anton", system-ui, sans-serif; /* heavy rounded brand type */
  --font: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--acid);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pink); color: var(--cream); }

/* printed paper grain over everything — gives the riso/poster texture */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: .05;   /* no mix-blend-mode: a fixed blend layer repaints every scroll frame */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .06; } }

a { color: inherit; text-decoration: none; }

/* ---------- custom brand cursors — PNG so Safari honours them too.
   ink arrow + pink spark everywhere; cartoon tap-hand on anything clickable ---------- */
html { cursor: url("assets/cursors/ttb-arrow.png") 4 3, auto; }
a, button, summary, label[for], [role="button"],
.play, .plat, .store, .help-btn, .brandmark {
  cursor: url("assets/cursors/ttb-hand.png") 12 2, pointer;
}
input, textarea, select { cursor: text; }

/* ---------- hero watermark — outlined game words tiled behind the poster,
   slightly visible and drifting on scroll (parallax via --py, like the band) ---------- */
.graffiti {
  position: absolute; inset: -40% -16%; z-index: -1;
  pointer-events: none; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: .15em 3vw;
  align-content: center; justify-content: center;
  transform: translateY(var(--py, 0px)) rotate(-10deg);
  will-change: transform;
}
.graffiti span {
  font-family: var(--font-poster);
  font-size: clamp(5rem, 15vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.8px color-mix(in oklch, var(--ink) 5%, transparent);
  text-stroke: 1.8px color-mix(in oklch, var(--ink) 5%, transparent);
  user-select: none;
}

/* ---------- shared bits ---------- */
.spark {
  --s: .42em;
  display: inline-block; width: var(--s); height: var(--s);
  margin-left: .12em;
  background: var(--ink);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.spark--ink  { background: var(--ink); }
.spark--pink { background: var(--pink); }
.spark--big  { --s: .5em; vertical-align: .12em; }

.eyebrow {
  font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  font-size: clamp(.7rem, 1.4vw, .85rem);
  color: var(--pink); margin: 0 0 .9rem;
}
.eyebrow--pink { color: var(--pink); }

/* =========================== TOPBAR =========================== */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(.9rem, 2vw, 1.4rem) clamp(1rem, 4vw, 2.4rem);
}
.chip {
  display: inline-grid; place-items: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .02em;
  padding-top: .12em;
  position: relative;
}
.chip .spark { position: absolute; top: 2px; right: 4px; margin: 0; --s: .7rem; }
/* badge logo (real brand mark) */
.brandlogo {
  display: block;
  width: clamp(3.5rem, 8vw, 4.5rem); height: auto;
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.brandmark:hover .brandlogo { transform: rotate(-6deg) scale(1.06); }
.help-btn {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: var(--edge) solid var(--ink); color: var(--ink);
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1; padding-top: .1em;
  transition: background .15s, color .15s;
}
.help-btn:hover { background: var(--ink); color: var(--acid); }

/* ============================ HERO ============================ */
.hero {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  min-height: 100svh;
  padding: clamp(5rem, 11vh, 7rem) clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 5vh, 4rem);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 3.5vh, 2.2rem);
  overflow: visible;
}

/* poster wrapper — wordmark + mascot share one positioning context.
   Constrained + centred so the desktop hero keeps the reference's
   vertical-poster composition instead of stretching edge to edge.
   It's a container, so the type scales to the poster (cqw), identically
   on phone and desktop. */
.hero__poster {
  position: relative;
  /* width also capped by viewport height so the whole hero (poster + tagline
     + CTA) always fits one screen on short/landscape desktops */
  width: min(92vw, 600px, 56svh);
  margin-inline: auto;
  z-index: 1;
  container-type: inline-size;
}

/* poster wordmark — 3 stacked lines */
.wordmark {
  font-family: var(--font-poster);
  font-size: 26cqw;
  line-height: 1.02;           /* room for the vertically-stretched letters */
  letter-spacing: -.03em;
  margin: 0;
  overflow: visible;
  position: relative; z-index: 2;
}
/* the letters are stretched tall + narrow (the bomb + mascot stay un-stretched) */
.wm-tap {
  display: block; color: var(--ink);
  transform: scaleY(1.55);
  transform-origin: left bottom;
}
.wm-tap:nth-of-type(2) { margin-top: 0; }

/* BOOM row: B · bomb (replaces OO) · M */
.wm-boom-row {
  display: flex;
  align-items: flex-end;      /* stretched letters + round bomb share the baseline */
  overflow: visible;
  margin-top: .5em;           /* extra space above BOOM so the finger meets the fuse */
  margin-bottom: .62em;       /* clearance for the bomb (scales with the type) */
  letter-spacing: -.02em;
}
.wm-letter {
  color: var(--pink);
  font-family: var(--font-poster);
  font-size: 1em;
  line-height: 1.02;
  display: inline-block;
  transform: scaleY(1.55);
  transform-origin: bottom;
}

/* cartoon mascot — leans in from the right, fist over the bomb's fuse */
/* mascot is anchored INSIDE the bomb's stage (same em coordinate system),
   so the pointing finger stays locked to the fuse at every screen size.
   It leans up-and-right out of the bomb, its arm tucking against TAP TAP. */
.hero__boy {
  position: absolute;
  z-index: 5;
  width: 1.4em;                 /* em → scales with the bomb + type */
  height: auto;
  left: .5em;                   /* index fingertip aligned over the fuse spark */
  bottom: 1.51em;               /* raise so the finger meets the fuse */
  pointer-events: none;
  filter: drop-shadow(5px 8px 0 rgba(20,16,8,.12));
  transform-origin: 22% 86%;    /* pivot near the pointing finger */
}

/* bomb-stage sits inline — em units scale with the wordmark.
   The bomb art carries ~14% side / ~22% top-bottom transparent padding,
   so the stage footprint is kept tight while the art box is oversized
   to make the round body read as a fat pink "O". */
.bomb-stage {
  width: 1.04em;                   /* O slot so B · O · bomb · M read clearly */
  height: 1em;
  align-self: flex-end;            /* stage bottom sits on the BOOM baseline */
  margin: 0 -.03em;
  flex: none;
  position: relative;
  display: grid; place-items: center;  /* detonation effects centre here */
  overflow: visible;
}
/* the bomb art is bottom-anchored so its round body sits ON the BOOM line
   like the missing "O"; the fuse overflows above. */
.bomb-wrap {
  position: absolute;
  width: 1.32em;                   /* body ≈ 1.4× the letters — a fat pink "O" */
  left: 50%;
  bottom: .04em;                   /* lifted so the bomb body centres on the "O" beside it */
  margin-left: -.66em;             /* centre horizontally (−width/2) */
  transform-origin: 50% 85%;
  opacity: 0;
}
.bomb {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(6px 10px 0 rgba(20,16,8,.18));
}

/* tagline */
.hero__tagline {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(.9rem, 2.5vw, 1.3rem);
  letter-spacing: .07em; line-height: 1.2;
  margin: 0; text-align: center;
}
.hero__tagline em { color: var(--pink); font-style: normal; }

/* CTA */
.hero__cta {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}

/* outlined PLAY pill */
.play {
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; color: var(--ink);
  font-family: var(--font); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.7vw, 1.7rem);
  letter-spacing: .06em; padding: .62em 1.5em;
  border-radius: 999px; border: var(--edge) solid var(--ink);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, color .18s;
  width: 100%; justify-content: center;
}
.play__tri { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.play:hover { background: var(--ink); color: var(--acid); transform: translateY(-2px); }
.play:hover .play__tri { transform: scale(1.15); }
.play:active { transform: translateY(1px); }
/* creator-tool bridge line — hints the play→clip→post loop up top */
.hero__kicker {
  width: 100%; text-align: center;
  margin: calc(-1 * clamp(.7rem, 2vh, 1.1rem)) 0 0;  /* hug the tagline, don't eat a full gap */
  font-family: var(--font); font-weight: 900; text-transform: uppercase;
  font-size: clamp(.72rem, 1.7vw, .9rem); letter-spacing: .2em;
  color: var(--pink);
}
.hero__kicker span { color: var(--ink-soft); margin: 0 .15em; }

/* lit-fuse glow that pulses, then flares at detonation */
.fuse-glow {
  position: absolute; top: 12%; left: 73%;
  width: 16%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--pink) 45%, transparent 70%);
  opacity: 0; transform: translate(-50%,-50%);
}

/* white flash at the moment of the pop */
.boom-flash {
  grid-area: 1 / 1; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff 35%, transparent 68%);
  opacity: 0; transform: scale(.2); z-index: 3; pointer-events: none;
}
/* spiky comic burst behind the bomb */
.boom-burst {
  grid-area: 1 / 1; width: 168%; height: 168%;
  fill: var(--pink); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round;
  opacity: 0; transform: scale(.2) rotate(-8deg); z-index: 0; pointer-events: none;
}
/* shrapnel sparks flung outward */
.boom-bit {
  grid-area: 1 / 1; width: 16px; height: 16px; z-index: 2;
  background: var(--ink);
  clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity: 0;
}
.boom-bit:nth-child(odd) { background: var(--pink); }

/* ====================================================================
   HERO LOAD CHOREOGRAPHY — reads out loud as  TAP · TAP · BOOM
   Two stamps land one after another, then the bomb drops into the
   word and detonates as the climax, before easing into the idle loop.
   All gated on .is-in so every beat starts from the same instant.
   ==================================================================== */

/* hidden until the sequence starts (avoids a flash of static text) */
.wm-tap, .wm-boom-row { opacity: 0; }

/* --- the two TAPs: each punches down and slams into place --- */
.is-in .wm-tap {
  animation: tapStamp .5s cubic-bezier(.18,.9,.28,1.35) both;
  animation-delay: calc(.15s + var(--i) * .36s);
}

/* --- BOOM letters (B · M) scale in around the bomb --- */
.is-in .wm-boom-row {
  animation: boomRowIn .42s cubic-bezier(.2,.85,.3,1.4) both;
  animation-delay: .95s;
}

/* --- mascot swoops in, then presses the fuse → triggers the BOOM --- */
.hero__boy { opacity: 0; }
.is-in .hero__boy {
  opacity: 1;
  animation: boyIn 1.25s cubic-bezier(.2,.8,.3,1.1) .85s both;
}
@keyframes boyIn {
  0%   { opacity: 0; transform: translate(30%, -16%) rotate(10deg) scale(.9); }
  38%  { opacity: 1; transform: translate(0,0)       rotate(0)     scale(1); }   /* lands ~1.3s */
  60%  { transform: translate(-1%, -3%) rotate(-1.5deg) scale(1.02); }           /* wind-up */
  70%  { transform: translate(0, 4%)    rotate(0)       scale(1.02); }           /* press the fuse ~1.7s → BOOM */
  82%  { transform: translate(0, -1%)   scale(1); }
  100% { transform: translate(0,0)      rotate(0)       scale(1); }
}

/* --- bomb: drop in with the row, tense up, then DETONATE → idle loop --- */
.is-in .bomb-wrap {
  /* underlying value is visible; the intro's backwards-fill keeps it hidden
     through the delay, so the idle loop (which never sets opacity) can't
     let it fall back to the hidden base after the hand-off. */
  opacity: 1;
  animation:
    bombIntro 1.6s cubic-bezier(.2,.8,.25,1) .95s both,
    bombLoop var(--boom-cycle, 4.2s) ease-in-out 2.55s infinite;
}
.is-in .bomb-stage {
  animation:
    stageShakeIntro .5s ease-in-out 1.7s both,
    stageShake var(--boom-cycle, 4.2s) ease-in-out 2.55s infinite;
}
.is-in .fuse-glow {
  animation:
    fuseIntro .8s ease-in 1.1s both,
    fuse var(--boom-cycle, 4.2s) ease-in-out 2.55s infinite;
}
.is-in .boom-flash {
  animation:
    flashIntro .5s ease-out 1.66s both,
    flash var(--boom-cycle, 4.2s) ease-out 2.55s infinite;
}
.is-in .boom-burst {
  animation:
    burstIntro .6s ease-out 1.66s both,
    burst var(--boom-cycle, 4.2s) ease-out 2.55s infinite;
}
.is-in .boom-bit {
  animation:
    flyIntro .7s cubic-bezier(.25,.6,.25,1) 1.68s both,
    fly var(--boom-cycle, 4.2s) cubic-bezier(.25,.6,.25,1) 2.55s infinite;
}

/* one-shot intro keyframes (the ambient loops are defined below) */
@keyframes tapStamp {
  0%   { opacity: 0; transform: translateY(-.28em) scale(1.32); }
  55%  { opacity: 1; transform: translateY(.03em)  scale(.95); }
  74%  { transform: translateY(0) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes boomRowIn {
  0%   { opacity: 0; transform: scale(.66); }
  60%  { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bombIntro {
  /* drop in (~0.95–1.4s) */
  0%   { opacity: 0; transform: translateY(-30px) scale(.55) rotate(-12deg); }
  28%  { opacity: 1; transform: translateY(0)     scale(1)   rotate(0); }
  /* fuse tension jitter */
  40%  { transform: rotate(-4deg) translate(-2px,0) scale(1.02); }
  48%  { transform: rotate(4deg)  translate(2px,0)  scale(1.03); }
  /* DETONATE: squash, overshoot up, settle (~1.7–2.2s) */
  55%  { transform: translateY(8px)   scale(1.22,.76) rotate(0); }
  66%  { transform: translateY(-20px) scale(.85,1.2)  rotate(2deg); }
  80%  { transform: translateY(0)     scale(1.06,.96) rotate(0); }
  100% { transform: translateY(0)     scale(1)        rotate(-2deg); }
}
@keyframes stageShakeIntro {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(7px, -4px); }
  60% { transform: translate(-6px, 3px); }
  80% { transform: translate(5px, -2px); }
}
@keyframes fuseIntro {
  0%   { opacity: .2; transform: translate(-50%,-50%) scale(.6); }
  60%  { opacity: .7; transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1;  transform: translate(-50%,-50%) scale(1.9); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(.4); }
}
@keyframes flashIntro {
  0%   { opacity: 0;   transform: scale(.2); }
  25%  { opacity: .95; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}
@keyframes burstIntro {
  0%   { opacity: 0; transform: scale(.2) rotate(-8deg); }
  35%  { opacity: 1; transform: scale(1.14) rotate(4deg); }
  60%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.05) rotate(0); }
}
@keyframes flyIntro {
  0%   { opacity: 0; transform: translate(0,0) scale(.4) rotate(0); }
  20%  { opacity: 1; transform: translate(calc(var(--tx)*.5), calc(var(--ty)*.5)) scale(1.15) rotate(90deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3) rotate(220deg); }
}

/* one continuous loop: idle drift -> fuse burns -> BOOM -> recover -> repeat */
@keyframes fuse {
  0%        { opacity: .3;  transform: translate(-50%,-50%) scale(.7); }
  40%       { opacity: .55; transform: translate(-50%,-50%) scale(.95); }
  52%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.8); }
  57%, 100% { opacity: 0;   transform: translate(-50%,-50%) scale(.4); }
}
@keyframes bombLoop {
  /* idle drift */
  0%   { transform: rotate(-2deg) translateY(0) scale(1); }
  20%  { transform: rotate(2deg)  translateY(-4px) scale(1); }
  40%  { transform: rotate(-2deg) translateY(0) scale(1); }
  /* tension jitter as the fuse burns down */
  48%  { transform: rotate(-3deg) translate(-3px,0) scale(1.02); }
  52%  { transform: rotate(3deg)  translate(3px,0)  scale(1.03); }
  55%  { transform: rotate(0)     translate(0,0)    scale(1.03); }
  /* the pop: squash, overshoot up, then settle */
  58%  { transform: translateY(8px)   scale(1.20, .78) rotate(0); }
  63%  { transform: translateY(-20px) scale(.86, 1.18) rotate(2deg); }
  70%  { transform: translateY(0)     scale(1.06, .96) rotate(0); }
  76%  { transform: translateY(-4px)  scale(.99, 1.01); }
  82%  { transform: rotate(-2deg) translateY(0) scale(1); }
  100% { transform: rotate(-2deg) translateY(0) scale(1); }
}
@keyframes stageShake {
  0%, 55%   { transform: translate(0,0); }
  58%       { transform: translate(-8px, 4px); }
  61%       { transform: translate(7px, -4px); }
  64%       { transform: translate(-6px, 3px); }
  67%       { transform: translate(5px, -2px); }
  70%, 100% { transform: translate(0,0); }
}
@keyframes flash {
  0%, 55%   { opacity: 0; transform: scale(.2); }
  58%       { opacity: .95; transform: scale(1); }
  67%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes burst {
  0%, 55%   { opacity: 0; transform: scale(.2) rotate(-8deg); }
  59%       { opacity: 1; transform: scale(1.14) rotate(4deg); }
  65%       { opacity: 1; transform: scale(1) rotate(0); }
  73%, 100% { opacity: 0; transform: scale(1.05) rotate(0); }
}
@keyframes fly {
  0%, 56%   { opacity: 0; transform: translate(0,0) scale(.4) rotate(0); }
  60%       { opacity: 1; transform: translate(calc(var(--tx)*.5), calc(var(--ty)*.5)) scale(1.15) rotate(90deg); }
  74%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3) rotate(220deg); }
}

/* ---- FAST FUN ADDICTIVE sticker ---- */
.sticker {
  background: var(--pink); color: var(--ink);
  border: var(--edge) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--font-display); line-height: 1;
}
.sticker--faf {
  position: absolute; left: 2%; bottom: 4%;
  padding: .7rem 1.05rem .55rem; border-radius: 14px;
  transform: rotate(-9deg); z-index: 4;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem); letter-spacing: .02em;
  animation: stamp .6s cubic-bezier(.34,1.4,.5,1) 1.75s both;
}
.sticker--faf span { display: block; }
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-9deg) scale(.4); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}

/* ===================== WHAT IT IS (dark band) ===================== */
.band {
  position: relative; z-index: 1;
  background: var(--ink); color: var(--cream);
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.2rem, 5vw, 3rem);
}
.band > * { max-width: var(--maxw); margin-inline: auto; }
.band { overflow: hidden; }

/* big, faint creator-themed watermark filling the whole dark band */
.band__wash {
  position: absolute; inset: -45% -22%; z-index: 0; max-width: none; margin: 0;
  display: flex; flex-wrap: wrap; gap: .15em 3vw;
  align-content: center; justify-content: center;
  transform: translateY(var(--py, 0px)) rotate(-10deg);
  will-change: transform;
  pointer-events: none; user-select: none;
}
.band__wash span {
  font-family: var(--font-poster);
  font-size: clamp(5rem, 15vw, 15rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px color-mix(in oklch, var(--cream) 6%, transparent);
  text-stroke: 1.6px color-mix(in oklch, var(--cream) 6%, transparent);
}
.howit .maker { position: relative; z-index: 1; }   /* content sits above the wash */
.band__head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  line-height: 1; letter-spacing: .005em; margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  max-width: 18ch; text-transform: uppercase;
}
.band__head .hl { color: var(--acid); }
.band .eyebrow { color: var(--pink); }

.what-grid {
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feat__no {
  font-family: var(--font-display); color: var(--pink);
  font-size: 1.7rem; display: block; margin-bottom: .5rem;
}
.feat h3 {
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: 0 0 .6rem;
}
.feat p {
  margin: 0; max-width: 34ch; line-height: 1.5;
  color: color-mix(in oklch, var(--cream) 82%, var(--ink));
  font-weight: 500;
}

/* ========================= THE ARCADE ========================= */
.arcade {
  position: relative; z-index: 1;
  background: var(--acid);
  padding: clamp(2.4rem, 6vh, 4rem) clamp(1.2rem, 5vw, 3rem);
  overflow: hidden;
}
.arcade > * { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.arcade__head { text-align: center; margin-bottom: clamp(1rem, 2.5vh, 1.8rem); }
.arcade__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 5rem); line-height: .9; margin: 0;
  letter-spacing: .01em;
}
.arcade__sub {
  margin: .5rem 0 0; font-weight: 700; font-size: clamp(.95rem, 2vw, 1.2rem);
  color: var(--ink-soft);
}

/* auto-scrolling wall of game cards — two rows drifting opposite ways */
.gamewall {
  display: flex; flex-direction: column; gap: clamp(.6rem, 1.4vh, 1rem);
  /* full-bleed: span the whole viewport regardless of the arcade's padding/max-width */
  width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.gamerow { overflow: hidden; padding-block: 2px 10px; }
.gamerow__track {
  display: flex; width: max-content; gap: clamp(.7rem, 1.4vw, 1.1rem);
  will-change: transform;
}
.gamerow--a .gamerow__track { animation: wallScroll 42s linear infinite; }
.gamerow--b .gamerow__track { animation: wallScroll 52s linear infinite reverse; }
.gamewall:hover .gamerow__track { animation-play-state: paused; }
@keyframes wallScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* static fallback (before JS builds the rows + for reduced motion) */
.gamerow-src {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}

.gcard {
  flex: 0 0 auto; width: clamp(150px, 17vw, 198px);
  position: relative;
  background: var(--cream); color: var(--ink);
  border: var(--edge) solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.gcard__art { display: block; aspect-ratio: 180 / 150; background: #fff; border-bottom: var(--edge) solid var(--ink); }
.gcard__art svg { display: block; width: 100%; height: 100%; }
.gcard__cap { padding: .55rem .75rem .7rem; }
.gcard__cap h3 {
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.25rem);
  margin: 0; line-height: 1; letter-spacing: .01em;
}
.gcard__cap p {
  color: var(--pink); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; font-size: .66rem; margin: .28rem 0 0;
}
.gcard__hot {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  background: var(--pink); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px;
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .04em;
  padding: .2rem .5rem .12rem; transform: rotate(-4deg);
}
@media (prefers-reduced-motion: reduce) {
  .gamerow__track { animation: none; }
}

/* ===================== NEXT TO DROP (roadmap) ===================== */
.soon-games {
  position: relative; z-index: 1;
  background: var(--ink); color: var(--cream);
  border-top: var(--edge) solid var(--ink);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.2rem, 5vw, 3rem);
}
.soon-games > * { max-width: var(--maxw); margin-inline: auto; }
.soon__head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.soon__head .eyebrow { color: var(--pink); }
.soon__head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.8rem); line-height: .95; margin: 0;
  text-transform: uppercase; letter-spacing: .01em;
}
.soon__lead {
  margin: .9rem 0 0; max-width: 42ch; font-weight: 600; line-height: 1.5;
  color: color-mix(in oklch, var(--cream) 80%, var(--ink));
}
.soon__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.8rem, 2vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stile {
  position: relative;
  border: var(--edge) dashed color-mix(in oklch, var(--cream) 55%, transparent);
  border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem;
  display: flex; flex-direction: column; gap: .3rem;
  background: color-mix(in oklch, var(--cream) 5%, transparent);
}
.stile::after {
  content: "soon"; position: absolute; top: .8rem; right: .9rem;
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  background: var(--acid); border: 2px solid var(--ink); border-radius: 999px;
  padding: .18rem .5rem .1rem;
}
.stile b {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); letter-spacing: .01em;
  padding-right: 3rem;
}
.stile--more b { padding-right: 0; }
.stile span {
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem; opacity: .65;
}
.stile--more {
  border-style: solid; border-color: var(--pink);
  background: color-mix(in oklch, var(--pink) 16%, transparent);
  justify-content: center;
}
.stile--more::after { content: none; }
.stile--more b { color: var(--pink); }

/* ========================= GET / CTA ========================= */
.get {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--pink); color: var(--ink);
  border-top: var(--edge) solid var(--ink);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.2rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);
}
/* faint outlined-word wash behind the closing screen (matches hero + band, parallax via --py) */
.get__wash {
  position: absolute; inset: -30% -16%; z-index: -1;
  pointer-events: none; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: .15em 3vw;
  align-content: center; justify-content: center;
  transform: translateY(var(--py, 0px)) rotate(-10deg);
  will-change: transform;
}
.get__wash span {
  font-family: var(--font-poster);
  font-size: clamp(5rem, 15vw, 15rem); line-height: 1;
  color: transparent; user-select: none;
  -webkit-text-stroke: 1.8px color-mix(in oklch, var(--ink) 9%, transparent);
  text-stroke: 1.8px color-mix(in oklch, var(--ink) 9%, transparent);
}
.get__word {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 19vw, 14rem); line-height: .82; margin: 0;
  color: var(--ink); letter-spacing: .01em;
}
.get__boom { position: relative; display: inline-block; }
.get__boom .spark { position: absolute; top: .05em; right: -.62em; margin: 0; }
/* centre the CTA block and let the footer fall to the bottom of the section */
.get__main { margin: auto 0; display: flex; flex-direction: column; align-items: center; }
.get__sub {
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1rem, 2.4vw, 1.4rem); margin: 1rem 0 2.4rem;
}

.stores {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  margin-bottom: 2.6rem;
}
.store {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  width: min(300px, 86vw);
  background: var(--ink); color: var(--acid);
  border: var(--edge) solid var(--ink); border-radius: 14px;
  padding: .7rem 1.2rem; box-shadow: 6px 6px 0 var(--ink);
  text-align: left;
}
.store span { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.store strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; }
/* clickable store buttons (app is live) */
.store { transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s; }
.store:hover  { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.store:active { transform: translate(1px,1px);   box-shadow: 3px 3px 0 var(--ink); }

/* ===== launch footer — lives inside the GET section, sits on pink ===== */
.get__foot {
  width: min(640px, 94%); margin: clamp(2.6rem, 6vh, 4rem) auto 0;
  padding-top: clamp(1.8rem, 4vh, 2.6rem);
  border-top: var(--edge) solid var(--ink);
  display: grid; gap: .7rem; justify-items: center;
  color: var(--ink);
}
.foot__logo { display: block; width: clamp(4.2rem, 9vw, 5.4rem); height: auto; }
.get__foot p {
  font-family: var(--font-display); font-weight: 400; margin: .15rem 0 0;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: .95; letter-spacing: .01em;
}
.get__foot .foot__by {
  font-size: clamp(.95rem, 2vw, 1.1rem); font-weight: 600;
  letter-spacing: .02em; margin-top: .15rem;
}
.get__foot .foot__by a {
  color: inherit;
  border-bottom: 2px solid transparent; transition: border-color .15s;
}
.get__foot .foot__by a:hover { border-bottom-color: var(--ink); }
.get__foot .foot__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem;
  margin-top: .35rem;
}
.get__foot .foot__legal small { font-size: .82rem; letter-spacing: .05em; opacity: .72; }
.get__foot .foot__site a {
  font-weight: 800; color: var(--ink);
  border-bottom: 2px solid var(--ink); padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.get__foot .foot__site a:hover { color: var(--cream); border-color: var(--cream); }

/* ============================ MOTION ============================ */
.reveal { opacity: 0; transform: translateY(26px); }
.is-in .reveal {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--i) * .09s),
              transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i) * .09s);
}
/* hero tagline → kicker → CTA land in order after the BOOM, as the dust settles */
.is-in .hero__tagline.reveal { transition-delay: 1.25s; }
.is-in .hero__kicker.reveal  { transition-delay: 1.4s; }
.is-in .hero__cta.reveal     { transition-delay: 1.55s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wm-tap, .wm-boom-row, .bomb-wrap, .hero__boy { opacity: 1 !important; }
  .wm-tap, .wm-boom-row, .bomb-stage, .bomb-wrap, .bomb, .hero__boy,
  .fuse-glow, .boom-flash, .boom-burst, .boom-bit {
    animation: none !important; transform: none !important;
  }
  .boom-flash, .boom-burst, .boom-bit, .fuse-glow { opacity: 0 !important; }
  /* feed: no auto-scroll — let the user swipe through it */
  .reelstrip { overflow-x: auto; scrollbar-width: none; }
  .reelstrip__track { animation: none !important; }
}

/* ========================= REEL SCROLL (mobile) ========================= */
@media (max-width: 880px) {
  /* proximity (not mandatory): gentle snap that never fights reload/restore or fling-scroll */
  html { scroll-snap-type: y proximity; }

  .hero,
  .band,
  .arcade,
  .get {
    scroll-snap-align: start;
    min-height: 100svh;
    /* center content vertically when section is taller than viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* hero is already flex-column — no override needed */
}

/* desktop — each section fills the viewport, snaps gently into view.
   proximity (not mandatory) so the tall arcade still scrolls freely. */
@media (min-width: 881px) {
  html { scroll-snap-type: y proximity; }
  .hero, .band, .arcade, .get {
    scroll-snap-align: start;
    min-height: 100svh;
  }
  .band, .arcade, .get {
    display: flex; flex-direction: column; justify-content: center;
  }
  /* compact, centred PLAY pill on desktop (full-width only on mobile) */
  .hero__cta { justify-content: center; }
  .play { width: auto; font-size: 1.4rem; padding: .44em 2.4em; }
}

/* howit section — stacked copy over a swipeable feed on mobile */
@media (max-width: 880px) {
  .band.howit { justify-content: flex-start; padding-block: clamp(2rem, 6vh, 3.2rem); }

  /* reorder on mobile: headline, then the videos, then the steps below */
  .howit .maker {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "art" "copy";
    column-gap: 0; row-gap: clamp(1rem, 3vh, 1.6rem);
    align-items: start;
  }

  .howit .eyebrow { font-size: .68rem; letter-spacing: .1em; margin-bottom: .7rem; }
  .howit .band__head { font-size: clamp(2rem, 9.5vw, 2.6rem); line-height: .98; }

  /* lead is dropped on mobile; the steps (with descriptions) carry the content */
  .howit .maker__lead { display: none; }
  .howit__feats div { font-size: .92rem; }
  .feat__no { font-size: 1.3rem; }

  /* feed: swipeable row of compact phones */
  .howit .maker__art { margin: 0; overflow: visible; }
  .howit .sticker--reel { display: none; }   /* sticker bleeds at small sizes */
  .howit .reelstrip { padding-bottom: 1rem; }
  .howit .reelphone { width: clamp(116px, 33vw, 150px); }

  /* platform chips: keep all three on one line */
  .howit__platforms { gap: .4rem; }
  .howit .plat { font-size: .72rem; padding: .34rem .58rem .3rem; gap: .34rem; }
  .howit .plat svg { width: 14px; height: 14px; }
}

/* users who prefer less motion get soft proximity instead of hard snap */
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: y proximity; }
}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 880px) {
  .hero {
    padding-top: clamp(4.5rem, 10vh, 6rem);
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
    gap: clamp(1rem, 2.5vh, 1.6rem);
  }
  /* wordmark scales down on mobile — cap by height so it fits the fold */
  .wordmark { font-size: clamp(3.2rem, min(23vw, 16vh), 8rem); }
  .hero__tagline { font-size: clamp(.85rem, 3.5vw, 1.1rem); }
  .hero__cta { flex-direction: column; gap: .5rem; }
  .play { font-size: clamp(1.4rem, 6.4vw, 1.85rem); padding: .38em .8em; }

  /* arcade wall: smaller game cards on phones */
  .gcard { width: clamp(132px, 42vw, 168px); }
}
/* ===================== FOR CREATORS ===================== */
.creator {
  position: relative; z-index: 1;
  background: var(--cream); color: var(--ink);
  border-top: var(--edge) solid var(--ink);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.2rem, 5vw, 3rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.1fr .9fr; align-items: center;
  max-width: calc(var(--maxw) + 4rem); margin-inline: auto;
}
.creator__copy { max-width: 38rem; }
.creator__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: .92; margin: .4rem 0 0;
}
.creator__lead { margin: 1.1rem 0 1.7rem; font-weight: 500; line-height: 1.55; max-width: 44ch; }
.creator__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.creator__list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.creator__no { font-family: var(--font-display); color: var(--pink); font-size: 1.25rem; line-height: 1.1; }
.creator__list b { font-weight: 900; }
.creator__list div { line-height: 1.5; font-weight: 500; max-width: 38ch; }

/* phone mockup (one-tap clip export) */
.creator__art { position: relative; justify-self: center; }
.phone {
  position: relative; width: clamp(200px, 24vw, 252px); aspect-ratio: 9 / 19;
  background: var(--ink); border-radius: 38px; padding: 9px;
  border: var(--edge) solid var(--ink); box-shadow: 14px 14px 0 var(--ink);
  transform: rotate(3deg);
}
.phone__notch {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 16px; background: var(--ink); border-radius: 0 0 11px 11px; z-index: 2;
}
.phone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 30px;
  background: var(--acid); overflow: hidden; display: grid; place-items: center;
}
.phone__rec {
  position: absolute; top: 13px; left: 14px; display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 900; font-size: .62rem; letter-spacing: .12em; color: var(--ink);
}
.phone__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
  animation: recBlink 1.4s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: .25; } }
.phone__timer { position: absolute; top: 10px; right: 14px; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.phone__mark { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: .8; text-align: center; color: var(--ink); text-transform: lowercase; }
.phone__mark b { display: block; color: var(--pink); }
.phone__save {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  background: var(--ink); color: var(--acid); border: none; border-radius: 999px;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .02em;
  padding: .5rem 1.05rem; cursor: default;
}
.sticker--reel {
  position: absolute; top: -1.15rem; left: -.3rem; z-index: 4;
  background: var(--pink); color: var(--ink); border: var(--edge) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); border-radius: 12px; padding: .42rem .7rem;
  font-family: var(--font-display); font-size: .82rem; transform: rotate(-3deg);
}
.sticker--noedit {
  position: absolute; bottom: -5%; left: -14%;
  background: var(--acid); color: var(--ink); border: var(--edge) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); border-radius: 12px; padding: .45rem .75rem;
  font-family: var(--font-display); font-size: .85rem; transform: rotate(-7deg);
}

/* ===================== FAQ ===================== */
.faq {
  position: relative; z-index: 1; background: var(--acid); color: var(--ink);
  border-top: var(--edge) solid var(--ink);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 5vw, 3rem);
}
.faq > * { max-width: 760px; margin-inline: auto; }
.faq__title { font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 1.6rem; }
.faq__list { display: grid; gap: .8rem; }
.qa {
  border: var(--edge) solid var(--ink); border-radius: 14px; background: var(--cream);
  box-shadow: var(--shadow); overflow: hidden;
}
.qa summary {
  cursor: pointer; list-style: none; padding: 1rem 1.2rem;
  font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.25rem);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--font-display); color: var(--pink); font-size: 1.5rem; line-height: 1; }
.qa[open] summary::after { content: "\2013"; }
.qa p { margin: 0; padding: 0 1.2rem 1.2rem; line-height: 1.55; font-weight: 500; max-width: 62ch; }

/* footer studio line */
.foot__by b { color: var(--ink); font-weight: 900; }

/* ---- creator responsive ---- */
@media (max-width: 820px) {
  .creator { grid-template-columns: 1fr; gap: clamp(2.4rem, 8vw, 3rem); }
  .creator__copy { max-width: 100%; }
  .creator__art { margin-top: .5rem; }
  .sticker--noedit { left: -6%; }
  .sticker--reel { right: -4%; }
}

/* ============ THE WHOLE IDEA — creators only ============ */
.maker {
  display: grid;
  /* minmax(0,…) stops the clip feed from blowing out its track */
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "head art" "copy art";
  column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0;
  align-items: center;
}
.maker__head { grid-area: head; }
.maker__copy { grid-area: copy; }
.maker__art  { grid-area: art; }
.maker__lead {
  margin: .6rem 0 1.6rem; line-height: 1.55; font-weight: 500; max-width: 44ch;
  color: color-mix(in oklch, var(--cream) 82%, var(--ink));
}
.howit .band__head { margin-bottom: clamp(.6rem, 1.5vh, 1rem); }

/* feat list inside the maker copy */
.howit__feats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
}
.howit__feats li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.howit__feats div { line-height: 1.5; font-weight: 500; max-width: 38ch;
  color: color-mix(in oklch, var(--cream) 82%, var(--ink)); }
.howit__feats b { color: var(--cream); font-weight: 900; }

/* platform chips under step 03 */
.howit__platforms { display: flex; flex-wrap: nowrap; gap: .55rem; margin-top: .8rem; }
.plat { flex: 0 0 auto; }
.plat {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .01em; color: var(--cream);
  background: color-mix(in oklch, var(--cream) 14%, transparent);
  border: 1.5px solid color-mix(in oklch, var(--cream) 30%, transparent);
  border-radius: 999px; padding: .42rem .85rem .38rem;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s, border-color .16s;
}
.plat:hover {
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--cream) 20%, transparent);
  border-color: color-mix(in oklch, var(--cream) 50%, transparent);
}
.plat svg { flex: none; }

/* soft section CTA */
.howit__cta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: clamp(1.4rem, 3vh, 2rem);
  font-family: var(--font); font-weight: 900; text-transform: uppercase;
  letter-spacing: .05em; font-size: .9rem; color: var(--acid);
  transition: gap .16s cubic-bezier(.2,.8,.2,1), color .16s;
}
.howit__cta:hover { gap: .75rem; color: var(--cream); }

/* the exported "clip" card (reads on the dark band) */
.maker__art { position: relative; }

/* ---- infinite auto-scrolling feed of real clips (built by app.js) ---- */
.reelstrip {
  overflow: hidden;
  padding: 1rem 0 1.4rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reelstrip__track {
  display: flex; width: max-content;
  animation: reelMarquee 11s linear infinite;
}
.reelstrip:hover .reelstrip__track { animation-play-state: paused; }
/* two identical sets in the track → translate one set width for a seamless loop */
@keyframes reelMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.reelphone {
  flex: 0 0 auto; margin-right: 1rem;
  width: clamp(168px, 16.5vw, 210px); aspect-ratio: 9 / 16;
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--ink); border: var(--edge) solid var(--cream);
  box-shadow: 6px 7px 0 var(--pink-deep);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.reelphone:hover { transform: scale(1.06) translateY(-6px); box-shadow: 10px 14px 0 var(--pink-deep); z-index: 2; }
.reelphone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reelphone::after {                       /* subtle top scrim for the REC chip */
  content: ""; position: absolute; inset: 0 0 auto; height: 28%; pointer-events: none;
  background: linear-gradient(rgba(20,16,8,.36), transparent);
}
.reelphone__rec {
  position: absolute; top: 11px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: .32rem;
  font-weight: 900; font-size: .56rem; letter-spacing: .12em; color: var(--cream);
}
.reelphone__rec i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
  animation: recBlink 1.4s steps(1) infinite;
}

@media (max-width: 820px) {
  .howit__duo { grid-template-columns: 1fr; }
  .maker { grid-template-columns: 1fr; gap: clamp(2.2rem, 8vw, 2.8rem); }
  .maker__art { margin-top: .4rem; }
  .sticker--noedit { left: -4%; }
  .sticker--reel { right: -2%; }
}