/**
 * Syxflow Subtle & Premium Animations
 * GPU accelerated, buttery smooth, respects prefers-reduced-motion
 */

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

@keyframes syx-float-reverse {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes syx-pulse-glow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.06);
  }
}

@keyframes syx-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.syx-animate-float {
  animation: syx-float 7s ease-in-out infinite;
}

.syx-animate-float-delayed {
  animation: syx-float-reverse 8s ease-in-out 1.5s infinite;
}

/* Hero Canvas Convergence Background */
.syx-hero-convergence-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.syx-hero-convergence-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Subtle Hero Glow */
.syx-hero-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, rgba(0, 82, 204, 0.06) 50%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  animation: syx-pulse-glow 9s ease-in-out infinite;
}

/* Scroll Reveal Utility */
.syx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--syx-ease-out), transform 0.6s var(--syx-ease-out);
  will-change: opacity, transform;
}

.syx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.syx-delay-1 { transition-delay: 100ms; }
.syx-delay-2 { transition-delay: 200ms; }
.syx-delay-3 { transition-delay: 300ms; }
.syx-delay-4 { transition-delay: 400ms; }

/* Accessibility */
@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;
  }
  .syx-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .syx-animate-float,
  .syx-animate-float-delayed,
  .syx-hero-glow {
    animation: none !important;
  }
}