/* ============================================================
   Transición de página — telón de lluvia de código matriz violeta.
   Dos paneles que se juntan en el centro (cerrar, al salir) y se
   abren hacia los lados (al llegar), como el telón de un teatro.
   ============================================================ */

.sitw-pt {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  pointer-events: none;
  contain: strict;
}

/* Inactivo: invisible y sin capturar clics */
.sitw-pt:not(.is-active) {
  visibility: hidden;
}

.sitw-pt.is-active {
  visibility: visible;
}

.sitw-pt-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%; /* leve solape en el centro para que no quede una rendija */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(60, 18, 120, 0.55), transparent 60%),
    #06010f;
  overflow: hidden;
  transition: transform 0.72s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.sitw-pt-left  { left: 0; }
.sitw-pt-right { right: 0; }

/* Estado abierto / en reposo: paneles fuera de pantalla */
.sitw-pt-left  { transform: translateX(-101%); }
.sitw-pt-right { transform: translateX(101%); }

/* Estado cerrado: paneles cubriendo la pantalla */
.sitw-pt.is-closed .sitw-pt-left,
.sitw-pt.is-closed .sitw-pt-right {
  transform: translateX(0);
}

.sitw-pt canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Brillo violeta en el borde interno de cada panel (luz de telón) */
.sitw-pt-panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  pointer-events: none;
}

.sitw-pt-left::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(123, 47, 255, 0.28));
  box-shadow: inset -2px 0 22px rgba(150, 90, 255, 0.4);
}

.sitw-pt-right::after {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(123, 47, 255, 0.28));
  box-shadow: inset 2px 0 22px rgba(150, 90, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .sitw-pt {
    display: none !important;
  }
}