/*
 * Page transitions (inc/transitions.php): cross-document View Transitions, same-origin links only.
 * The old page holds, drifts up and dims; the new page rises over it from the bottom behind a
 * curved (swoop) leading edge. The header has its own snapshot, so the MENU / CONTACT pills
 * cross-fade in place instead of riding the curtain.
 * Tunables: the custom properties below. Reduced motion: nothing here applies (plain navigation).
 */
:root {
  --gw-vt-dur: 700ms;
  --gw-vt-ease: cubic-bezier(0.75, 0, 0.25, 1);
  --gw-vt-drift: -6vh;   /* old page travel */
  --gw-vt-dim: 0.78;     /* old page brightness at the end */
  --gw-vt-curve: 60%;    /* depth of the curved leading edge (ellipse radius-y at the start) */
  --gw-vt-header-dur: 320ms;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .gw-header { view-transition-name: gw-header; }

  ::view-transition-group(root) { animation-duration: var(--gw-vt-dur); }
  ::view-transition-image-pair(root) { isolation: isolate; }

  ::view-transition-old(root) {
    z-index: 1;
    mix-blend-mode: normal;
    animation: gw-vt-hold var(--gw-vt-dur) var(--gw-vt-ease) both;
  }
  ::view-transition-new(root) {
    z-index: 2;
    mix-blend-mode: normal;
    animation: gw-vt-rise var(--gw-vt-dur) var(--gw-vt-ease) both;
  }

  ::view-transition-group(gw-header) { z-index: 10; animation-duration: var(--gw-vt-header-dur); }
  ::view-transition-old(gw-header), ::view-transition-new(gw-header) { animation-duration: var(--gw-vt-header-dur); }

  @keyframes gw-vt-hold {
    from { transform: translateY(0); filter: brightness(1); opacity: 1; }
    to { transform: translateY(var(--gw-vt-drift)); filter: brightness(var(--gw-vt-dim)); opacity: 1; }
  }
  /* An ellipse centred below the bottom edge grows until it covers the viewport: the top of the
     ellipse is the swoop-shaped leading edge. */
  @keyframes gw-vt-rise {
    from { clip-path: ellipse(90% var(--gw-vt-curve) at 50% calc(100% + var(--gw-vt-curve))); opacity: 1; }
    to { clip-path: ellipse(160% 220% at 50% 100%); opacity: 1; }
  }
}