/* The original hero and release remain the default, including without JS/WebGL. */
/* This stylesheet is homepage-only. Fragment navigation finishes before the
   asynchronous sticky sequence changes the document's height. */
html { scroll-behavior: auto; }
.home-page { overflow-anchor: none; }
.story-canvas, .story-dream, .story-cue { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .scroll-story.is-story-ready {
    --story-height: 100svh;
    --story-travel: 240svh;
    position: relative;
    height: calc(var(--story-height) + var(--story-travel));
    isolation: isolate;
    overflow-anchor: none;
  }
  .is-story-ready .story-stage,
  .is-story-ready .story-landing {
    position: sticky;
    top: 0;
    height: var(--story-height);
    min-height: 0;
  }
  .is-story-ready .story-stage {
    display: block;
    overflow: hidden;
    background: var(--paper);
    z-index: 0;
  }
  .is-story-ready .hero-image { opacity: 0; animation: none; transform: none; }
  .is-story-ready .story-canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .is-story-ready .hero:after { z-index: 1; opacity: var(--story-shade, 1); }
  .is-story-ready .hero-content {
    position: absolute;
    top: clamp(36px, 9svh, 100px);
    right: var(--gutter);
    width: 38%;
    max-width: 540px;
    margin: 0;
    z-index: 2;
    opacity: var(--story-intro, 1);
    transform: translateY(var(--story-intro-y, 0px));
    animation: none;
  }
  .is-story-ready .hero-signature {
    position: absolute;
    bottom: calc(clamp(42px, 7svh, 76px) + var(--story-header-height, 0px));
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
    z-index: 2;
    opacity: var(--story-signature, 1);
    transform: translateX(var(--story-signature-x, 0px));
    animation: none;
  }
  .is-story-ready .story-cue {
    display: flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    left: var(--gutter);
    bottom: calc(22px + var(--story-header-height, 0px));
    z-index: 2;
    color: #c9d4e5;
    font-size: .625rem;
    line-height: 1.4;
    letter-spacing: .16em;
    opacity: var(--story-cue, 1);
  }
  .story-cue-line { width: 54px; height: 1px; background: currentColor; }
  .is-story-ready .story-dream {
    display: block;
    position: absolute;
    left: var(--gutter);
    top: 37%;
    max-width: min(670px, 70%);
    z-index: 2;
    font-family: var(--serif);
    font-size: clamp(1.5625rem, 2.5vw, 2.5rem);
    line-height: 1.95;
    letter-spacing: .035em;
    color: var(--paper);
    text-shadow: 0 2px 24px #030912, 0 0 70px #030912;
    opacity: var(--story-dream, 0);
    transform: translateY(var(--story-dream-y, 20px));
    pointer-events: none;
  }
  .is-story-ready .story-dream-kicker {
    font-family: var(--sans);
    font-size: .75rem;
    letter-spacing: .18em;
    margin-bottom: 20px;
  }
  .is-story-ready .story-dream:before {
    content: "";
    position: absolute;
    inset: -64px -90px;
    z-index: -1;
    background: radial-gradient(ellipse at 35% 50%, rgba(3,9,18,.76), rgba(3,9,18,.3) 48%, transparent 72%);
  }
  .is-story-ready .story-landing {
    margin-top: calc(-1 * var(--story-height));
    padding: clamp(28px, 5svh, 64px) var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    color: var(--ink);
    z-index: 3;
    pointer-events: none;
  }
  .is-story-ready .story-landing:not([inert]) { pointer-events: auto; }
  .is-story-ready .story-landing .section-index {
    flex: 0 0 auto;
    margin-bottom: 22px;
    opacity: var(--story-landing, 0);
  }
  .is-story-ready .latest-layout {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 7vw, 110px);
  }
  .is-story-ready .latest-layout > * {
    transform: none;
    transition: none;
    animation: none;
  }
  .is-story-ready .latest-layout > div { opacity: var(--story-landing, 0); }
  .is-story-ready .story-landing .album-cover {
    width: min(100%, 49svh, 550px);
    margin: 0;
    box-shadow: none;
    opacity: var(--story-cover, 0);
  }
  .is-story-ready .story-landing h2 {
    font-size: clamp(2.5rem, 5.3vw, 5.5rem);
    margin: 18px 0;
  }
  .is-story-ready .story-landing .release-copy {
    font-size: clamp(1.125rem, 1.7vw, 1.625rem);
    line-height: 1.95;
  }
  .is-story-ready .story-landing .release-body { margin-top: 18px; line-height: 1.85; }
  .is-story-ready .story-landing .title-reading { margin-bottom: 16px; }
  .is-story-ready .story-landing .actions { margin-top: 24px; }
  .is-story-ready .story-landing .latest-footnote { margin-top: 20px; }
  @media (max-width: 700px) {
    .scroll-story.is-story-ready { --story-travel: 205svh; }
    .is-story-ready .hero-content {
      top: auto;
      bottom: calc(24% + var(--story-header-height, 0px));
      left: var(--gutter);
      right: var(--gutter);
      width: auto;
      max-width: none;
    }
    .is-story-ready .hero .eyebrow { font-size: .625rem; margin-bottom: 12px; }
    .is-story-ready .hero-copy { font-size: clamp(1.625rem, 7.2vw, 2.5rem); }
    .is-story-ready .hero-text { font-size: .875rem; margin-top: 12px; }
    .is-story-ready .hero-actions { margin-top: 10px; }
    .is-story-ready .hero-actions .text-link { font-size: .8125rem; }
    .is-story-ready .hero-signature { bottom: calc(9% + var(--story-header-height, 0px)); }
    .is-story-ready .hero-signature p { font-size: .625rem; margin-bottom: 12px; }
    .is-story-ready .hero-signature h1 { font-size: 10vw; }
    .is-story-ready .story-cue { bottom: calc(24px + var(--story-header-height, 0px)); font-size: .5625rem; }
    .is-story-ready .story-dream {
      top: 45%;
      right: var(--gutter);
      max-width: none;
      font-size: clamp(1.25rem, 5.5vw, 1.625rem);
      line-height: 2;
    }
    .is-story-ready .story-dream-kicker { font-size: .6875rem; margin-bottom: 16px; }
    .is-story-ready .story-landing { padding: 24px var(--gutter); }
    .is-story-ready .story-landing .section-index { font-size: .625rem; margin-bottom: 16px; }
    .is-story-ready .latest-layout { grid-template-columns: 1fr; gap: 20px; }
    .is-story-ready .story-landing .album-cover { width: clamp(128px, 24svh, 230px); }
    .is-story-ready .story-landing .release-meta { font-size: .6875rem; }
    .is-story-ready .story-landing h2 { font-size: 2.5rem; margin: 10px 0; }
    .is-story-ready .story-landing .title-reading { font-size: .8125rem; margin: 0 0 10px; }
    .is-story-ready .story-landing .release-copy,
    .is-story-ready .story-landing .release-body { font-size: .9375rem; line-height: 1.85; margin-top: 0; }
    .is-story-ready .story-landing .actions { gap: 8px 20px; margin-top: 16px; }
    .is-story-ready .story-landing .button { min-height: 46px; padding: 10px 16px; font-size: .8125rem; }
    .is-story-ready .story-landing .text-link { font-size: .8125rem; min-height: 44px; padding: 8px 0; }
    .is-story-ready .story-landing .latest-footnote { font-size: .625rem; margin-top: 12px; }
  }
}

/* A preference change works immediately, before the JS listener has run. */
@media (prefers-reduced-motion: reduce), print {
  .story-canvas, .story-dream, .story-cue { display: none !important; }
}