/* ==========================================================
   Iris page transition
   The next page opens as a circle from the exact point you clicked,
   while the old page sinks back into a burgundy-to-ink glow.
   Native cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+)
   when served over http(s); js/page-transition.js runs a matching
   fallback for file:// previews and other browsers.
   ========================================================== */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition { background: radial-gradient(circle at 50% 45%, #6B1E23 0%, #2a0c0e 45%, #0A0A0A 80%); }
  ::view-transition-old(root),
  ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: tsIrisSink .95s cubic-bezier(.65, 0, .25, 1) both; }
  /* Centre-out default; page-transition.js swaps in your click point */
  ::view-transition-new(root) { animation: tsIrisOpen .95s cubic-bezier(.65, 0, .25, 1) both; }

  /* Fallback */
  html.ts-iris-in { background: #0A0A0A; }
  html.ts-iris-in body { clip-path: circle(0px at var(--ix, 50%) var(--iy, 50%)); }
}

@keyframes tsIrisSink { to { transform: scale(.93); opacity: .3; border-radius: 1.5rem; } }
@keyframes tsIrisOpen {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}

.ts-iris-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), #6B1E23 0%, #0A0A0A 70%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}