/*
 * reveal.css — Animaciones de aparición con scroll
 * Minimal Car Detailing
 */

/* ── Estado inicial (oculto) ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  .reveal {
    opacity: 0;
    transition:
      opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .reveal-up    { transform: translateY(28px); }
  .reveal-left  { transform: translateX(-32px); }
  .reveal-right { transform: translateX(32px); }
  .reveal-scale { transform: scale(0.96); }

  /* Estado visible (activado por JS) */
  .reveal.visible {
    opacity: 1;
    transform: none;
  }

  /* ── Animaciones del hero (CSS puro, sin JS) ──────────────────── */
  @keyframes rv-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes rv-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .hero-enter {
    animation: rv-fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Delays escalonados para los hijos del hero */
  .hero-enter-d0 { animation-delay:   0ms; }
  .hero-enter-d1 { animation-delay: 110ms; }
  .hero-enter-d2 { animation-delay: 230ms; }
  .hero-enter-d3 { animation-delay: 370ms; }
  .hero-enter-d4 { animation-delay: 510ms; }
  .hero-enter-d5 { animation-delay: 640ms; }
}