/* Enhancement only: without JavaScript, on compact screens and with reduced
   motion, every chapter stays visible in normal document flow. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.is-motion-ready .hero-film {
    filter: grayscale(var(--hero-grayscale, 1)) saturate(var(--hero-saturation, .78));
    transform: scale(var(--hero-scale, 1.025));
    transition: filter .14s linear, transform .14s linear;
    will-change: filter, transform;
  }

  html.is-motion-ready .hero-scene {
    transform: translateY(calc(-50% + 36px));
    transition: opacity .72s cubic-bezier(.22,1,.36,1),
      transform .85s cubic-bezier(.22,1,.36,1),
      visibility .72s;
  }
  html.is-motion-ready .hero-scene.is-active {
    transform: translateY(-50%);
  }

  html.is-motion-ready .story-scene,
  html.is-motion-ready .signature-scene,
  html.is-motion-ready .closing-scene {
    transform: translateY(22px);
    transition: opacity .78s cubic-bezier(.22,1,.36,1),
      transform .9s cubic-bezier(.22,1,.36,1),
      visibility .78s;
  }
  html.is-motion-ready :is(.story-scene,.signature-scene,.closing-scene).is-active {
    transform: translateY(0);
  }

  html.is-motion-ready :is(.story-copy,.closing-scene) > :is(.eyebrow,h2,p,.text-button,.closing-links) {
    transition: opacity .8s cubic-bezier(.22,1,.36,1),
      transform .85s cubic-bezier(.22,1,.36,1);
  }
  html.is-motion-ready :is(.story-scene,.signature-scene,.closing-scene):not(.is-active)
    :is(.story-copy,.closing-scene) > :is(.eyebrow,h2,p,.text-button,.closing-links) {
    opacity: 0;
    transform: translateY(20px);
  }
  html.is-motion-ready :is(.story-scene,.signature-scene,.closing-scene).is-active
    :is(.story-copy,.closing-scene) > :is(.eyebrow,h2,p,.text-button,.closing-links) {
    opacity: 1;
    transform: translateY(0);
  }
  html.is-motion-ready .closing-scene:not(.is-active) > :is(.eyebrow,h2,p,.text-button,.closing-links) {
    opacity: 0;
    transform: translateY(20px);
  }
  html.is-motion-ready .closing-scene.is-active > :is(.eyebrow,h2,p,.text-button,.closing-links) {
    opacity: 1;
    transform: translateY(0);
  }
  html.is-motion-ready :is(.story-copy,.closing-scene) > h2 { transition-delay: .07s; }
  html.is-motion-ready :is(.story-copy,.closing-scene) > p:not(.eyebrow) { transition-delay: .17s; }
  html.is-motion-ready :is(.story-copy,.closing-scene) > :is(.text-button,.closing-links) { transition-delay: .25s; }

  html.is-motion-ready :is(.story-media,.signature-media,.closing-media) {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(.22,1,.36,1);
  }
  html.is-motion-ready :is(.story-scene,.signature-scene,.closing-scene).is-active
    :is(.story-media,.signature-media,.closing-media) {
    clip-path: inset(0 0 0 0);
  }

  html.is-motion-ready .stage--menu :is(.menu-stage h2,.menu-intro,.menu-choice) {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .78s cubic-bezier(.22,1,.36,1),
      transform .85s cubic-bezier(.22,1,.36,1);
  }
  html.is-motion-ready .stage--menu.is-revealed :is(.menu-stage h2,.menu-intro,.menu-choice) {
    opacity: 1;
    transform: translateY(0);
  }
  html.is-motion-ready .stage--menu .menu-intro { transition-delay: .09s; }
  html.is-motion-ready .stage--menu .menu-choice { transition-delay: .18s; }
}

/* On touch-size viewports the story scrolls vertically. Each chapter gets its
   own restrained entrance, while the film remains the dominant moving image. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  html.is-compact-motion-ready .hero-film {
    animation: compact-hero-film 1.55s cubic-bezier(.22,1,.36,1) both;
  }
  html.is-compact-motion-ready .hero-scene--intro > :is(.eyebrow,h1,.hero-primary-cta) {
    animation: compact-hero-copy .95s cubic-bezier(.22,1,.36,1) both;
  }
  html.is-compact-motion-ready .hero-scene--intro > h1 { animation-delay: .12s; }
  html.is-compact-motion-ready .hero-scene--intro > .hero-primary-cta { animation-delay: .28s; }

  html.is-compact-motion-ready :is(.story-scene,.signature-scene,.closing-scene,.menu-stage-content)
    :is(.story-overture-copy,.signature-overture-copy,.story-copy,.signature-kicker,.signature-copy,.eyebrow,h2,p,.text-button,.closing-links,.menu-choice) {
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  }
  html.is-compact-motion-ready :is(.story-scene,.signature-scene,.closing-scene,.menu-stage-content):not(.is-compact-inview)
    :is(.story-overture-copy,.signature-overture-copy,.story-copy,.signature-kicker,.signature-copy,.eyebrow,h2,p,.text-button,.closing-links,.menu-choice) {
    opacity: .42;
    transform: translateY(19px);
  }
  html.is-compact-motion-ready :is(.story-scene,.signature-scene,.closing-scene,.menu-stage-content).is-compact-inview
    :is(.story-overture-copy,.signature-overture-copy,.story-copy,.signature-kicker,.signature-copy,.eyebrow,h2,p,.text-button,.closing-links,.menu-choice) {
    opacity: 1;
    transform: translateY(0);
  }
  html.is-compact-motion-ready :is(.story-scene,.signature-scene,.closing-scene):not(.is-compact-inview)
    :is(.story-media,.signature-media) {
    clip-path: inset(7% 0 7% 0);
    transform: scale(.97);
  }
  html.is-compact-motion-ready :is(.story-scene,.signature-scene,.closing-scene).is-compact-inview
    :is(.story-media,.signature-media) {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
  html.is-compact-motion-ready :is(.story-media,.signature-media) {
    transition: clip-path 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
  }
  html.is-compact-motion-ready .menu-stage-content .menu-choice { transition-delay: .12s; }
  @keyframes compact-hero-film {
    from { filter: grayscale(.72) saturate(.82); transform: scale(1.08); }
    to { filter: grayscale(0) saturate(1); transform: scale(1); }
  }
  @keyframes compact-hero-copy {
    from { opacity: .15; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Safari renders H.264 as an animated image when video autoplay is denied.
   Other browsers select the short animated WebP from the same picture. */
video.has-motion-fallback { visibility: hidden; }
picture.film-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
  pointer-events: none;
}
picture.film-fallback img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.story-media picture.film-fallback img { filter: saturate(.85) contrast(.97); }
.signature-media picture.film-fallback img { transform: scale(var(--media-scale, 1)); }
@media (min-width: 1024px) {
  .story-media picture.film-fallback img {
    transform: translateY(var(--media-shift, 0px)) scale(var(--media-scale, 1.06));
  }
}