/* =========================================================
   WHY ARE SO MANY ICONIC CHARACTERS GREEN? — 60s motion piece
   Stage is authored at 1920×1080 and scaled to fit (vector text
   stays razor sharp at 4K; stickers are ~1400px sources).
   ========================================================= */
:root {
  --cream: #F5F0DF;
  --cream-2: #EDE6CF;
  --forest: #183D25;
  --green: #6F9F3D;
  --lime: #B7E34B;
  --soft: #DBE7BD;
  --char: #171917;
  --white: #FFFFFF;
  --gray: #8E918C;

  --f-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --f-serif: "Instrument Serif", "Georgia", serif;
  --f-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --f-marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --f-ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-snap: cubic-bezier(.7, 0, .2, 1);
  --shadow: drop-shadow(0 14px 14px rgba(23, 25, 23, .26)) drop-shadow(0 2px 2px rgba(23, 25, 23, .22));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0f120f; }
body { font-family: var(--f-ui); color: var(--char); -webkit-font-smoothing: antialiased; }

/* ---------- Stage ---------- */
#viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, .5));
  transform-origin: 50% 50%;
  background: var(--cream);
  overflow: hidden;
  contain: layout paint;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

/* paper texture + vignette */
.paper {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 62%, rgba(80,70,30,.13) 100%),
    var(--cream);
}
.grain {
  position: absolute; inset: -40px; pointer-events: none; z-index: 60;
  opacity: .10; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.5s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-14px, 9px); }
  50% { transform: translate(8px, -12px); } 75% { transform: translate(-6px, -5px); } 100% { transform: translate(0, 0); }
}

/* halftone patches */
.ht { position: absolute; pointer-events: none;
  background-image: radial-gradient(circle, var(--green) 30%, transparent 32%);
  background-size: 18px 18px; opacity: .55; }
.ht-tl { left: -60px; top: -60px; width: 620px; height: 480px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 70%); }
.ht-br { right: -60px; bottom: -60px; width: 700px; height: 520px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 100%, #000 0%, transparent 70%); }
.ht-soft { left: 0; top: 0; width: 100%; height: 100%; opacity: .35;
  background-image: radial-gradient(circle, var(--green) 26%, transparent 28%); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%); mask-image: linear-gradient(160deg, #000 0%, transparent 55%); }
.ht-center { left: 0; top: 0; width: 100%; height: 100%; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 65%); }

/* ---------- HUD ---------- */
.hud { position: absolute; top: 34px; z-index: 50; font: 700 20px/1 var(--f-ui); letter-spacing: .22em;
  color: var(--forest); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.hud em { font-style: normal; opacity: .5; }
.hud-l { left: 44px; }
.hud-r { right: 44px; }
.hud-r b { font-weight: 800; }
.hud-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--forest);
  animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.stage-dark .hud { color: var(--soft); }

/* ---------- Scenes ---------- */
.scene { position: absolute; inset: 0; visibility: hidden; }
.scene.active { visibility: visible; z-index: 2; }
/* nothing animates until its scene is active (lets JS restart/seek cleanly) */
.scene:not(.active), .scene:not(.active) * { animation: none !important; }
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; }
.active .cam-push { animation: camPush 6s linear both; }
.active .cam-push-slow { animation: camPushSlow 9s linear both; }
.active .cam-drift { animation: camDrift 8s ease-in-out both; }
@keyframes camPush { from { transform: scale(1.0); } to { transform: scale(1.07); } }
@keyframes camPushSlow { from { transform: scale(1.04); } to { transform: scale(1.0); } }
@keyframes camDrift { from { transform: translateX(18px) scale(1.02); } to { transform: translateX(-18px) scale(1.0); } }

/* ---------- Stickers ---------- */
.stk { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 300px);
  transform: rotate(var(--r, 0deg)); display: block; font-style: normal; z-index: 3; }
.stk .in, .stk .lp { width: 100%; }
.stk img { display: block; width: 100%; height: auto; filter: var(--shadow); user-select: none; -webkit-user-drag: none; }
.stk .ph-name { display: none; }
/* fallback placeholder if an image is missing */
.stk.ph .lp { aspect-ratio: 3 / 4; background: var(--lime); border: 14px solid var(--white); border-radius: 28px;
  filter: var(--shadow); display: grid; place-items: center; }
.stk.ph img { display: none; }
.stk.ph .ph-name { display: block; font: 400 clamp(20px, calc(var(--w) * .13), 72px)/.95 var(--f-display);
  color: var(--forest); text-align: center; padding: 10px; text-transform: uppercase; }

