/* ============================================================================
   thecrucial77 — shared page-transition layer.
   Loaded by every page on the domain so moving between the directory, the
   floor, the game and the study system reads as one continuous surface
   rather than four separate sites.

   Two mechanisms, deliberately:
   1. Cross-document View Transitions, where the browser supports them. The
      browser itself holds the old frame, paints the new one, and cross-fades
      between them — no flash of empty page at all.
   2. An overlay fallback everywhere else: fade to ink on the way out, fade
      back in on arrival. Same felt effect, no dependency.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: c77-out .30s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: c77-in .42s cubic-bezier(0,0,.2,1) both;
}
@keyframes c77-out { to { opacity: 0; transform: scale(.985); filter: blur(3px); } }
@keyframes c77-in  { from { opacity: 0; transform: scale(1.012); filter: blur(4px); } }

/* elements can opt into being carried across documents by name */
.c77-morph { view-transition-name: c77-morph; }

/* ---- fallback overlay ---------------------------------------------------- */
#c77-veil {
  position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, #0a1226 0%, #04060c 70%);
  opacity: 0; transition: opacity .30s cubic-bezier(.4,0,1,1);
}
#c77-veil.is-out { opacity: 1; pointer-events: auto; }

/* the veil is the colour of the page it covers */
:root[data-theme="light"] #c77-veil {
  background: radial-gradient(120% 100% at 50% 40%, #ffffff 0%, #e9eefb 70%);
}

/* arrival: only used when View Transitions are unavailable */
html.c77-fallback body { animation: c77-arrive .46s cubic-bezier(0,0,.2,1) both; }
@keyframes c77-arrive { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  #c77-veil { transition: none; }
  html.c77-fallback body { animation: none; }
}