/* =============================================
   DocEngine Landing Page — Animations
   ============================================= */

/* --- Keyframes --- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes floatAlt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(15px, -10px); }
  66% { transform: translate(-10px, 15px); }
}

@keyframes driftAlt {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-12px, 8px); }
  66% { transform: translate(8px, -12px); }
}

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

@keyframes dashMove {
  to { stroke-dashoffset: -20; }
}


/* --- On-Load Animations (Hero) --- */

.anim-fade-up {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-delay-1 { animation-delay: 0.15s; }
.anim-delay-2 { animation-delay: 0.3s; }
.anim-delay-3 { animation-delay: 0.45s; }
.anim-delay-4 { animation-delay: 0.6s; }

/* Header entrance */
.header {
  animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hero badge dot pulse */
.hero__badge-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* Hero illustration float */
.hero-illustration__doc {
  animation: float 4s ease-in-out infinite;
}

/* Floating nodes with staggered animations */
.hero-illustration__node--1 {
  animation: floatAlt 5s ease-in-out infinite;
}
.hero-illustration__node--2 {
  animation: floatAlt 4.5s ease-in-out infinite 0.5s;
}
.hero-illustration__node--3 {
  animation: floatAlt 5.5s ease-in-out infinite 1s;
}
.hero-illustration__node--4 {
  animation: floatAlt 4s ease-in-out infinite 1.5s;
}

/* Decorative orbs drift */
.hero__orb--1 { animation: drift 20s ease-in-out infinite; }
.hero__orb--2 { animation: driftAlt 18s ease-in-out infinite; }
.hero__orb--3 { animation: drift 22s ease-in-out infinite 3s; }

/* CTA section orbs */
.cta-section__orb--1 { animation: drift 18s ease-in-out infinite; }
.cta-section__orb--2 { animation: driftAlt 20s ease-in-out infinite; }

/* SVG dashed lines animate */
.hero-illustration__lines path {
  animation: dashMove 3s linear infinite;
}
.graph-lines line {
  animation: dashMove 4s linear infinite;
}


/* --- Scroll-Triggered Animations --- */

/* Base state: hidden until scrolled into view */
[data-animate] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"] {
  transform: translateY(30px);
}
[data-animate="slide-left"] {
  transform: translateX(-60px);
}
[data-animate="slide-right"] {
  transform: translateX(60px);
}
[data-animate="fade-scale"] {
  transform: scale(0.9);
}

/* Visible state */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Graph nodes pulse when visible */
.graph-visual.is-visible .graph-node__icon {
  animation: pulse 3s ease-in-out infinite;
  animation-delay: calc(var(--node-index, 0) * 0.3s);
}


/* --- Accessibility: Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .anim-fade-up,
  [data-animate] {
    opacity: 1;
    transform: none;
  }
}