/* Pro Effects — Page Transition: Iris Reveal
 *
 * IN  (page arrival) : body::before clip-path circle(150%) → circle(0%) at END point
 * OUT (page leaving) : .pe-pt-overlay-iris-reveal circle(0%) → circle(150%) at START point
 *
 * START y END son INDEPENDIENTES: el OUT puede nacer en una esquina y el IN
 * cerrarse en otra. Por defecto ambos en Center → portal cinematográfico
 * clásico (continuidad pixel-perfect en el frame de transición porque ambos
 * lados llegan a circle(150%) que cubre el viewport sin importar el origen).
 *
 * CSS variables consumed (set by the controls system per `controls.json`):
 *   --pe-pt-color        : background color (default #000000)
 *   --pe-pt-easing       : motion curve (default Snappy cubic-bezier)
 *   --pe-pt-iris-start   : OUT origin "X% Y%" (default "50% 50%")
 *   --pe-pt-iris-end     : IN origin "X% Y%"  (default "50% 50%")
 *   --pro-transition-duration : global duration slider (default 0.7s)
 *
 * About circle(150%) — el spec de CSS calcula el radio como
 * percentage * sqrt(width² + height²) / sqrt(2). 100% NO cubre las esquinas
 * en aspect ratios extremos. 150% garantiza cobertura total desde cualquier
 * origen (corner, center, etc.) en cualquier viewport razonable.
 */

/* ─── Mask-IN: pseudo-element on body. Covers viewport at first paint. ─── */
body.pro-page-transition-iris-reveal::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  clip-path: circle(150% at var(--pe-pt-iris-end, 50% 50%));
  will-change: clip-path;
  animation: peIrisRevealIn var(--pro-transition-duration, 0.7s)
             var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1)) forwards;
}

@keyframes peIrisRevealIn {
  from { clip-path: circle(150% at var(--pe-pt-iris-end, 50% 50%)); }
  to   { clip-path: circle(0%   at var(--pe-pt-iris-end, 50% 50%)); }
}

/* ─── Mask-OUT: overlay <div> created by the runtime ─── */
.pe-pt-overlay-iris-reveal {
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483647; /* one above the IN pseudo */
  pointer-events: none;
  clip-path: circle(0% at var(--pe-pt-iris-start, 50% 50%));
  will-change: clip-path;
  transition: clip-path var(--pro-transition-duration, 0.7s)
              var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1));
}

.pe-pt-overlay-iris-reveal.is-leaving {
  clip-path: circle(150% at var(--pe-pt-iris-start, 50% 50%));
  pointer-events: auto;
}