/* ============================================================================
   SpiderNet · EL MOVIMIENTO. Un solo mecanismo para toda la web.
   ============================================================================
   Pareja de public/js/reveal.js. Aqui esta el ESTADO (como se ve una cosa
   antes y despues de entrar en pantalla); alli esta el DISPARO (cuando pasa
   de una a otra). Separarlos es lo que permite que un componente sin
   JavaScript siga teniendo un aspecto final correcto.

   POR QUE EXISTE
   --------------
   Antes de este fichero cada vista se inventaba su entrada: index.ejs tiene
   su @keyframes sn-in de .5s ease, el grafo tiene la suya, y cualquier
   pantalla nueva habria traido una tercera. Tres velocidades y tres curvas
   distintas en el mismo sitio es exactamente lo que hace que una web se lea
   como una plantilla y no como el deck. Aqui hay UNA curva (--ease) y UNA
   duracion por defecto (--dur-2), las dos definidas en brand.css.

   LA REGLA QUE NO SE SALTA
   ------------------------
   UN MOMENTO ANIMADO POR PANTALLA. [data-reveal] es para TEXTO: titular,
   entradilla, lista. El momento propio de la seccion — la curva que se
   dibuja, el grafo que se disuelve, los planos que se apilan — lo pone su
   componente, y entonces esa seccion NO lleva ademas un fade generico. El
   razonamiento largo esta en la cabecera de public/js/reveal.js.

   ORDEN DE CARGA
   --------------
   Va DESPUES de brand.css (de donde toma --ease y --dur-*) y ANTES de
   output.css (las utilidades de Tailwind deben poder ganar). No declara
   ningun color propio: el anillo de foco es el unico acento.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1 · EL REVELADO
   Se enciende DESDE EL NEGRO (opacity 0) y sube 12px. No hay escala, ni giro,
   ni rebote: la unica curva frena larga y se posa. El desplazamiento es corto
   a proposito — 12px se leen como "esto acaba de llegar", 40px se leen como
   una diapositiva de PowerPoint.
   --------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   2 · LA CASCADA
   Los hijos de un [data-reveal-stagger] entran en fila, 120 ms de diferencia.
   El indice --i lo pone reveal.js al cargar; el 0 de aqui es la red de
   seguridad para el caso en que el JavaScript no llegue a asignarlo: sin el,
   la declaracion seria invalida y el navegador la tiraria entera.

   120 ms no es un numero libre: por debajo de ~90 la fila se lee como un solo
   bloque y la cascada no se percibe; por encima de ~150 el ultimo elemento
   llega tarde y el lector ya ha pasado de largo.
   --------------------------------------------------------------------------- */
[data-reveal-stagger] > * {
  --i: 0;
  transition-delay: calc(var(--i) * 120ms);
}

/* ---------------------------------------------------------------------------
   3 · EL FOCO
   Anillo de 2px en el acento, separado 3px del elemento, en TODO lo
   interactivo. Es la unica pista visual que tiene quien navega con teclado, y
   por eso no se anima: un foco que tarda 400 ms en aparecer es un foco que se
   ha perdido. Va en :focus-visible y no en :focus para no pintarlo con el
   raton, que es lo que lleva a la gente a quitarlo con outline:none.

   TODO(web19-b) · DOS SITIOS LE GANAN A ESTA REGLA, y no se tocan desde aqui
   porque no son de este cambio. Quedan anotados con lo que hay que hacer:

     · views/partials/header.ejs:184-188 pinta 1px en vez de 2px. Gana por
       especificidad (#site-header ...), no por orden, asi que no se arregla
       moviendo hojas: hay que editar esa linea. El foco SE VE — es el mismo
       acento —, solo que mas fino que el resto del sitio.

     · public/dist/design-system.css:113 quita el anillo de #language-select
       con `outline: none !important` y NO pone nada en su lugar: ese control
       desaparece del recorrido visual del teclado. La :188 (.spider-input)
       tambien lo quita, pero lo sustituye por un box-shadow — se ve, solo que
       en el indigo viejo. Ninguna afecta a las paginas publicas (no cargan
       esa hoja); si a las vistas que pasan designSystem: true.

   Ninguno se arregla con !important aqui: esta hoja no puede aplastar los
   <style> en linea de vistas sin revisar. Se arreglan en su sitio.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="slider"]:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   4 · MOVIMIENTO REDUCIDO
   No es "menos animacion": es NINGUNA, y con el estado FINAL puesto. Quien
   activa esta preferencia suele hacerlo por mareo o por migrana, asi que un
   fade suave sigue siendo un problema. La pagina queda entera y legible desde
   el primer fotograma; reveal.js hace lo mismo por su lado (marca todo como
   entrado de golpe y no espera a ningun observer).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-reveal-stagger] > * {
    transition-delay: 0s;
  }
}