/* ═══════════════════════════════════════════════════════════════
   SOULÉ SOUL · V2 "LIGHT WALKS IN" — shared design system
   Layers: fonts → motion tokens → kinetic hero → light-pass reveals
   → marble sweeps → candles → nav → transitions → lyric illumination
   → reduced-motion. Everything degrades: no JS = everything visible.
   ═══════════════════════════════════════════════════════════════ */

/* ── self-hosted fonts (replaces Google Fonts CDN) ── */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cg-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cg-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cg-700.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/cg-it-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/cg-it-600.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/jost-100-900.woff2') format('woff2')}
/* metric-adjusted fallbacks so the swap never shifts layout */
@font-face{font-family:'CG Fallback';src:local('Georgia');size-adjust:88%;ascent-override:97%;descent-override:25%}
@font-face{font-family:'Jost Fallback';src:local('Segoe UI'),local('Arial');size-adjust:97%}

/* ── motion tokens ── */
:root{
  --ease-soul:cubic-bezier(.16,1,.3,1);
  --v2-audio:0;            /* 0–1 · fed by the audio engine (P2) */
  --v2-low:0; --v2-mid:0; --v2-high:0;
}

/* ── kinetic hero entrance (index) · pure CSS, .js-gated ── */
@keyframes v2rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.js header.hero .wrap>*{opacity:0;animation:v2rise 1.15s var(--ease-soul) forwards}
.js header.hero .wrap>*:nth-child(1){animation-delay:.18s}
.js header.hero .wrap>*:nth-child(2){animation-delay:.34s}
.js header.hero .wrap>*:nth-child(3){animation-delay:.52s}
.js header.hero .wrap>*:nth-child(4){animation-delay:.70s}
.js header.hero .wrap>*:nth-child(5){animation-delay:.86s}
.js header.hero .wrap>*:nth-child(6){animation-delay:1.02s}
.js header.hero .scroll-hint{opacity:0;animation:v2rise 1.2s 1.5s var(--ease-soul) forwards}
@keyframes v2glint{
  0%,100%{color:var(--gold);text-shadow:none}
  38%{color:#f3dfae;text-shadow:0 0 34px rgba(201,162,75,.9),0 0 90px rgba(201,162,75,.45)}
}
.js header.hero h1 .ap{animation:v2glint 2.1s 1.15s var(--ease-soul) 1 both}

/* subpage headers get a quieter version */
.js header.page .wrap>*{opacity:0;animation:v2rise 1.05s var(--ease-soul) forwards}
.js header.page .wrap>*:nth-child(1){animation-delay:.15s}
.js header.page .wrap>*:nth-child(2){animation-delay:.30s}
.js header.page .wrap>*:nth-child(3){animation-delay:.46s}

/* ── hero light, v1 (CSS rays + breathing bloom; shader replaces visuals in P2) ── */
header.hero{position:relative;isolation:isolate}
header.hero .wrap{position:relative;z-index:3}
header.hero .scroll-hint{z-index:3}
header.hero::before{
  content:"";position:absolute;inset:-4% -6%;pointer-events:none;z-index:1;
  background:repeating-conic-gradient(from 172deg at 60% -14%,
    rgba(243,234,218,0) 0deg 6.5deg,
    rgba(243,234,218,.055) 8.5deg 10deg,
    rgba(201,162,75,.075) 10.8deg 12.4deg,
    rgba(243,234,218,0) 13.5deg 20deg);
  mix-blend-mode:screen;filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 76%);
  mask-image:linear-gradient(180deg,#000 10%,transparent 76%);
  animation:v2rays 17s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes v2rays{
  from{transform:translateX(-1.4%) scale(1.02);opacity:calc(.55 + var(--v2-audio)*.3)}
  to{transform:translateX(1.4%) scale(1.06);opacity:calc(.92 + var(--v2-audio)*.08)}
}
header.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(44% 36% at 60% 6%, rgba(201,162,75,.22), transparent 72%);
  animation:v2breathe 9s ease-in-out infinite alternate;
}
@keyframes v2breathe{from{opacity:calc(.55 + var(--v2-audio)*.45)}to{opacity:1}}
@media (max-width:860px){
  header.hero::before{filter:blur(5px);opacity:.7;background:repeating-conic-gradient(from 176deg at 55% -12%,
    rgba(243,234,218,0) 0deg 8deg, rgba(243,234,218,.05) 10deg 12deg,
    rgba(201,162,75,.06) 13deg 14.5deg, rgba(243,234,218,0) 16deg 24deg)}
}

/* ── light-pass image reveals (rides the existing .reveal → .on system) ── */
.slot.reveal,figure.single-cover.reveal,.shot{position:relative;overflow:hidden}
.slot.reveal::after,figure.single-cover.reveal::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 32%,rgba(243,234,218,.24) 46%,rgba(201,162,75,.34) 51%,transparent 66%);
  transform:translateX(-130%);
}
.slot.reveal.on::after,figure.single-cover.reveal.on::after{animation:v2sweep 1.35s .12s var(--ease-soul) forwards}
@keyframes v2sweep{to{transform:translateX(130%)}}
.js .slot.reveal img,.js figure.single-cover.reveal img{transform:scale(1.055);transition:transform 1.7s var(--ease-soul)}
.slot.reveal.on img,figure.single-cover.reveal.on img{transform:scale(1)}

