/* Page transition.
   flowty's is a same-document SPA — the URL and title change and the document
   never reloads, which is why it feels instant. We cannot do that: this site is
   handed off to run from `file://`, where fetch/XHR is blocked, so the next
   page's HTML can never be pulled in. See CLAUDE.md §0b.

   What ships instead is a real navigation with the seam hidden:
     · the ENTER is a CSS animation, so it starts at first paint rather than
       waiting for a script — the page is never briefly blank;
     · the EXIT is a short fade-and-lift played before the browser navigates;
     · every page paints the same ground colour, so the swap between documents
       has nothing visible to flash. */

/* NOTE: do NOT add `html { background: ... }` here.
   `body` already carries the ground, and with no background on `html` the
   browser PROPAGATES it to the canvas — which is what paints during the swap
   between documents, so there is nothing to flash either way. Setting one on
   `html` stops that propagation: `body` then paints its own opaque box, which
   sits ABOVE `.page-bg` (z-index: -1) and hid the hero's sticky gradient
   completely. */

.page-t {
  animation: page-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Set by the script the moment an internal link is followed. */
.page-t[data-leaving="true"] {
  animation: none;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* The landing page cannot use the version above. A `transform` makes an element
   the containing block for every `position: fixed` descendant — which there
   would silently capture the WebGL canvas, the fixed background, and every
   ScrollTrigger pin, all of which pin by going fixed. Opacity creates a
   stacking context but NOT a containing block, so the exit there is opacity
   only. Do not add a transform to this rule. */
[data-page-fade] { transition: opacity 0.22s ease; }
[data-page-fade][data-leaving="true"] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .page-t,
  .page-t[data-leaving="true"],
  [data-page-fade],
  [data-page-fade][data-leaving="true"] {
    animation: none; transition: none; opacity: 1; transform: none;
  }
}