/* TAYLOR | scroll scene. Mobile first: base = phone, min-width queries scale up. */

:root{
  --bg:#0a0a0b; --ink:#f3efe6; --ink-dim:#b8b2a6; --ink-faint:#8a847a;
  --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);
  --gutter:max(1.25rem, env(safe-area-inset-left));
}

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

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  background:var(--bg);
}
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; }
a,button{ touch-action:manipulation; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.eyebrow{
  font-size:.66rem; font-weight:400; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
}

/* ---------- 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:76px; height:auto; }
.loader__mark{
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.4;transform:translateY(0)} 50%{opacity:1;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; 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:.34em; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:0 1rem; }

/* ---------- Header -------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:max(1rem, env(safe-area-inset-top)) var(--gutter) 1rem;
  mix-blend-mode:difference;
  transition:transform .5s var(--ease);
}
.brand img{ height:40px; width:auto; }
.nav{ display:flex; align-items:center; gap:1rem; }
.nav a{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:#fff; opacity:.85;
  display:none;
}
.nav a.nav__cta{
  display:inline-flex; align-items:center; min-height:44px;
  border:1px solid rgba(255,255,255,.55); padding:0 1rem; opacity:1;
}

/* ---------- Scene --------------------------------------------------- */
.scene{ position:relative; height:560vh; background:var(--bg); }
.sticky{
  position:relative; width:100%; overflow:hidden;
  height:100vh; height:100svh;
}
.frames-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}

.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%; bottom:auto; background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent); }
.grade--bottom{ height:58%; top:auto; background:linear-gradient(to top,rgba(0,0,0,.85),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 (mobile: bottom, centered) ------------------------ */
.panel{
  position:absolute; z-index:20; opacity:0; visibility:hidden; will-change:transform,opacity;
  left:50%; bottom:calc(max(2.2rem, env(safe-area-inset-bottom)) + 1.4rem);
  width:min(90vw,40ch); text-align:center;
}
.panel--hero{ top:50%; bottom:auto; width:min(92vw,44ch); } /* transform: GSAP */
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem,15vw,5rem); line-height:.96; letter-spacing:-.01em; margin:1.1rem 0 1.4rem;
}
.hero-title em{ font-style:italic; color:var(--gold-soft); font-weight:300; padding-bottom:.08em; display:inline-block; }
.scroll-cue{
  margin-top:2.2rem; 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} }

.panel__index{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold); display:block; margin-bottom:.3rem; }
.panel__kicker{ font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; opacity:.8; margin-bottom:.8rem; }
.panel__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,10vw,3.2rem); line-height:1; letter-spacing:-.01em; margin-bottom:1rem;
}
.panel__body{ font-size:.92rem; color:var(--ink-dim); line-height:1.7; letter-spacing:.015em; }
.panel__spec{
  display:inline-block; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim);
}
.panel__spec i{ font-style:normal; color:var(--gold); margin-right:.7em; }

.progress{ position:absolute; left:0; bottom:0; z-index:40; width:100%; height:2px; background:rgba(255,255,255,.08); }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); }
.scene-count{ display:none; }

/* ---------- Outro --------------------------------------------------- */
.outro{
  position:relative; z-index:2;
  background:radial-gradient(120% 90% at 50% 0%,#16151a 0%,var(--bg) 60%);
  padding:clamp(5rem,14vh,11rem) var(--gutter) 0;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.outro__mark{ margin-bottom:1.6rem; }
.outro__mark img,.foot-brand img{ width:76px; height:auto; }
.outro__title{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.8rem,13vw,6.5rem);
  line-height:.98; margin:1.1rem 0 1.4rem; letter-spacing:-.01em; padding-bottom:.1em;
}
.outro__body{ max-width:46ch; color:var(--ink-dim); font-size:1rem; }
.btn{
  margin-top:2.4rem; display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 2rem; border:1px solid var(--gold); color:var(--gold);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), transform .16s var(--ease);
}
.btn:active{ transform:scale(.97); }

.site-footer{
  width:100%; max-width:1200px; margin:clamp(5rem,12vh,10rem) auto 0;
  padding:2.5rem 0 max(2rem, env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:1fr; gap:2rem; text-align:left;
}

.foot-cols{ display:grid; grid-template-columns:1fr; gap:1.8rem; }
.foot-cols h4{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; font-weight:400; }
.foot-cols a,.foot-cols span{ display:block; font-size:.88rem; color:var(--ink-dim); padding:.4rem 0; }
.foot-legal{ margin-top:.5rem; font-size:.7rem; letter-spacing:.1em; color:var(--ink-faint); }

/* ---------- Hover only where hover exists ---------------------------- */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{ opacity:1; }
  .btn:hover{ background:var(--gold); color:#0a0a0b; }
  .foot-cols a:hover{ color:var(--ink); }
}

/* ---------- Tablet / desktop ---------------------------------------- */
@media (min-width:901px){
  .site-header{ padding:1.6rem clamp(1.2rem,4vw,3.2rem); }
  .brand img{ height:48px; }
  .nav{ gap:clamp(1rem,2.4vw,2.4rem); }
  .nav a{ display:inline; }
  .nav a.nav__cta{ display:inline-flex; }

  .scene{ height:850vh; }
  .grade--bottom{ height:42%; background:linear-gradient(to top,rgba(0,0,0,.72),transparent); }

  .panel{ bottom:auto; top:50%; width:auto; max-width:min(30ch,34vw); }
  .panel--left{ left:clamp(1.4rem,6vw,7rem); text-align:left; }
  .panel--right{ left:auto; right:clamp(1.4rem,6vw,7rem); text-align:right; }
  .panel--hero{ left:50%; right:auto; max-width:44ch; text-align:center; }
  .hero-title{ font-size:clamp(3.2rem,10vw,8.4rem); }
  .panel__title{ font-size:clamp(2.4rem,4.6vw,4rem); margin-bottom:1.3rem; }
  .panel__kicker{ letter-spacing:.4em; margin-bottom:1.1rem; }
  .panel__body{ font-size:clamp(.9rem,1.05vw,1rem); line-height:1.75; }
  .panel__spec{ margin-top:1.6rem; font-size:.66rem; letter-spacing:.28em; }

  .scene-count{
    display:block; position:absolute; bottom:1.4rem; right:clamp(1.2rem,4vw,3.2rem); z-index:40;
    font-family:var(--serif); font-size:1rem; letter-spacing:.1em;
  }
  .scene-count i{ font-style:normal; color:var(--ink-faint); font-size:.8rem; margin-left:.3em; }

  .site-footer{ grid-template-columns:1fr auto; padding:3rem clamp(1.2rem,4vw,2rem) 2.4rem; }
  .foot-cols{ grid-template-columns:repeat(3,auto); gap:clamp(2rem,5vw,4.5rem); }
  .foot-legal{ grid-column:1/-1; margin-top:1.5rem; }
}

@media (prefers-reduced-motion:reduce){
  .grain,.scroll-cue span,.loader__mark{ animation:none; }
}