/* ── marble sections: one gold light-sweep on entry ── */
.v2-sweep{position:relative;overflow:hidden}
.v2-sweep::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 38%,rgba(201,162,75,.10) 49%,rgba(243,234,218,.07) 52%,transparent 64%);
  transform:translateX(-140%);
}
.v2-sweep.lit::before{animation:v2sweep 2.2s .1s var(--ease-soul) forwards}

/* ── tracklist candles ── */
.track{position:relative;transition:background .5s}
.track::after{
  content:"";position:absolute;left:0;right:auto;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(201,162,75,.25) 55%,transparent 85%);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-soul);
}
.track:hover::after,.track:focus-within::after{transform:scaleX(1)}
.track:hover .no,.track:focus-within .no{color:#ecd08a;text-shadow:0 0 16px rgba(201,162,75,.6)}
.track .no{transition:color .5s,text-shadow .5s}
@keyframes v2ember{0%,100%{opacity:.42}45%{opacity:.6}60%{opacity:.5}}
.js .track .name.tbd{animation:v2ember 7s ease-in-out infinite}
.track:nth-child(odd) .name.tbd{animation-delay:1.6s}
.track:nth-child(3n) .name.tbd{animation-delay:3.1s}

/* ── tracklist: released tracks link out ── */
.track .name a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(201,162,75,.35);transition:color .3s,border-color .3s}
.track .name a:hover,.track .name a:focus-visible{color:var(--gold);border-color:var(--gold)}

/* ── nav: active-section gold tick ── */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-7px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-soul);
}
.nav-links a:hover::after,.nav-links a.v2-active::after,.nav-links a[aria-current]::after{transform:scaleX(1)}

/* ── cross-document page transitions (veil of light) ── */
@view-transition{navigation:auto}
@keyframes v2vt-out{to{opacity:0;filter:brightness(1.25)}}
@keyframes v2vt-in{from{opacity:0;filter:brightness(1.35)}to{opacity:1;filter:brightness(1)}}
::view-transition-old(root){animation:v2vt-out .3s ease-in both}
::view-transition-new(root){animation:v2vt-in .4s ease-out both}

/* ── /suddenly/ lyric illumination (reading by candlelight) ── */
.js #lyrics .stanza{opacity:.34;filter:saturate(.85);transition:opacity .9s ease,filter .9s ease,text-shadow .9s ease}
.js #lyrics .stanza.lit{opacity:1;filter:none;text-shadow:0 0 30px rgba(201,162,75,.22)}
.js #lyrics .lsec .tag{opacity:.45;transition:opacity .9s ease,color .9s ease}
.js #lyrics .lsec.lit .tag{opacity:1;color:#e0bd67}

/* ── shared polish ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.v2-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
.v2-canvas.on{opacity:1}

/* ── mini-player (appears after first play; P2 wires logic) ── */
.v2-mini{
  position:fixed;right:18px;bottom:18px;z-index:60;display:none;align-items:center;gap:12px;
  background:rgba(26,18,11,.88);border:1px solid rgba(201,162,75,.5);border-radius:2px;
  padding:10px 16px;backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.v2-mini.show{display:flex;animation:v2rise .7s var(--ease-soul)}
.v2-mini button{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);background:var(--gold);color:var(--espresso);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0}
.v2-mini button.playing{background:transparent;color:var(--gold)}
.v2-mini .t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim)}
.v2-mini .t b{color:var(--gold);font-weight:500}

