/* An exposure, not an animation. Things resolve; nothing springs. Grid, glow, crosshair and marks never move on their own. Loaded last. */
@keyframes plate-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes plate-close { to { opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes caret { 50% { opacity: 0; } }

/* Plate open: 320ms fade + 8px rise. Close: 160ms fade, no rise. */
.plate-region.is-open .card, .plate-region.is-open .full { animation: plate-open var(--d-enter) var(--ease-settle) both; }
.plate-region.is-closing .card, .plate-region.is-closing .full { animation: plate-close var(--d-state) var(--ease-exit) forwards; }

/* Era line: revealed 1200ms after first paint; the line box is reserved so nothing shifts. */
.era { opacity: 0; transform: translateY(8px); transition: opacity var(--d-enter) var(--ease-settle), transform var(--d-enter) var(--ease-settle); }
.era.is-shown { opacity: 1; transform: none; }

/* Crosshair lock (unseal): dashed 260 → 120 over 900ms; the dash goes solid over the final 200ms. */
.target .xh-dashed { transition: transform var(--d-lock) var(--ease-lock), stroke-dasharray 200ms linear 700ms; }
.target .crosshair { transition: color var(--d-lock) var(--ease-lock); }

/* The monolith scrolls through: it enters from the right of the first screen, crosses fully, and exits left as the first screen scrolls. CSS scroll timeline; core.js transforms it where unsupported. */
@keyframes monolith-slide { from { transform: translateX(0); } to { transform: translateX(-250vw); } }
@supports (animation-timeline: scroll()) {
  .monolith { animation: monolith-slide linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}

/* Index words swap, links settle to Ion */
.idx-btn .state { transition: color var(--d-state) var(--ease-settle); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .era { opacity: 1; transform: none; }
  .plate-region.is-open .card, .plate-region.is-open .full { opacity: 1; transform: none; }
  .target.is-locking .xh-dashed { display: none; }
  .monolith { animation: none !important; transform: none !important; }
  .spinner::after { top: -2px; }
}