/* ============================================================
   ANIMATIONS v2 — Refined Motion System
   Dr. Elci Júnior Landing Page
   ============================================================ */

/* ---- Base ---- */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}
[data-animate].is-visible { opacity: 1; }

[data-animate="fade-up"] {
  transform: translateY(28px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
[data-animate="fade-up"].is-visible { transform: translateY(0); }

[data-animate="fade-in"] {
  transition: opacity var(--dur-slower) var(--ease-out);
}

[data-animate="fade-left"] {
  transform: translateX(-28px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
[data-animate="fade-left"].is-visible { transform: translateX(0); }

[data-animate="fade-right"] {
  transform: translateX(28px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
[data-animate="fade-right"].is-visible { transform: translateX(0); }

[data-animate="scale-in"] {
  transform: scale(0.97);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
[data-animate="scale-in"].is-visible { transform: scale(1); }

/* ---- Stagger delays ---- */
[data-delay="1"] { transition-delay: 80ms; }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }
[data-delay="7"] { transition-delay: 560ms; }

/* ---- Navbar scroll ---- */
.navbar {
  transition: background var(--dur-base) var(--ease-in-out),
              box-shadow var(--dur-base) var(--ease-in-out);
}

/* ---- Timeline line draw ---- */
.flow-connector {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.2s var(--ease-out);
}
.flow-connector.is-visible { transform: scaleY(1); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-animate] { opacity: 1; transform: none; }
}