/* ============================================================================
   BASE › ANIMACIONES REUTILIZABLES
   ----------------------------------------------------------------------------
   Los @keyframes viven acá, separados de los componentes que los usan.
   ¿Por qué? Porque una animación puede ser usada por varios componentes: si
   "aparecer" viviera dentro de hero.css, no la podrías reutilizar mañana en
   una galería de fotos sin duplicar código.

   Las clases .animado y .retraso-N son "utilidades": se pegan a cualquier
   elemento del HTML para que entre con fundido, sin escribir CSS nuevo.
   ============================================================================ */

/* --- Entrada con fundido + leve desplazamiento hacia arriba --------------- */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Rebote vertical (lo usa la flecha de scroll) ------------------------- */
@keyframes rebote {
  0%, 100% { transform: translateY(0);   opacity: .75; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* --- Utilidad: aplicar la entrada ----------------------------------------- */
.animado {
  opacity: 0;                                     /* estado inicial: invisible */
  animation: aparecer .9s cubic-bezier(.2, .7, .3, 1) forwards;
  /* forwards = al terminar se queda en el estado final (visible) */
}

/* Retrasos escalonados: producen la entrada "en cascada".
   El ojo lee título → bajada → botón → flecha, en ese orden. */
.retraso-1 { animation-delay: .15s; }
.retraso-2 { animation-delay: .40s; }
.retraso-3 { animation-delay: .65s; }
.retraso-4 { animation-delay: 1.10s; }