/*
 * Saga transition pass v11.
 *
 * The app changes the React scene about 160-180ms after a choice.  The previous
 * veil took 380ms to reach its peak, so the DOM and image could change while the
 * old scene was still plainly visible.  This pass gives every phase one motion
 * timeline: commit the choice, close the veil, exchange the scene, then reveal
 * the next still and its copy.
 */

.cinema-stage {
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/*
 * Use the veil—not a full-screen CSS filter—to hide the React scene exchange.
 * Filters on the complete 100svh stage caused extra compositing work and a
 * visible brightness step on Safari/Chrome during the handoff.
 */
.scene:not(.scene-entry) {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}

.cinema-stage::after {
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(12, 16, 17, 0.72),
      rgba(4, 6, 7, 0.98)
    ),
    #07090a;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

/* Peak darkness is reached before the 160-180ms React scene exchange. */
.cinema-stage.is-changing::after {
  opacity: 0.74;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/*
 * A handoff already contains both the outgoing and incoming still.  Let that
 * authored crossfade be seen instead of holding the dark veil over it.  The
 * target marker also prevents a one-frame dark pulse at the handoff boundary.
 */
.phase-handoff .cinema-stage.is-changing::after,
.cinema-stage.is-handoff-target::after,
.cinema-stage.is-handoff-target.is-changing::after {
  opacity: 0;
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The outgoing words leave before their image changes. */
.cinema-stage.is-changing .scene > .scene-copy {
  opacity: 0 !important;
  animation-play-state: paused !important;
  transition:
    opacity 170ms 60ms ease-in,
    transform 250ms cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}

.cinema-stage.is-changing
  .scene
  > .scene-copy:not(.transition-copy):not(.interlude-copy) {
  transform: translate3d(-50%, -9px, 0) !important;
}

.cinema-stage.is-changing
  .scene
  > :is(.transition-copy, .interlude-copy).scene-copy {
  transform: translate3d(-50%, calc(-45% - 9px), 0) !important;
}

/* Give the answer tap a clear, brief moment of commitment. */
.story-option.is-selected {
  position: relative;
  isolation: isolate;
  animation: saga-choice-commit 180ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.story-option.is-selected::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border: 1px solid rgba(231, 173, 104, 0.82);
  border-radius: inherit;
  box-shadow: 0 0 28px rgba(210, 154, 85, 0.2);
  opacity: 0;
  animation: saga-choice-glow 180ms ease-out both;
  pointer-events: none;
}

@keyframes saga-choice-commit {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.992);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes saga-choice-glow {
  0% {
    opacity: 0;
  }

  42% {
    opacity: 1;
  }

  100% {
    opacity: 0.35;
  }
}

/* Keep the two retained stills on compositor layers during the actual dissolve. */
.resolution-crossfade,
.resolution-before,
.resolution-after {
  contain: layout paint;
  backface-visibility: hidden;
}

.resolution-before,
.resolution-after {
  will-change: opacity;
}

/*
 * Hold every new question on its image alone, then let the story arrive in a
 * restrained reading sequence: orientation, prompt, and finally the choices.
 * The full reveal adds only 305ms beyond the previous single-block entrance.
 */
.scene-question > .question-shell.scene-copy {
  animation: saga-question-shell-enable 1ms 2000ms steps(1, end) backwards;
}

.scene-question > .question-shell.scene-copy > .question-meta {
  --saga-question-shift: 6px;
  animation: saga-question-layer-reveal 360ms 2000ms var(--settle) backwards;
}

.scene-question > .question-shell.scene-copy > .memory-echoes {
  --saga-question-shift: 8px;
  animation: saga-question-layer-reveal 420ms 2040ms var(--settle) backwards;
}

.scene-question > .question-shell.scene-copy > .question-scene-title {
  --saga-question-shift: 10px;
  margin: 0 0 10px;
  color: var(--amber);
  font-family: "Antonio Variable", "Arial Narrow", sans-serif;
  font-size: 0.7rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: saga-question-layer-reveal 440ms 2080ms var(--settle) backwards;
}

.scene-question > .question-shell.scene-copy > h1 {
  --saga-question-shift: 12px;
  animation: saga-question-layer-reveal 500ms 2080ms var(--settle) backwards;
}

.scene-question > .question-shell.scene-copy > .question-answer-guidance {
  --saga-question-shift: 9px;
  animation: saga-question-layer-reveal 440ms 2140ms var(--settle) backwards;
}

.scene-question
  > .question-shell.scene-copy
  > .option-stack
  > .story-option {
  --saga-question-shift: 9px;
  animation: saga-question-layer-reveal 420ms 2200ms var(--settle) backwards;
}

.scene-question
  > .question-shell.scene-copy
  > .option-stack
  > .story-option:nth-child(2) {
  animation-delay: 2235ms;
}

.scene-question
  > .question-shell.scene-copy
  > .option-stack
  > .story-option:nth-child(3) {
  animation-delay: 2270ms;
}

.scene-question
  > .question-shell.scene-copy
  > .option-stack
  > .story-option:nth-child(4) {
  animation-delay: 2305ms;
}

/*
 * Act thresholds and the final-winter bridge use their own centered scene
 * copy, so they need the same image-only hold as ordinary questions.
 */
.scene-transition > .transition-copy.scene-copy,
.scene-postfire > .transition-copy.scene-copy {
  animation:
    saga-question-shell-enable 1ms 2000ms steps(1, end) backwards,
    saga-centered-copy-reveal 500ms 2000ms var(--settle) backwards;
}

/* Keep the layered reveal clock aligned with the shell while the veil is closed. */
.cinema-stage.is-changing
  .scene-question
  > .question-shell.scene-copy
  > :is(.question-meta, .memory-echoes, .question-scene-title, h1),
.cinema-stage.is-changing
  .scene-question
  > .question-shell.scene-copy
  > .option-stack
  > .story-option:not(.is-selected) {
  animation-play-state: paused !important;
}

@keyframes saga-question-shell-enable {
  from {
    visibility: hidden;
  }

  to {
    visibility: visible;
  }
}

@keyframes saga-question-layer-reveal {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, var(--saga-question-shift, 10px), 0);
  }

  0.01% {
    visibility: visible;
  }

  100% {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.scene-resolution > .resolution-copy.scene-copy {
  animation:
    saga-question-shell-enable 1ms 2000ms steps(1, end) backwards,
    copy-rise 500ms 2000ms var(--settle) both;
}

@media (max-height: 720px) {
  .scene-question > .question-shell.scene-copy > .question-scene-title {
    margin-bottom: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-stage {
    transform: none;
  }

  .cinema-stage::after,
  .cinema-stage.is-changing::after,
  .phase-handoff .cinema-stage.is-changing::after,
  .cinema-stage.is-handoff-target::after {
    transition-duration: 100ms;
  }

  .cinema-stage.is-changing .scene > .scene-copy {
    transform: translate(-50%) !important;
    transition: opacity 100ms linear;
  }

  .cinema-stage.is-changing
    .scene
    > :is(.transition-copy, .interlude-copy).scene-copy {
    transform: translate(-50%, -45%) !important;
  }

  .story-option.is-selected,
  .story-option.is-selected::after {
    animation: none !important;
  }

  .scene-question > .question-shell.scene-copy,
  .scene-question > .question-shell.scene-copy > .question-meta,
  .scene-question > .question-shell.scene-copy > .memory-echoes,
  .scene-question > .question-shell.scene-copy > .question-scene-title,
  .scene-question > .question-shell.scene-copy > h1,
  .scene-question > .question-shell.scene-copy > .question-answer-guidance,
  .scene-question
    > .question-shell.scene-copy
    > .option-stack
    > .story-option {
    visibility: visible;
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .resolution-before,
  .resolution-after {
    will-change: auto;
  }
}