/* ==========================================================================
   SPARK — intro animada (bloque a: estilos)
   Coreografía al estilo pulse-creative.com, con la marca de SPARK:
   blanco → logo Prussian sube → panel oscuro barre de izquierda a derecha →
   logo se enciende en aqua → isotipo se abre desde el centro → el hero entra
   con zoom → el logo cae y se apaga → titular desde la derecha.

   Todo lleva el prefijo intro-. La capa está oculta por defecto: solo se ve
   si intro.js marcó <html> con .intro-activa. Sin JavaScript, la página se ve
   normal.
   ========================================================================== */

#intro-overlay { display: none; }

.intro-activa #intro-overlay {
  display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  pointer-events: auto; cursor: pointer;
}

/* --- Capas de fondo --------------------------------------------------------- */
.intro-capa { position: absolute; top: 0; height: 100%; }

/* 1. Fondo blanco (Fondo claro del manual). */
.intro-blanco { left: 0; width: 100%; background: #F7F7F7; transition: opacity 1.2s ease; }

/* 2. Panel oscuro: nace como una franja de 1 % fuera del borde izquierdo y
      barre hasta cubrir todo. */
.intro-panel {
  left: -20px; width: 1%; background: #050A30;
  transition: width .7s cubic-bezier(.76, 0, .24, 1), left .7s cubic-bezier(.76, 0, .24, 1), opacity 1.2s ease;
}
.intro-panel.intro-on { left: 0; width: 100%; }
/* El filo del panel es un tubo de neón mientras barre. */
.intro-panel::after {
  content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%;
  background: #CFFFF4; box-shadow: 0 0 8px #00FFCC, 0 0 26px rgba(0, 255, 204, .6);
  transition: opacity .3s .5s;
}
.intro-panel.intro-on::after { opacity: 0; }

/* Al abrirse el hero, las dos capas de fondo se disuelven y queda la foto. */
.intro-abre .intro-blanco, .intro-abre .intro-panel { opacity: 0; }

/* --- Marca ----------------------------------------------------------------- */
.intro-marca {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.intro-logo, .intro-isotipo { grid-area: 1 / 1; }

.intro-logo {
  width: min(460px, 64vw); aspect-ratio: 1600 / 452;
  -webkit-mask: url("/img/marca/spark-wordmark.png") center / contain no-repeat;
          mask: url("/img/marca/spark-wordmark.png") center / contain no-repeat;
  opacity: 0; transform: translateY(80px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.intro-logo.intro-on { opacity: 1; transform: none; }

/* 3. Logo oscuro (Prussian) sobre el blanco. */
.intro-logo-oscuro { background: #050A30; z-index: 2; }
.intro-logo-oscuro.intro-off { opacity: 0; transition: opacity 1s ease; }

/* 4. Logo claro: el mismo wordmark encendido en neón. */
.intro-logo-claro { background: #CFFFF4; z-index: 3; }
.intro-logo-claro.intro-on {
  filter: drop-shadow(0 0 5px rgba(0, 255, 204, .95)) drop-shadow(0 0 26px rgba(0, 255, 204, .45));
}
/* Salida: cae 80 px y se apaga. Termina ANTES de que entre el isotipo: los
   dos nunca comparten pantalla. */
.intro-logo-claro.intro-cae { opacity: 0; transform: translateY(80px); transition: opacity .5s ease, transform .6s ease; }

/* 5. Isotipo: entra solo, después del logo. Se abre desde el centro hacia
      los lados y se apaga antes de que la capa se abra sobre la landing. */
.intro-isotipo {
  z-index: 1; width: min(150px, 34vw); aspect-ratio: 640 / 383;
  background: #CFFFF4; opacity: 1;
  filter: drop-shadow(0 0 5px rgba(0, 255, 204, .9)) drop-shadow(0 0 22px rgba(0, 255, 204, .4));
  -webkit-mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
          mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.1s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, transform .5s ease;
}
.intro-isotipo.intro-on { clip-path: inset(0 0 0 0); }
.intro-isotipo.intro-off { opacity: 0; transform: scale(.85); }

/* Saltar: toda la capa es clicable, y esto lo dice. */
.intro-saltar {
  position: absolute; right: 22px; bottom: 20px; z-index: 5;
  font: 500 13px/1 'Inter', system-ui, sans-serif; color: rgba(235, 235, 235, .55);
  background: none; border: 0; padding: 12px; cursor: pointer; transition: opacity .6s;
}
.intro-abre .intro-saltar { opacity: 0; }

/* --- Entradas de la página (solo clases agregadas, sin tocar sus estilos) ---
   Mientras la intro corre, estas piezas esperan ocultas; la línea de tiempo
   les pone la clase de entrada cuando les toca.                              */
.intro-activa .hero__escena:not(.intro-zoom) { transform: scale(1.1); opacity: 0; }
.intro-activa .hero__cima:not(.intro-entra),
.intro-activa .hero__marca:not(.intro-aparece),
.intro-activa .hero__titulo:not(.intro-desde-derecha),
.intro-activa .hero__pie:not(.intro-aparece) { opacity: 0; }

/* La escena del hero entra con zoom de 1.1 a 1, como el video de la referencia. */
.intro-zoom { animation: intro-zoom 2.5s cubic-bezier(.2, .7, .2, 1) both; }
/* Header (cima del hero): baja desde arriba en 1.4 s. */
.intro-entra { animation: intro-baja 1.4s cubic-bezier(.2, .8, .2, 1) both; }
/* Titular: entra desde la derecha. */
.intro-desde-derecha { animation: intro-derecha 1.5s cubic-bezier(.2, .8, .2, 1) both; }
/* Bajada y buscador: aparecen, con la línea superior trazándose. */
.intro-aparece { animation: intro-aparece 1s ease .3s both; }
.intro-aparece .hero__bajada { animation: intro-linea 1.6s cubic-bezier(.2, .8, .2, 1) .3s both; }

@keyframes intro-zoom     { from { transform: scale(1.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes intro-baja     { from { opacity: 0; transform: translateY(-48px); } to { opacity: 1; transform: none; } }
@keyframes intro-derecha  { from { opacity: 0; transform: translateX(min(600px, 40vw)); } to { opacity: 1; transform: none; } }
@keyframes intro-aparece  { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-linea    { from { border-top-color: transparent; clip-path: inset(0 99% 0 0); } to { clip-path: inset(0 0 0 0); } }