/* ---------- Type ---------- */
.line { overflow: hidden; display: block; padding: 0 .04em; }
.line > span { display: inline-block; }
.note { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r, 0deg)); z-index: 20;
  font: 700 46px/1 var(--f-hand); color: var(--char); white-space: nowrap; }
.note.lime { color: var(--lime); }
.doodle { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; aspect-ratio: 220 / 120;
  transform: rotate(var(--r, 0deg)); z-index: 21; overflow: visible; }
.doodle.spk { aspect-ratio: 1; }
.doodle.circ { aspect-ratio: 2 / 1; }
.doodle.flipx { transform: scaleX(-1); }
.doodle svg, .doodle use { overflow: visible; }

.swash { position: absolute; fill: var(--lime); overflow: visible; }

/* ---------- Scene 1: HOOK ---------- */
.sw-hook { left: 520px; top: 590px; width: 980px; height: 250px; transform: rotate(-3deg); }
.hook-title { position: absolute; left: 0; right: 0; top: 230px; text-align: center; z-index: 10; }
.t-why { font: 400 92px/1.05 var(--f-display); letter-spacing: .02em; color: var(--char); }
.t-iconic { font: 400 150px/1 var(--f-display); letter-spacing: .005em; color: var(--forest); }
.t-green { display: inline-block; margin-top: 6px; font: 400 330px/.9 var(--f-display); color: var(--lime);
  -webkit-text-stroke: 10px var(--forest); paint-order: stroke fill; text-shadow: 14px 14px 0 var(--forest); letter-spacing: .01em; }
.t-green .boil { display: inline-block; }

/* ---------- Scene 2: MEANING ---------- */
.half { position: absolute; top: 0; bottom: 0; width: 960px; overflow: hidden; }
.half-l { left: 0; background: var(--soft); }
.half-r { right: 0; background: var(--forest); }
.tear { position: absolute; left: 948px; top: 0; bottom: 0; width: 26px; z-index: 5;
  background: var(--cream);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='60' preserveAspectRatio='none'><path d='M8,0 L20,10 L6,22 L18,34 L4,46 L16,60 L26,60 L26,0 Z' fill='black'/></svg>") 0 0 / 26px 60px repeat-y;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='60' preserveAspectRatio='none'><path d='M8,0 L20,10 L6,22 L18,34 L4,46 L16,60 L26,60 L26,0 Z' fill='black'/></svg>") 0 0 / 26px 60px repeat-y;
  filter: drop-shadow(-3px 0 3px rgba(0,0,0,.25)); }
.eyebrow { position: absolute; left: 110px; top: 280px; font: 800 26px/1 var(--f-ui); letter-spacing: .3em; color: var(--forest); }
.eyebrow.lime { color: var(--lime); }
.bigwords { position: absolute; left: 100px; top: 330px; }
.bw-nature { font: 400 150px/.98 var(--f-display); color: var(--forest); }
.bw-strange { font: 400 118px/.98 var(--f-display); color: var(--lime); }
.half-r .eyebrow { left: 90px; }
.half-r .bigwords { left: 80px; }
.drips { position: absolute; left: 0; top: 0; width: 960px; height: 170px; overflow: visible; opacity: .9; }
.label-strip { position: absolute; left: 50%; top: 110px; z-index: 30; white-space: nowrap;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--white); padding: 18px 46px 12px; border-radius: 6px;
  font: 400 104px/1 var(--f-display); color: var(--char); letter-spacing: .01em;
  box-shadow: 0 16px 30px rgba(23,25,23,.28), 0 2px 0 rgba(0,0,0,.08); }
.label-strip em { font: italic 400 118px/.8 var(--f-serif); color: var(--green); letter-spacing: -.01em; text-transform: none; }
.tape-note { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%) rotate(var(--r)); z-index: 30;
  background: rgba(245, 240, 223, .92); padding: 10px 30px 12px; font: 700 44px/1 var(--f-hand); color: var(--forest);
  box-shadow: 0 8px 18px rgba(0,0,0,.2); white-space: nowrap; }
.tape-note::before, .tape-note::after { content: ""; position: absolute; top: -14px; width: 90px; height: 32px;
  background: rgba(183, 227, 75, .8); transform: rotate(-8deg); }
.tape-note::before { left: -30px; } .tape-note::after { right: -30px; transform: rotate(8deg); }
#s2 .tape-note { left: 960px; top: 950px; }

