/* AutomateScale motion layer — gears, mesh gradient, reveal, counters, magnetic, marquee, shimmer.
   Layered on top of site.css. Respects prefers-reduced-motion. */

/* ====== ANIMATED MESH GRADIENT (hero background) ====== */
.mesh-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background: radial-gradient(at 27% 33%, rgba(34,211,238,0.18) 0%, transparent 45%),
              radial-gradient(at 72% 26%, rgba(168,85,247,0.22) 0%, transparent 50%),
              radial-gradient(at 22% 78%, rgba(99,102,241,0.20) 0%, transparent 55%),
              radial-gradient(at 84% 80%, rgba(236,72,153,0.14) 0%, transparent 50%);
  filter: blur(8px);
  animation: meshDrift 22s ease-in-out infinite alternate;
}
.mesh-bg::after {
  content: ""; position: absolute; inset: -10%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(34,211,238,0.06), rgba(99,102,241,0.10), rgba(168,85,247,0.08),
    rgba(236,72,153,0.06), rgba(34,211,238,0.06));
  animation: meshSpin 80s linear infinite;
  mix-blend-mode: screen; opacity: 0.55;
}
@keyframes meshDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(2%,-1.5%) scale(1.04); }
  100% { transform: translate(-1.5%,2%) scale(1.02); }
}
@keyframes meshSpin { to { transform: rotate(360deg); } }

/* ====== ROTATING GEAR DECK (automation metaphor) ====== */
.gear-deck { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.gear {
  position: absolute; transform-origin: 50% 50%;
  color: var(--indigo); opacity: 0.10;
  filter: drop-shadow(0 0 24px rgba(99,102,241,0.25));
}
.gear svg { width: 100%; height: 100%; display: block; }
.gear-spin     { animation: gearSpin     var(--gear-dur, 24s) linear infinite; }
.gear-spin-rev { animation: gearSpinRev  var(--gear-dur, 30s) linear infinite; }
@keyframes gearSpin    { to { transform: rotate(360deg); } }
@keyframes gearSpinRev { to { transform: rotate(-360deg); } }

/* Two meshed gear trains: XL+MD top-right, LG+SM bottom-left. Positioned so teeth tangentially touch. */
.gear--xl { width: 520px; height: 520px; top: -180px; right: -120px; opacity: 0.085; --gear-dur: 60s; color: var(--violet); }
.gear--md { width: 220px; height: 220px; top: 220px; right: 240px; opacity: 0.11; --gear-dur: 24s; color: var(--indigo); }
.gear--lg { width: 320px; height: 320px; bottom: -100px; left: -70px; opacity: 0.09; --gear-dur: 42s; color: var(--cyan); }
.gear--sm { width: 140px; height: 140px; bottom: 110px; left: 200px; opacity: 0.15; --gear-dur: 16s; color: var(--cyan); }

/* Drive belt lines connecting gear pairs — gives the "system" feel of a working machine */
.gear-belt { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.9; }
.gear-belt svg { width: 100%; height: 100%; display: block; }

/* Tiny machine block in top-right corner — visual anchor that "drives" the gears */
.gear-machine { position: absolute; top: 14px; right: 14px; width: 64px; height: 44px; color: var(--indigo); opacity: 0.16; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 12px rgba(99,102,241,0.3)); }
.gear-machine svg { width: 100%; height: 100%; display: block; }

