/* Pro Effects — Page Transition: Shutter
 *
 * Venetian blind effect: N horizontal slats animate scaleY(0 → 1) with
 * stagger top-to-bottom. Each slat starts as an invisible thin line at its
 * row's center, expands vertically to cover its row's full height.
 *
 * IN side: slats start scaleY(1), retract to scaleY(0) in same stagger
 * order — blinds opening symmetrically.
 *
 * Stagger: each slat's animation takes half the global duration; slat N-1
 * is delayed by half the global duration so it ends exactly at totalDuration.
 *
 * CSS variables consumed:
 *   --pe-pt-color       : color de los slats (default #000000)
 *   --pe-pt-easing      : motion curve (default Snappy)
 *   --pe-pt-slat-count  : numero de slats (default 8, range 4-24)
 *   --pro-transition-duration : global slider (default 0.6s)
 *
 * Per-slat inline vars (set by JS):
 *   --slat-index    : index 0..N-1 (used for top positioning)
 *   --slat-duration : ms — total/2
 *   --slat-delay    : ms — i * (total/2 / (N-1))
 */

/* ─── Containers (creados por runtime onCreate / script.js DOMContentLoaded) ─── */
.pe-pt-overlay-shutter {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: transparent;
}

.pe-pt-in-shutter {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: transparent;
}

/* ─── Slats (horizontal strips) — common positioning ─── */
.pe-pt-overlay-shutter .pe-pt-slat,
.pe-pt-in-shutter .pe-pt-slat {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--slat-index) * (100% / var(--pe-pt-slat-count, 8)));
  height: calc(100% / var(--pe-pt-slat-count, 8));
  background: var(--pe-pt-color, #000000);
  transform-origin: center center;
  will-change: transform;
  transition-property: transform;
  transition-duration: var(--slat-duration, var(--pro-transition-duration, 0.6s));
  transition-delay: var(--slat-delay, 0ms);
  transition-timing-function: var(--pe-pt-easing, cubic-bezier(0.7,0,0.3,1));
}

/* OUT initial: all slats at scaleY(0) — invisible thin lines at row centers */
.pe-pt-overlay-shutter .pe-pt-slat {
  transform: scaleY(0);
}
/* OUT final (is-leaving): all slats expand to full row height */
.pe-pt-overlay-shutter.is-leaving .pe-pt-slat {
  transform: scaleY(1);
}
.pe-pt-overlay-shutter.is-leaving {
  pointer-events: auto;
}

/* IN initial: all slats covering (scaleY(1)) at first paint */
.pe-pt-in-shutter .pe-pt-slat {
  transform: scaleY(1);
}
/* IN final: all slats retract to invisible thin lines (blinds opening) */
.pe-pt-in-shutter.is-revealing .pe-pt-slat {
  transform: scaleY(0);
}