@font-face{font-family:'League Spartan';src:url('../assets/fonts/LeagueSpartan-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'League Spartan';src:url('../assets/fonts/LeagueSpartan-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'League Spartan';src:url('../assets/fonts/LeagueSpartan-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'League Spartan';src:url('../assets/fonts/LeagueSpartan-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  --gv-black:#000; --gv-white:#fff;
  --ease:cubic-bezier(.22,.61,.36,1);
  --edge:clamp(1.25rem,4.5vw,5rem);
}
*{box-sizing:border-box;}
body{
  margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--gv-black);
  background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ---------- stage ---------- */
#pageBackground{position:fixed;inset:0;z-index:0;background:#fff;will-change:background;}
#webgl{position:fixed;inset:0;z-index:4;width:100vw;height:100vh;display:block;}
#grain{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");}

#loading{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#fff;
  transition:opacity .6s var(--ease);}
#loading.is-hidden{opacity:0;}
.load-mark{width:44px;animation:spin 2.2s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- nav ---------- */
#siteNav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.15rem var(--edge);opacity:0;pointer-events:none;
  transition:color .6s var(--ease);}
#siteNav.is-visible{pointer-events:auto;}
#siteNav .nav-logo{height:1.05rem;}
#siteNav[data-tone="dark"] .nav-logo{filter:invert(1);}
#navChapter{font-family:"League Spartan",sans-serif;font-weight:600;font-size:.64rem;
  letter-spacing:.26em;opacity:.6;}
.nav-cta{font-family:"League Spartan",sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.16em;
  color:inherit;text-decoration:none;padding:.55rem 1rem;border:1.5px solid currentColor;border-radius:999px;
  transition:background .35s var(--ease),color .35s var(--ease);}
