/* Pro Effects — Page Transition: Curve
 *
 * Vertical curtain con borde curvo. Direccionable Top/Bottom (Start + End
 * independientes, mismo paradigma que Iris Reveal y Diagonal Wipe).
 *
 * Combinaciones:
 *   Start=Top, End=Top       → desciende, retrae arriba (curtain bouncy)
 *   Start=Top, End=Bottom    → desciende, sale por abajo (slide-through)
 *   Start=Bottom, End=Top    → sube, sale por arriba (slide-through inverso)
 *   Start=Bottom, End=Bottom → sube, retrae abajo
 *
 * El curve siempre va en el LEADING edge:
 *   - Si entra desde Top, curve en BOTTOM del elemento
 *   - Si entra desde Bottom, curve en TOP del elemento
 *   - Si sale a Top, curve en TOP
 *   - Si sale a Bottom, curve en BOTTOM
 *
 * El JS setea data-from en el overlay (OUT) y data-curve-start / data-curve-end
 * en body para que CSS branchee.
 *
 * CSS variables consumed:
 *   --pe-pt-color       : color (default #000000)
 *   --pe-pt-easing      : motion curve (default Decelerate)
 *   --pe-pt-curve-depth : profundidad de la curva en vh (default 25)
 *   --pe-pt-curve-start : "top" | "bottom" (default "top")
 *   --pe-pt-curve-end   : "top" | "bottom" (default "top")
 *   --pro-transition-duration : global slider (default 0.6s)
 *
 * Element height = 250vh + curve depth — garantiza que cuando esta covering,
 * la curva queda BAJO el viewport (sino los bottom corners quedan sin cubrir).
 */

/* ─── OUT container (just clipping wrapper) ─── */
.pe-pt-overlay-curve {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

/* ─── Curtain shape (pseudo of OUT overlay) ─── */
.pe-pt-overlay-curve::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: calc(250vh + var(--pe-pt-curve-depth, 25) * 1vh);
  background: var(--pe-pt-color, #000000);
  will-change: transform;
  transition: transform var(--pro-transition-duration, 0.6s)
              var(--pe-pt-easing, cubic-bezier(0.16,1,0.3,1));
}

/* OUT — Start = Top : curtain comes from above, curve at BOTTOM */
.pe-pt-overlay-curve[data-from="top"]::before {
  top: -100vh;
  border-radius: 0 0 50% 50% /
                 0 0 calc(var(--pe-pt-curve-depth, 25) * 1vh)
                     calc(var(--pe-pt-curve-depth, 25) * 1vh);
  transform: translateY(-100%);
}
.pe-pt-overlay-curve[data-from="top"].is-leaving::before {
  transform: translateY(0);
}

/* OUT — Start = Bottom : curtain comes from below, curve at TOP */
.pe-pt-overlay-curve[data-from="bottom"]::before {
  bottom: -100vh;
  border-radius: 50% 50% 0 0 /
                 calc(var(--pe-pt-curve-depth, 25) * 1vh)
                 calc(var(--pe-pt-curve-depth, 25) * 1vh) 0 0;
  transform: translateY(100%);
}
.pe-pt-overlay-curve[data-from="bottom"].is-leaving::before {
  transform: translateY(0);
}

/* ─── IN — body::before (covers at first paint, exits to End direction) ─── */
body.pro-page-transition-curve::before {
  content: "";
  position: fixed;
  left: -10%;
  right: -10%;
  height: calc(250vh + var(--pe-pt-curve-depth, 25) * 1vh);
  background: var(--pe-pt-color, #000000);
  z-index: 2147483646;
  pointer-events: none;
  will-change: transform;
}

/* IN — End = Top : exits hacia arriba. El BORDE INFERIOR del elemento es el
 * que barre el viewport mientras la cortina sale → la curva va ABAJO. */
body.pro-page-transition-curve[data-curve-end="top"]::before {
  top: -100vh; /* anchored arriba; con height 250vh+depth, el borde inferior
                  + curva queda fuera del viewport (debajo) durante cover */
  border-radius: 0 0 50% 50% /
                 0 0 calc(var(--pe-pt-curve-depth, 25) * 1vh)
                     calc(var(--pe-pt-curve-depth, 25) * 1vh);
  transform: translateY(0);
  animation: peCurveInTop var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.16,1,0.3,1)) forwards;
}
@keyframes peCurveInTop {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

/* IN — End = Bottom : exits hacia abajo. El BORDE SUPERIOR del elemento es
 * el que barre el viewport → la curva va ARRIBA. */
body.pro-page-transition-curve[data-curve-end="bottom"]::before {
  bottom: -100vh;
  border-radius: 50% 50% 0 0 /
                 calc(var(--pe-pt-curve-depth, 25) * 1vh)
                 calc(var(--pe-pt-curve-depth, 25) * 1vh) 0 0;
  transform: translateY(0);
  animation: peCurveInBottom var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.16,1,0.3,1)) forwards;
}
@keyframes peCurveInBottom {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* Default (server-render antes de que JS setee data-curve-end): default Top */
body.pro-page-transition-curve:not([data-curve-end])::before {
  top: -100vh;
  border-radius: 0 0 50% 50% /
                 0 0 calc(var(--pe-pt-curve-depth, 25) * 1vh)
                     calc(var(--pe-pt-curve-depth, 25) * 1vh);
  animation: peCurveInTop var(--pro-transition-duration, 0.6s)
             var(--pe-pt-easing, cubic-bezier(0.16,1,0.3,1)) forwards;
}