/* ---------- Scene 3: ENTERTAINMENT ---------- */
.tape-head { position: absolute; left: 50%; top: 92px; z-index: 30; display: flex; gap: 26px; white-space: nowrap;
  transform: translateX(-50%) rotate(-1.5deg); padding: 16px 44px 10px; background: var(--lime);
  font: 400 88px/1 var(--f-display); color: var(--forest); box-shadow: 0 14px 26px rgba(23,25,23,.25); }
.tape-head span { display: inline-block; }
.tape-head .hl { color: var(--white); -webkit-text-stroke: 3px var(--forest); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--forest); }
.zones { position: absolute; left: 60px; right: 60px; top: 250px; height: 690px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 26px; }
.zone { position: relative; border-radius: 26px; overflow: visible; box-shadow: 0 18px 40px rgba(23,25,23,.18); }
.z1 { background: var(--forest); color: var(--lime); }
.z2 { background: var(--lime); color: var(--forest); }
.z3 { background: var(--soft); color: var(--forest); }
.z4 { background: var(--char); color: var(--lime); }
.z4::before { content: ""; position: absolute; inset: 0; border-radius: 26px; opacity: .25;
  background-image: radial-gradient(circle, var(--lime) 28%, transparent 30%); background-size: 16px 16px; }
.z2::before { content: ""; position: absolute; inset: 0; border-radius: 26px; opacity: .25;
  background-image: radial-gradient(circle, var(--green) 28%, transparent 30%); background-size: 16px 16px; }
.ztab { position: absolute; left: 22px; top: -26px; z-index: 6; padding: 12px 22px 8px; border-radius: 12px;
  background: var(--white); color: var(--char); font: 400 44px/1 var(--f-display); letter-spacing: .03em;
  box-shadow: 0 8px 16px rgba(0,0,0,.2); transform: rotate(-2deg); }
.zicon { position: absolute; right: 24px; top: 26px; width: 74px; height: 46px; }
.zfoot { position: absolute; left: 26px; bottom: 20px; z-index: 6; font: 700 38px/1 var(--f-hand); opacity: .95; }
.zone .stk { z-index: 4; }
.stk.mini { z-index: 3; }
#s3 .note { color: var(--forest); }

/* ---------- Scene 4: EIGHT ICONS ---------- */
.pair { position: absolute; inset: 0; }
.pair-bg { position: absolute; inset: 0; }
.p1 .pair-bg { background: var(--forest); }
.p2 .pair-bg { background: var(--lime); }
.p3 .pair-bg { background: var(--soft); }
.p4 .pair-bg { background: var(--char); }
.pair-bg::after { content: ""; position: absolute; inset: 0; opacity: .18;
  background-image: radial-gradient(circle, currentColor 28%, transparent 30%); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 70%); }
.p1 .pair-bg { color: var(--lime); } .p2 .pair-bg { color: var(--forest); }
.p3 .pair-bg { color: var(--green); } .p4 .pair-bg { color: var(--lime); }
.pair-idx { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); font: 800 24px/1 var(--f-ui);
  letter-spacing: .3em; white-space: nowrap; z-index: 5; }
.p1 .pair-idx, .p4 .pair-idx { color: var(--soft); } .p2 .pair-idx, .p3 .pair-idx { color: var(--forest); }
.pair-kicker { position: absolute; left: 0; right: 0; top: 380px; text-align: center; z-index: 6;
  font: 400 64px/1 var(--f-display); letter-spacing: .03em; }
.pair-kicker b { font-weight: 400; color: var(--lime); padding: 0 .2em; }
.p1 .pair-kicker, .p4 .pair-kicker { color: var(--white); }
.p2 .pair-kicker, .p3 .pair-kicker { color: var(--forest); }
.p2 .pair-kicker b, .p3 .pair-kicker b { color: var(--white); -webkit-text-stroke: 2px var(--forest); }
.pair-word { position: absolute; left: 0; right: 0; top: 610px; text-align: center; z-index: 7; white-space: nowrap;
  font: 400 230px/1 var(--f-display); letter-spacing: -.005em; }
