/*
 * The Round: motion. Arrival plays once and finishes by itself; everything
 * after answers the hand. Transform and opacity only; cubic-bezier easing.
 * Under reduced motion every state is still shown, by a short fade or at once.
 */

/* Words rise from visible on arrival (never from hidden). */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise var(--t-arrive) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes rise { from { transform: translateY(14px); opacity: .2; } }
html.lt-js:not(.lt-ready) .rise { animation-play-state: paused; }

/* Same-host page changes: the dial morphs between readings, the rest crossfades. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(dial) { animation-duration: var(--t-open); animation-timing-function: var(--ease-out); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
}

/* ---------- The passage out: drawn by passage.js ---------- */
.passage {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
}
.passage-disc {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: var(--area-tint, var(--paper));
  transform-origin: 50% 50%;
}
.passage-name {
  position: relative; text-align: center; color: var(--ink-family);
  font-family: var(--face-family); font-weight: 650; letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 6rem); line-height: 1;
}
.passage-name small { display: block; margin-top: .6rem; font-family: var(--face-text); font-weight: 450; font-size: 1rem; letter-spacing: 0; color: var(--ink-family-2); }
html.is-leaving .plate .ann, html.is-leaving .plate .plate-layer, html.is-leaving .seal-centre { opacity: 0; transition: opacity 200ms ease-out; }

/* ---------- The passage in: the incoming site's first frame, then it gives way ---------- */
.passage-in { display: none; }
html[data-arrived-from-hub] .passage-in {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: var(--passage-ground, var(--ground));
  animation: passage-in 420ms var(--ease-out) 60ms both;
}
html[data-arrived-from-hub] .passage-in > * { animation: passage-in-name 300ms ease-out 40ms both; }
html.lt-js:not(.lt-ready) .passage-in, html.lt-js:not(.lt-ready) .passage-in > * { animation-play-state: paused; }
@keyframes passage-in { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
@keyframes passage-in-name { to { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  html[data-arrived-from-hub] .passage-in { animation: passage-in-calm 180ms ease-out both; }
  html[data-arrived-from-hub] .passage-in > * { animation: none; }
}
@keyframes passage-in-calm { to { opacity: 0; visibility: hidden; } }

/* ---------- Presses ---------- */
@media (prefers-reduced-motion: reduce) {
  .call, .btn, .chip, .header-link, .theme-toggle, .dock-ring { transition-property: background-color, color, border-color; }
  .call:active, .btn:active, .chip:active, .theme-toggle:active, .dock-ring:active { transform: none; }
  .brand:hover .brand-mark { transform: none; }
}