/* ============================================
   08-WIPES.CSS — Transición fuerte entre secciones
   Tipo "cambio de página":
     - Sección entra desde abajo con scale + slight blur-out
     - Wipe overlay morado pasa por encima durante la transición
     - Stagger de los elementos internos
   ============================================ */

/* La section necesita position relative + isolation para el overlay */
.section {
  position: relative;
  isolation: isolate;
}

.section__container {
  position: relative;
  z-index: var(--z-content);
}

/* === ENTRADA DE LA SECCIÓN ===
   Los estilos los aplica JS directamente (más confiable).
   Aquí solo definimos la transición. */
.section:not(.hero) > .section__container {
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out),
    filter 900ms var(--ease-out);
}

/* === WIPE OVERLAY ===
   Banda morada deshabilitada por petición del usuario (animación sin contexto). */
.section::before {
  display: none;
}

/* === BORDE LUMINOSO TOP ===
   Línea fina que pulsa cuando una sección está reveal — refuerza el "cambio". */
.section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--c-purple-glow),
    transparent
  );
  transform: translateX(-50%);
  transition: width 1200ms var(--ease-out);
  z-index: var(--z-content);
}

.section.is-revealed::after {
  width: 60%;
}

/* === HERO no debe tener overlay (es la primera, no aplica) === */
.hero::before,
.hero::after {
  display: none;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .section::before { animation: none !important; }
  .section .section__container {
    transition: opacity var(--dur-base) linear;
    transform: none !important;
    filter: none !important;
  }
}