.pair-word small { font-size: .5em; vertical-align: .45em; margin-right: .15em; opacity: .9; }
.p1 .pair-word { color: var(--lime); text-shadow: 10px 10px 0 rgba(0,0,0,.35); font-size: 210px; }
.p2 .pair-word { color: var(--forest); text-shadow: 10px 10px 0 var(--white); }
.p3 .pair-word { color: var(--forest); text-shadow: 10px 10px 0 var(--lime); font-size: 200px; }
.p4 .pair-word { color: var(--lime); text-shadow: 10px 10px 0 var(--green); }
.pair .stk { z-index: 4; }
#s4 .p3 .note { color: var(--forest); font-size: 48px; left: 960px; transform: translateX(-50%) rotate(-3deg); top: 290px; }
.lineup { position: absolute; inset: 0; background: var(--cream); }
.row8 { position: absolute; left: 60px; right: 60px; top: 230px; height: 420px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.row8 .stk { position: relative; left: auto; top: auto; flex: 0 0 auto; }
.count-banner { position: absolute; left: 0; right: 0; top: 720px; text-align: center; white-space: nowrap;
  font: 400 128px/1 var(--f-display); color: var(--forest); display: flex; justify-content: center; align-items: baseline; gap: 26px; }
.count-banner span { display: inline-block; }
.count-banner b { font-weight: 400; color: var(--green); }
.count-banner .lime { background: var(--forest); color: var(--lime); padding: 6px 26px 0; border-radius: 12px; transform: rotate(-2deg); }
.count-banner .lime b { color: var(--white); }
.count-banner i { font-style: normal; color: var(--green); display: inline-block; }

/* ---------- Scene 5: FUN FACTS ---------- */
.fact { position: absolute; inset: 0; }
.fact-bg { position: absolute; inset: 0; background: var(--forest); }
.fact-bg::after { content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: radial-gradient(circle, var(--green) 28%, transparent 30%); background-size: 20px 20px; }
.fact-chip { position: absolute; left: 44px; top: 90px; z-index: 30; padding: 12px 22px 10px; border-radius: 999px;
  background: var(--char); color: var(--lime); font: 800 26px/1 var(--f-ui); letter-spacing: .25em; }
.fact-chip b { color: var(--white); }
.f3 .fact-chip { background: var(--lime); color: var(--forest); } .f3 .fact-chip b { color: var(--forest); }
.fact-head { position: absolute; left: 0; right: 0; bottom: 150px; text-align: center; z-index: 25; white-space: nowrap; overflow: hidden;
  font: 400 128px/1.05 var(--f-display); color: var(--char); }
.fact-head span { display: inline-block; }
.fact-head em { font-style: normal; color: var(--green); }
.fact-head em.gray { color: var(--gray); -webkit-text-stroke: 0; text-decoration: line-through; text-decoration-color: var(--lime); text-decoration-thickness: 16px; }
.fact-head.light { color: var(--white); }
.fact-head.light em { color: var(--lime); }
.gray2green { position: absolute; left: 1100px; top: 60px; width: 560px; height: 760px; }
.burst-bg { position: absolute; left: -60px; top: 40px; width: 680px; height: 680px; z-index: 0; }
.active .burst-bg use { transform-origin: 100px 100px; }
.hulk-g2g img { animation: none; }
.active .hulk-g2g img { animation: grayToGreen 1.1s var(--ease-snap) 1.25s both; }
@keyframes grayToGreen {
  0% { filter: grayscale(1) brightness(1.15) contrast(.9) var(--shadow); }
  45% { filter: grayscale(1) brightness(1.3) var(--shadow); }
  55% { filter: grayscale(0) brightness(1.6) saturate(2) var(--shadow); }
  100% { filter: grayscale(0) brightness(1) var(--shadow); }
}
.year { position: absolute; top: 650px; z-index: 20; font: 400 110px/1 var(--f-display); color: var(--lime);
  -webkit-text-stroke: 5px var(--forest); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--forest); }
.y94 { left: 260px; } .y00 { left: 1500px; }
.carrey { position: absolute; left: 700px; top: 380px; width: 520px; height: 160px; z-index: 22; }
.carrey .doodle { aspect-ratio: 260 / 80; }
.nameplate { position: absolute; left: 0; right: 0; top: 0; text-align: center; background: var(--char); color: var(--lime);
  font: 400 104px/1 var(--f-display); padding: 22px 0 16px; border-radius: 20px; transform: rotate(-2deg);
  box-shadow: 0 16px 30px rgba(0,0,0,.3); letter-spacing: .03em; }
.np-sub { position: absolute; left: 0; right: 0; top: 160px; text-align: center; font: 700 52px/1 var(--f-hand); color: var(--forest); }

