/**
 * CanvasForge v2 – Animations
 * fade-up on scroll, hover lift, glow pulse, gradient shift.
 * Respects prefers-reduced-motion.
 */

/* ─── Fade up on scroll ───────────────────────────────────────────────────── */
.ds-fade-up {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: no-preference) {
  .ds-fade-up {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .ds-fade-up.ds-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-fade-up {
    opacity: 1;
    transform: none;
  }
  .ds-fade-up.ds-visible {
    opacity: 1;
    transform: none;
  }
}

/* ─── Hover lift ─────────────────────────────────────────────────────────── */
.ds-hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  }
}

/* ─── Glow pulse ───────────────────────────────────────────────────────────── */
@keyframes ds-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 35px rgba(59, 130, 246, 0.35); }
}

@media (prefers-reduced-motion: no-preference) {
  .ds-glow-pulse {
    animation: ds-glow-pulse 2.5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-glow-pulse {
    animation: none;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
}

/* ─── Gradient shift (hero) ───────────────────────────────────────────────── */
@keyframes ds-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ds-hero-gradient {
  background: linear-gradient(135deg, #1e3a5f 0%, #111827 40%, #1f2937 70%, #111827 100%);
  background-size: 200% 200%;
}

@media (prefers-reduced-motion: no-preference) {
  .ds-hero-gradient {
    animation: ds-gradient-shift 12s ease infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-hero-gradient {
    animation: none;
  }
}