/* A scroll-directed horizon and a second chapter, inspired by cinematic title sequences. */
:root {
  --horizon-light: #d5ff88;
  --horizon-green: #8fcb47;
  --horizon-mid: #355b20;
  --horizon-deep: #172c10;
}
.nav-wrap { position: fixed; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
html:not(.js) .nav-wrap { position: absolute; }
.nav-wrap.is-scrolled { background: color-mix(in srgb, var(--color-paper) 88%, transparent); border-color: color-mix(in srgb, var(--color-rule) 75%, transparent); backdrop-filter: blur(18px); }
.hero--scroll { overflow: visible; background: var(--color-paper); }
.hero__stage { position: relative; isolation: isolate; overflow: clip; }
.hero--scroll .hero__inner { height: 100svh; min-height: 720px; padding-top: clamp(136px, 16svh, 180px); }
.hero__intro { width: 100%; position: relative; z-index: 3; text-align: center; }
.hero--scroll .hero__eyebrow { justify-content: center; }
.hero--scroll .hero__copy { padding-top: 22px; padding-bottom: 0; }
.hero--scroll .hero__copy h1 { font-size: clamp(72px, 8vw, 122px); }
.hero--scroll .hero__copy p { margin-top: 24px; font-size: 16px; }
.hero--scroll .hero__copy .btn { margin-top: 26px; }
.hero__sky { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 100%, var(--horizon-deep), var(--color-paper) 75%); }
.hero__horizon { position: absolute; z-index: -1; width: 136%; aspect-ratio: 1; top: 76svh; left: -18%; border-radius: 50%; transform-origin: 50% 0; pointer-events: none; }
.horizon__surface { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side at 50% 50%, var(--horizon-deep) 58%, var(--horizon-mid) 88%, color-mix(in srgb, var(--horizon-green) 32%, var(--horizon-mid)) 100%); box-shadow: inset 0 2px 3px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 -16px 80px color-mix(in srgb, var(--color-accent) 12%, transparent); }
.horizon__rim { position: absolute; inset: -2% -1% 2%; border-radius: 50%; border-top: 1px solid color-mix(in srgb, var(--horizon-light) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--horizon-light) 12%, transparent), transparent 6%); }
.horizon__latitude { position: absolute; inset: 3% 2%; border-radius: 50%; border-top: 1px solid color-mix(in srgb, var(--horizon-light) 25%, transparent); }
.hero--scroll .hero__bottom { margin-top: auto; padding-block: 27px 32px; border-top: 0; text-shadow: 0 1px 12px var(--color-paper); }
.hero--scroll .hero__proof > span, .hero--scroll .hero__bottom > p span, .hero--scroll .scroll-cue { color: var(--color-ink-2); }
.hero__chapter { display: none; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 100% 100%, var(--horizon-deep), var(--color-paper) 70%); pointer-events: none; }
.hero__narrative { position: relative; z-index: 4; padding-block: 100px 110px; background: var(--color-paper); }
.story__content { width: 100%; max-width: 1110px; margin-inline: auto; }
.story__label { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--color-ink-2); margin-bottom: 34px; }
.story__statement { font: 500 clamp(32px, 4.2vw, 66px)/1.16 var(--font-display); letter-spacing: -.04em; max-width: 1060px; }
.story__statement + .story__statement { margin-top: 30px; }
.story__statement--accent { color: var(--color-accent); }
.story-word { opacity: calc(.22 + .78 * var(--word-light, 1)); }
.story__signature { display: flex; justify-content: space-between; border-top: 1px solid var(--color-rule); margin-top: 54px; padding-top: 22px; font-size: 13px; color: var(--color-muted); }
.story__signature > :last-child { color: var(--color-ink-2); }
.hero__progress { display: none; position: absolute; z-index: 5; top: 103px; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--color-rule); }
.hero__progress-fill { display: block; height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(var(--scene-progress, 0)); transform-origin: 0 50%; }

/* Pin only after the controller has successfully initialized. */
.scroll-scenes-ready:not(.scroll-scenes-static) .hero--scroll { height: 300svh; }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero__stage { position: sticky; top: 0; height: 100svh; }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero--scroll .hero__inner { height: 100%; min-height: 0; }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero__intro { opacity: var(--intro-opacity, 1); transform: translateY(var(--intro-y, 0px)) scale(var(--intro-scale, 1)); transform-origin: 50% 30%; will-change: transform, opacity; }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero.intro-gone .hero__intro,
.scroll-scenes-ready:not(.scroll-scenes-static) .hero.intro-gone .hero__bottom { pointer-events: none; }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero__horizon { transform: translateY(var(--horizon-y, 0vh)) scale(var(--horizon-scale, 1)); will-change: transform; }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero__chapter { display: block; opacity: var(--chapter-opacity, 0); }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero--scroll .hero__bottom { opacity: var(--proof-opacity, 1); }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero__narrative { position: absolute; inset: 0; display: flex; align-items: center; padding-top: 135px; padding-bottom: 85px; background: none; pointer-events: none; opacity: var(--narrative-opacity, 0); transform: translateY(var(--narrative-y, 35px)); }
.scroll-scenes-ready:not(.scroll-scenes-static) .hero__progress { display: block; }
.scroll-scenes-ready:not(.scroll-scenes-static) .universe-card { translate: 0 var(--card-rise, 0px); }

