@view-transition { navigation: auto; }

@keyframes aparecer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes revelar-mascara {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}
@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.15); } }

.anim-aparecer { animation: aparecer var(--dur-larga) var(--curva) both; }
.retardo-1 { animation-delay: 80ms; }
.retardo-2 { animation-delay: 160ms; }
.retardo-3 { animation-delay: 240ms; }
.retardo-4 { animation-delay: 320ms; }

/* Entrada al viewport sin JavaScript: la animación corre con la posición de scroll.
   Donde no hay soporte (Firefox hoy) corre una vez al cargar — nunca contenido oculto. */
.al-entrar {
  animation: aparecer var(--dur-larga) var(--curva) both;
}
@supports (animation-timeline: view()) {
  .al-entrar {
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
}

.enlace {
  position: relative;
  color: var(--neon-azul);
}
.enlace::after {
  content: '';
  position: absolute;
  inset: auto 0 -2px 0;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-corta) var(--curva);
}
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }

@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; }
}