/* ═══════════════════════════════════════════════════════════════════════════
   1nSecurity — efectos
   ───────────────────────────────────────────────────────────────────────────
   Todo lo que se mueve vive tras la puerta html[data-revela], que theme-init.js
   abre antes del primer pintado. Sin esa puerta —JS ausente, fallo de módulo o
   movimiento reducido— la página se queda en su estado final: texto visible y
   filetes dibujados. El contenido nunca depende de que el JS arranque; sólo lo
   hace su orden de aparición.

   Regla de la casa: el JS sólo escribe custom properties. Los estados visibles
   se declaran aquí, nunca en línea.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-35); }
  50% { box-shadow: 0 0 0 5px rgb(243 107 33 / 0); }
}
.term__punto, .pie__punto { animation: latido 2.6s ease-in-out infinite; }

/* Barrido de la orden «escanear» */
html[data-barrido] .escena::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 26vh;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(243 107 33 / 0.14) 70%, var(--accent));
  animation: barrido 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes barrido {
  from { transform: translateY(-30vh); }
  to { transform: translateY(110vh); }
}
@keyframes destello-naranja {
  0%, 100% { background: var(--bg); }
  40% { background: var(--accent-10); }
}
html[data-alerta] body { animation: destello-naranja 0.5s ease 2; }

/* ═══ Revelado al scroll ════════════════════════════════════════════════════
   .rev es la marca; movimiento.js la observa una sola vez, añade .rev--on y
   deja de mirarla. El escalonado entre hermanos sale de --d, fijado por
   :nth-child, así un grupo de filas entra en cascada sin escribir un estilo
   por elemento. */
html[data-revela] .rev {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
html[data-revela] .rev--on { opacity: 1; transform: none; }

html[data-revela] .rev:nth-child(2) { --d: 70ms; }
html[data-revela] .rev:nth-child(3) { --d: 140ms; }
html[data-revela] .rev:nth-child(4) { --d: 210ms; }
html[data-revela] .rev:nth-child(5) { --d: 280ms; }
html[data-revela] .rev:nth-child(6) { --d: 350ms; }
html[data-revela] .rev:nth-child(7) { --d: 420ms; }

/* ── Títulos partidos en palabras ───────────────────────────────────────────
   partir() envuelve cada palabra en .rev-caja (recorta) y .rev-pal (desliza).
   El estado oculto va también tras la puerta: sin JS las palabras se quedan en
   su sitio. El contenedor no se mueve, sólo las palabras, y para eso se le
   quita a .rev su desplazamiento sin perder la opacidad. */
.rev-caja {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Margen y padding se compensan, así la caja no mueve el interlineado: con
     line-height 0.99 los glifos sobresalen del cuadro de contenido y sin
     aire por arriba se les cortaría la tilde, y el aire por abajo es el que
     necesita la palabra al deslizarse. */
  padding-top: 0.08em;
  padding-bottom: 0.32em;
  margin-top: -0.08em;
  margin-bottom: -0.32em;
}
.rev-pal { display: inline-block; }

html[data-revela] .rev--pal {
  opacity: 1;
  transform: none;
  transition: none;
}
html[data-revela] .rev-pal {
  transform: translateY(calc(100% + 0.4em));
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html[data-revela] .rev--on .rev-pal { transform: none; }

/* Antes de que partir() termine, el titular de la escena no se enseña a medias.
   Si el navegador no entiende :has() la regla cae entera y el texto se ve. */
html[data-revela] .escena__titulo:not(:has(.rev-pal)) { visibility: hidden; }

/* ── Entrada de la escena: pura CSS, sin esperar al módulo ─────────────────── */
@keyframes subir {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes subir-pal {
  from { transform: translateY(calc(100% + 0.4em)); }
  to { transform: none; }
}
html[data-revela] .escena .antetitulo {
  animation: subir 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s backwards;
}
html[data-revela] .escena__entrada {
  animation: subir 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s backwards;
}
html[data-revela] .escena__acciones {
  animation: subir 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s backwards;
}
html[data-revela] .term--escena {
  animation: subir 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s backwards;
}
html[data-revela] .escena__titulo .rev-pal {
  transform: none;
  transition: none;
  animation: subir-pal 0.5s cubic-bezier(0.19, 1, 0.22, 1) backwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.07s);
}

/* ══ Filetes que se dibujan ═════════════════════════════════════════════════
   El pseudo-elemento está siempre. Sin puerta es el filete de siempre; con
   puerta arranca a escala 0 y crece al entrar el elemento. */
html[data-revela] .pruebas li::before,
html[data-revela] .lista-sector > li::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
html[data-revela] .pruebas li.rev--on::before,
html[data-revela] .lista-sector > li.rev--on::before { transform: scaleX(1); }

/* Ficha del contacto: la barra lateral de cada fila */
html[data-revela] .ficha > div::before {
  transform: scaleY(0);
  transform-origin: top;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.2s;
  /* Un valor por transición: el escalón de entrada no debe arrastrar al
     hover, que tiene que responder en el acto. */
  transition-delay: var(--fila, 0ms), 0ms;
}
html[data-revela] .ficha.rev--on > div::before { transform: scaleY(1); }
html[data-revela] .ficha > div:nth-child(1) { --fila: 0ms; }
html[data-revela] .ficha > div:nth-child(2) { --fila: 90ms; }
html[data-revela] .ficha > div:nth-child(3) { --fila: 180ms; }

/* Carril de las fases */
html[data-revela] .fases__riel::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
html[data-revela] .fases__riel.rev--on::before { transform: scaleX(1); }

/* ══ Movimiento reducido ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .escena__lluvia { display: none; }
  html[data-barrido] .escena::after { display: none; }
  html[data-alerta] body { animation: none; }
  .term__punto, .pie__punto { animation: none; }
}