/* ============================================================
   page-transition.css — cross-page transition overlay

   A full-screen colour field that bridges two page loads. The exit
   animation fades it up in the destination's background; the destination
   ships it already opaque and fades it out. Same colour on both sides of
   the navigation, so the boundary is invisible.

   z-index 50 is deliberate: above page content (0–3) but BELOW the
   navbar (100, styles/navbar.css:25). The navbar therefore stays visible
   and unanimated across the whole transition, which is what makes the
   navigation read as one continuous surface.

   Ships transparent. The `tx-arriving` class is added by an inline script
   in base.njk only when a sessionStorage flag says this load followed a
   transition — so if JS breaks, the page is still visible rather than
   hidden behind an opaque overlay.
   ============================================================ */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
}

/* will-change only while the overlay is actually animating. Applying it
   unconditionally would keep a viewport-sized compositor layer promoted
   for the whole session on an element that is idle almost all of it.

   Only the exit is covered here. The arrival fade can't be: it works by
   *removing* .tx-arriving, so hinting on that class would drop the hint
   in the same frame the animation starts — present while idle-opaque,
   absent while animating, exactly backwards. revealFromTransition in
   scripts/loader.js sets will-change inline instead, alongside the
   transition it belongs to. */
.tx-exiting .page-transition {
  will-change: opacity;
}

/* Arrived from a transition — cover immediately, before first paint. */
.tx-arriving .page-transition {
  opacity: 1;
}

/* The two rules below are used by scripts/page-transition.js, which lands
   in Task 5. They are here rather than added later so the whole feature's
   CSS lives in one file and can be removed in one delete.

   Sections clip horizontally so oversized decorative tiles can't widen
   the page. Content can't leave a clipping box, so the exit lifts the
   clip on any clipping ancestor (done in JS, which walks the real
   ancestor chain rather than hardcoding a list). This rule only covers
   the root, where a transform-based exit could otherwise create a
   scrollbar before body's overflow-x: hidden applies. */
.tx-exiting {
  overflow-x: hidden;
}

/* .navbar transitions transform over 650ms (styles/navbar.css:27). Left
   alone, a scrolled-away navbar would still be mid-slide at the 550ms
   navigation and would snap the remainder when the next page painted.
   Shorten it so it settles inside the exit window.

   Lives here rather than in navbar.css because it is transition-owned
   behaviour, and keeping it here means the feature is self-contained. */
.navbar.is-transitioning {
  transition-duration: 350ms;
}