/* ---------- Scene 6: MARKETING + DESIGN ---------- */
#s6 { background: var(--cream); }
.speak { position: absolute; left: 0; right: 0; top: 90px; text-align: center; z-index: 10; transform-origin: 50% 0; }
.speak .line:first-child span { font: 400 150px/1 var(--f-display); color: var(--forest); }
.speak .serif { font: italic 400 128px/1 var(--f-serif); color: var(--green); }
.sw-speak { left: 560px; top: 118px; width: 800px; height: 150px; z-index: -1; opacity: .9; }
.active .to-top { animation: toTop .8s var(--ease-snap) var(--d) both; }
@keyframes toTop { from { transform: translateY(260px) scale(1.35); } to { transform: translateY(0) scale(.62); } }
.col { position: absolute; top: 330px; height: 560px; width: 840px; border-radius: 30px; padding: 30px 40px; }
.col-mkt { left: 80px; background: var(--white); box-shadow: 0 20px 40px rgba(23,25,23,.12); }
.col-des { right: 80px; background: var(--forest); box-shadow: 0 20px 40px rgba(23,25,23,.2); }
.col-title { font: 800 30px/1 var(--f-ui); letter-spacing: .3em; color: var(--green); }
.col-des .col-title { color: var(--lime); }
.badges { position: relative; height: 330px; margin-top: 20px; }
.badge { position: absolute; display: grid; place-items: center; text-align: center; font: 400 44px/1 var(--f-display);
  box-shadow: 0 10px 20px rgba(23,25,23,.2); }
.b-natural { left: 10px; top: 10px; width: 220px; height: 220px; border-radius: 50%; background: var(--green); color: var(--white);
  border: 8px dashed var(--soft); font-size: 40px; }
.b-natural svg { position: absolute; top: -34px; right: -10px; width: 90px; height: 90px; color: var(--lime); }
.b-fresh { left: 270px; top: 30px; padding: 16px 40px 10px 60px; background: var(--lime); color: var(--forest);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); transform: rotate(-6deg); font-size: 64px; }
.b-eco { left: 560px; top: 0; width: 180px; height: 180px; border-radius: 50%; background: var(--forest); color: var(--lime); font-size: 62px;
  border: 6px solid var(--lime); grid-template-rows: auto auto; align-content: center; }
.b-eco small { font: 700 32px/1 var(--f-hand); color: var(--soft); }
.b-organic { left: 250px; top: 160px; padding: 14px 26px 8px; border: 6px solid var(--forest); color: var(--forest); background: var(--soft);
  transform: rotate(4deg); font-size: 50px; border-radius: 10px; }
.b-health { left: 560px; top: 210px; padding: 14px 26px 8px; background: var(--char); color: var(--lime); border-radius: 999px; transform: rotate(-4deg); }
.b-grow { left: 40px; top: 250px; padding: 12px 22px 6px; background: var(--white); color: var(--green); border: 5px solid var(--green);
  border-radius: 8px; transform: rotate(-3deg); }
