/* ============================================================
   PISO MOJADO — animations.css
   ============================================================ */

/* ── Hero background image entrance ────────────────────────── */
@keyframes hero-bg-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-bg {
  animation: hero-bg-in 1.4s ease-out forwards;
  opacity: 0;
}

/* ── Hero text entrance ─────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-title {
  animation: fade-up 0.7s 0.6s ease-out forwards;
  opacity: 0;
}

.hero-tagline {
  animation: fade-up 0.7s 0.9s ease-out forwards;
  opacity: 0;
}

/* ── Scroll indicator ───────────────────────────────────────── */
/* bounce-down is defined in main.css; this fades it in after hero loads */
@keyframes scroll-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.scroll-down {
  animation: scroll-appear 0.6s 1.6s ease-out forwards;
  opacity: 0;
}

/* ── Stripe drift on hero::after ────────────────────────────── */
@keyframes stripe-drift {
  from { background-position: 0 0; }
  to   { background-position: 200px 200px; }
}

#hero::after {
  animation: stripe-drift 60s linear infinite;
}

/* ── Scroll reveal (cards, section headers) ─────────────────── */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.will-reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ── Reduce motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-bg,
  .hero-title,
  .hero-tagline,
  .hero-nav-pills,
  .scroll-down,
  .will-reveal {
    opacity: 1;
    transform: none;
  }
}