.reveal {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition:
    opacity 900ms ease,
    transform 900ms ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-delay-1 {
  transition-delay: 90ms;
}

.reveal-delay-2 {
  transition-delay: 160ms;
}

.reveal-delay-3 {
  transition-delay: 230ms;
}

/* ===========================
   MICROINTERACCIONES PREMIUM
=========================== */

.hero-image,
.about-card,
.where-card,
.faq-item,
.footer-btn,
.gallery-item {
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero */

.hero-image:hover {
  transform: translateY(-0.2rem);
}

/* Cards */

.about-card:hover,
.where-card:hover,
.faq-item:hover {
  transform: translateY(-0.28rem);
}

.about-card:hover,
.faq-item:hover {
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.2);
}

.where-card:hover {
  border-color: rgba(241, 167, 5, 0.28);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

/* Galería */

.gallery-item:hover {
  transform: translateY(-0.15rem);
}

/* Botones */

.footer-btn:hover,
.hero-btn:hover {
  transform: translateY(-2px);
}

/* ===========================
   REDUCED MOTION
=========================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .hero-image,
  .about-card,
  .where-card,
  .faq-item,
  .footer-btn,
  .gallery-item,
  .hero-btn {
    transition: none;
  }

  .hero-image:hover,
  .about-card:hover,
  .where-card:hover,
  .faq-item:hover,
  .footer-btn:hover,
  .gallery-item:hover,
  .hero-btn:hover {
    transform: none;
  }
}