.outcome { position: absolute; left: 40px; bottom: 26px; display: flex; align-items: center; gap: 20px; }
.doodle-inline { width: 150px; height: 50px; color: var(--char); overflow: visible; }
.col-des .doodle-inline { color: var(--lime); }
.outcome span { display: inline-block; font: 400 104px/1 var(--f-display); color: var(--forest); }
.col-des .outcome span { color: var(--lime); }
.lime-hl { background: var(--lime); color: var(--forest) !important; padding: 8px 20px 0; border-radius: 10px; transform: rotate(-2deg); }
.swatches { position: relative; height: 330px; margin-top: 30px; display: flex; gap: 26px; }
.swatch { position: relative; width: 236px; height: 310px; background: var(--white); border-radius: 12px; padding: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.3); }
.swatch .chip { height: 196px; border-radius: 6px; }
.sw1 .chip { background: #9CB33A; } .sw2 .chip { background: #8FC33F; } .sw3 .chip { background: #5E8C33; }
.swatch b { display: block; margin-top: 12px; font: 800 26px/1 var(--f-ui); letter-spacing: .12em; color: var(--char); }
.swatch small { display: block; margin-top: 6px; font: 700 30px/1 var(--f-hand); color: var(--green); }
.swatch .stk { z-index: 5; }
.sw1 { transform: rotate(-3deg); } .sw2 { transform: rotate(2deg); } .sw3 { transform: rotate(-1deg); }
#s6 .note { left: 960px; top: 925px; transform: translateX(-50%) rotate(-2deg); color: var(--forest); }

/* ---------- Scene 7: FINALE ---------- */
#s7 { background: var(--cream); }
.sw-final { left: 470px; top: 330px; width: 1000px; height: 300px; transform: rotate(-3deg); }
.final-title { position: absolute; left: 0; right: 0; top: 150px; text-align: center; z-index: 10; }
.ft1 { font: 400 190px/1 var(--f-display); color: var(--forest); letter-spacing: .01em; }
.ft2 { display: inline-block; font: 400 250px/.95 var(--f-display); color: var(--lime);
  -webkit-text-stroke: 9px var(--forest); paint-order: stroke fill; text-shadow: 13px 13px 0 var(--forest); }
.ft2 .boil { display: inline-block; }
.chips { position: absolute; left: 0; right: 0; top: 650px; display: flex; justify-content: center; gap: 14px; z-index: 12; }
.chips span { display: inline-block; padding: 12px 22px 6px; border-radius: 999px; background: var(--forest); color: var(--lime);
  font: 400 46px/1 var(--f-display); letter-spacing: .04em; box-shadow: 0 8px 16px rgba(0,0,0,.2); }
.chips span:nth-child(even) { background: var(--lime); color: var(--forest); }
.story { position: absolute; left: 50%; top: 760px; z-index: 14; white-space: nowrap; transform: translateX(-50%) rotate(-1.5deg);
  background: var(--char); color: var(--white); padding: 16px 40px 10px; font: 400 80px/1 var(--f-display); letter-spacing: .03em;
  box-shadow: 0 14px 28px rgba(0,0,0,.3); }
.thesis { position: absolute; left: 0; right: 0; top: 880px; text-align: center; z-index: 14;
  font: italic 400 50px/1 var(--f-serif); color: var(--forest); }
.thesis em { color: var(--green); }
.credit { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; z-index: 14;
  font: 700 18px/1 var(--f-ui); letter-spacing: .25em; text-transform: uppercase; color: var(--forest); opacity: .7; }

/* ---------- Captions ---------- */
.caption { position: absolute; left: 50%; bottom: 36px; z-index: 55; transform: translateX(-50%);
  max-width: 1500px; display: flex; align-items: center; gap: 16px;
  padding: 14px 26px 14px 16px; border-radius: 16px; background: rgba(23, 25, 23, .82);
  color: var(--white); font: 500 30px/1.25 var(--f-ui); transition: opacity .25s; }
.caption .vo { flex: 0 0 auto; background: var(--lime); color: var(--forest); font: 800 18px/1 var(--f-ui); letter-spacing: .15em;
  padding: 8px 10px; border-radius: 8px; }
.caption.off, .caption.empty { opacity: 0; }
.caption.bump #captionText { animation: capIn .35s var(--ease-out) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* while captions are on, lift bottom-anchored text so nothing collides */
.cc-on .fact-head { bottom: 170px; }
.cc-on #s7 .credit { opacity: 0; }

/* ---------- Paint wipe ---------- */
.wipe { position: absolute; inset: 0; z-index: 58; pointer-events: none; visibility: hidden; }
.wipe svg { position: absolute; left: -10%; width: 120%; height: 520px; overflow: visible; }
.wipe .w1 { top: -80px; fill: var(--lime); }
.wipe .w2 { top: 300px; fill: var(--forest); }
.wipe .w3 { top: 640px; fill: var(--green); }
.wipe.go { visibility: visible; }
.wipe.go svg { animation: wipeX .7s var(--ease-snap) both; }
.wipe.go .w2 { animation-delay: .04s; } .wipe.go .w3 { animation-delay: .08s; }
@keyframes wipeX { 0% { transform: translateX(-125%) rotate(-4deg); } 100% { transform: translateX(125%) rotate(-4deg); } }

/* ---------- Loader / endcard ---------- */
.loader { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--cream);
  font: 400 60px/1 var(--f-display); color: var(--forest); letter-spacing: .05em; transition: opacity .4s; }
.loader.done { opacity: 0; pointer-events: none; }
.endcard { position: absolute; right: 44px; bottom: 40px; z-index: 70; padding: 12px 20px; border-radius: 12px; background: var(--forest);
  color: var(--lime); font: 700 24px/1 var(--f-ui); letter-spacing: .08em; opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .4s; pointer-events: none; }
.ended .endcard { opacity: 1; transform: none; }

