/*
 * Circular clip-path cross-document page transition, driven by the native
 * browser Cross-Document View Transitions API. Requires
 * <meta name="view-transition" content="same-origin"> on every page that
 * should use it. Purely additive: browsers without support for the
 * cross-document View Transitions API simply ignore the unknown
 * @view-transition at-rule and never generate the ::view-transition-*(root)
 * pseudo-elements, so navigation just happens normally — no JS or
 * feature-detection needed for this file to be safe on its own. See
 * public/js/page-transitions.js for an optional higher-fidelity spring
 * upgrade layered on top.
 */

@view-transition {
  navigation: auto;
}

/* Shows through the clip-path gap: the old page's circle fully closes at
   535ms but the new page's doesn't start growing until the 750ms delay, so
   there's a ~215ms window where neither snapshot covers the viewport.
   Without this, that gap falls through to the real underlying page (whichever
   it happens to be), which can flash a different background color if the two
   pages don't match — this pins it to one deliberate color instead. */
::view-transition-group(root) {
  animation-duration: 635ms;
  background-color: #ff6363;
}

::view-transition-old(root),
::view-transition-new(root) {
  /* The default UA cross-fade would otherwise run alongside our clip-path
     animation; mix-blend-mode: normal + these overrides keep only our
     keyframes visible. */
  mix-blend-mode: normal;
}

/* Exit (old page): shrinks away through a "window" just above the viewport.
   150% is a safely large radius that fully covers the viewport at rest
   regardless of aspect ratio — clip-path circle() percentages resolve against
   the box diagonal, so 150% leaves generous headroom even on ultra-wide
   screens. */
::view-transition-old(root) {
  animation: nb-page-exit 535ms cubic-bezier(0.73, 0.54, 0.05, 0.99) both;
}

@keyframes nb-page-exit {
  from {
    clip-path: circle(150% at 50% 50%);
  }
  to {
    clip-path: circle(0% at 50% -5%);
  }
}

/* Enter (new page): grows in from a point just below the viewport to full
   coverage, starting once the exit is mostly done (750ms delay against a
   535ms exit). Paired with a bouncy transform "pop" (damping 84 / stiffness
   825 / mass 3.2 — CSS can't do true spring physics, so
   cubic-bezier(0.34, 1.56, 0.64, 1) is the closest static-curve
   approximation; page-transitions.js upgrades this to a real spring where
   supported). */
::view-transition-new(root) {
  animation:
    nb-page-enter-clip 635ms cubic-bezier(0.34, 1.56, 0.64, 1) 750ms both,
    nb-page-spring-transform 635ms cubic-bezier(0.34, 1.56, 0.64, 1) 750ms
      both;
}

@keyframes nb-page-enter-clip {
  from {
    clip-path: circle(0% at 50% 105%);
  }
  to {
    clip-path: circle(150% at 50% 50%);
  }
}

/* Kept as a separate, named animation (not merged into nb-page-enter-clip) so
   page-transitions.js can find and cancel just this one by name when it
   upgrades it to a real damped-spring animation via the Web Animations API,
   without touching the clip-path animation above. */
@keyframes nb-page-spring-transform {
  from {
    transform: scale(0.85) rotateX(-10deg) translateY(30%);
  }
  to {
    transform: none;
  }
}