/* ====== TICKER / MARQUEE (logo strip, social proof) ====== */
.marquee {
  overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 56px; width: max-content;
  animation: marquee var(--mq-dur, 38s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; opacity: 0.7; transition: opacity 0.2s; }
.marquee-item:hover { opacity: 1; }
.marquee-item img { height: 36px; width: auto; max-width: 140px; filter: grayscale(1) brightness(1.4); transition: filter 0.2s; }
.marquee-item:hover img { filter: grayscale(0) brightness(1); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ====== SCROLL REVEAL ====== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
/* No-JS fallback — without JS, .reveal items never get the .in class so the
   page below the fold stays invisible. Force them visible when scripting is
   unavailable. Covers JS-disabled users + govt/privacy contexts where JS
   is blocked. Modern @media (scripting) — supported in Chrome 120+, Firefox
   113+, Safari 17+. Older browsers ignore the at-rule and content stays
   hidden, same as today. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ====== MAGNETIC BUTTON ====== */
.magnetic { transition: transform 0.15s cubic-bezier(.2,.9,.3,1.3); will-change: transform; }
.magnetic:hover { transform: translate(var(--mag-x,0), var(--mag-y,0)) scale(1.02); }

/* ====== GRADIENT SHIMMER (on grad-text) ====== */
.grad-text.shimmer {
  background: linear-gradient(110deg, #22d3ee 0%, #6366f1 25%, #a855f7 50%, #6366f1 75%, #22d3ee 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* ====== ANIMATED COUNTERS ====== */
.counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* ====== FLOATING ORBS (subtle ambient pulses behind sections) ====== */
.orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); opacity: 0.35; }
.orb--cyan   { background: radial-gradient(circle, rgba(34,211,238,0.5), transparent 70%); }
.orb--indigo { background: radial-gradient(circle, rgba(99,102,241,0.5), transparent 70%); }
.orb--violet { background: radial-gradient(circle, rgba(168,85,247,0.5), transparent 70%); }
.orb--pink   { background: radial-gradient(circle, rgba(236,72,153,0.4), transparent 70%); }
.orb--float  { animation: orbFloat 14s ease-in-out infinite alternate; }
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(20px,-30px) scale(1.08); }
  100% { transform: translate(-15px,18px) scale(0.95); }
}

/* ====== DATA-FLOW DOTS (animate down the funnel) ====== */
.flow-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 4px white;
  animation: flowDown 3s linear infinite;
}
.flow-dot--2 { animation-delay: 1s; background: var(--indigo); box-shadow: 0 0 12px var(--indigo); }
.flow-dot--3 { animation-delay: 2s; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
@keyframes flowDown {
  0%   { top: 0%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ====== LIVE PULSE DOT (used in metrics, "LIVE" badges) ====== */
.live-pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.live-pulse::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--green);
  opacity: 0.6; animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }

/* ====== HOVER LIFT (cards) ====== */
.lift { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -20px rgba(99,102,241,0.35); }

/* ====== ANIMATED BORDER (gradient sweeping around card edge) ====== */
.glow-border { position: relative; isolation: isolate; }
.glow-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ang,0deg), var(--cyan), var(--indigo), var(--violet), var(--pink), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: glowSpin 6s linear infinite; pointer-events: none;
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes glowSpin { to { --ang: 360deg; } }

/* ====== TYPING / CURSOR (used on hero rotator) ====== */
.type-cursor::after { content: "▍"; color: var(--cyan); animation: blink 1s steps(2, start) infinite; margin-left: 4px; opacity: 0.85; }
@keyframes blink { to { visibility: hidden; } }

/* ====== SKIP-TO-CONTENT (a11y) ====== */
.skip-to-content {
  position: fixed; top: 12px; left: 12px; z-index: 9999;
  padding: 10px 18px; border-radius: 8px;
  background: var(--cyan); color: #051023;
  font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.6);
  transform: translateY(-200%); transition: transform .2s cubic-bezier(.2,.9,.3,1);
}
.skip-to-content:focus { transform: translateY(0); outline: 3px solid var(--violet); }

/* ====== REDUCED MOTION GUARD ====== */
@media (prefers-reduced-motion: reduce) {
  .mesh-bg, .mesh-bg::after,
  .gear-spin, .gear-spin-rev,
  .marquee-track, .grad-text.shimmer,
  .orb--float, .flow-dot, .live-pulse::before, .glow-border::before, .type-cursor::after,
  /* Cycle 480 — pulse-style accent dots present on most pages (eyebrow dot,
     live indicator, sticky-cta scarcity badge, AVATAR-LIVE pill on /index hero).
     The inline-style selector also catches one-off pulse animations declared
     in HTML attribute styles. */
  .eyebrow-dot, .live-dot, .sc-scarcity::before,
  [style*="animation:pulse"],
  [style*="animation: pulse"] {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
}