/* ============================================================
   SOLVIA × SECUOYAS v2 — animations.css
   Keyframes, entrance classes, stagger, utilities
   ============================================================ */

/* ─── INITIAL STATES ─────────────────────────────────────────── */
.animate-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
}
.fade-up       { transform: translateY(30px); }
.fade-down     { transform: translateY(-30px); }
.fade-left     { transform: translateX(-30px); }
.fade-right    { transform: translateX(30px); }
.fade-in       { transform: none; }
.scale-up      { transform: scale(0.95); }

/* ─── ACTIVE STATE ──────────────────────────────────────────── */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── DELAYS ─────────────────────────────────────────────────── */
.delay-1  { transition-delay: 0.08s !important; }
.delay-2  { transition-delay: 0.16s !important; }
.delay-3  { transition-delay: 0.24s !important; }
.delay-4  { transition-delay: 0.32s !important; }
.delay-5  { transition-delay: 0.40s !important; }
.delay-6  { transition-delay: 0.48s !important; }

/* ─── STAGGER ────────────────────────────────────────────────── */
.stagger > *:nth-child(1)  { transition-delay: 0.04s !important; }
.stagger > *:nth-child(2)  { transition-delay: 0.12s !important; }
.stagger > *:nth-child(3)  { transition-delay: 0.20s !important; }
.stagger > *:nth-child(4)  { transition-delay: 0.28s !important; }
.stagger > *:nth-child(5)  { transition-delay: 0.36s !important; }
.stagger > *:nth-child(6)  { transition-delay: 0.44s !important; }

/* ─── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes circle-expand {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes ganttGrow {
  from { transform: translateY(-50%) scaleX(0); }
  to   { transform: translateY(-50%) scaleX(1); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── HERO CANVAS ───────────────────────────────────────────── */
.hero__canvas { opacity: 0; transition: opacity 1.2s ease; }
.hero__canvas.loaded { opacity: 1; }

/* ─── GANTT BARS ─────────────────────────────────────────────── */
.gantt__bar {
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}
.gantt__bar.is-visible {
  transform: translateY(-50%) scaleX(1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── HOVER EFFECTS ─────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}