/* ── when the shader is live, the CSS rays step back ── */
.v2-shader-on header.hero::before{animation-play-state:paused;opacity:.16}
.v2-shader-on header.hero::after{opacity:.4}

/* ── THE HALLWAY · scroll-driven testimony scene (index, Voice section) ──
   Default (no GSAP / reduced motion): an elegant static quote stack.
   With GSAP: .v2-hall-on turns it into a 240vh sticky scene, scrubbed
   by native scroll — never jacked. */
.hallway{margin:0 0 40px}
.hall-stage{position:relative;padding:70px 24px;text-align:center;overflow:hidden;border-top:1px solid rgba(201,162,75,.14);border-bottom:1px solid rgba(201,162,75,.14);background:
  radial-gradient(60% 90% at 50% 110%, rgba(60,26,92,.35), transparent 70%),
  linear-gradient(180deg,#150d08 0%, #1a120b 100%)}
.hall-light{position:absolute;left:50%;top:0;bottom:0;width:34%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 62% at 50% 46%, rgba(243,234,218,.16), rgba(201,162,75,.07) 55%, transparent 75%);
  opacity:.5}
.hall-line{position:relative;font-family:var(--serif);font-style:italic;font-weight:500;color:var(--cream);
  font-size:clamp(26px,4.4vw,52px);line-height:1.3;max-width:22ch;margin:0 auto}
.hall-line+.hall-line{margin-top:14px}
.hall-line b{color:var(--gold);font-style:italic;font-weight:600}
.v2-hall-on .hallway{height:240vh;margin:0}
.v2-hall-on .hall-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:0 24px;border:0}
.v2-hall-on .hall-light{width:20%;opacity:.12}
.v2-hall-on .hall-line{grid-area:1/1;opacity:0;margin:0 auto}
.v2-hall-on .hall-line .v2w{display:inline-block}
@media (max-width:860px){ .v2-hall-on .hallway{height:210vh} }

/* ── gallery lightbox (native <dialog>) ── */
dialog.v2-lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;overflow:hidden}
dialog.v2-lb::backdrop{background:rgba(10,5,14,.93);backdrop-filter:blur(6px)}
.v2-lb figure{position:absolute;inset:0;display:grid;place-items:center;padding:6vh 6vw;margin:0}
.v2-lb img{max-width:100%;max-height:100%;border:1px solid rgba(201,162,75,.4);box-shadow:0 40px 120px rgba(0,0,0,.65);animation:v2kb 16s ease-in-out infinite alternate}
@keyframes v2kb{from{transform:scale(1)}to{transform:scale(1.035)}}
.v2-lb .cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim);background:rgba(26,18,11,.75);border:1px solid rgba(201,162,75,.4);padding:8px 18px;white-space:nowrap}
.v2-lb button.x{position:absolute;top:20px;right:24px;background:rgba(26,18,11,.6);border:1px solid var(--gold-dim);color:var(--cream);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
.v2-lb button.x:hover{border-color:var(--gold);color:var(--gold)}
.js #visuals .gal .slot{cursor:zoom-in}

/* ── reduced motion: the site stands still, fully lit ── */
@media (prefers-reduced-motion: reduce){
  .js header.hero .wrap>*,.js header.page .wrap>*,.js header.hero .scroll-hint{animation:none;opacity:1;transform:none}
  .js header.hero h1 .ap{animation:none}
  header.hero::before{animation:none;opacity:.75}
  header.hero::after{animation:none;opacity:.85}
  .slot.reveal::after,figure.single-cover.reveal::after,.v2-sweep::before{display:none}
  .js .slot.reveal img,.js figure.single-cover.reveal img{transform:none;transition:none}
  .js .track .name.tbd{animation:none;opacity:.55}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .js #lyrics .stanza{opacity:1;filter:none}
  .js #lyrics .lsec .tag{opacity:1}
  .v2-mini.show{animation:none}
  .v2-canvas{display:none}
  .hall-light{opacity:.4}
  .v2-lb img{animation:none}
}