/* Startle cross-page transition · landing (v4-next) <-> preview (labs/startle/s3).
   The SAME file lives at labs/startle/s3/transition.css: cross-document View Transition pseudo-elements render in the
   INCOMING document, so each page must carry the choreography for both directions. Keep the two copies identical.
   Names are assigned by transition.js only at navigation time (pageswap / pagereveal):
     startle-prompt  shared prompt box (morphs position + size)
     startle-bg      backdrop / horizon (crossfade, slightly longer)
     startle-title, startle-rise-a, startle-rise-b   preview-only groups that rise in with stagger
   Motion: transform / opacity only, every animation done by 500 ms. */

@view-transition { navigation: auto; }

/* Pass 7 (smoothness): every animation ends by 500 ms (delay + duration), transform / opacity only, no blend modes, and
   few named groups (the landing names two; the preview's title / rise groups are optional extras). */
:root {
  --svt-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* soft settle */
  --svt-ease-out: cubic-bezier(0.55, 0, 0.75, 0.2); /* quick, accelerating exit */
  --svt-dur: 440ms;
}

/* ── shared element: the prompt box ─────────────────────────────────────────────── */
::view-transition-group(startle-prompt) {
  animation-duration: var(--svt-dur);
  animation-timing-function: var(--svt-ease);
  z-index: 20;
}
::view-transition-image-pair(startle-prompt) { overflow: clip; border-radius: 24px; }
::view-transition-old(startle-prompt),
::view-transition-new(startle-prompt) {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  mix-blend-mode: normal;
}
::view-transition-old(startle-prompt) { animation: svt-fade-out 200ms linear both; }
::view-transition-new(startle-prompt) { animation: svt-fade-in 300ms linear 80ms both; }

/* ── backdrop / horizon: a steady crossfade under everything ────────────────────── */
::view-transition-group(startle-bg) { animation-duration: var(--svt-dur); animation-timing-function: var(--svt-ease); z-index: 0; }
::view-transition-old(startle-bg) { animation: svt-fade-out 320ms linear both; }
::view-transition-new(startle-bg) { animation: svt-fade-in 440ms linear both; }
::view-transition-old(root), ::view-transition-new(root) { z-index: 1; }

/* ── landing -> preview ─────────────────────────────────────────────────────────── */
html:active-view-transition-type(startle-to-preview)::view-transition-old(root) {
  animation: svt-dissolve-out 260ms var(--svt-ease-out) both;
}
html:active-view-transition-type(startle-to-preview)::view-transition-new(root) {
  animation: svt-rise-in 380ms var(--svt-ease) 80ms both;
}
html:active-view-transition-type(startle-to-preview)::view-transition-new(startle-title) { animation: svt-rise-in 360ms var(--svt-ease) 90ms both; }
html:active-view-transition-type(startle-to-preview)::view-transition-new(startle-rise-a) { animation: svt-rise-in 360ms var(--svt-ease) 120ms both; }
html:active-view-transition-type(startle-to-preview)::view-transition-new(startle-rise-b) { animation: svt-rise-in 360ms var(--svt-ease) 140ms both; }
::view-transition-group(startle-title), ::view-transition-group(startle-rise-a), ::view-transition-group(startle-rise-b) { z-index: 10; animation-duration: 0s; }

/* ── preview -> landing (reverse) ───────────────────────────────────────────────── */
html:active-view-transition-type(startle-to-landing)::view-transition-old(root) {
  animation: svt-sink-out 240ms var(--svt-ease-out) both;
}
html:active-view-transition-type(startle-to-landing)::view-transition-new(root) {
  animation: svt-focus-in 400ms var(--svt-ease) 60ms both;
}
html:active-view-transition-type(startle-to-landing)::view-transition-old(startle-title),
html:active-view-transition-type(startle-to-landing)::view-transition-old(startle-rise-a),
html:active-view-transition-type(startle-to-landing)::view-transition-old(startle-rise-b) {
  animation: svt-sink-out 240ms var(--svt-ease-out) both;
}

@keyframes svt-fade-in { from { opacity: 0; } }
@keyframes svt-fade-out { to { opacity: 0; } }
@keyframes svt-dissolve-out { to { opacity: 0; transform: translateY(-1%) scale(0.96); } }
@keyframes svt-rise-in { from { opacity: 0; transform: translateY(18px) scale(0.99); } }
@keyframes svt-sink-out { to { opacity: 0; transform: translateY(16px) scale(0.99); } }
@keyframes svt-focus-in { from { opacity: 0; transform: scale(1.03); } }

/* ── frozen outgoing page (pass 7): transition.js fires "startle:freeze" just before navigating; the landing shell holds
   its rAF loops and adds this class. CSS loops hold their current frame (a still picture for the snapshot). ──────── */
html.svt-frozen *, html.svt-frozen *::before, html.svt-frozen *::after { animation-play-state: paused !important; }

/* ── reduced motion: plain crossfade, no morph travel ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s !important; }
  html::view-transition-old(*) { animation: svt-fade-out 220ms linear both !important; }
  html::view-transition-new(*) { animation: svt-fade-in 260ms linear both !important; }
}

/* ── JS fallback veil (browsers without cross-document view transitions) ─────────── */
.svt-veil {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: #000; opacity: 0;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.svt-veil.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .svt-veil { transition-duration: 140ms; } }