/* ===== Page Transitions — View Transitions API ===== */

@keyframes pt-circle-in {
  0% {
    clip-path: circle(0px at var(--pt-x) var(--pt-y));
  }
  35% {
    clip-path: circle(calc(var(--pt-radius) * 0.15) at var(--pt-x) var(--pt-y));
  }
  100% {
    clip-path: circle(var(--pt-radius) at var(--pt-x) var(--pt-y));
  }
}

@keyframes pt-fade-out {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.2;
  }
}

::view-transition-old(root) {
  animation: pt-fade-out 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-new(root) {
  animation: pt-circle-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

::view-transition-group(site-header) {
  animation-duration: 0s;
}

::view-transition-old(site-header) {
  animation: none;
}

::view-transition-new(site-header) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(site-header),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation-duration: 0.01s !important;
  }
}

/* ===== Fallback overlay (no View Transitions API) ===== */

#pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-brand);
  pointer-events: none;
  clip-path: circle(0px at var(--pt-x, 50%) var(--pt-y, 50%));
}

#pt-overlay.pt-overlay--in {
  animation: pt-cover-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#pt-overlay.pt-overlay--out {
  animation: pt-cover-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pt-cover-in {
  0% {
    clip-path: circle(0px at var(--pt-x, 50%) var(--pt-y, 50%));
  }
  100% {
    clip-path: circle(var(--pt-radius, 150%) at var(--pt-x, 50%) var(--pt-y, 50%));
  }
}

@keyframes pt-cover-out {
  0% {
    clip-path: circle(var(--pt-radius, 150%) at var(--pt-x, 50%) var(--pt-y, 50%));
    opacity: 1;
  }
  100% {
    clip-path: circle(var(--pt-radius, 150%) at var(--pt-x, 50%) var(--pt-y, 50%));
    opacity: 0;
  }
}