/* ═══════════════════════════════════════════════════════════
   ELITE PROFESSIONAL — SUPERPOWER 5700
   Art direction: cold specular. No warm tones anywhere.
   The tricolore appears exactly once, in the DETAIL chapter.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:      #050506;
  --bone:    #F2F0EC;
  --steel:   #C9CDD2;
  --mute:    #6E7378;
  --hair:    rgba(201,205,210,.22);   /* hairline rules */

  --it-green:#008C45;
  --it-red:  #CD212A;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --grot:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4.5vw, 72px);
  --ease:   cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--bone);
  font-family:var(--grot);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* scroll is locked until every frame is decoded */
body.is-loading{ overflow:hidden; height:100vh; }

::selection{ background:var(--steel); color:var(--bg); }

/* ── TYPE PRIMITIVES ──────────────────────────────────────── */

.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem, 7vw, 7.5rem);
  line-height:.94;
  letter-spacing:-.015em;
  margin:0;
}

.display--hero{
  font-size:clamp(3.2rem, 15.5vw, 16rem);
  letter-spacing:.02em;
  line-height:.86;
}

.display--cta{ font-size:clamp(2.4rem, 8vw, 6rem); }

.overline{
  font-family:var(--grot);
  font-size:clamp(.6rem,.72vw,.72rem);
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 1.6em;
}

.lede{
  font-family:var(--grot);
  font-size:clamp(.8rem,1.05vw,1rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin:2.2em 0 0;
}

/* ── LOADER ───────────────────────────────────────────────── */

.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden; }

.loader__inner{ width:min(340px, 74vw); text-align:center; }

.loader__mark{
  font-family:var(--serif);
  font-size:1.5rem; letter-spacing:.24em;
  margin-bottom:2.4rem;
}
.loader__mark span{
  display:block;
  font-family:var(--grot);
  font-size:.52rem; letter-spacing:.5em;
  color:var(--mute); margin-top:.9rem;
}

.loader__bar{
  height:1px; width:100%;
  background:rgba(201,205,210,.16);
  overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0%;
  background:var(--steel);
  transition:width .25s linear;
}

.loader__pct{
  font-size:.62rem; letter-spacing:.34em;
  color:var(--mute);
  margin-top:1.4rem;
  font-variant-numeric:tabular-nums;
}

.loader__err{
  position:absolute; bottom:var(--gutter); left:var(--gutter); right:var(--gutter);
  font-size:.72rem; letter-spacing:.06em; line-height:1.7;
  color:var(--it-red); text-align:center;
}

/* ── FIXED CHROME ─────────────────────────────────────────── */

.chrome{
  position:fixed; z-index:40;
  top:var(--gutter); left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:baseline;
  pointer-events:none;
  mix-blend-mode:difference;
}
.chrome__mark{
  font-family:var(--serif);
  font-size:1.05rem; letter-spacing:.3em;
}
.chrome__meta{
  font-size:.54rem; letter-spacing:.36em; color:var(--steel);
}

/* ── SCRUB CHAPTERS ───────────────────────────────────────── */

.chapter{ position:relative; }               /* height set inline by JS */

.chapter__sticky{
  position:sticky; top:0;
  height:100svh; width:100%;
  overflow:hidden;
}

.chapter__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* fallback <video> swapped in for mobile / reduced-motion */
.chapter__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ── STAGE (copy over canvas) ─────────────────────────────── */

.stage{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:0 var(--gutter);
  pointer-events:none;
}

.stage--corner{
  align-items:flex-start; justify-content:flex-end;
  text-align:left;
  padding-bottom:clamp(72px, 12vh, 150px);
}
.stage--right{
  align-items:flex-end; text-align:right;
}

/* reveal primitive — driven by [data-in] thresholds in app.js */
[data-in]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease), transform 1s var(--ease), letter-spacing 1.4s var(--ease);
  will-change:opacity, transform;
}
[data-in].is-in{
  opacity:1;
  transform:none;
}

/* the hero wordmark letter-spaces open as it arrives */
.display--hero[data-in]{ letter-spacing:.34em; }
.display--hero[data-in].is-in{ letter-spacing:.02em; }

[data-out]{ transition:opacity .6s var(--ease); }
[data-out].is-out{ opacity:0; }

.scrollcue{
  position:absolute; bottom:calc(var(--gutter) + 4px); left:50%;
  transform:translateX(-50%);
  font-size:.52rem; letter-spacing:.42em; color:var(--mute);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.scrollcue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(var(--steel), transparent);
}

/* ── CALLOUTS (explosion chapter) ─────────────────────────── */

.callouts{ position:absolute; inset:0; pointer-events:none; }

.callout{
  position:absolute;
  display:flex; flex-direction:column; gap:.55rem;
  padding-top:.7rem;
  min-width:150px;
}
/* the hairline leader */
.callout::before{
  content:""; position:absolute; top:0; left:0;
  width:100%; height:1px;
  background:var(--steel);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.1s var(--ease);
}
.callout.is-in::before{ transform:scaleX(1); }

