/* =============================================================
   ANIMACIONES — Scroll-driven + IntersectionObserver
   Capricho del Mar by Z
============================================================= */

/* ── REVEAL BASE ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity  0.9s var(--ease-luxury),
    transform 0.9s var(--ease-luxury);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados */
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.38s; }
.reveal-d4 { transition-delay: 0.52s; }

/* Desde izquierda */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity  1s var(--ease-luxury),
    transform 1s var(--ease-luxury);
}
.reveal-left.in {
  opacity: 1;
  transform: translateX(0);
}

/* Desde derecha */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity  1s var(--ease-luxury),
    transform 1s var(--ease-luxury);
}
.reveal-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* ── CLIP REVEAL (imágenes) ───────────────────────────────── */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-luxury);
}
.clip-reveal.in {
  clip-path: inset(0 0% 0 0);
}

/* Variante derecha → izquierda (imágenes en columna derecha) */
.clip-reveal-r {
  clip-path: inset(0 0% 0 100%);
  transition: clip-path 1.4s var(--ease-luxury);
}
.clip-reveal-r.in {
  clip-path: inset(0 0% 0 0%);
}

/* ── FADE SCALE (tarjetas, fotos) ────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity  0.85s var(--ease-luxury),
    transform 0.85s var(--ease-luxury);
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── KEYFRAMES GLOBALES ───────────────────────────────────── */
@keyframes scrollPulse {
  0%   { top: -100%; }
  100% { top: 120%;  }
}

@keyframes loaderBar {
  to { left: 100%; }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.65); }
}