/* ============================================
   MARIALVA — Animations & Keyframes
   ============================================ */

/* ---------- Loader ---------- */
@keyframes loaderFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Scroll Cue ---------- */
@keyframes scrollCue {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
  50% {
    opacity: 0.5;
    transform: scaleY(0.5);
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* ---------- Map Pin Bounce ---------- */
@keyframes pinBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ---------- CSS Scroll-Driven Animations (Progressive Enhancement) ---------- */
@supports (animation-timeline: view()) {
  .hero__bg-img {
    animation: heroParallax linear both;
    animation-timeline: scroll();
    animation-range: 0% 50%;
  }

  @keyframes heroParallax {
    from {
      transform: scale(1.1) translateY(0);
    }
    to {
      transform: scale(1.2) translateY(-10%);
    }
  }

  .hero__content {
    animation: heroContentFade linear both;
    animation-timeline: scroll();
    animation-range: 0% 30%;
  }

  @keyframes heroContentFade {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-30px) scale(1.05);
    }
  }

  .footer__watermark {
    animation: watermarkParallax linear both;
    animation-timeline: scroll();
    animation-range: 80% 100%;
  }

  @keyframes watermarkParallax {
    from {
      transform: translate(-50%, -30%);
    }
    to {
      transform: translate(-50%, -60%);
    }
  }
}

/* ---------- Reveal animations (triggered by JS) ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

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

/* Stagger delays for child elements */
.stagger-delay > *:nth-child(1) { transition-delay: 0s; }
.stagger-delay > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-delay > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-delay > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-delay > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-delay > *:nth-child(6) { transition-delay: 0.5s; }

/* ---------- Image Curtain Reveal ---------- */
.curtain-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-out-expo);
}

.curtain-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---------- Divider Grow ---------- */
.divider-grow {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--ease-out-expo);
}

.divider-grow.is-visible {
  transform: scaleX(1);
}

/* ---------- Mobile Menu Link Transitions ---------- */
.mobile-menu__link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu__link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu__link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu__link:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu__link:nth-child(5) { transition-delay: 0.3s; }

.mobile-menu.is-open .mobile-menu__link {
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}