/* Water-drop ripple page transition, used only for links to the home and contact pages
   (see page-transition.js). Looks like slide-1.svg: a navy→blue gradient with concentric
   white rings centred on the click point.

   Built to stay smooth on modest hardware: the cover is ONE screen-sized layer (gradient and
   rings painted into it once) that only fades, plus one thin ring that ripples out from the
   click. Only opacity and transform animate, so the GPU does it all without repainting.

   Leaving:  the cover fades in while the ring sweeps out; the script navigates on its end.
   Entering: the inline <head> script adds html.pt-entering before the first paint, so the next
             page starts covered exactly as the previous one ended, and the cover fades out.

   --pt-x / --pt-y: the click point, in px. */

.entrafor-page-transition {
  --pt-in: 200ms;
  --pt-out: 220ms;
  --pt-x0: var(--pt-x, 50vw);
  --pt-y0: var(--pt-y, 50vh);
  /* distance from the click point to the farthest corner */
  --pt-r: hypot(max(var(--pt-x0), 100vw - var(--pt-x0)), max(var(--pt-y0), 100vh - var(--pt-y0)));
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  contain: strict;
  will-change: opacity;
  background:
    radial-gradient(circle at var(--pt-x0) var(--pt-y0),
      transparent calc(var(--pt-r) * .175 - 2px), rgba(255, 255, 255, .113) calc(var(--pt-r) * .175 - 1px),
      rgba(255, 255, 255, .113) calc(var(--pt-r) * .175 + 1px), transparent calc(var(--pt-r) * .175 + 2px),
      transparent calc(var(--pt-r) * .325 - 2px), rgba(255, 255, 255, .098) calc(var(--pt-r) * .325 - 1px),
      rgba(255, 255, 255, .098) calc(var(--pt-r) * .325 + 1px), transparent calc(var(--pt-r) * .325 + 2px),
      transparent calc(var(--pt-r) * .475 - 2px), rgba(255, 255, 255, .083) calc(var(--pt-r) * .475 - 1px),
      rgba(255, 255, 255, .083) calc(var(--pt-r) * .475 + 1px), transparent calc(var(--pt-r) * .475 + 2px),
      transparent calc(var(--pt-r) * .625 - 2px), rgba(255, 255, 255, .068) calc(var(--pt-r) * .625 - 1px),
      rgba(255, 255, 255, .068) calc(var(--pt-r) * .625 + 1px), transparent calc(var(--pt-r) * .625 + 2px),
      transparent calc(var(--pt-r) * .8 - 2px), rgba(255, 255, 255, .05) calc(var(--pt-r) * .8 - 1px),
      rgba(255, 255, 255, .05) calc(var(--pt-r) * .8 + 1px), transparent calc(var(--pt-r) * .8 + 2px)),
    linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .04) 50%, transparent 50%),
    linear-gradient(120deg, transparent 72%, rgba(255, 255, 255, .05) 72%),
    linear-gradient(135deg, #071a4d 20%, #1d4ed8 80%);
}

/* The ripple: a thin ring centred on the click that grows to the farthest corner.
   Its box is mostly transparent, which the GPU skips, so only the ring line costs anything. */
.pt-wave {
  position: absolute;
  left: var(--pt-x0);
  top: var(--pt-y0);
  width: calc(var(--pt-r) * 2);
  height: calc(var(--pt-r) * 2);
  margin: calc(var(--pt-r) * -1) 0 0 calc(var(--pt-r) * -1);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transform: scale(.08);
  will-change: transform;
}

/* ── Leaving ─────────────────────────────────────────────────────────── */
.entrafor-page-transition.is-leaving {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
  transition: opacity var(--pt-in) cubic-bezier(.2, .6, .35, 1);
}
.is-leaving .pt-wave {
  transform: scale(1);
  transition: transform var(--pt-in) cubic-bezier(.25, .7, .35, 1);
}

/* ── Entering ────────────────────────────────────────────────────────── */
html.pt-entering .entrafor-page-transition {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
  animation: pt-fade var(--pt-out) cubic-bezier(.3, .4, .3, 1) both;
}
html.pt-entering .pt-wave { transform: scale(1); }

@keyframes pt-fade { to { opacity: 0; } }