/**
 * HAS Animations & Motion System Stylesheet
 * Brand: HAS (HEX Automation Services)
 * Purposeful, performant micro-interactions respecting prefers-reduced-motion
 */

/* -------------------------------------------------------------------------
 * Keyframe Animations
 * ------------------------------------------------------------------------- */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}

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

@keyframes orbit-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes circuit-glow {
  0%, 100% {
    stroke-opacity: 0.2;
    filter: drop-shadow(0 0 2px var(--has-purple-amethyst));
  }
  50% {
    stroke-opacity: 0.8;
    filter: drop-shadow(0 0 10px var(--has-gold-signature));
  }
}

@keyframes hex-shimmer {
  0% {
    opacity: 0.3;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.98);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* -------------------------------------------------------------------------
 * Scroll-Triggered Reveal Classes (Driven by IntersectionObserver in app.js)
 * ------------------------------------------------------------------------- */
.has-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.has-reveal.has-reveal-active {
  opacity: 1;
  transform: translateY(0);
}

.has-reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.has-reveal-stagger.has-reveal-active > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }
.has-reveal-stagger.has-reveal-active > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }

/* Orbital motion utilities */
.has-orbit-spin-slow {
  animation: orbit-spin 40s linear infinite;
  transform-origin: center center;
}

.has-orbit-spin-reverse {
  animation: orbit-spin-reverse 30s linear infinite;
  transform-origin: center center;
}

.has-float-gentle {
  animation: subtle-float 5s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
 * Accessibility: Reduced Motion Override
 * ------------------------------------------------------------------------- */
@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;
  }

  #has-canvas-bg {
    display: none !important;
  }

  .has-reveal,
  .has-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .has-hero-badge .status-dot,
  .has-ai-pulse-dot {
    animation: none !important;
  }

  .has-orbit-spin-slow,
  .has-orbit-spin-reverse,
  .has-float-gentle {
    animation: none !important;
  }
}