/* ============================================================
   ANDY™ — POP GOES THE WEB
   A digital silkscreen. Ink: pink / cyan / yellow / red / lime / violet.
   ============================================================ */

:root{
  --paper:   #F2ECDF;
  --ink:     #141312;

  --pink:    #FF3E8E;
  --cyan:    #12D8E8;
  --yellow:  #FFD51E;
  --red:     #FF3D1F;
  --lime:    #9BE800;
  --violet:  #7A4DFF;
  --orange:  #FF7A00;

  /* live theme (JS rotates per section) */
  --bg:      var(--paper);
  --fg:      var(--ink);
  --acc:     var(--pink);
  --acc2:    var(--cyan);

  --f-d: 'Anton', sans-serif;
  --f-b: 'Space Grotesk', sans-serif;
  --f-m: 'IBM Plex Mono', monospace;

  --halftone: radial-gradient(currentColor 22%, transparent 24%);
}

/* ---------- themes, rotated by the scroll director ---------- */
html[data-theme="hero"]    { --bg:#F2ECDF; --fg:#141312; --acc:#FF3E8E; --acc2:#12D8E8; }
html[data-theme="work"]    { --bg:#F2ECDF; --fg:#141312; --acc:#7A4DFF; --acc2:#FFD51E; }
html[data-theme="flavors"] { --bg:#161513; --fg:#F2ECDF; --acc:#FFD51E; --acc2:#FF3E8E; }
html[data-theme="stack"]   { --bg:#F2ECDF; --fg:#141312; --acc:#FF7A00; --acc2:#12D8E8; }
html[data-theme="peel"]    { --bg:#DFF2F5; --fg:#141312; --acc:#FF3E8E; --acc2:#FF3D1F; }
html[data-theme="wall"]    { --bg:#FF4E93; --fg:#141312; --acc:#FFD51E; --acc2:#12D8E8; }
html[data-theme="fame"]    { --bg:#121110; --fg:#F2ECDF; --acc:#9BE800; --acc2:#FF3E8E; }

/* ---------- mono plate (peel the banana) ---------- */
html.mono{
  --pink:#8f8f8f; --cyan:#a8a8a8; --yellow:#c9c9c2; --red:#8a8a8a;
  --lime:#b4b4ae; --violet:#909090; --orange:#b9b9b3;
}
html.mono .mono-able{ filter: grayscale(1) contrast(1.07); }
.mono-able{ transition: filter .7s ease; }

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--f-b);
  background:var(--bg);
  color:var(--fg);
  transition: background-color .8s ease, color .8s ease;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }

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

::-webkit-scrollbar{ width:13px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--acc); border:3px solid var(--bg); }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; }

:focus-visible{ outline:3px dashed var(--acc); outline-offset:3px; }

.mono{ font-family:var(--f-m); }

/* film-grain over everything, like paper */
body::after{
  content:""; position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   REVEALS + SHARED SECTION FURNITURE
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(44px) rotate(.4deg);
  transition: opacity .8s ease, transform .95s cubic-bezier(.2,.75,.15,1);
  transition-delay: var(--d, calc(var(--i,0) * 90ms));
}
[data-reveal].in{ opacity:1; transform:none; }

.sec{ position:relative; padding: clamp(90px,12vh,160px) clamp(18px,4vw,72px); }

.sec-head{ position:relative; max-width:1500px; margin:0 auto 56px; }
.sec-no{
  display:inline-block; font-size:11px; letter-spacing:.22em; font-weight:600;
  background:var(--fg); color:var(--bg); padding:7px 12px; margin-bottom:22px;
}
.sec-title{
  font-family:var(--f-d); font-weight:400;
  font-size:clamp(56px,9vw,150px); line-height:.9; letter-spacing:.005em;
  text-transform:uppercase;
}
.sec-title .acc{ color:var(--acc); }
.sec-note{
  font-family:var(--f-m); font-size:12px; letter-spacing:.14em; line-height:1.8;
  max-width:52ch; margin-top:20px; opacity:.85; text-transform:uppercase;
}

.regmark{ width:34px; height:34px; position:absolute; top:0; right:0; opacity:.55; }

/* ============================================================
   BUTTONS — stamped, hard-shadowed, magnetic
   ============================================================ */
[data-mag]{
  display:inline-block;
  transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
}
.btn{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--f-m); font-weight:600; font-size:13px; letter-spacing:.14em;
  padding:1.15em 1.5em; border:3px solid var(--ink);
  background:var(--paper); color:var(--ink);
  box-shadow:7px 7px 0 var(--acc);
  transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
  transition: box-shadow .18s ease, background-color .3s ease, color .3s ease;
  text-transform:uppercase; white-space:nowrap;
}
.btn span{ transition: text-shadow .2s ease; }
.btn b{ font-family:var(--f-d); font-weight:400; font-size:1.15em; transition: transform .25s cubic-bezier(.34,1.8,.4,1); }
.btn:hover{ box-shadow:11px 12px 0 var(--acc); }
.btn:hover span{ text-shadow:2.5px 2.5px 0 var(--acc2); }
.btn:hover b{ transform: translateY(3px); }
.btn:active{ box-shadow:2px 2px 0 var(--acc); }

.btn-fill{ background:var(--ink); color:var(--paper); }
.btn-ghost{ background:transparent; }

/* ============================================================
   PRELOADER — pulling ink
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:100; background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: clip-path .75s cubic-bezier(.85,0,.15,1);
  clip-path: inset(0 0 0 0);
}
#loader.done{ clip-path: inset(0 0 100% 0); pointer-events:none; }
#loader.done .loader-stage{ transform:translateY(-36px); opacity:.4; }
.loader-stage{ display:flex; flex-direction:column; align-items:center; gap:38px;
  transition: transform .6s ease, opacity .6s ease; }
.loader-mark{ position:relative; width:min(78vw,640px); height:clamp(120px,22vw,240px); }
.loader-mark .plate{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-d); font-size:clamp(90px,17vw,190px); line-height:1;
  clip-path: inset(0 100% 0 0);
}
.loader-mark .plate.on{ clip-path: inset(0 0 0 0); transition: clip-path .58s linear; }
.plate.p1{ color:var(--pink); }
.plate.p2{ color:var(--cyan); mix-blend-mode:multiply; }
.plate.p3{ color:var(--yellow); mix-blend-mode:multiply; }
.plate.p4{ color:var(--ink); }
.squeegee{
  position:absolute; top:-12%; height:124%; width:clamp(70px,9vw,110px); left:-20%;
  background:linear-gradient(90deg,#2b2a28 0%,#4a4844 38%,#191817 39%,#3a3835 100%);
  border:3px solid var(--ink); border-radius:8px;
}
.squeegee i{ position:absolute; left:50%; top:-16%; width:10px; height:132%;
  background:#191817; border:2px solid var(--ink); transform:translateX(-50%) rotate(3deg); }
.squeegee.go{ animation: squeeg .6s cubic-bezier(.35,.6,.35,1) forwards; }
@keyframes squeeg{ from{ left:-20%; } to{ left:104%; } }

.loader-meta{ display:flex; flex-direction:column; gap:6px; align-items:center;
  font-size:11px; letter-spacing:.25em; }
#loaderCount{ font-weight:600; font-size:15px; }

#loader .regmark{ position:absolute; width:38px; height:38px; opacity:.6; }
#loader .regmark.tl{ top:26px; left:26px; } #loader .regmark.tr{ top:26px; right:26px; }
#loader .regmark.bl{ bottom:26px; left:26px; } #loader .regmark.br{ bottom:26px; right:26px; }

/* ============================================================
   CURSOR — one dot + four satellites
   ============================================================ */
@media (pointer:fine){
  body, a, button, .btn{ cursor:none; }
  input{ cursor:text; }
}
.cursor-dot, .cursor-cluster{ position:fixed; left:0; top:0; z-index:99; pointer-events:none;
  mix-blend-mode:difference; display:var(--cursor-vis, block); }
@media (pointer:coarse){ .cursor-dot,.cursor-cluster{ display:none; } }
.cursor-dot{
  width:12px; height:12px; margin:-6px 0 0 -6px; background:#fff; border-radius:50%;
}
.cursor-cluster i{
  position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:#fff; border-radius:50%;
  transform: rotate(var(--ca)) translateY(calc(var(--cr, 26px) * -1));
}
.cursor-cluster i:nth-child(1){ --ca: 0deg; }
.cursor-cluster i:nth-child(2){ --ca: 90deg; }
.cursor-cluster i:nth-child(3){ --ca: 180deg; }
.cursor-cluster i:nth-child(4){ --ca: 270deg; }

/* ============================================================
   NAV — difference blend, inverts over everything
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(16px,3vw,44px);
  mix-blend-mode:difference; color:#fff;
}
.nav-logo{ font-family:var(--f-d); font-size:30px; letter-spacing:.02em; display:inline-block; }
.nav-logo sup{ font-size:.42em; vertical-align:.9em; }
.nav-links{ display:flex; gap:6px; font-size:11px; letter-spacing:.16em; font-weight:600; }
.nav-links a{
  position:relative; padding:8px 10px; transition:letter-spacing .3s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.nav-links a:hover{ letter-spacing:.3em; }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{
  font-size:11px; letter-spacing:.16em; font-weight:600;
  border:2px solid #fff; padding:.85em 1.15em; display:inline-block;
  transition: background-color .25s ease, color .25s ease;
}
.nav-cta:hover{ background:#fff; color:#000; }
@media (max-width:840px){ .nav-links{ display:none; } }

/* ============================================================
   HUD — press control panel
   ============================================================ */
.hud{
  position:fixed; left:18px; bottom:18px; z-index:70;
  display:flex; flex-direction:column; gap:5px;
  font-size:10px; letter-spacing:.18em; font-weight:600;
  background:var(--bg); color:var(--fg);
  border:3px solid var(--fg); padding:11px 13px;
  box-shadow:5px 5px 0 var(--acc);
  transition: background-color .8s ease, color .8s ease, box-color .8s ease;
  min-width:158px;
}
.hud-row{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.hud-row b{ font-weight:600; }
.hud-dot{
  width:9px; height:9px; border-radius:50%; background:var(--acc);
  display:inline-block; animation: hudblink 1.6s steps(2) infinite;
}
@keyframes hudblink{ 50%{ opacity:.25; } }
@media (max-width:760px){ .hud{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; overflow:hidden;
  padding: clamp(110px,14vh,180px) clamp(18px,4vw,72px) clamp(70px,10vh,120px);
}
#gl{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.hero-inner{ position:relative; z-index:2; width:100%; }

.eyebrow{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(20px,3vh,36px); }
.chip{
  font-size:10.5px; letter-spacing:.2em; font-weight:600;
  background:var(--fg); color:var(--bg); padding:8px 12px; border:2px solid var(--fg);
}
.chip-ghost{ background:transparent; color:var(--fg); }

.hero-title{ font-family:var(--f-d); font-weight:400; text-transform:uppercase;
  margin-left:-.04em; user-select:none; }
.hero-title .row{ display:block; line-height:.84; }
.hero-title .r1{ font-size:clamp(110px,25vw,390px); }
.hero-title .r2{ font-size:clamp(40px,9.5vw,150px); margin:1.5vw 0 1.5vw 10vw; }
.hero-title .r3{ font-size:clamp(90px,21vw,330px); margin-left:3vw; }
.hero-title .r2 em{
  font-style:normal; color:transparent;
  -webkit-text-stroke:clamp(2px,.45vw,7px) var(--fg); text-stroke:clamp(2px,.45vw,7px) var(--fg);
}
.hero-title .dotp{ font-style:normal; color:var(--acc); }

/* individual letters — hover = random ink + misregistration */
.ch{
  display:inline-block; position:relative;
  color:var(--c, inherit);
  transform: translateY(var(--sy, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: color .3s ease, text-shadow .3s ease, transform .38s cubic-bezier(.3,1.6,.4,1);
}
.ch:hover{
  --r:-4deg; --s:1.07;
  text-shadow: .05em .05em 0 var(--c2, var(--acc)),
              -.028em -.028em 0 var(--c3, var(--acc2));
}
.ch.pulse{ animation: chPulse 1s cubic-bezier(.3,1.5,.4,1); }
@keyframes chPulse{
  0%{ transform: translateY(var(--sy,0)) rotate(0deg) scale(1); }
  35%{ transform: translateY(calc(var(--sy,0) - .07em)) rotate(5deg) scale(1.1); }
  100%{ transform: translateY(var(--sy,0)) rotate(0deg) scale(1); }
}
/* letters drop in once the print is lifted */
body.loaded .hero-title .ch{
  animation: chIn .8s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes chIn{
  from{ opacity:0; transform: translateY(.55em) rotate(8deg); }
}

/* WebGL-less hero: paper + static halftone, the show goes on */
.hero.gl-fallback{
  background:
    radial-gradient(circle at 78% 30%, var(--yellow) 0 26%, transparent 27%),
    radial-gradient(circle at 16% 68%, var(--pink) 0 22%, transparent 23%),
    radial-gradient(currentColor 1.4px, transparent 1.6px) 0 0 / 14px 14px,
    var(--paper);
  color:var(--ink);
}

.hero-sub{
  max-width:52ch; font-size:clamp(15px,1.25vw,18px); line-height:1.65; font-weight:500;
  background:var(--bg); padding:18px 20px; margin-top:clamp(26px,4vh,44px);
  border-left:7px solid var(--acc); box-decoration-break:clone;
  transition: background-color .8s ease;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:22px; margin-top:clamp(24px,4vh,40px); }

.fig{
  position:absolute; z-index:3; font-size:10px; letter-spacing:.22em; font-weight:600;
  opacity:.75; text-transform:uppercase;
}
.fig-tl{ top:86px; left:clamp(18px,4vw,72px); }
.fig-tr{ top:86px; right:clamp(18px,4vw,72px); }
.fig-bl{ bottom:26px; left:clamp(18px,4vw,72px); }
.fig-br{ bottom:26px; right:clamp(18px,4vw,72px); }
#scrollHint{ animation: hintbob 1.6s ease-in-out infinite; }
@keyframes hintbob{ 50%{ transform:translateY(6px); } }
@media (max-width:760px){ .fig-tr,.fig-bl{ display:none; } }

/* ============================================================
   MARQUEES — speed follows scroll velocity
   ============================================================ */
.marquee{
  overflow:hidden; border-top:3px solid var(--fg); border-bottom:3px solid var(--fg);
  background:var(--acc); color:var(--ink);
  padding:14px 0; position:relative; z-index:2;
}
.mq-track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  font-family:var(--f-d); font-size:clamp(22px,2.6vw,38px); text-transform:uppercase;
  letter-spacing:.02em;
}
.mq-seg{ padding-right:.6em; }
.marquee-b{ background:var(--yellow); }
.marquee-c{ background:var(--cyan); }

/* ============================================================
   SEC 01 — DIPTYCH GRID
   ============================================================ */
.diptych{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr));
  gap:clamp(16px,2.2vw,30px); max-width:1500px; margin:0 auto;
  perspective:1400px; will-change:transform;
}
.pcard{
  position:relative; aspect-ratio:3/3.6; border:3px solid var(--ink);
  background:var(--cbg,#FF3E8E); color:var(--cfg,#141312);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:9px 9px 0 var(--cacc,#FFD51E);
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: background-color .55s ease, color .55s ease, box-shadow .55s ease;
  will-change:transform; user-select:none;
}
/* cards enter via keyframes so the per-frame tilt transform isn't fought
   by the generic reveal transition */
.pcard[data-reveal]{ transition:none; opacity:0; transform:none; }
.pcard[data-reveal].in{
  opacity:1;
  animation: cardIn .85s cubic-bezier(.2,.75,.15,1) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes cardIn{
  from{ opacity:0; transform: translateY(64px) rotate(2.5deg); }
}
.pcard-fig{
  position:relative; flex:1; display:grid; place-items:center; overflow:hidden;
  border-bottom:3px solid currentColor;
}
.pcard-fig::before{ /* halftone screen */
  content:""; position:absolute; inset:0;
  background-image:var(--halftone); background-size:13px 13px;
  color:var(--cfg,#141312); opacity:.2;
}
.pcard-letter{
  font-family:var(--f-d); font-size:clamp(120px,11vw,190px); line-height:1;
  text-shadow: .05em .05em 0 var(--cacc,#FFD51E);
  transition:transform .4s cubic-bezier(.3,1.6,.4,1);
}
.pcard:hover .pcard-letter{ transform:translate(-.03em,-.03em) rotate(-4deg) scale(1.04); }
.pcard-body{ padding:16px 16px 14px; display:flex; flex-direction:column; gap:8px; }
.pcard-title{ font-family:var(--f-d); font-size:clamp(19px,1.7vw,26px); letter-spacing:.02em; }
.pcard-meta{ font-family:var(--f-m); font-size:10px; letter-spacing:.18em; opacity:.85;
  display:flex; justify-content:space-between; gap:8px; }
.pcard-btn{
  margin-top:6px; font-family:var(--f-m); font-weight:600; font-size:10.5px; letter-spacing:.2em;
  border:2px solid currentColor; padding:8px 10px; text-align:center;
  transition: background-color .25s ease, color .25s ease, letter-spacing .25s ease;
}
.pcard:hover .pcard-btn{ background:var(--cfg,#141312); color:var(--cbg,#FF3E8E); letter-spacing:.3em; }
/* squeegee sweep on reprint */
.pcard::after{
  content:""; position:absolute; inset:0; background:var(--cacc,#FFD51E);
  transform:translateX(-102%); pointer-events:none; z-index:3;
}
.pcard.printing::after{ animation: cardsweep .5s cubic-bezier(.6,.1,.4,.9); }
@keyframes cardsweep{ from{ transform:translateX(-102%); } to{ transform:translateX(102%); } }

/* ============================================================
   SEC 02 — CONVEYOR / CANS
   ============================================================ */
.flavors{ height:460vh; position:relative; }
.flavors .sticky{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:5vh;
  background:var(--bg); padding:80px 0 0;
}
.flavors .sec-head{ padding:0 clamp(18px,4vw,72px); margin-bottom:0; }
.belt-tick{
  display:inline-block; margin-top:14px; font-size:11px; letter-spacing:.2em; font-weight:600;
  border:2px solid var(--acc); color:var(--fg); padding:6px 10px; width:max-content;
}
.belt{ position:relative; }
.belt-track{
  display:flex; align-items:flex-end; gap:5vw; padding:0 14vw 64px;
  will-change:transform;
}
.belt-stripes{
  position:absolute; left:0; right:0; bottom:22px; height:44px;
  background:repeating-linear-gradient(-45deg,#0c0b0a 0 20px,#28251f 20px 40px);
  border-top:3px solid var(--acc); border-bottom:3px solid var(--acc);
  animation: beltpos .55s linear infinite;
}
@keyframes beltpos{ to{ background-position:56.56px 0; } }

.can{ flex:0 0 auto; width:clamp(180px,21vw,300px); user-select:none;
  transform-origin:50% 100%; will-change:transform; }
.can-top{
  height:clamp(26px,3.2vw,42px);
  background:radial-gradient(ellipse at 50% 120%, #efeee8 0%, #c9c8c0 55%, #a3a29a 100%);
  border:3px solid #141312; border-bottom:none;
  border-radius:50% / 100% 100% 12px 12px;
  position:relative; z-index:2;
  transition: transform .5s cubic-bezier(.3,1.9,.4,.9);
}
.can-top::after{
  content:""; position:absolute; inset:26% 18%;
  border:2px dashed rgba(20,19,18,.4); border-radius:50%;
}
.can:hover .can-top{ transform:translateY(-15px) rotate(-5deg); }
.can-body{
  position:relative; min-height:clamp(240px,26vw,360px);
  border:3px solid #141312; border-top:none;
  border-radius:0 0 30px 30px / 0 0 46px 46px;
  background:var(--canbg,#FFD51E); color:var(--canfg,#141312);
  padding:clamp(16px,1.6vw,24px) 16px 26px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: inset -20px 0 0 rgba(0,0,0,.1), inset 20px 0 0 rgba(255,255,255,.16);
}
.can-brand{ font-family:var(--f-m); font-weight:600; font-size:10.5px; letter-spacing:.2em; }
.can-brand b{ font-size:13px; }
.can-flavor{
  font-family:var(--f-d); text-transform:uppercase; line-height:.95;
  font-size:clamp(28px,3vw,44px); letter-spacing:.01em;
}
.can-div{ border-top:2px dashed currentColor; opacity:.7; }
.can-sub{ font-family:var(--f-m); font-size:9.5px; letter-spacing:.16em; line-height:1.9; opacity:.9; }
.can-bars{ margin-top:auto; }
.can-badge{
  position:absolute; top:-18px; right:-16px; width:76px; height:76px; border-radius:50%;
  background:var(--canacc,#FF3E8E); border:3px solid #141312; color:#141312;
  display:grid; place-items:center; text-align:center;
  font-family:var(--f-m); font-weight:600; font-size:9.5px; letter-spacing:.08em; line-height:1.25;
  transform:rotate(12deg);
}

/* ============================================================
   SEC 03 — CSS 3D STACK
   ============================================================ */
.stack{ overflow:hidden; }
.scene{
  position:relative; height:min(80vh,860px); min-height:480px;
  perspective:1500px; cursor:grab; touch-action:none;
}
.scene.grabbing{ cursor:grabbing; }
.orbit{
  position:absolute; left:50%; top:50%;
  transform-style:preserve-3d; will-change:transform;
}
.box{ position:absolute; transform-style:preserve-3d;
  transform: translate3d(var(--x),var(--y),var(--z)); }
.bi{
  position:relative; width:var(--s); height:var(--s);
  transform-style:preserve-3d; --dz: calc(var(--s) * .46);
  animation: bob var(--dur,7s) ease-in-out var(--del,0s) infinite alternate;
}
@keyframes bob{
  from{ transform: translateY(0) rotateY(var(--sy,0deg)) rotateZ(-1deg); }
  to{ transform: translateY(-22px) rotateY(calc(var(--sy,0deg) + 14deg)) rotateZ(1.5deg); }
}
.face{
  position:absolute; inset:0; background:#E7D5A7; border:3px solid #141312;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7%;
  padding:6%;
}
.face.f-front { transform: translateZ(var(--dz)); }
.face.f-back  { transform: rotateY(180deg) translateZ(var(--dz)); }
.face.f-right { transform: rotateY(90deg)  translateZ(var(--dz)); }
.face.f-left  { transform: rotateY(-90deg) translateZ(var(--dz)); }
.face.f-top   { transform: rotateX(90deg)  translateZ(var(--dz)); }
.face.f-bottom{ transform: rotateX(-90deg) translateZ(var(--dz)); }
.face.f-left,.face.f-right{
  background:repeating-linear-gradient(0deg,#E7D5A7 0 14px,#dfca92 14px 28px);
}
.face.f-top,.face.f-bottom{ background:#d9c48f; }
.face.f-front{ background:
  linear-gradient(180deg, rgba(255,255,255,.25), transparent 30%),
  repeating-linear-gradient(0deg,#EBDAB0 0 26px,#E2CE9C 26px 52px); }
.box-brand{ font-family:var(--f-m); font-weight:600; font-size:calc(var(--s) * .052);
  letter-spacing:.3em; color:#E1322B; }
.box-word{ font-family:var(--f-d); text-transform:uppercase; color:#141312;
  font-size:calc(var(--s) * .21); line-height:.95; text-align:center; }
.box-word i{ font-style:normal; color:#1D4ED8; }
.squiggle{ width:72%; }
.squiggle path{ stroke:#E1322B; stroke-width:5; fill:none; }
.box-cap{ font-family:var(--f-m); font-size:calc(var(--s) * .047); letter-spacing:.18em;
  color:#1D4ED8; text-align:center; }
.scene-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.24em; font-weight:600; opacity:.7;
}

/* ============================================================
   SEC 04 — PEEL
   ============================================================ */
.peel-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px); align-items:center; max-width:1500px; margin:0 auto;
}
.peel-stage{ display:flex; flex-direction:column; align-items:center; }
#bananaSvg{ width:min(88vw,560px); height:auto; touch-action:none; overflow:visible; }
.flap{ will-change:transform; }
#flapL{ transform-box:view-box; transform-origin:150px 215px; }
#flapR{ transform-box:view-box; transform-origin:490px 215px; }
#flapC{ transform-box:view-box; transform-origin:320px 345px; }
#tab{ cursor:grab; }
#tab:active{ cursor:grabbing; }
.peel-status{
  display:inline-block; margin-top:22px; font-size:11px; letter-spacing:.18em;
  border:2px solid var(--fg); padding:8px 12px; background:var(--bg);
  transition: background-color .8s ease;
}
@media (max-width:900px){ .peel-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SEC 05 — MANIFESTO / WALLPAPER
   ============================================================ */
.manifesto{ position:relative; overflow:hidden; padding:clamp(110px,16vh,200px) clamp(18px,4vw,72px); }
.wall{ position:absolute; inset:-45% 0; pointer-events:none; }
.wall-layer{
  position:absolute; inset:0; will-change:transform;
  background-repeat:repeat;
}
.wall-back{
  background-image:var(--motif);
  background-size:430px 430px;
  opacity:.5; filter:saturate(.6) brightness(1.05);
}
.wall-front{ background-image:var(--motif); background-size:300px 300px; }
.mani-inner{ position:relative; z-index:2; max-width:1500px; margin:0 auto; }
.mani-list{ list-style:none; display:flex; flex-direction:column; gap:clamp(14px,2.4vh,26px); }
.mline{
  font-family:var(--f-d); text-transform:uppercase;
  font-size:clamp(30px,5.2vw,74px); line-height:1.04; letter-spacing:.005em;
  width:max-content; max-width:100%;
  padding:.28em .55em; color:var(--ink);
  transition: transform .95s cubic-bezier(.2,.75,.15,1), background-color .5s ease, color .5s ease;
  border:3px solid var(--ink); box-shadow:8px 8px 0 rgba(20,19,18,.85);
}
.mline.in{ transform: rotate(calc(var(--i) * .5deg - 1.2deg)); }
.mline:nth-child(6n+1){ background:var(--yellow); }
.mline:nth-child(6n+2){ background:var(--cyan); }
.mline:nth-child(6n+3){ background:var(--paper); }
.mline:nth-child(6n+4){ background:var(--lime); }
.mline:nth-child(6n+5){ background:var(--paper); }
.mline:nth-child(6n+6){ background:var(--yellow); }
.mline em{ font-style:normal; color:var(--red); }
.mline:hover{ transform: rotate(0deg) scale(1.015); }

:root{
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg stroke='%23141312' stroke-width='8' stroke-linejoin='round'%3E%3Cpath d='M62 128 C84 190 124 214 172 214 C220 214 258 190 278 128 C254 170 216 190 172 190 C128 190 90 170 62 128 Z' fill='%23FFD51E'/%3E%3C/g%3E%3Cpath d='M172 34 l15 31 34 5 -25 24 6 34 -30 -16 -30 16 6 -34 -25 -24 34 -5 z' fill='%23141312'/%3E%3Ccircle cx='296' cy='288' r='15' fill='%23141312'/%3E%3Ccircle cx='48' cy='284' r='9' fill='none' stroke='%23141312' stroke-width='7'/%3E%3C/svg%3E");
}

/* ============================================================
   FOOTER — FAME
   ============================================================ */
.fame{ position:relative; overflow:hidden; padding:clamp(100px,14vh,170px) clamp(18px,4vw,72px) 0; }
.fame-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(36px,5vw,80px); max-width:1500px; margin:0 auto 70px;
}
.fame-label{
  display:block; font-size:10.5px; letter-spacing:.24em; font-weight:600;
  color:var(--acc); margin-bottom:20px; text-transform:uppercase;
}
.clock{
  display:block; font-family:var(--f-d); font-size:clamp(90px,11vw,190px);
  line-height:.9; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.clock.low{ color:var(--acc); animation: hudblink 1s steps(2) infinite; }
.fame-note{ display:block; margin-top:18px; font-size:11px; letter-spacing:.16em; opacity:.75; }

.press-input{
  width:100%; background:transparent; color:var(--fg);
  border:none; border-bottom:3px solid var(--fg);
  font-size:clamp(18px,1.6vw,24px); letter-spacing:.1em; padding:12px 4px;
  text-transform:uppercase; outline:none;
}
.press-input::placeholder{ color:var(--fg); opacity:.4; }
.press-input:focus{ border-bottom-color:var(--acc); }
.press-out{ margin-top:26px; min-height:2.2em; overflow:hidden; }
.press-out .ghost{ opacity:.35; font-size:clamp(20px,2vw,30px); letter-spacing:.1em; }
.press-out .pl{
  display:inline-block; font-family:var(--f-d); text-transform:uppercase;
  font-size:clamp(44px,4.6vw,84px); line-height:1;
  margin-right:.12em;
  animation: plin .5s cubic-bezier(.3,1.7,.4,1) backwards;
}
@keyframes plin{ from{ transform: translateY(.55em) rotate(8deg); opacity:0; } }

.links{ display:flex; flex-direction:column; gap:6px; }
.links a{
  font-family:var(--f-d); font-size:clamp(26px,2.4vw,38px); text-transform:uppercase;
  width:max-content; transition: color .25s ease, transform .25s ease;
}
.links a:hover{ color:var(--acc); transform: translateX(10px) rotate(-1.5deg); }
.links .mail{
  font-family:var(--f-m); font-weight:600; font-size:13px; letter-spacing:.14em;
  border:2px solid var(--acc); color:var(--fg); padding:12px 14px; margin:14px 0 4px;
  width:max-content; transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.links .mail:hover{ background:var(--acc); transform: translate(-3px,-3px);
  box-shadow:5px 5px 0 var(--fg); }
.fame-addr{ font-size:10px; letter-spacing:.2em; opacity:.6; margin-top:14px; }

.marquee-d{ background:var(--lime); }

.big-word{
  font-family:var(--f-d); text-align:center; user-select:none;
  font-size:clamp(150px,30vw,520px); line-height:.72; letter-spacing:-.01em;
  margin-top:40px; transform:translateY(.16em);
  color:transparent; -webkit-text-stroke:clamp(2px,.3vw,6px) var(--fg);
  text-stroke:clamp(2px,.3vw,6px) var(--fg);
  text-shadow: .022em .022em 0 var(--acc);
}
.legal{
  text-align:center; font-size:9.5px; letter-spacing:.2em; opacity:.55;
  padding:30px 20px 26px; border-top:2px solid rgba(242,236,223,.18);
}

/* ============================================================
   TOAST + CONFETTI
   ============================================================ */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,24px);
  z-index:95; background:var(--ink); color:var(--paper);
  border:3px solid var(--acc); box-shadow:6px 6px 0 var(--acc);
  padding:13px 20px; font-size:11px; letter-spacing:.18em; font-weight:600;
  opacity:0; pointer-events:none; transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.4,.4,1);
  text-transform:uppercase; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}
#toast.on{ opacity:1; transform:translate(-50%,0); }

.conf{
  position:fixed; top:-24px; z-index:96; border-radius:50%;
  pointer-events:none; border:2px solid rgba(20,19,18,.6);
}

/* ============================================================
   MOTION SAFETY + SMALL SCREENS
   ============================================================ */
@media (max-width:640px){
  .hero-title .r2{ margin-left:4vw; }
  .hero-title .r3{ margin-left:0; }
  .pcard{ aspect-ratio:3/3.2; }
  .can-badge{ width:60px; height:60px; font-size:8.5px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  #loader{ display:none; }
  .belt-stripes, #scrollHint, .hud-dot, .ch.pulse{ animation:none !important; }
  .bi{ animation:none !important; }
  [data-reveal]{ transition-duration:.01ms; }
}