/* ============================================================
   El Rey — animations.css
   Scroll reveal con IntersectionObserver + microinteracciones
   ============================================================ */

/* ----- Fade + slide up (todas las secciones) ----------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Slide desde la izquierda (items de diferencial) - */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ----- Slide desde la derecha (mapa de contacto) ------- */
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ----- Delays escalonados (para listas y grids) -------- */
.reveal:nth-child(2),
.reveal-left:nth-child(2),
.reveal-right:nth-child(2) {
  transition-delay: 0.1s;
}

.reveal:nth-child(3),
.reveal-left:nth-child(3),
.reveal-right:nth-child(3) {
  transition-delay: 0.2s;
}

/* ----- Entrada del Hero (CSS puro, sin JS) ------------- */
.hero-eyebrow {
  animation: fade-in-up 0.9s ease 0.2s both;
}

.hero-title {
  animation: fade-in-up 0.9s ease 0.4s both;
}

.hero-divider {
  animation: fade-in-up 0.9s ease 0.6s both;
}

.hero-tagline {
  animation: fade-in-up 0.9s ease 0.75s both;
}

.hero-content .btn-cta {
  animation: fade-in-up 0.9s ease 0.9s both;
}

.hero-scroll {
  animation: fade-in 1s ease 1.1s both;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----- Navbar brand entry ------------------------------ */
.navbar-brand {
  animation: fade-in 0.6s ease 0.1s both;
}

/* ----- Preferencia por movimiento reducido ------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .hero-eyebrow,
  .hero-title,
  .hero-divider,
  .hero-tagline,
  .hero-content .btn-cta,
  .hero-scroll,
  .navbar-brand {
    animation: none;
  }
}