/* Pro Effects — Page Transition: Morph Shape
 *
 * Una blob orgánica irregular crece desde un punto hasta cubrir todo el
 * viewport, luego en la nueva pagina se contrae de vuelta a un punto.
 *
 * Implementacion: clip-path polygon FIJO (la forma del blob) + transform
 * scale animacion. Esto garantiza coverage 100% en el frame de transicion
 * (a scale 2.5+ el blob 8-vertex cubre todo el viewport).
 *
 * Vertex-interpolation entre dos polygons distintos produce estados
 * intermedios incompletos (vertices cruzan el viewport mid-animation y
 * dejan huecos). Scale-based mantiene la forma constante y el cover total.
 *
 * CSS variables consumed:
 *   --pe-pt-color  : color del blob (default #000000)
 *   --pe-pt-easing : motion curve (default Organic)
 *   --pro-transition-duration : global slider (default 0.7s)
 */

/* ─── OUT: blob expande desde un punto al centro ─── */
.pe-pt-overlay-morph-shape {
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483647;
  pointer-events: none;
  /* Blob organico — vertices a ~35-40% radio del centro. Escalado 3x cubre
   * 100% del viewport en todas las esquinas (corner = 70.7% media-diagonal,
   * proyeccion minima del blob a 45deg ~32%, 32*3 = 96 > 70.7 ✓). */
  clip-path: polygon(50% 18%, 72% 26%, 88% 50%, 74% 76%, 50% 86%, 28% 76%, 12% 52%, 24% 24%);
  transform-origin: center center;
  transform: scale(0);
  will-change: transform;
  transition: transform var(--pro-transition-duration, 0.7s)
              var(--pe-pt-easing, cubic-bezier(0.5,0,0.2,1));
}
.pe-pt-overlay-morph-shape.is-leaving {
  transform: scale(3);
  pointer-events: auto;
}

/* ─── IN: blob al revés, inicia covering y se contrae ─── */
body.pro-page-transition-morph-shape::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  clip-path: polygon(50% 18%, 72% 26%, 88% 50%, 74% 76%, 50% 86%, 28% 76%, 12% 52%, 24% 24%);
  transform-origin: center center;
  transform: scale(3);
  will-change: transform;
  animation: peMorphShapeIn var(--pro-transition-duration, 0.7s)
             var(--pe-pt-easing, cubic-bezier(0.5,0,0.2,1)) forwards;
}
@keyframes peMorphShapeIn {
  from { transform: scale(3); }
  to   { transform: scale(0); }
}