/* =========================================================
   Motion vocabulary. Every entrance uses --d (delay from
   scene start). fill-mode:both = hidden before, held after.
   ========================================================= */
.active .pop { animation: pop .75s var(--ease-back) var(--d, 0s) both; }
.active .slam { animation: slam .5s var(--ease-out) var(--d, 0s) both; }
.active .rise { animation: rise .7s var(--ease-out) var(--d, 0s) both; }
.active .rise-fade { animation: riseFade .8s var(--ease-out) var(--d, 0s) both; }
.active .drop { animation: drop .8s var(--ease-back) var(--d, 0s) both; }
.active .appear { animation: appear .01s linear var(--d, 0s) both; }
.active .wipe-in { animation: wipeIn .7s var(--ease-snap) var(--d, 0s) both; }
.active .slide-inL { animation: slideInL .6s var(--ease-snap) var(--d, 0s) both; }
.active .slide-inR { animation: slideInR .6s var(--ease-snap) var(--d, 0s) both; }
.active .draw use, .active .draw path { stroke-dasharray: 1000; animation: draw .8s var(--ease-out) var(--d, 0s) both; }
.active .draw { animation: appear .01s linear var(--d, 0s) both; }
/* sticker entrance variants live on .in (inner wrapper) */
.active .stk .in { animation: stkPop .8s var(--ease-back) var(--d, 0s) both; }
.active .stk[data-in="slide-l"] .in { animation: stkSlideL .65s var(--ease-out) var(--d, 0s) both; }
.active .stk[data-in="slide-r"] .in { animation: stkSlideR .65s var(--ease-out) var(--d, 0s) both; }
.active .stk[data-in="drop"] .in { animation: stkDrop .85s var(--ease-back) var(--d, 0s) both; }
.active .stk[data-in^="fly"] .in { animation: stkFly .9s var(--ease-out) var(--d, 0s) both; }
.stk[data-in="fly-tl"] { --fx: -700px; --fy: -500px; } .stk[data-in="fly-t"] { --fx: 0px; --fy: -700px; }
.stk[data-in="fly-tr"] { --fx: 700px; --fy: -500px; } .stk[data-in="fly-l"] { --fx: -900px; --fy: 0px; }
.stk[data-in="fly-r"] { --fx: 900px; --fy: 0px; } .stk[data-in="fly-bl"] { --fx: -700px; --fy: 600px; }
.stk[data-in="fly-b"] { --fx: 0px; --fy: 700px; } .stk[data-in="fly-br"] { --fx: 700px; --fy: 600px; }
/* beats: visible only inside [--d, --d + --len] */
.active .beat { animation: beat var(--len, 1.6s) linear var(--d, 0s) both; }
.active .beat-hold { animation: appear .01s linear var(--d, 0s) both; }

/* idle loops (GIF-like) live on .lp */
.active .stk[data-loop="float"] .lp { animation: float 3.2s ease-in-out infinite alternate; }
.active .stk[data-loop="float2"] .lp { animation: float2 2.7s ease-in-out infinite alternate; }
.active .stk[data-loop="wiggle"] .lp { animation: wiggle .9s steps(2, jump-none) infinite; }
.active .boil { animation: boil .36s steps(3, jump-none) infinite; }
.active .doodle.spk use { animation: twinkle 1.1s steps(3, jump-none) infinite; transform-origin: 50px 50px; }
.active .burst-bg use { animation: spin 14s linear infinite; }

