@view-transition { navigation: auto; }

@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.anim-aparecer { animation: aparecer 0.55s var(--curva) both; }
.retardo-1 { animation-delay: 90ms; }
.retardo-2 { animation-delay: 180ms; }
.retardo-3 { animation-delay: 270ms; }
.retardo-4 { animation-delay: 360ms; }

/* Entrada al viewport dirigida por JS (IntersectionObserver), como los fundidos
   escalonados de la referencia. Sin JS no hay html.js y todo queda visible. */
html.js .al-entrar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--curva), transform 0.55s var(--curva);
}
html.js .al-entrar.visto { opacity: 1; transform: none; }
html.js .escalonado > .al-entrar:nth-child(2) { transition-delay: 90ms; }
html.js .escalonado > .al-entrar:nth-child(3) { transition-delay: 180ms; }
html.js .escalonado > .al-entrar:nth-child(4) { transition-delay: 270ms; }
html.js .escalonado > .al-entrar:nth-child(5) { transition-delay: 360ms; }

/* El subrayado es permanente, no solo al pasar el raton: dentro de un parrafo
   estos enlaces solo se distinguian por el color, y contra el gris de las
   etiquetas de casilla ese color se queda en 2,3:1 — por debajo del 3:1 que pide
   la WCAG para distinguir por color. Al pasar por encima se opaca, que es lo que
   antes hacia aparecer la linea. */
.enlace {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-corta) var(--curva);
}
.enlace:focus-visible { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .enlace:hover { text-decoration-color: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .anim-aparecer, .al-entrar { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}