/* =========================================================
   WisaiFlow - Animations
   Scroll-triggered fade/slide animations
   ========================================================= */

/* Initial state - hidden before Intersection Observer triggers */
.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);
}

/* Stagger delay for grid children */
.services-grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.services-grid .animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.services-grid .animate-on-scroll:nth-child(3) { transition-delay: 160ms; }
.services-grid .animate-on-scroll:nth-child(4) { transition-delay: 240ms; }

.team-grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.team-grid .animate-on-scroll:nth-child(2) { transition-delay: 120ms; }

/* ---- Border Pulse ---- */
@keyframes border-pulse {
  0%   {
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 0 0px rgba(99, 102, 241, 0);
  }
  35%  {
    border-color: rgba(99, 102, 241, 0.65);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
  }
  65%  {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.15);
  }
  100% {
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 0 0px rgba(99, 102, 241, 0);
  }
}

/* Basis: sanfte Transition für das Ausfaden beim Verlassen */
.glass {
  transition: border-color 1.4s ease, box-shadow 1.4s ease;
}

/* Aktiver Puls - Transition deaktiviert damit Animation flüssig läuft */
.glass.is-pulsing {
  animation: border-pulse 3s ease-in-out infinite;
  transition: none;
}


/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-arrow {
    animation: none;
  }

  .glow-orb {
    animation: none;
  }

  .glass.is-pulsing {
    animation: none;
  }

  .typing-text::after {
    animation: none;
  }
}