/* ============================================
   OptiAI — Animationen
   ============================================ */

/* Scroll-Fade-In */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Verzögerungen für gestaffelte Kinder */
.animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.15s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.25s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.35s; }

/* ---- HOVER-FOKUS-EFFEKT für Card-Gruppen ---- */
/* Alle Cards im Grid dimmen leicht, wenn die Maus im Grid ist */
.cards-grid:hover .card {
  opacity: 0.70;
  transform: scale(0.98);
}

/* Die aktive Card kommt nach vorne */
.cards-grid .card:hover {
  opacity: 1 !important;
  transform: scale(1.04) !important;
  box-shadow: 0 12px 36px rgba(29, 78, 216, 0.18);
}

/* Basis-Transition für alle Cards */
.card {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Puls-Animation für Highlight-Element */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 24px rgba(29,78,216,0.4); }
  50%       { box-shadow: 0 0 40px rgba(29,78,216,0.7); }
}

.process-step--highlight .process-icon {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* Zähler-Animation (JS-gesteuert) */
.counting {
  transition: color 0.2s ease;
  color: var(--color-blue);
}