/* =========================================================================
   La portada: el foco que embona, se conecta y prende
   =========================================================================
   Réplica del video de intro, armada por piezas. No es un reproductor: el
   foco y la peana son renders con canal alfa —`_fuentes/preparar-render.py`—
   y el movimiento lo pone este archivo. El video medía 848x480 y en monitor
   grande se veía suave; estas piezas están a resolución de sobra. Entre las
   dos y el SVG son ~355 KB contra 1,099 KB del mp4.

   Los tiempos siguen al video: 0.2 s el foco baja y embona, 1.4 s el pulso
   sube por el cable, 2.8 s el destello y el vidrio sube de brillo, 3.0 s
   aparece el neón y 3.7 s el logotipo. De ahí en adelante respira.

   Todas las piezas usan `transform-box: view-box` para que el origen de las
   transformaciones se mida en las coordenadas del viewBox y no en la caja de
   cada figura, que es lo que hace Safari por omisión y desplazaba los aros.
   ========================================================================= */

.videoband--escena {
  background: transparent;
  border: 0;
}
.escena {
  display: block;
  width: 100%;
  height: 100%;
}
.escena * { transform-box: view-box; }

/* ------------------------------------------------------- 1. Embonar --- */
/* Cae desde arriba y asienta con un rebote corto. La curva pasa de 1 y
   regresa: es el golpecito de cuando el casquillo entra en la rosca. */
.escena__foco {
  animation: embona 1.15s cubic-bezier(.34, 1.32, .5, 1) .2s both;
}
@keyframes embona {
  0%   { transform: translateY(-280px); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Destellito en la rosca al momento de asentar */
.escena__golpe { animation: golpe .5s ease-out 1.25s both; }
@keyframes golpe {
  0%, 100% { opacity: 0; }
  25%      { opacity: .85; }
}

/* ----------------------------------------------------- 2. Conectar --- */
/* El pulso recorre el cable de derecha a izquierda y entra a la peana. El
   largo del guion se fija en el HTML con `stroke-dasharray`. */
.escena__pulso { animation: pulso 1.05s cubic-bezier(.5, 0, .5, 1) 1.45s both; }
@keyframes pulso {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: -980; opacity: 0; }
}

/* ------------------------------------------------------- 3. Vidrio --- */
/* El vidrio reacciona al encendido, igual que en el video. Se parte de
   `brightness(1)` y no de `none` porque entre `none` y una función no hay
   interpolación: el navegador daría un salto seco. */
.escena__vidrio { animation: prendeVidrio 1.25s ease-out 2.8s both; }
@keyframes prendeVidrio {
  0%   { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.45) saturate(1.12); }
}

/* ----------------------------------------------------- 4. Destello --- */
.escena__nucleo { animation: nucleo .85s cubic-bezier(.15, .7, .3, 1) 2.78s both; }
@keyframes nucleo {
  0%   { transform: scale(.12); opacity: 0; }
  16%  { opacity: 1; }
  100% { transform: scale(1);   opacity: 0; }
}
.escena__raya { animation: raya .9s cubic-bezier(.15, .8, .3, 1) 2.8s both; }
@keyframes raya {
  0%   { transform: scaleX(.02) scaleY(.3); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: scaleX(1) scaleY(1);    opacity: 0; }
}
.escena__aro { animation: aro 1.1s cubic-bezier(.1, .75, .3, 1) both; }
.escena__aro--1 { animation-delay: 2.80s; }
.escena__aro--2 { animation-delay: 2.88s; }
.escena__aro--3 { animation-delay: 2.96s; }
@keyframes aro {
  0%   { transform: scale(.1); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: scale(1);  opacity: 0; }
}

/* --------------------------------------------------------- 5. Neón --- */
/* Se revela con un círculo que crece desde el centro: la luz abriéndose,
   no una cortina. El borde va difuminado por el degradado de la máscara. */
.escena__revela { animation: revela 1.15s cubic-bezier(.2, .7, .3, 1) 2.92s both; }
@keyframes revela {
  0%   { transform: scale(.04); }
  100% { transform: scale(1); }
}
.escena__neon { animation: prende 1.1s ease-out 2.92s both, respira 5.2s ease-in-out 4.4s infinite; }
@keyframes prende {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes respira {
  0%, 100% { opacity: 1; }
  50%      { opacity: .84; }
}

/* ------------------------------------------------- 6. Luz del cuarto --- */
.escena__piso, .escena__halo { animation: enciende 1.3s ease-out 2.82s both; }
@keyframes enciende {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ----------------------------------------------------- 7. Logotipo --- */
.escena__logotipo { animation: sube .95s cubic-bezier(.2, .7, .25, 1) 3.65s both; }
@keyframes sube {
  0%   { transform: translateY(26px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ------------------------------------------------------------------------
   Menos movimiento: se muestra la escena ya prendida. Quitar las animaciones
   a secas dejaría el foco arriba y el logo invisible, porque el estado
   inicial de cada una es el de antes de prender. */
@media (prefers-reduced-motion: reduce) {
  .escena__foco, .escena__neon, .escena__piso, .escena__halo,
  .escena__logotipo, .escena__vidrio, .escena__revela,
  .escena__golpe, .escena__pulso, .escena__nucleo, .escena__raya, .escena__aro {
    animation: none;
  }
  .escena__foco, .escena__neon, .escena__piso, .escena__halo,
  .escena__logotipo { opacity: 1; }
  .escena__vidrio { filter: brightness(1.45) saturate(1.12); }
  .escena__revela { transform: scale(1); }
  .escena__golpe, .escena__nucleo, .escena__raya, .escena__aro,
  .escena__pulso { opacity: 0; }
}