/* ============================================================
   animations.css � Shared Motion & Transition Rules (Shared)
   ============================================================ */

@keyframes blink {
  0%,  94% { transform: translateY(-94px); }
  96%       { transform: translateY(30px);  }
  100%      { transform: translateY(-94px); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* -- Page Load Transition -- */
body {
  animation: pageLoadFade 0.2s ease-out forwards;
}

@keyframes pageLoadFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.page-leaving {
  animation: pageLeaveFade 0.15s ease-in forwards;
}

@keyframes pageLeaveFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}

/* -- Cross-document View Transitions --
   Opts every page that loads this stylesheet into the browser's native
   cross-document View Transition (Chromium 126+): navigating between pages
   (index.html <-> retinoscopy.html / refraction-simulator.html /
   visual_pathway.html) crossfades the old and new document instead of the
   default blank-white swap, so it no longer feels like jumping to an
   unrelated site. Deliberately a plain whole-page crossfade — no named
   shared elements (see the note on .site-header in layout-app.css for why
   morphing the header specifically backfired). No-op — and no error — in
   browsers that don't support it (Firefox/Safari), which fall back to the
   manual fade handled in js/shared/app-nav.js. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Chrome's default cross-document crossfade blends the old/new snapshots
   with mix-blend-mode: plus-lighter (additive). Two near-identical solid
   page backgrounds blended additively brighten toward white for the
   duration of the fade, which reads as a visible flash/flicker mid-
   transition — isolate() scopes the blend change to the transition layer
   only, and mix-blend-mode: normal makes it a plain alpha crossfade instead. */
::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: 0.16s;
  animation-timing-function: ease-out;
}

::view-transition-group(root) {
  animation-duration: 0.16s;
}