/*
 * ANIMACIÓN · el movimiento del sitio, sin un solo kilobyte de JavaScript.
 *
 * POR QUÉ NO LOTTIE. El sitio anterior animaba con `@dotlottie/player-component`
 * traído de unpkg. Medido: el reproductor completo son 121 KB · 33 KB
 * comprimido, repartidos en la entrada y cuatro fragmentos. La portada entera
 * pesa 14 KB comprimidos, así que reproducir Lottie la multiplicaría por tres
 * ANTES de animar nada — y encima pidiéndole un script a un dominio ajeno en
 * cada visita.
 *
 * Lo que sí se aprovecha del material Lottie es su ARTE: las piezas de
 * `marca/figma/vigente/lottie_*` son fotogramas sueltos, y un fotograma suelto
 * se anima con CSS. Aquí están montadas así.
 *
 * QUEDA PARA DESPUÉS, si se decide: un solo Lottie diferido para un momento de
 * personaje que CSS no pueda hacer —el cohete despegando de verdad—, cargado
 * al acercarse su sección y servido desde nuestro dominio, no desde unpkg.
 *
 * TODO RESPETA `prefers-reduced-motion`. No hace falta repetirlo en cada regla:
 * `sistema.css` anula las duraciones globalmente. Lo que sí se anula aquí es lo
 * que no depende de una transición — los desplazamientos y los bucles.
 */

/* ═══ 1 · La flecha que avanza ════════════════════════════════════════════
 * Las piezas `lottie_arrow*` venían en pares: una en reposo y otra en verde y
 * más gruesa. Aquí es UNA sola forma usada como MÁSCARA, así que el color lo
 * pone el CSS y los dos estados salen del mismo archivo de 0,9 KB. Cambiar el
 * color de marca no obliga a reexportar nada.
 */

.flecha::after,
.con-flecha::after {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-left: .45em;
  vertical-align: -.1em;
  background: currentColor;
  -webkit-mask: url("/marca/piezas/flecha-diagonal.svg") no-repeat center / contain;
  mask: url("/marca/piezas/flecha-diagonal.svg") no-repeat center / contain;
  transition: transform var(--transicion), color var(--transicion);
}
/* Diagonal para «se abre en otro sitio», recta para «sigues aquí». La forma
   dice a dónde va el enlace, que es información y no adorno. */
.flecha-recta::after {
  -webkit-mask-image: url("/marca/piezas/flecha-derecha.svg");
  mask-image: url("/marca/piezas/flecha-derecha.svg");
}

.flecha:hover::after,
.flecha:focus-visible::after { transform: translate(.2em, -.2em); }
.flecha-recta:hover::after,
.flecha-recta:focus-visible::after { transform: translateX(.3em); }

/* ═══ 2 · Los destellos ═══════════════════════════════════════════════════
 * Del primer fotograma del menú (`lottie_menu-1`): dos chispas que en el
 * original acompañaban el cambio MENU ⇄ CERRAR.
 *
 * Aquí aparecen SOLO al señalar la llamada a la acción principal, y una vez.
 * En bucle serían un adorno que parpadea toda la sesión; en respuesta a un
 * gesto son un premio. Es la diferencia entre decorar y responder.
 */

.destella { position: relative; }
.destella::before {
  content: "";
  position: absolute; inset: -30% -18%;
  pointer-events: none;
  background: var(--acento-fondo);
  -webkit-mask: url("/marca/piezas/destellos.svg") no-repeat center / contain;
  mask: url("/marca/piezas/destellos.svg") no-repeat center / contain;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .destella:hover::before,
  .destella:focus-visible::before { animation: chispa .55s ease-out; }
}
@keyframes chispa {
  0%   { opacity: 0;   transform: scale(.7)  rotate(-8deg); }
  45%  { opacity: .95; transform: scale(1.05) rotate(2deg); }
  100% { opacity: 0;   transform: scale(1.18) rotate(6deg); }
}

/* ═══ 3 · Entrada al aparecer ═════════════════════════════════════════════
 * Las secciones suben y aparecen al entrar en pantalla. Es lo que pedían las
 * notas del manifiesto —«cada párrafo animando su entrada»— y se hace con
 * `animation-timeline: view()`, que ata la animación al scroll SIN JavaScript.
 *
 * REGLA DE ORO AQUÍ: va dentro de `@supports`. Donde el navegador no lo
 * entiende, el contenido se queda visible y quieto, que es el estado correcto.
 * Lo inverso —esconder con opacidad 0 y revelar con un guion— deja la página
 * EN BLANCO si el guion falla, y eso es exactamente cómo un efecto bonito se
 * convierte en un sitio roto.
 */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aparece {
      animation: subir-y-aparecer linear both;
      animation-timeline: view();
      /* Empieza al asomar y TERMINA ANTES de que el borde superior de la
         sección llegue arriba del todo.
         `entry 100%` es justo ese momento, así que al 80% ya está entera.
         Con el rango anterior (`cover 30%`) una sección alta aterrizaba al 88%
         de opacidad si se llegaba por un ancla del menú: legible, pero a medio
         camino. Medido: #trabajo daba 0.88 al saltar a él desde la barra. */
      animation-range: entry 0% entry 80%;
    }
  }
}
@keyframes subir-y-aparecer {
  from { opacity: 0; transform: translateY(1.75rem); }
  to   { opacity: 1; transform: none; }
}

/* ═══ 4 · Las ilustraciones responden ═════════════════════════════════════
 * Ya flotan solas. Esto añade la REACCIÓN: al señalarlas se inclinan y se
 * acercan un punto. La transición va en `transform` y `filter` únicamente —
 * las dos propiedades que el navegador anima sin recalcular la maquetación.
 */

.heroe-arte img,
.manifiesto-arte,
.cierre .cohete {
  transition: transform var(--transicion-lenta), filter var(--transicion-lenta);
}
.heroe-arte:hover img { transform: scale(1.04) rotate(-2deg); filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35)); }
.cierre .cohete:hover { transform: translateY(-.6rem) rotate(6deg) scale(1.05); }

/* El cohete del cierre invita a pulsar el botón que tiene debajo: al señalar
   CUALQUIER acción del cierre, despega un poco. Así el dibujo y el botón se
   leen como una sola cosa y no como dos elementos que coinciden. */
.cierre:has(.boton:hover) .cohete { transform: translateY(-1.1rem) rotate(4deg); }

/* ═══ 5 · La tira, al señalar un fotograma ════════════════════════════════
 * Ya pasa de gris a color. Se le añade que los VECINOS se apaguen un poco:
 * el foco no lo da solo lo que se ilumina, también lo que se retira. */

@media (hover: hover) {
  .tira:hover .fotograma img { filter: grayscale(1) contrast(1.05) brightness(.72); }
  .tira .fotograma:hover img,
  .tira .fotograma:focus-visible img { filter: none; }
}