/*
 * Animaciones reutilizables del sitio.
 * Agrega `reveal-up` a cualquier elemento para mostrarlo de abajo hacia arriba.
 * La distancia, duracion y espera se pueden personalizar con las variables CSS.
 */
.reveal-up {
  animation: reveal-up var(--reveal-duration, 900ms) var(--reveal-easing, cubic-bezier(.16, 1, .3, 1)) var(--reveal-delay, 0ms) both;
  will-change: opacity, transform, filter;
}

.reveal-up--delay-1 { --reveal-delay: 120ms; }
.reveal-up--delay-2 { --reveal-delay: 240ms; }

/* Variante para títulos o componentes protagonistas del primer viewport. */
.reveal-up--slow {
  --reveal-duration: 1500ms;
  --reveal-delay: 420ms;
  --reveal-distance: 80px;
  --reveal-blur: 8px;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance, 32px));
    filter: blur(var(--reveal-blur, 0));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }
}