/* What we do, hero: a sticky 100svh stage inside a tall section, a canvas deep-space shot behind the title, and the page HUD.
   Hide-before-reveal states exist only under html.js:not(.pm-reduced); without JS or with reduced motion all of it is plain and readable. */
.sv-hero { position: relative; margin-top: calc(var(--sv-hh, 56px) * -1); background: var(--bg); text-align: center; }
html.js:not(.pm-reduced) .sv-hero { height: 250vh; height: 250svh; }
.sv-hero-stage { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--sv-hh, 56px) + var(--s4)) max(16px, var(--gut)) var(--s7); overflow: clip; background: radial-gradient(ellipse 70% 55% at 50% 48%, #1a1b1d 0%, var(--bg) 70%); }
html.js:not(.pm-reduced) .sv-hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-bottom: var(--s5); }
.sv-hero-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html.js .sv-hero-cv { display: block; }
.sv-hero-a-static { position: absolute; left: 50%; top: 50%; width: min(60vh, 78vw); height: auto; transform: translate(-50%, -50%); color: var(--accent); opacity: .35; }
html.js .sv-hero-a-static { display: none; }
.sv-hero-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, rgba(16, 17, 18, .75) 100%), linear-gradient(180deg, rgba(16, 17, 18, .55), transparent 18%, transparent 80%, var(--bg)); }
.sv-hero-grain { position: absolute; inset: 0; overflow: clip; pointer-events: none; opacity: .09; mix-blend-mode: screen; }
.sv-hero-grain::before { content: ""; position: absolute; inset: -50%; background: url("../assets/photos/grain-tile-512.png") repeat; }
html.js:not(.pm-reduced) .sv-hero-grain::before { animation: sv-grain 1.1s steps(1) infinite; }
@keyframes sv-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-4%, -3%); } 80% { transform: translate(7%, 6%); } }
.sv-hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; }
.sv-hero-eye { margin-bottom: var(--s3); }
.sv-hero-ttl { transform-origin: 50% 50%; will-change: transform, opacity, filter; }
.sv-hero-h1 { font-family: var(--font-display); font-weight: 150; text-transform: uppercase; font-size: clamp(38px, 10.4vw, 188px); letter-spacing: .22em; padding-left: .22em; line-height: 1.08; color: var(--ink); text-shadow: 0 0 40px rgba(16, 17, 18, .65); }
.sv-hero-lead { max-width: 44ch; margin-top: var(--s4); color: var(--accent); font-size: 17px; line-height: 1.65; text-wrap: balance; }
.sv-hero-idx { margin-top: var(--s5); width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
/* split letters rise through a clipped word, blur to sharp, staggered; only once JS runs and motion is allowed */
.sv-hero .sv-word { clip-path: inset(-12% -12% 0 -12%); }
html.js:not(.pm-reduced) .sv-hero .sv-char { opacity: 0; transform: translateY(112%); filter: blur(14px); }
html.js:not(.pm-reduced) .sv-hero.is-ready .sv-char { opacity: 1; transform: none; filter: none; transition: transform 1.5s var(--ease-out), opacity 1s var(--ease-out), filter 1.2s var(--ease-out); transition-delay: calc(var(--i) * 70ms + 350ms); }
html.js:not(.pm-reduced) .sv-hero [data-sv-fade] { opacity: 0; transform: translateY(18px); }
html.js:not(.pm-reduced) .sv-hero.is-ready [data-sv-fade] { opacity: var(--o, 1); transform: translateY(var(--ty, 0px)); transition: opacity 1.2s var(--ease-out) 1.3s, transform 1.4s var(--ease-out) 1.3s; }
html.js:not(.pm-reduced) .sv-hero.is-live [data-sv-fade] { transition: none; }
/* chapter index */
.sv-idx { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; min-width: 48px; padding: 8px 40px 8px 24px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 300; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.sv-idx-n { color: var(--soft); transition: color var(--t-hover) var(--ease); }
.sv-idx-t { position: relative; padding: 4px 0; }
.sv-idx-t::after { content: ""; position: absolute; left: 0; right: .3em; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right center; transition: transform .55s var(--ease-out); }
.sv-idx-a { position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--accent); opacity: 0; transform: translateX(-14px); transition: opacity var(--t-hover) var(--ease), transform .5s var(--ease-out); }
.sv-idx:hover .sv-idx-t::after, .sv-idx:focus-visible .sv-idx-t::after { transform: scaleX(1); transform-origin: left center; }
.sv-idx:hover .sv-idx-a, .sv-idx:focus-visible .sv-idx-a { opacity: 1; transform: none; }
.sv-idx:hover .sv-idx-n, .sv-idx:focus-visible .sv-idx-n { color: var(--accent); }
.sv-idx:focus-visible, .sv-hud a:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
@media (pointer: coarse) { .sv-idx-t::after { transform: scaleX(1); opacity: .35; } }
/* scroll cue: a thin line with a light dropping down it */
.sv-hero-cue { position: absolute; left: 50%; bottom: var(--s4); z-index: 2; margin-left: -40px; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sv-hero-cue-line { position: relative; width: 1px; height: 52px; background: var(--line); overflow: clip; }
.sv-hero-cue-line i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--ink)); transform: translateY(-100%); }
html.js:not(.pm-reduced) .sv-hero-cue-line i { animation: sv-cue 2.4s var(--ease) infinite; }
@keyframes sv-cue { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(100%); } }
html:not(.js) .sv-hero-cue, html.pm-reduced .sv-hero-cue { display: none; }
/* page HUD: a thin progress rail on the right edge with the chapter number, desktop only, fades in once the hero is behind */
.sv-hud { position: fixed; right: 18px; top: 50%; z-index: 20; height: min(46vh, 420px); transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-out); }
html.js .sv-hud { display: flex; }
.sv-hud.is-on { opacity: 1; }
.sv-hud-n { font-family: var(--font-display); font-weight: 300; font-size: 11px; letter-spacing: .2em; color: var(--soft); text-align: center; line-height: 1.4; }
.sv-hud-n b { display: block; font-weight: 300; font-size: 15px; color: var(--ink); letter-spacing: .12em; }
.sv-hud-rail { position: relative; flex: 1; width: 1px; background: var(--line); }
.sv-hud-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top center; }
.sv-hud-l { writing-mode: vertical-rl; letter-spacing: .3em; font-size: 10px; color: var(--soft); white-space: nowrap; }
@media (max-width: 759px) {
  .sv-hud, html.js .sv-hud { display: none; }
  .sv-hero-stage { padding-bottom: var(--s6); }
  .sv-hero-lead { font-size: 16px; margin-top: var(--s3); }
  .sv-hero-idx { margin-top: var(--s4); }
  .sv-idx { letter-spacing: .22em; font-size: 12px; gap: 14px; }
  .sv-hero-h1 { letter-spacing: .16em; padding-left: .16em; }
  .sv-hero-grain::before { animation: none !important; }
}
@media (max-height: 700px), (min-width: 760px) and (max-height: 1000px) { .sv-hero-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .sv-hero-grain::before, .sv-hero-cue-line i { animation: none !important; } }
/* the A passes behind the words: a soft ink halo keeps the lead and the index readable over its strokes */
.sv-hero-lead, .sv-hero-idx a, .sv-hero-eye { text-shadow: 0 0 14px var(--bg), 0 0 28px var(--bg), 0 0 4px var(--bg); }

/* The hand-off to 01, Digital products: the shot dims to the page ink as the pin ends (svc-hero.js sets --exit from 0 to 1), and the
   chapter rises over the hero's last stretch on a soft ink gradient, so there is no seam and no empty screen between the two. */
html.js:not(.pm-reduced) .sv-hero-cv, html.js:not(.pm-reduced) .sv-hero-vig { opacity: calc(1 - var(--exit, 0)); }
html.js:not(.pm-reduced) .sv-hero-grain { opacity: calc(.09 * (1 - var(--exit, 0))); }
html.js:not(.pm-reduced) #products.pr { z-index: 1; margin-top: -40vh; margin-top: -40svh; background: linear-gradient(180deg, rgba(16, 17, 18, 0), var(--bg) 40vh); background: linear-gradient(180deg, rgba(16, 17, 18, 0), var(--bg) 40svh); }
html.js:not(.pm-reduced) #products.pr::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40vh); mask-image: linear-gradient(180deg, transparent, #000 40vh); }