/* =========================================================================
   Vanquish Motion Kit — v1 (Carbon / Teal)
   Install: link this file on every page, load vanquish-motion.js deferred,
   set --vq-accent / --vq-accent-2 in :root, add class="vq-hero" to the hero
   section, and data-count on stat number spans.
   Motion system carried over from the VANTAGE reference demo.
   ========================================================================= */

:root {
  --vq-accent: #00D2BE;
  --vq-accent-2: #1FE0C8;
}

/* ---- Hero: animated glow field ---- */
.vq-hero { position: relative; overflow: hidden; isolation: isolate; }
.vq-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 78% 18%, color-mix(in srgb, var(--vq-accent) 24%, transparent), transparent 60%),
    radial-gradient(700px 600px at 12% 92%, color-mix(in srgb, var(--vq-accent-2) 13%, transparent), transparent 55%);
  animation: vq-gradient-shift 16s ease-in-out infinite alternate;
}
.vq-hero > * { position: relative; z-index: 1; }
@keyframes vq-gradient-shift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2.5%, -2%) scale(1.06); }
  100% { transform: translate(-2%, 2.5%) scale(1.02); }
}

/* ---- Hero: speed lines (injected by vanquish-motion.js) ---- */
.vq-speedlines { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vq-speedlines i {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vq-accent) 55%, transparent), transparent);
  animation: vq-speed 6s linear infinite;
  opacity: 0;
}
.vq-speedlines i:nth-child(1) { top: 24%; width: 55%; animation-delay: 0s; }
.vq-speedlines i:nth-child(2) { top: 46%; width: 40%; animation-delay: 1.8s; }
.vq-speedlines i:nth-child(3) { top: 67%; width: 65%; animation-delay: 3.4s; }
.vq-speedlines i:nth-child(4) { top: 82%; width: 35%; animation-delay: 4.6s; }
@keyframes vq-speed {
  0%   { transform: translateX(100vw);   opacity: 0; }
  8%   { opacity: .65; }
  70%  { opacity: .35; }
  100% { transform: translateX(-160%);   opacity: 0; }
}

/* ---- Dot mark pulse ---- */
.nav__dot, .footer__mark, .dot { animation: vq-dot-pulse 2.6s ease-in-out infinite; }
@keyframes vq-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vq-accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--vq-accent-2) 75%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--vq-accent) 10%, transparent), 0 0 26px color-mix(in srgb, var(--vq-accent-2) 95%, transparent); }
}

/* ---- Reduced motion: everything static ---- */
@media (prefers-reduced-motion: reduce) {
  .vq-hero::before { animation: none; }
  .vq-speedlines { display: none; }
  .nav__dot, .footer__mark, .dot { animation: none; }
}