@keyframes pop { 0% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.2); } 60% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1.12); } 100% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); } }
.tape-head .pop, .chips .pop, .count-banner .pop, .badge.pop, .fact-chip.pop, .year.pop, .np-sub.pop { --r: 0deg; }
.badge.pop { animation-name: popBadge !important; }
@keyframes popBadge { 0% { opacity: 0; scale: .2; } 60% { opacity: 1; scale: 1.15; } 100% { opacity: 1; scale: 1; } }
.note.pop, .tape-note.pop, #s6 .note.pop { animation-name: popNote !important; }
@keyframes popNote { 0% { opacity: 0; scale: .3; } 65% { opacity: 1; scale: 1.1; } 100% { opacity: 1; scale: 1; } }
.doodle.pop { animation-name: popNote !important; }
@keyframes slam { 0% { opacity: 0; scale: 2.2; filter: blur(6px); } 70% { opacity: 1; scale: .96; filter: blur(0); } 100% { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes rise { from { transform: translateY(110%); opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes riseFade { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drop { 0% { opacity: 0; translate: 0 -140px; rotate: -4deg; } 65% { opacity: 1; translate: 0 12px; rotate: 1deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slideInL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slideInR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes stkPop { 0% { opacity: 0; transform: scale(.15) rotate(-14deg); } 55% { opacity: 1; transform: scale(1.12) rotate(3deg); } 78% { transform: scale(.96) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes stkSlideL { 0% { opacity: 0; transform: translateX(-900px) rotate(-20deg); } 80% { opacity: 1; transform: translateX(18px) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes stkSlideR { 0% { opacity: 0; transform: translateX(900px) rotate(20deg); } 80% { opacity: 1; transform: translateX(-18px) rotate(-2deg); } 100% { opacity: 1; transform: none; } }
@keyframes stkDrop { 0% { opacity: 0; transform: translateY(-260px) rotate(-10deg) scale(1.1); } 60% { opacity: 1; transform: translateY(14px) rotate(2deg) scale(1); } 100% { opacity: 1; transform: none; } }
@keyframes stkFly { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(25deg) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes beat { 0% { opacity: 0; } 0.5% { opacity: 1; } 99.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes float { from { transform: translateY(-8px) rotate(-1.2deg); } to { transform: translateY(8px) rotate(1.2deg); } }
@keyframes float2 { from { transform: translateY(6px) rotate(1deg) scale(1); } to { transform: translateY(-9px) rotate(-1.5deg) scale(1.015); } }
@keyframes wiggle { 0% { transform: rotate(-2.2deg); } 100% { transform: rotate(2.2deg); } }
@keyframes boil { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1.5px, -1px) rotate(-.4deg); } 100% { transform: translate(-1px, 1.5px) rotate(.3deg); } }
@keyframes twinkle { 0% { transform: scale(.8) rotate(0); } 50% { transform: scale(1.15) rotate(20deg); } 100% { transform: scale(.9) rotate(45deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Reduced motion: keep the timeline & reveals, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .active .cam, .grain, .active .boil, .active .stk .lp, .active .doodle.spk use, .active .burst-bg use, .hud-dot { animation: none !important; }
  .active .pop, .active .slam, .active .rise, .active .rise-fade, .active .drop, .active .stk .in,
  .active .slide-inL, .active .slide-inR, .active .wipe-in, .active .to-top { animation-name: rmFade !important; animation-duration: .4s !important; }
  .active .to-top { animation: none !important; transform: scale(.62); }
  .wipe { display: none; }
  .active .hulk-g2g img { animation-duration: .01s !important; }
}
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   Controls (outside the stage, auto-hide)
   ========================================================= */
.controls { position: fixed; left: 50%; bottom: 14px; z-index: 100; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px;
  background: rgba(23, 25, 23, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--cream); font: 600 13px/1 var(--f-ui); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  width: min(1040px, calc(100vw - 20px)); transition: opacity .35s, transform .35s; }
.controls.idle { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }
.cbtn { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255,255,255,.08);
  color: var(--cream); display: grid; place-items: center; cursor: pointer; }
.cbtn:hover { background: rgba(183, 227, 75, .25); }
.cbtn:focus-visible, .scenes button:focus-visible, .bar:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cbtn svg { width: 18px; height: 18px; fill: currentColor; }
.cbtn.txt { width: auto; padding: 0 9px; font: 800 12px/1 var(--f-ui); letter-spacing: .08em; }
.cbtn.txt.on { background: var(--lime); color: var(--forest); }
#btnPlay .i-play { display: none; }
.paused #btnPlay .i-play, .ended #btnPlay .i-play { display: block; }
.paused #btnPlay .i-pause, .ended #btnPlay .i-pause { display: none; }
.time { flex: 0 0 auto; font-variant-numeric: tabular-nums; min-width: 78px; text-align: center; opacity: .9; }
.bar { position: relative; flex: 1 1 auto; height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); cursor: pointer; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--lime); }
.bar-ticks span { position: absolute; top: -3px; width: 2px; height: 16px; background: rgba(245,240,223,.5); border-radius: 2px; }
.scenes { display: flex; gap: 4px; flex: 0 0 auto; }
.scenes button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: rgba(255,255,255,.08); color: var(--cream);
  font: 800 12px/1 var(--f-ui); cursor: pointer; }
.scenes button.cur { background: var(--lime); color: var(--forest); }
.scenes button:hover { background: rgba(183, 227, 75, .35); }
@media (max-width: 720px) { .scenes { display: none; } }