/* motion-journey (docs/design/motion-journey/brief.md): the home page and the Portal's gate. The Void O carries from one
   page to the other in browsers with cross-document view transitions (motion-journey.js skips the transition while
   the flag is off, so the pages load as before); the orbit O shows while the gate waits on a slow session; live
   figures change on the T14 timing. Reduced motion: no transition, a still orbit, no tint. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: 160ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
::view-transition-group(void-o) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
/* The new page names its O itself: a transition only reaches it when the old page let one through. */
html:active-view-transition :is(.hs-mark, .gate-o) { view-transition-name: void-o; }

/* The orbit O (from the Embassy's void.gif idea, drawn in CSS): a dark core and two rings that turn on two axes while
   the gate waits, at most 4 turns, then rest as the O's ring. entry.js adds it after 300 ms of waiting. */
.vo-orbit { position: fixed; inset: 0; z-index: 210; display: grid; place-content: center; justify-items: center; gap: 16px; pointer-events: none; }
.vo-mark { position: relative; width: 88px; height: 88px; perspective: 400px; }
.vo-core { position: absolute; inset: 22%; border-radius: 50%; background: #05090d; box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.14); }
.vo-ring { position: absolute; inset: 6%; border: 2px solid rgba(242, 242, 239, 0.92); border-radius: 50%; }
.vo-ring + .vo-ring { border-color: rgba(56, 189, 248, 0.9); opacity: 0; }
.vo-label { color: var(--muted, #94A3B8); font: 500 0.8rem/1.4 var(--mono, ui-monospace, monospace); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: no-preference) {
  .vo-orbit { animation: vo-in 180ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  .vo-ring { animation: vo-turn-a 1.2s linear 4; }
  .vo-ring + .vo-ring { opacity: 1; animation: vo-turn-b 1.2s linear 4, vo-rest 180ms cubic-bezier(0.23, 1, 0.32, 1) 4.8s forwards; }
}
@keyframes vo-in { from { opacity: 0; } }
@keyframes vo-turn-a { 50% { transform: rotateY(180deg) rotateX(20deg); } to { transform: rotateY(360deg); } }
@keyframes vo-turn-b { 50% { transform: rotateX(180deg) rotateY(25deg); } to { transform: rotateX(360deg); } }
@keyframes vo-rest { to { opacity: 0; } }

/* A live figure that changed (pulse.js on home and the gate): T14's 240 ms instead of 1.1 s and 0.7 s. */
html[data-flag-motion-journey="on"] .odo-s { transition-duration: 300ms, 240ms; }
@media (prefers-reduced-motion: no-preference) {
  html[data-flag-motion-journey="on"] .flash-up { animation: flash-up 240ms cubic-bezier(0.23, 1, 0.32, 1); }
  html[data-flag-motion-journey="on"] .flash-down { animation: flash-down 240ms cubic-bezier(0.23, 1, 0.32, 1); }
}
/* Reduced motion means no motion: site.css stops transitions, this stops keyframe animations too. */
@media (prefers-reduced-motion: reduce) {
  html[data-flag-motion-journey="on"] *, html[data-flag-motion-journey="on"] *::before, html[data-flag-motion-journey="on"] *::after { animation: none !important; }
}