/* ===========================================================
   EL PATIO DE LGM — ANIMATIONS.CSS
   Animaciones lentas y sutiles. Nada exagerado.
=========================================================== */

/* ---- Fade + Reveal on scroll (controlado por animations.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}

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

/* Retraso escalonado para grupos dentro de una misma sección */
.bio-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.manifiesto-inner .reveal:nth-child(2) { transition-delay: 0.05s; }
.manifiesto-inner .reveal:nth-child(3) { transition-delay: 0.14s; }
.manifiesto-inner .reveal:nth-child(4) { transition-delay: 0.22s; }

.gallery-grid .gallery-item.reveal { transition-duration: 0.9s; }

/* ---- Hero entrada inicial (independiente del scroll) ---- */
.hero-eyebrow.reveal,
.hero-title.reveal,
.hero-sub.reveal {
  transform: translateY(18px);
}
.hero-eyebrow.is-visible { transition-delay: 0.1s; }
.hero-title.is-visible { transition-delay: 0.25s; }
.hero-sub.is-visible { transition-delay: 0.55s; }

/* ---- Parallax ligero del hero (aplicado vía JS con transform) ---- */
.hero-img {
  transition: transform 0.1s linear;
}

/* ---- Botones ---- */
.btn {
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* ---- Lightbox imagen ---- */
.lightbox-img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-img { transform: none !important; }
}