/* ═══════════════════════════════════════════════
   animations.css — VEKSU
   Keyframes, scroll-reveal (.anim / .anim-fade),
   IntersectionObserver classes, hovers, transitions
═══════════════════════════════════════════════ */

/* ── Scroll reveal — estado inicial ─────────── */
/* ═══════════════════════════════════════════════
       SCROLL ANIMATIONS (Intersection Observer)
    ═══════════════════════════════════════════════ */
    .anim {
      opacity: 0;
      transform: translateY(30px);
      transition:
        opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
    }
    .anim.in { opacity: 1; transform: translateY(0); }
    .anim-fade {
      opacity: 0;
      transition: opacity var(--dur-reveal) ease;
    }
    .anim-fade.in { opacity: 1; }
    .d1 { transition-delay:   0ms; }
    .d2 { transition-delay: 120ms; }
    .d3 { transition-delay: 240ms; }
    .d4 { transition-delay: 360ms; }
    .d5 { transition-delay: 480ms; }

/* ── Delays para stagger ────────────────────── */
/* ═══════════════════════════════════════════════
       ANIMACIONES
    ═══════════════════════════════════════════════ */
    .anim {
      opacity: 0; transform: translateY(28px);
      transition: opacity var(--dur-reveal) var(--ease-out),
                  transform var(--dur-reveal) var(--ease-out);
    }
    .anim.in { opacity: 1; transform: translateY(0); }
    .anim-fade { opacity: 0; transition: opacity var(--dur-reveal) ease; }
    .anim-fade.in { opacity: 1; }
    .d1 { transition-delay:   0ms; }
    .d2 { transition-delay: 120ms; }
    .d3 { transition-delay: 240ms; }
    .d4 { transition-delay: 360ms; }
    .he { opacity: 0; transform: translateY(22px); }
    .he.d1 { transition: opacity 500ms ease 0.1s, transform 500ms var(--ease-out) 0.1s; }
    .he.d2 { transition: opacity 500ms ease 0.24s, transform 500ms var(--ease-out) 0.24s; }
    .he.d3 { transition: opacity 500ms ease 0.38s, transform 500ms var(--ease-out) 0.38s; }
    .he.d4 { transition: opacity 500ms ease 0.52s, transform 500ms var(--ease-out) 0.52s; }
    body.loaded .he { opacity: 1; transform: translateY(0); }

/* ── Hero entrance (.he) ────────────────────── */
.he {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
body.loaded .he   { opacity: 1; transform: translateY(0); }
body.loaded .he.d1 { transition-delay: 0.05s; }
body.loaded .he.d2 { transition-delay: 0.15s; }
body.loaded .he.d3 { transition-delay: 0.25s; }
body.loaded .he.d4 { transition-delay: 0.35s; }
body.loaded .he.d5 { transition-delay: 0.45s; }

/* ── Hover utilities ────────────────────────── */
.hover-lift {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}