/* ===================================================================
   OCTABOOT — The Anatomy of a Suit
   =================================================================== */

:root{
  --bg:        #0a0a0b;
  --bg-soft:   #111114;
  --ink:       #f3efe6;
  --ink-dim:   #b8b2a6;
  --ink-faint: #6d685f;
  --gold:      #c6a35c;
  --gold-soft: #d8bd82;
  --line:      rgba(198,163,92,.28);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16,.84,.32,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- Shared type ------------------------------------------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--center{ text-align:center; }

/* ===================================================================
   Loader
   =================================================================== */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.4rem;
  background:var(--bg);
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark img{
  width:70px; opacity:.9;
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.35; transform:translateY(0) } 50%{ opacity:.95; transform:translateY(-4px) } }
.loader__bar{
  width:min(240px,54vw); height:1px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.loader__bar span{ display:block; height:100%; width:0%; background:var(--gold); transition:width .25s linear; }
.loader__pct{ font-family:var(--serif); font-size:2rem; color:var(--ink); letter-spacing:.02em; }
.loader__pct i{ font-style:normal; font-size:.9rem; color:var(--gold); margin-left:2px; }
.loader__label{ font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-faint); }

/* ===================================================================
   Header
   =================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3.2rem);
  mix-blend-mode:difference;               /* stays legible over dark & light frames */
  transition:transform .5s var(--ease);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__mark{ width:30px; }
.brand__word{ font-size:.9rem; letter-spacing:.44em; font-weight:400; color:#fff; padding-left:.15em; }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem); }
.nav a{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#fff; opacity:.85; transition:opacity .3s; }
.nav a:hover{ opacity:1; }
.nav__cta{
  border:1px solid rgba(255,255,255,.55);
  padding:.6rem 1.1rem; opacity:1 !important;
}

/* ===================================================================
   Scene — pinned canvas
   =================================================================== */
.scene{ position:relative; height:850vh; background:var(--bg); }
.sticky{ position:relative; height:100vh; width:100%; overflow:hidden; }

.frames-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* colour grade / cinematic overlays */
.grade{ position:absolute; inset:0; pointer-events:none; }
.grade--vignette{ box-shadow:inset 0 0 26vw 6vw rgba(0,0,0,.72); }
.grade--top{ height:40%; top:0; background:linear-gradient(to bottom, rgba(0,0,0,.65), transparent); }
.grade--bottom{ height:42%; bottom:0; top:auto; background:linear-gradient(to top, rgba(0,0,0,.72), transparent); }
.grain{
  position:absolute; inset:-50%;
  pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-3%,4%)} 80%{transform:translate(5%,-2%)} 100%{transform:translate(0,0)} }

/* ===================================================================
   Panels (editorial text over the hero)
   =================================================================== */
.panel{
  position:absolute; z-index:20;
  max-width:min(30ch,34vw);
  opacity:0; visibility:hidden;
  will-change:transform,opacity;
}
/* hero */
.panel--hero{
  left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; max-width:44ch;
}
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.2rem,10vw,8.4rem);
  line-height:.94; letter-spacing:-.01em; margin:1.1rem 0 1.4rem;
}
.hero-title em{ font-style:italic; color:var(--gold-soft); font-weight:300; }
.hero-sub{
  font-size:clamp(.9rem,1.15vw,1.02rem); color:var(--ink-dim);
  max-width:40ch; margin:0 auto; letter-spacing:.02em;
}
.scroll-cue{
  margin-top:2.6rem; font-size:.6rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.scroll-cue span{
  width:1px; height:46px; background:linear-gradient(var(--gold),transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* left / right positioning */
.panel--left{ left:clamp(1.4rem,6vw,7rem); top:50%; transform:translateY(-50%); text-align:left; }
.panel--right{ right:clamp(1.4rem,6vw,7rem); top:50%; transform:translateY(-50%); text-align:right; }

.panel__index{
  font-family:var(--serif); font-style:italic;
  font-size:1.1rem; color:var(--gold);
  display:block; margin-bottom:.4rem;
}
.panel__kicker{
  font-size:.64rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--ink); opacity:.75; margin-bottom:1.1rem;
}
.panel__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,4.6vw,4rem); line-height:.98;
  letter-spacing:-.01em; margin-bottom:1.3rem;
}
.panel--right .panel__title{ }
.panel__body{
  font-size:clamp(.9rem,1.05vw,1rem); color:var(--ink-dim);
  line-height:1.75; letter-spacing:.015em;
}
.panel__spec{
  margin-top:1.6rem; padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-dim);
}
.panel__spec i{ font-style:normal; color:var(--gold); margin-right:.7em; }
.panel--right .panel__spec{ display:inline-block; }

