/* ------------------------------------------------------------------ *
 * Page transitions — ink iris (aperture) wipe, two phases.
 *
 * Default (Chrome/Safari/etc.): a circular window irises closed on the
 * page you leave, then open on the page you arrive at, its edge warped by
 * an SVG turbulence/displacement filter so it reads as a hand-painted ink
 * boundary. Driven by an @property-animated mask radius (--vt-r).
 *
 * Firefox fallback (html.vt-simple, set by js/page-transitions.js):
 * Firefox does NOT interpolate a registered custom property used inside a
 * mask/background gradient — it jumps straight to the end value, so the
 * iris just flashed. There we swap it for a plain vertical colour wipe
 * (transform, which Firefox animates fine): a colour block slides down to
 * cover on leave, then continues down to reveal on arrive.
 *
 * Structure per phase:  .ff-vt-wrap (carries the ink filter)
 *                          └ .ff-vt-fill (the colour + circular mask)
 * Orchestrated by js/page-transitions.js. Honours reduced motion.
 * ------------------------------------------------------------------ */

/* Registered so it can be animated (a plain custom property can't be). */
@property --vt-r {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --vt-x: 50%;              /* aperture centre (px, set per-navigation by JS) */
  --vt-y: 50%;
  --vt-rmax: 150vmax;       /* radius that just covers the viewport (JS sets px) */
  --vt-color: #14110F;      /* curtain colour = key colour of page left */
  --vt-close-dur: 0.5s;     /* iris close (leaving)  */
  --vt-open-dur: 0.58s;     /* iris open  (arriving) */
  --vt-ease: cubic-bezier(.66, 0, .2, 1);
}

@keyframes ff-vt-close {   /* big → small: page window collapses to the point */
  from { --vt-r: var(--vt-rmax); }
  to   { --vt-r: 0px; }
}
@keyframes ff-vt-open {    /* small → big: page window opens out from the point */
  from { --vt-r: 0px; }
  to   { --vt-r: var(--vt-rmax); }
}

/* Wrapper only carries the ink filter (applied AFTER the child's mask,
 * so it warps the masked edge). pointer-events off; sits above all. */
.ff-vt-wrap {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  filter: url(#ff-vt-ink);
}

/* The colour field, masked so the circle interior is the transparent
 * window the page shows through. Oversized (inset:-15%) so the ink
 * displacement never exposes a gap of page at the screen edge. */
.ff-vt-fill {
  position: absolute;
  inset: -15%;
  background: var(--vt-color);
  -webkit-mask: radial-gradient(circle var(--vt-r) at var(--vt-x) var(--vt-y), #0000 99%, #000 100%);
          mask: radial-gradient(circle var(--vt-r) at var(--vt-x) var(--vt-y), #0000 99%, #000 100%);
  will-change: --vt-r;
}

.ff-vt-wrap--close .ff-vt-fill {
  animation: ff-vt-close var(--vt-close-dur) var(--vt-ease) both;
}
/* The arriving curtain is built fully closed (--vt-r:0 → colour covers,
 * no flash) and stays that way until JS knows WHERE to open from — i.e.
 * the cursor's current position on the new page — then adds .is-playing. */
.ff-vt-wrap--open.is-playing .ff-vt-fill {
  animation: ff-vt-open var(--vt-open-dur) var(--vt-ease) both;
}

/* Hidden host for the SVG filter definition (injected by JS). */
.ff-vt-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Firefox fallback: plain vertical colour wipe ---------- */
@keyframes ff-vt-wipe-in  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes ff-vt-wipe-out { from { transform: translateY(0); }     to { transform: translateY(100%); } }

.vt-simple .ff-vt-wrap { filter: none; }              /* no ink edge on the simple wipe */
.vt-simple .ff-vt-fill {
  inset: 0;
  -webkit-mask: none;
          mask: none;
  will-change: transform;
}
.vt-simple .ff-vt-wrap--close .ff-vt-fill {
  transform: translateY(-100%);
  animation: ff-vt-wipe-in var(--vt-close-dur) var(--vt-ease) both;
}
.vt-simple .ff-vt-wrap--open .ff-vt-fill {
  transform: translateY(0);                            /* covering until played */
}
.vt-simple .ff-vt-wrap--open.is-playing .ff-vt-fill {
  animation: ff-vt-wipe-out var(--vt-open-dur) var(--vt-ease) both;
}

/* No wipe for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ff-vt-wrap { display: none; }
}