/* ============================================================
   ANIMATIONS.CSS — Motion states, keyframes, GSAP helper classes
   GSAP/ScrollTrigger control most motion from js/animations.js;
   this file holds initial states and pure-CSS micro-interactions.
   ============================================================ */

/* ---------- GSAP initial states ----------
   Elements with [data-animate] start hidden;
   animations.js reveals them (and removes the state
   if JS fails, content stays accessible via no-js fallback). */

.no-js [data-animate] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Reveal base states ----------
   No persistent `will-change` here: leaving it on ~15 idle elements
   forces standing compositor layers (memory + paint cost). GSAP promotes
   each element to the GPU for the duration of its tween via force3D
   (gsap.config in animations.js) and releases it on completion. */

/* ---------- Split text reveal (hero) ----------
   Each word sits in an overflow-hidden mask; its inner span slides up. */

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* a little vertical breathing room so ascenders/descenders aren't clipped */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.word__i {
  display: inline-block;
  will-change: transform;
}

/* ---------- Pure CSS micro-interactions ---------- */

/* Card hover lift */
.hover-lift {
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* Subtle glow pulse (decorative orbs) */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

.anim-glow {
  animation: glow-pulse 7s var(--ease-out) infinite;
}

/* Marquee track (logos / ticker) */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.anim-marquee {
  animation: marquee 30s linear infinite;
}

/* ---------- Hero: HUD ring rotation ---------- */

@keyframes hud-spin {
  to { transform: rotate(360deg); }
}

.hero__hud--slow    { animation: hud-spin 48s linear infinite; }
.hero__hud--reverse { animation: hud-spin 32s linear infinite reverse; }

/* ---------- Hero: orbit ring ---------- */

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

.hero__orbit { animation: orbit-spin 36s linear infinite; }

/* ---------- Hero: circuit trace flow ---------- */

@keyframes circuit-flow {
  to { stroke-dashoffset: -220; }
}

.hero__circuit path {
  stroke-dasharray: 6 14;
  animation: circuit-flow 6s linear infinite;
}

/* ---------- Hero: neural net pulse ---------- */

@keyframes node-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.hero__net-node circle {
  animation: node-pulse 3.2s ease-in-out infinite;
}

.hero__net-node circle:nth-child(odd)  { animation-delay: 0.8s; }
.hero__net-node circle:nth-child(3n)   { animation-delay: 1.6s; }

/* ---------- Hero: chip spinner ---------- */

@keyframes chip-spin {
  to { transform: rotate(360deg); }
}

.hero__chip-ring { animation: chip-spin 1.6s linear infinite; }

@keyframes chip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.6; }
}

.hero__chip-pulse { animation: chip-pulse 1.8s ease-in-out infinite; }

/* ---------- Hero: scroll indicator wheel ---------- */

@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

.hero__scroll-wheel { animation: scroll-wheel 1.8s var(--ease-in-out) infinite; }

/* ---------- Services: gradient border sweep ---------- */

@property --sweep-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-sweep {
  to { --sweep-angle: 360deg; }
}

.service-card:hover::before,
.team-card:hover::before {
  animation: border-sweep 2.4s linear infinite;
}

/* ---------- Why: sphere rotation ---------- */

@keyframes sphere-spin {
  to { transform: rotate(360deg); }
}

.why__sphere-spin { animation: sphere-spin 40s linear infinite; }

/* ---------- CTA: aurora drift + icon float ---------- */

@keyframes cta-aurora {
  to { transform: rotate(360deg); }
}

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

/* ---------- Hero n8n workflow visual ---------- */

/* executed (green) connectors */
.wf-line path {
  stroke: rgba(71, 201, 126, 0.5);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

/* bright dash travelling along each connector = data running through the flow */
.wf-pulse {
  fill: none;
  stroke: #b6f5cf;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 26 3000;
  animation: wf-pulse 4.6s linear infinite;
}

@keyframes wf-pulse { from { stroke-dashoffset: 3026; } to { stroke-dashoffset: 0; } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}