/* progress + counter */
.progress{
  position:absolute; left:0; bottom:0; z-index:40;
  width:100%; height:2px; background:rgba(255,255,255,.06);
}
.progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); }
.scene-count{
  position:absolute; bottom:1.4rem; right:clamp(1.2rem,4vw,3.2rem); z-index:40;
  font-family:var(--serif); font-size:1rem; color:var(--ink); letter-spacing:.1em;
}
.scene-count i{ font-style:normal; color:var(--ink-faint); font-size:.8rem; margin-left:.3em; }

/* ===================================================================
   Outro / CTA
   =================================================================== */
.outro{
  position:relative; z-index:2;
  background:radial-gradient(120% 90% at 50% 0%, #16151a 0%, var(--bg) 60%);
  padding:clamp(6rem,14vh,11rem) 1.5rem 0;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.outro__mark img{ width:64px; opacity:.9; margin-bottom:1.8rem; }
.outro__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,8vw,6.5rem); line-height:.96;
  margin:1.1rem 0 1.6rem; letter-spacing:-.01em;
}
.outro__body{ max-width:46ch; color:var(--ink-dim); font-size:1.02rem; }
.btn{
  margin-top:2.6rem;
  display:inline-block; padding:1.1rem 2.6rem;
  border:1px solid var(--gold);
  color:var(--gold); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.btn:hover{ background:var(--gold); color:#0a0a0b; }

/* footer */
.site-footer{
  width:100%; max-width:1200px; margin:clamp(6rem,12vh,10rem) auto 0;
  padding:3rem clamp(1.2rem,4vw,2rem) 2.4rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; text-align:left;
}
.foot-brand{ display:flex; align-items:center; gap:.7rem; align-self:start; }
.foot-brand img{ width:30px; }
.foot-brand span{ letter-spacing:.4em; font-size:.85rem; }
.foot-cols{ display:flex; gap:clamp(2rem,5vw,4.5rem); }
.foot-cols h4{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:400; }
.foot-cols a{ display:block; font-size:.82rem; color:var(--ink-dim); margin-bottom:.55rem; transition:color .3s; }
.foot-cols a:hover{ color:var(--ink); }
.foot-legal{ grid-column:1/-1; margin-top:1.5rem; font-size:.68rem; letter-spacing:.14em; color:var(--ink-faint); }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width:900px){
  .scene{ height:760vh; }
  .panel{ max-width:none; width:min(88vw,44ch); }
  .panel--left, .panel--right{
    left:50%; right:auto; top:auto; bottom:11vh;
    transform:translateX(-50%); text-align:center;
  }
  .panel--right .panel__spec{ }
  .panel__spec{ display:inline-block; }
  .grade--bottom{ height:56%; }
  .nav a:not(.nav__cta){ display:none; }
  .site-footer{ grid-template-columns:1fr; }
  .scene-count{ display:none; }
}
@media (max-width:520px){
  .brand__word{ display:none; }
  .hero-title{ font-size:clamp(3rem,16vw,5rem); }
}

/* reduced motion — quiet the ambient loops (scroll scrubbing stays user-driven) */
@media (prefers-reduced-motion:reduce){
  .grain, .scroll-cue span, .loader__mark img{ animation:none; }
  html{ scroll-behavior:auto; }
}