/* Keep the proof row inside the visible arc, including on wide, short screens. */
@media (min-width: 781px) {
  .hero__horizon { top: 74svh; }
  .hero--scroll .hero__bottom {
    width: min(100%, 70vw, 960px, max(650px, 100svh));
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
    gap: clamp(10px, min(1.5vw, 2svh), 24px);
  }
  .hero--scroll .hero__bottom > p { white-space: nowrap; font-size: clamp(11px, min(1.1vw, 1.5svh), 14px); }
  .hero--scroll .hero__proof { gap: 10px; }
  .hero--scroll .hero__proof strong { font-size: clamp(26px, min(3vw, calc(5svh - 8px)), 39px); }
  .hero--scroll .hero__proof > span { max-width: none; white-space: nowrap; font-size: clamp(10px, min(1vw, 1.3svh), 12px); }
  .hero--scroll .scroll-cue { gap: 10px; white-space: nowrap; font-size: clamp(9px, .8vw, 11px); }
}
@media (min-width: 781px) and (max-width: 1100px) {
  .hero--scroll .hero__bottom { grid-template-columns: auto auto auto; }
}
@media (max-width: 1100px) {
  .hero--scroll .hero__copy h1 { font-size: clamp(78px, 9vw, 108px); }
  .hero--scroll .hero__inner { padding-top: 142px; }
  .story__statement { font-size: clamp(36px, 4.7vw, 55px); }
}
@media (max-width: 780px) {
  .hero--scroll .hero__inner { min-height: 690px; padding-top: 132px; }
  .hero--scroll .hero__copy h1 { font-size: clamp(66px, 11vw, 86px); }
  .hero--scroll .hero__copy p { font-size: 15px; max-width: 380px; }
  .hero__horizon { width: 200%; left: -50%; top: 75svh; }
  .hero__progress { top: 85px; }
  .hero--scroll .hero__bottom { padding-bottom: 28px; }
  .hero--scroll .hero__bottom .scroll-cue { display: none; }
  .scroll-scenes-ready:not(.scroll-scenes-static) .hero--scroll { height: 250svh; }
  .hero__narrative { padding-block: 80px; }
  .scroll-scenes-ready:not(.scroll-scenes-static) .hero__narrative { padding-top: 125px; padding-bottom: 60px; }
  .story__statement { font-size: clamp(32px, 5.6vw, 43px); line-height: 1.2; }
  .story__label { font-size: 12px; margin-bottom: 30px; }
  .story__signature { font-size: 11px; margin-top: 38px; }
  html:not(.js) .hero--scroll .hero__inner { padding-top: 290px; min-height: 840px; }
}
@media (max-width: 480px) {
  .hero--scroll .hero__copy h1 { font-size: clamp(60px, 16.8vw, 78px); }
  .hero--scroll .hero__copy p { font-size: 14px; max-width: 300px; }
  .hero--scroll .hero__copy .btn { margin-top: 24px; }
  .hero__horizon { width: 230%; left: -65%; top: 74svh; }
  .hero--scroll .hero__bottom { gap: 14px; }
  .hero--scroll .hero__proof { gap: 9px; }
  .hero--scroll .hero__proof strong { font-size: 31px; }
  .hero--scroll .hero__proof > span { font-size: 10px; }
  .story__statement { font-size: clamp(29px, 8vw, 37px); line-height: 1.22; }
  .story__statement + .story__statement { margin-top: 24px; }
  .story__label { font-size: 11px; gap: 9px; margin-bottom: 26px; }
  .story__signature { font-size: 10px; gap: 20px; margin-top: 32px; }
}
/* Short viewports and motion preferences use the readable, unpinned sequence. */
.scroll-scenes-static .hero--scroll { height: auto; }
.scroll-scenes-static .hero__stage { position: relative; height: auto; }
.scroll-scenes-static .hero__horizon { transform: none; }
.scroll-scenes-static .story-word { opacity: 1; }
.scroll-scenes-static .hero__intro, .scroll-scenes-static .hero__bottom { opacity: 1; transform: none; }
.scroll-scenes-static .universe-card { translate: none; }
@media (max-height: 650px) {
  .hero--scroll .hero__inner { height: auto; min-height: 690px; padding-top: 130px; }
  .hero__horizon { top: 510px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-wrap { transition: none; }
  .story-word { opacity: 1; }
}