/* experiment/river-crossing-openai-v9
   The live spark itself inherits the terminal canvas coordinate. No bridge
   spark, renderer crossfade or font-dependent second positioning step. */

html.threshold-handoff #prologue {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* First-paint bridge: the same settled target and CSS cover geometry used by
   the terminal Crossing frame. It remains the only visible authored object
   while ownership passes from WebGL to the live Games atmosphere. */
html.threshold-handoff body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-color: #050510;
  background-image: url("../threshold-integration/prebaked/river-games-settled-desktop.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  animation: river-handoff-cover-release 920ms cubic-bezier(.18,.72,.22,1) 160ms both;
}

@media (max-width: 700px) {
  html.threshold-handoff body::before {
    background-image: url("../threshold-integration/prebaked/river-games-settled-iphone.svg");
  }
}

/* Keep the arrival focused on one continuous visual fact: atmosphere ->
   spark -> thesis. Navigation and the chapter label do not exist yet, so the
   destination cannot read as a fully assembled replacement document. */
html.threshold-handoff:not(.threshold-arrival-ready) #prologue .narr,
html.threshold-handoff:not(.threshold-arrival-ready) #prologue .narr.in {
  opacity: 0 !important;
  filter: blur(5px) !important;
  transform: translate3d(0,14px,0) scale(.99) !important;
}

html.threshold-handoff:not(.threshold-arrival-ready) #side-nav,
html.threshold-handoff:not(.threshold-arrival-ready) #mobile-chapter {
  opacity: 0 !important;
  transition: none !important;
}

html.threshold-handoff.threshold-arrival-ready #side-nav,
html.threshold-handoff.threshold-arrival-ready #mobile-chapter {
  opacity: .85 !important;
  transition: opacity 720ms ease-out !important;
}

@media (min-width: 641px) {
  html.threshold-handoff.threshold-arrival-ready #side-nav {
    opacity: 1 !important;
  }
}

/* The thesis starts after ownership of the already-small spark has begun to
   pass to the real document. */
html.threshold-handoff #prologue > .field > p:first-of-type {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0,10px,0) scale(.992);
  animation: threshold-thesis-arrive 1180ms cubic-bezier(.16,.72,.20,1) 860ms both;
}

/* Preserve the original 3px + margin layout slot, but anchor the actual spark
   to the prologue section. It scrolls with Games (not fixed to the screen).
   Direct entries keep the untouched V8 layout and animation. */
html.threshold-handoff #prologue > .field { position: static; }
html.threshold-handoff #prologue > .field::before {
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 2.6rem;
}
html.threshold-handoff #prologue .spark {
  position: absolute;
  top: calc(var(--river-spark-y) - 1.5px);
  left: calc(50% - 1.5px);
  margin: 0;
  z-index: 12;
  opacity: .5;
  animation: pulse 3s ease-in-out 1020ms infinite;
}

/* Once the thesis has begun to settle, release the remaining visible
   prologue lines as a measured cascade. */
html.threshold-handoff.threshold-arrival-ready #prologue .narr.in {
  animation: threshold-narr-arrive 820ms cubic-bezier(.18,.70,.22,1) both;
}
html.threshold-handoff.threshold-arrival-ready #prologue .narr:nth-of-type(2).in { animation-delay: 0ms; }
html.threshold-handoff.threshold-arrival-ready #prologue .narr:nth-of-type(3).in { animation-delay: 140ms; }
html.threshold-handoff.threshold-arrival-ready #prologue .narr:nth-of-type(4).in { animation-delay: 280ms; }
html.threshold-handoff.threshold-arrival-ready #prologue .narr:nth-of-type(5).in { animation-delay: 420ms; }
html.threshold-handoff.threshold-arrival-ready #prologue .narr:nth-of-type(6).in { animation-delay: 560ms; }

@keyframes river-handoff-cover-release {
  0% { opacity: 1; }
  24% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes threshold-thesis-arrive {
  0% { opacity: 0; filter: blur(5px); transform: translate3d(0,10px,0) scale(.992); }
  55% { opacity: .72; }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
}

@keyframes threshold-narr-arrive {
  0% { opacity: 0; filter: blur(5px); transform: translate3d(0,14px,0) scale(.99); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.threshold-handoff body::before {
    animation-duration: 220ms;
    animation-delay: 0ms;
  }
  html.threshold-handoff #prologue > .field > p:first-of-type,
  html.threshold-handoff.threshold-arrival-ready #prologue .narr.in {
    animation-duration: 320ms;
    animation-delay: 0ms;
    filter: none;
    transform: none;
  }
  html.threshold-handoff #side-nav,
  html.threshold-handoff #mobile-chapter {
    transition-delay: 0ms !important;
    transition-duration: 300ms !important;
  }
  html.threshold-handoff #prologue .spark {
    animation: none !important;
    opacity: .5;
    transform: none;
    box-shadow: 0 0 20px 6px rgba(255,255,255,.5);
  }
}