/*
 * Round 3 system: motion. Arrival plays once and finishes by itself;
 * everything after answers the hand. Transform and opacity only; 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 620ms 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; }
.rise--1 { --i: 1; } .rise--2 { --i: 2; } .rise--3 { --i: 3; } .rise--4 { --i: 4; }

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

/* ---------- the passage out, to another of Laura's sites: 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%; overflow: hidden; background: var(--passage-ground, var(--paper)); transform-origin: 50% 50%; }
.passage-disc .weave { position: absolute; inset: 0; width: 100%; height: 100%; }
.passage-disc .weave rect { opacity: var(--weave-ground); }
.passage-name { position: relative; display: grid; justify-items: center; gap: var(--s-3); text-align: center; color: var(--ink-family); font-family: var(--face-head); font-weight: 600; font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); line-height: 1.05; }
.passage-name .seal-icon { --seal-size: clamp(64px, 10vw, 112px); }
.passage-name small { display: block; font-family: var(--face-note); font-weight: 600; font-size: 1.1rem; color: var(--ink-family-2); }
html.is-leaving main, html.is-leaving .site-footer { opacity: .6; transition: opacity 200ms ease-out; }
.passage--organise { --passage-ground: light-dark(#F8F0E5, #2A231D); --area-pat: url(#pat-organise); }
.passage--simplify { --passage-ground: light-dark(#F6EFDE, #2E281E); --area-pat: url(#pat-simplify); }
.passage--juggle { --passage-ground: light-dark(#F0EEDF, #2A281F); --area-pat: url(#pat-juggle); }
.passage--declutter { --passage-ground: light-dark(#EEEEE3, #282822); --area-pat: url(#pat-declutter); }
.passage--stage { --passage-ground: light-dark(#EDEDE5, #282824); --area-pat: url(#pat-stage); }
.passage--style { --passage-ground: light-dark(#F5F1EA, #22232B); --area-pat: url(#pat-style); }
.passage--celebrate { --passage-ground: light-dark(#F7F0EE, #272129); --area-pat: url(#pat-celebrate); }
.passage--design { --passage-ground: light-dark(#F4E8E3, #2E2523); --area-pat: url(#pat-design); }
.passage--share { --passage-ground: light-dark(#F5E8E0, #2E2521); --area-pat: url(#pat-share); }
.passage--hub, .passage--gifttrix, .passage--apps { --passage-ground: var(--paper); --area-pat: url(#pat-apps); }

/* ---------- the passage in: the arriving ground covers the first frame, then shrinks into the round ---------- */
.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(--ground);
  animation: passage-in 420ms var(--ease-out) 60ms both;
}
.passage-in .weave { position: absolute; inset: 0; width: 100%; height: 100%; }
.passage-in .weave rect { opacity: var(--weave-ground); }
.passage-in .seal-icon { position: relative; --seal-size: clamp(72px, 12vw, 128px); }
html[data-arrived-from-hub] .passage-in .seal-icon { animation: passage-in-seal 360ms ease-out 40ms both; }
html.lt-js:not(.lt-ready) .passage-in, html.lt-js:not(.lt-ready) .passage-in .seal-icon { animation-play-state: paused; }
@keyframes passage-in { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
@keyframes passage-in-seal { to { opacity: 0; transform: scale(.6); } }
@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 .seal-icon { animation: none; }
}
@keyframes passage-in-calm { to { opacity: 0; visibility: hidden; } }

/* ---------- presses: everything pressable answers at once (10.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  .call, .btn, .nav-sites, .theme-toggle, .bar-contents { transition-property: background-color, color, border-color; }
  .call:active, .btn:active { transform: none; }
  .nav-sites:hover .seal-icon, .site-door:hover .seal-icon { transform: none; }
}