/* Cinematic scroll layer — additive over editions-20260805.css (immutable, never edit that one).
 * Pinned hero backdrop that the page scrolls over, scroll-scrubbed glow, hero parallax exit,
 * gradient seams on the violet chapter. Pure CSS scroll-driven animations; browsers without
 * animation-timeline keep today's layout untouched, and reduced-motion users get nothing extra.
 */

/* Soft seams: the violet chapter fades in from and back out to the page background. */
.ed-chapter.is-violet::before,
.ed-chapter.is-violet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
}
.ed-chapter.is-violet::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.ed-chapter.is-violet::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }
.ed-chapter.is-violet .ed-chapter-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* Backdrop pinned to the viewport; hero copy (z 2) and every chapter (positioned, later in
       DOM) paint over it, so everything here must stay at z-index 0. */
    .ed-hero-canvas, .ed-loc-hero-canvas,
    .ed-hero-veil, .ed-loc-hero-veil,
    .ed-hero .ed-orb, .ed-loc-hero .ed-orb {
      position: fixed;
      z-index: 0;
    }
    .ed-hero, .ed-loc-hero { overflow: visible; }

    /* The backdrop "plays on scroll": it thins out over the first screen and a half,
       so the chapters land on the plain page background. */
    .ed-hero-canvas, .ed-loc-hero-canvas,
    .ed-hero-veil, .ed-loc-hero-veil {
      animation: cinema-fade linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 150vh;
    }
    /* Orb drift is scrubbed by scroll instead of the clock; each fades from its own opacity. */
    .ed-hero .ed-orb, .ed-loc-hero .ed-orb {
      animation-name: orb-drift, cinema-fade-a;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root), scroll(root);
      animation-range: 0px 100vh, 0px 150vh;
    }
    .ed-hero .ed-orb.b, .ed-loc-hero .ed-orb.b { animation-name: orb-drift, cinema-fade-b; }
    .ed-hero .ed-orb.c, .ed-loc-hero .ed-orb.c { animation-name: orb-drift, cinema-fade-c; }

    /* Hero copy lifts and dims as it leaves, slightly slower than the page (parallax). */
    .ed-hero-inner, .ed-loc-hero-inner {
      animation: cinema-exit linear both;
      animation-timeline: view();
      animation-range: exit 30% exit 100%;
    }

    /* Chapters settle from a slight scale-down over their first 260px of entry. */
    .ed-chapter-inner {
      animation: cinema-enter linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 260px;
    }
  }
}

@keyframes cinema-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes cinema-fade-a { from { opacity: 0.55; } to { opacity: 0; } }
@keyframes cinema-fade-b { from { opacity: 0.35; } to { opacity: 0; } }
@keyframes cinema-fade-c { from { opacity: 0.25; } to { opacity: 0; } }
@keyframes cinema-exit {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-60px); opacity: 0; }
}
@keyframes cinema-enter {
  from { transform: scale(0.97); opacity: 0.85; }
  to { transform: none; opacity: 1; }
}

/* ── Background video layers (assets/video-20260905/) ─────────────────────── */
.ed-hero-video, .ed-loc-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.ed-hero:has(.ed-hero-video) .ed-hero-canvas,
.ed-loc-hero:has(.ed-loc-hero-video) .ed-loc-hero-canvas { display: none; }

/* Chapter backdrop: anchored to the chapter top, capped so it never upscales past ~1.3 screens,
   and masked out toward the bottom so long chapters end on the plain background. */
.ed-chapter:has(> .ed-chapter-video) { overflow: hidden; isolation: isolate; }
.ed-chapter-video {
  position: absolute; top: 0; left: 0; width: 100%; height: min(100%, 130vh);
  object-fit: cover; z-index: 0; opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.ed-chapter:has(> .ed-chapter-video) > .ed-chapter-inner { position: relative; z-index: 1; }

/* Panels and footer: the clip sits between the box's own background and its content. */
.ed-panel:has(> .ed-panel-video), .ed-footer:has(> .ed-footer-video) { position: relative; overflow: hidden; isolation: isolate; }
.ed-panel-video, .ed-footer-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1; opacity: 0.55; pointer-events: none;
}
.ed-footer-video { opacity: 0.45; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }

@media (prefers-reduced-motion: reduce) {
  .ed-hero-video, .ed-loc-hero-video, .ed-chapter-video, .ed-panel-video, .ed-footer-video { display: none; }
  .ed-hero:has(.ed-hero-video) .ed-hero-canvas, .ed-loc-hero:has(.ed-loc-hero-video) .ed-loc-hero-canvas { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .ed-hero-video, .ed-loc-hero-video {
      position: fixed;
      animation: cinema-fade linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 150vh;
    }
  }
}

/* "Pause motion" control (injected by editions-video-20260905.js into the on-page rail). */
.ed-motion-toggle {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 4px; padding: 6px 12px; min-height: 32px;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.ed-motion-toggle:hover, .ed-motion-toggle:focus-visible { color: var(--ink); border-color: var(--orange-2); outline: none; }
body > .ed-motion-toggle { position: fixed; left: 12px; bottom: 12px; z-index: 60; background: var(--glass); }
.ed-motion-off video[poster] { opacity: 0.6; }