/* ============================================================
   Window-swap transition — self-driven (no View Transitions API).

   The desktop stays; only the open software swaps. Driven by plain
   CSS/JS so it plays on EVERY navigation regardless of tab focus.

     • EXIT  — click a nav link → the current window drops off the
       bottom, and a flat #f6f6f4 "wash" fades in over the mesh/ground
       so the two pages' different backgrounds never hard-cut. The
       menubar and the dropping window stay on top of the wash.
     • NAV   — once the drop has played.
     • ENTER — the arriving page starts under the wash (set pre-paint
       by a tiny inline <head> script when kosSwap is flagged), so the
       fresh mesh is hidden; the wash then fades out to reveal it. The
       window rises from the bottom (its own intro) and the desktop
       icons fly in from the margins (above the wash).

   Reduced-motion / non-simple clicks / external links → plain nav.
   ============================================================ */

/* ---- the shared-colour wash that hides the background swap ---- */
.kos-wash {
  position: fixed; inset: 0; z-index: 15;   /* over mesh/ground (1–10), under window(20) + bar(40) */
  background: #f6f6f4;                       /* both pages' base colour → seamless in and out */
  opacity: 0; pointer-events: none;
}

/* ---- EXIT: window drops (above the wash); wash covers the ground ----
   Gated on .kos-win-drop, which transition.js only adds when you are leaving
   from the TOP. Scrolled, the window has released into the document and is
   mostly above the viewport, so dropping it 94vh animated nothing you could
   see while still costing a composited layer on the way out. */
/* #window, not .window: every ground names this element differently —
   index/dark/green use class="window", school uses class="win" — so the class
   selector silently never matched school and its panel has never dropped on the
   way out. The id is the one thing they all share. !important still beats the
   inline transform school's engine writes each scroll frame. */
html.kos-exiting.kos-win-drop #window {
  transform: translateX(-50%) translateY(94vh) !important;
  opacity: 0 !important;
  /* The panel should be SEEN going. Fading it over the same 360ms as the drop
     left it half gone before it had travelled anywhere, so the movement never
     registered — it just vanished. The fade waits, then takes the tail end. */
  transition: transform .42s cubic-bezier(.5, 0, .85, .25),
              opacity   .16s ease .26s !important;
}
html.kos-exiting .kos-wash { opacity: 1; transition: opacity .32s ease; }

/* ---- ARRIVE via a swap: start covered, then reveal ---- */
html.kos-arriving .kos-wash { opacity: 1; }
html.kos-arriving.kos-reveal .kos-wash { opacity: 0; transition: opacity .5s ease; }

/* icons ride above the wash so their fly-in / fly-out is visible over it */
html.kos-arriving .clutter,
html.kos-exiting  .clutter { z-index: 16; }


/* ============================================================
   GREEN-GROUND ARRIVAL — the ground colour fades in, 0 -> 100

   A page whose ground is green starts on the light base and the green arrives,
   so you see the background change rather than find it already there. It plays
   on a cold load and when you came from a page that was NOT green (home). It is
   skipped between two green pages — schools -> contact has nothing to change
   between, and a fade there would just be a flash of light for no reason.

   The decision is made pre-paint by each green page's own <head> script, from
   the ground colour transition.js recorded on the way out; this file only
   carries the two states. Separate from .kos-wash above: that hides the swap
   itself and still plays on every navigation.

   Each page says what it is fading TO (--kos-gfade-to) and, if its green is
   painted by a layer rather than the body, marks that layer [data-gfade].
   !important because a page may well set its own body colour that way.
   ============================================================ */
html.kos-gfade body { background-color: var(--kos-gfade-base, #f6f6f4) !important; }
html.kos-gfade [data-gfade] { opacity: 0 !important; }

html.kos-gfade.kos-gfade-go body {
  background-color: var(--kos-gfade-to, #00ed71) !important;
  transition: background-color .75s cubic-bezier(.25, .1, .25, 1) !important;
}
html.kos-gfade.kos-gfade-go [data-gfade] {
  opacity: 1 !important;
  transition: opacity .75s cubic-bezier(.25, .1, .25, 1) !important;
}