/* Motion defaults, reveal system, reduced-motion overrides */

@keyframes zha-route-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}
.zha-route--pulse { animation: zha-route-pulse 4s ease-in-out infinite; }

/* Hub pulse — staggered; only when JS motion is available (html.js). */
@keyframes zha-hub-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
html.js .zha-hero-network .zha-hub { animation: zha-hub-pulse 3s ease-in-out infinite; }
html.js .zha-hero-network #hub-ae { animation-delay: 1s; }
html.js .zha-hero-network #hub-cn { animation-delay: 2s; }

/* ============================================================
   Reveal system — hidden initial states only under JS motion.
   Without js-motion (no JS / reduced-motion / gsap missing),
   everything stays visible (progressive enhancement).
   ============================================================ */
html.js-motion .zha-reveal,
html.js-motion .zha-reveal--fade { opacity: 0; }
html.js-motion .zha-reveal--rise { opacity: 0; transform: translateY(18px); }
html.js-motion .zha-reveal--left { opacity: 0; transform: translateX(-18px); }
html.js-motion .zha-reveal--right { opacity: 0; transform: translateX(18px); }

/* Stagger container: cascade children (manual authoring) */
html.js-motion .zha-reveal-stagger > * { opacity: 0; transform: translateY(18px); }

/* Buttons: hover lift + glow (CSS-only, always available) */
.zha-btn,
.et_pb_button.zha-btn-primary,
.et_pb_button.zha-btn-ghost,
.zha-hero-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.zha-btn:hover,
.et_pb_button.zha-btn-primary:hover,
.et_pb_button.zha-btn-ghost:hover,
.zha-hero-btn:hover {
  transform: translateY(-2px);
}
.et_pb_button.zha-btn-primary:hover { box-shadow: 0 8px 22px rgba(30, 167, 242, 0.35); }

@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;
  }
  .zha-route { stroke-dasharray: none; opacity: 0.9; }
  .zha-route--pulse { animation: none; opacity: 0.35; }
  .zha-hero-network .zha-hub { animation: none; }
  /* Keep content visible under reduced motion */
  html.js-motion .zha-reveal,
  html.js-motion .zha-reveal--fade,
  html.js-motion .zha-reveal--rise,
  html.js-motion .zha-reveal--left,
  html.js-motion .zha-reveal--right,
  html.js-motion .zha-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}