.callout__k{
  font-size:.56rem; letter-spacing:.38em; color:var(--steel);
}
.callout__v{
  font-family:var(--serif);
  font-size:clamp(.95rem, 1.5vw, 1.35rem);
  letter-spacing:.01em;
  color:var(--bone);
}

.callout--tl{ top:24%;  left:9%;  }
.callout--tr{ top:20%;  right:9%; text-align:right; align-items:flex-end; }
.callout--tr::before{ transform-origin:right; }
.callout--bl{ bottom:26%; left:13%; }
.callout--br{ bottom:22%; right:11%; text-align:right; align-items:flex-end; }
.callout--br::before{ transform-origin:right; }

/* ── TRICOLORE (used exactly once, DETAIL chapter) ────────── */

.tricolore{
  display:flex; align-items:center; gap:.5rem;
  font-size:.54rem; letter-spacing:.4em; color:var(--mute);
  margin-top:2.6rem;
}
.tricolore i{ width:14px; height:2px; display:block; }
.tricolore i:nth-child(1){ background:var(--it-green); }
.tricolore i:nth-child(2){ background:var(--bone); }
.tricolore i:nth-child(3){ background:var(--it-red); }
.tricolore i:nth-child(3){ margin-right:.7rem; }

/* ── MANIFESTO ────────────────────────────────────────────── */

.manifesto{
  padding:clamp(28vh,32vh,40vh) var(--gutter);
  max-width:1100px; margin:0 auto;
}
.manifesto__line{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 3.9vw, 3.6rem);
  line-height:1.24;
  letter-spacing:-.01em;
  margin:0 0 clamp(18vh, 22vh, 26vh);
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.manifesto__line:last-child{ margin-bottom:0; }
.manifesto__line.is-in{ opacity:1; transform:none; }
.manifesto__line--em{ color:var(--mute); }

/* ── SPECS ────────────────────────────────────────────────── */

.specs{
  padding:clamp(22vh,26vh,30vh) var(--gutter);
  max-width:1240px; margin:0 auto;
}
.specs__grid{
  margin:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(32px, 7vw, 120px);
}
.specs__grid > div{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:2rem;
  padding:1.9rem 0;
  border-top:1px solid var(--hair);
}
.specs dt{
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--mute);
}
.specs dd{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1rem, 1.7vw, 1.5rem);
  text-align:right;
}

/* ── CTA ──────────────────────────────────────────────────── */

.cta{
  padding:clamp(20vh,24vh,28vh) var(--gutter) var(--gutter);
  max-width:1240px; margin:0 auto;
}
.cta__form{
  display:flex; align-items:flex-end; gap:1.5rem;
  margin:clamp(3rem,6vh,5rem) 0 1.6rem;
  max-width:560px;
}
.cta__form input{
  flex:1;
  background:none; border:0;
  border-bottom:1px solid var(--hair);
  color:var(--bone);
  font-family:var(--grot);
  font-size:.92rem; letter-spacing:.06em;
  padding:.9rem 0;
  outline:none;
  transition:border-color .4s var(--ease);
}
.cta__form input::placeholder{ color:var(--mute); letter-spacing:.16em; font-size:.72rem; text-transform:uppercase; }
.cta__form input:focus{ border-bottom-color:var(--steel); }

.cta__form button{
  background:none; border:0;
  border-bottom:1px solid var(--steel);
  color:var(--bone);
  font-family:var(--grot);
  font-size:.6rem; letter-spacing:.38em; text-transform:uppercase;
  padding:.9rem 0;
  cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.cta__form button:hover{ color:var(--steel); }

.cta__note{
  font-size:.68rem; letter-spacing:.1em; line-height:1.9;
  color:var(--mute); max-width:44ch; margin:0;
}
.cta__note.is-ok{ color:var(--steel); }

.foot{
  display:flex; flex-wrap:wrap; gap:2.4rem;
  margin-top:clamp(14vh,18vh,22vh);
  padding-top:1.9rem;
  border-top:1px solid var(--hair);
  font-size:.52rem; letter-spacing:.4em; color:var(--mute);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 860px){
  .specs__grid{ grid-template-columns:1fr; }
  .callout--tl{ top:16%; left:var(--gutter); }
  .callout--tr{ top:30%; right:var(--gutter); }
  .callout--bl{ bottom:30%; left:var(--gutter); }
  .callout--br{ bottom:16%; right:var(--gutter); }
  .callout{ min-width:0; max-width:44vw; }
  .cta__form{ flex-direction:column; align-items:stretch; gap:2.4rem; }
  .cta__form button{ align-self:flex-start; }
  .stage--right{ align-items:flex-start; text-align:left; }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-in]{ opacity:1; transform:none; }
  .manifesto__line{ opacity:1; transform:none; }
  .display--hero[data-in]{ letter-spacing:.02em; }
  .callout::before{ transform:scaleX(1); }
  .scrollcue{ display:none; }
}