#siteNav[data-tone="light"] .nav-cta:hover{background:#000;color:#fff;}
#siteNav[data-tone="dark"] .nav-cta:hover{background:#fff;color:#000;}
.progress{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:20;color:#000;}
#progressBar{height:100%;width:0;background:currentColor;opacity:.22;}

/* ---------- structured devices (behind product, z 1-3) ---------- */
.device{position:fixed;inset:0;z-index:2;pointer-events:none;visibility:hidden;opacity:0;}
.crop-word{position:absolute;top:50%;font-family:"League Spartan",sans-serif;font-weight:900;
  font-size:clamp(9rem,26vw,26rem);line-height:.78;letter-spacing:-.045em;white-space:nowrap;
  color:#000;opacity:.10;will-change:transform;}
.crop-l{left:-.12em;transform:translateY(-50%);}
.crop-r{right:-.12em;transform:translateY(-50%);}
.mark{position:absolute;width:clamp(4rem,9vw,9rem);opacity:.16;will-change:transform;}
.mark-tr{top:12vh;right:7vw;}
.mark-bl{bottom:13vh;left:7vw;}

/* ---------- copy panels (above product where needed) ---------- */
main{position:relative;z-index:10;}
.copy-panel{position:fixed;inset:0;display:flex;flex-direction:column;padding:0 var(--edge);
  opacity:0;pointer-events:none;will-change:opacity,transform;}
.copy-panel.is-interactive{pointer-events:auto;}
h1,h2{font-family:"League Spartan",sans-serif;font-weight:800;margin:0;
  letter-spacing:-.035em;line-height:.86;}
.rule{display:block;width:clamp(3rem,7vw,6rem);height:3px;background:currentColor;opacity:.9;}
.rule.wide{width:min(52rem,70vw);height:2px;opacity:.35;margin-top:1.6rem;}
.eyebrow{font-family:"League Spartan",sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.3em;opacity:.6;}
.badge{display:inline-block;font-family:"League Spartan",sans-serif;font-weight:700;
  font-size:.66rem;letter-spacing:.16em;padding:.5rem .95rem;border-radius:999px;
  background:#000;color:#fff;}

/* 1 arrival */
.panel-hero{align-items:center;justify-content:center;text-align:center;}
.hero-logo{width:min(42vw,27rem);}
.hero-sub{font-family:"League Spartan",sans-serif;font-weight:600;
  font-size:clamp(.66rem,1.4vw,.9rem);letter-spacing:.46em;margin:1.5rem 0 0;}
.scroll-hint{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);
  font-family:"League Spartan",sans-serif;font-weight:600;font-size:.58rem;letter-spacing:.32em;opacity:.4;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.scroll-hint i{display:block;width:1px;height:2.2rem;background:currentColor;
  transform-origin:top;animation:drop 2.2s var(--ease) infinite;}
@keyframes drop{0%{transform:scaleY(0);}45%{transform:scaleY(1);}100%{transform:scaleY(0);
  transform-origin:bottom;}}

/* 2 first drop — copy top and bottom, product owns the centre */
.panel-family{justify-content:space-between;padding-top:16vh;padding-bottom:8vh;}
.panel-family h1{font-size:clamp(2.1rem,5.4vw,4.6rem);margin-top:1.4rem;}
.stack-bottom{display:flex;gap:.6rem;flex-wrap:wrap;}
.tag{font-family:"League Spartan",sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.16em;
  padding:.5rem .9rem;border:1.5px solid currentColor;border-radius:999px;opacity:.75;}

/* 3-5 flavour — copy hugs one side, product sweeps the other */
.panel-flavour{justify-content:center;}
.flav-l{align-items:flex-start;text-align:left;}
.flav-r{align-items:flex-end;text-align:right;}
.flav-block{display:flex;flex-direction:column;gap:1.1rem;max-width:min(40vw,34rem);}
.flav-r .flav-block{align-items:flex-end;}
.panel-flavour h2{font-size:clamp(2.6rem,6.4vw,6rem);}
.panel-flavour .badge{align-self:flex-start;}
.flav-r .badge{align-self:flex-end;}

/* 6 reassembly */
.panel-reunion{align-items:center;text-align:center;justify-content:flex-start;padding-top:13vh;}
.panel-reunion h2{font-size:clamp(2rem,5.2vw,4.4rem);}

/* 7 CTA */
.panel-cta{align-items:center;text-align:center;justify-content:flex-start;padding-top:11vh;color:#fff;}
.cta-mark{width:clamp(2.2rem,4vw,3.4rem);filter:invert(1);margin-bottom:1.6rem;}
.panel-cta h2{font-size:clamp(2.2rem,5.6vw,4.8rem);margin-bottom:1.8rem;}
#preorderForm{width:min(100%,30rem);}
#preorderForm label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.field{display:flex;gap:.5rem;flex-wrap:wrap;}
#preorderForm input{flex:1 1 14rem;min-width:0;background:transparent;
  border:1.5px solid rgba(255,255,255,.4);color:#fff;font-family:"Inter",sans-serif;
  font-size:.95rem;padding:.95rem 1.15rem;border-radius:999px;}
#preorderForm input::placeholder{color:rgba(255,255,255,.45);}
#preorderForm input:focus-visible,#preorderForm button:focus-visible,.nav-cta:focus-visible{
  outline:2px solid #fff;outline-offset:3px;}
#preorderForm button{flex:0 0 auto;background:#fff;color:#000;border:0;border-radius:999px;
  cursor:pointer;font-family:"League Spartan",sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.15em;padding:.95rem 1.6rem;transition:transform .3s var(--ease);}
#preorderForm button:hover{transform:translateY(-2px);}
#formNote{font-size:.76rem;opacity:.55;margin:.9rem 0 0;}
#formConfirmation{font-family:"League Spartan",sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:.06em;opacity:0;transition:opacity .6s var(--ease);margin-top:1.4rem;}
#formConfirmation.is-visible{opacity:1;}

.scroll-track{height:880vh;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .scroll-track{height:800vh;}
  .flav-block{max-width:52vw;}
}
@media (max-width:760px){
  .scroll-track{height:720vh;}
  .copy-panel{justify-content:flex-end;padding-bottom:10vh;}
  .panel-hero{justify-content:center;padding-bottom:0;}
  .panel-family{justify-content:flex-end;padding-top:0;}
  .panel-family .stack-top{order:2;}
  .panel-family .stack-bottom{order:1;margin-bottom:1.6rem;}
  .panel-family h1{font-size:clamp(1.9rem,8.4vw,2.8rem);}
  .panel-flavour h2{font-size:clamp(2rem,9vw,3rem);}
  .flav-block,.flav-r .flav-block{max-width:100%;align-items:flex-start;text-align:left;}
  .flav-r{align-items:flex-start;text-align:left;}
  .flav-r .badge{align-self:flex-start;}
  .panel-reunion,.panel-cta{justify-content:flex-end;padding-top:0;padding-bottom:7vh;}
  .crop-word{font-size:clamp(5rem,34vw,11rem);opacity:.08;}
  .mark{width:4.5rem;}
  #siteNav .nav-cta{display:none;}
  .tag{font-size:.56rem;padding:.4rem .7rem;}
}
@media (prefers-reduced-motion:reduce){
  .load-mark,.scroll-hint i{animation:none;}
}