/* =========================================================================
   WICKED WIRE — animations.css
   Motion + glow layer. Everything here degrades gracefully and is fully
   disabled under prefers-reduced-motion (see bottom of file).
   ========================================================================= */

/* Register the custom angle property so the conic glow border can animate.
   Falls back silently in browsers without @property (border just stays static). */
@property --_angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* -------------------------------------------------------------------------
   1. GLOW BORDER — rotating conic sheen on featured cards
   Activated by .ww-glow-border in main.css; this spins the angle.
   ------------------------------------------------------------------------- */
@keyframes ww-border-spin { to { --_angle: 360deg; } }
.ww-glow-border:hover::before,
.ww-glow-border:focus-within::before,
.ww-glow-border.is-always-on::before {
  animation: ww-border-spin 5s linear infinite;
}

/* Always-on shimmer for the single most important card (e.g. featured pricing) */
.ww-pricing-card--featured { position: relative; }
.ww-pricing-card--featured::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  padding: 1px;
  background: conic-gradient(from var(--_angle, 0deg), transparent 0deg,
              var(--ww-magenta) 90deg, var(--ww-purple) 200deg, transparent 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ww-border-spin 6s linear infinite;
  opacity: 0.9;
}

/* -------------------------------------------------------------------------
   2. HERO CABLE MOTIF — animated wire lines + pulsing RJ45 nodes
   The SVG lives in template-parts/hero.php; these drive it.
   ------------------------------------------------------------------------- */

/* Wire "signal" traveling along each path via dash offset */
.ww-wire {
  fill: none;
  stroke: url(#wwWireGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.55;
}
.ww-wire--pulse {
  stroke: url(#wwWireGrad);
  stroke-width: 2;
  stroke-dasharray: 14 220;
  animation: ww-wire-travel 4.5s var(--ww-ease) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 45, 155, 0.8));
}
.ww-wire--pulse.delay-1 { animation-delay: 0.9s; }
.ww-wire--pulse.delay-2 { animation-delay: 1.8s; }
.ww-wire--pulse.delay-3 { animation-delay: 2.7s; }
.ww-wire--pulse.delay-4 { animation-delay: 3.6s; }

@keyframes ww-wire-travel {
  0%   { stroke-dashoffset: 234; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Nodes = connector points that breathe */
.ww-node { fill: var(--ww-purple); transform-box: fill-box; transform-origin: center; }
.ww-node--pulse { animation: ww-node-pulse 3.2s var(--ww-ease) infinite; }
.ww-node--pulse.delay-1 { animation-delay: 0.6s; }
.ww-node--pulse.delay-2 { animation-delay: 1.2s; }
.ww-node--pulse.delay-3 { animation-delay: 1.8s; }
.ww-node--pulse.delay-4 { animation-delay: 2.4s; }

@keyframes ww-node-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); filter: drop-shadow(0 0 0 rgba(157,47,232,0)); }
  50%      { opacity: 1;    transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,45,155,0.9)); }
}

/* Ambient drift for the whole motif group so it never feels static */
.ww-motif-drift { animation: ww-drift 22s ease-in-out infinite alternate; }
@keyframes ww-drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-14px, 10px, 0); }
}

/* -------------------------------------------------------------------------
   3. SCROLL REVEAL — elements fade/slide up as they enter (JS adds .is-in)
   ------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--ww-t-slow) var(--ww-ease-out), transform var(--ww-t-slow) var(--ww-ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* Stagger children */
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--ww-t-slow) var(--ww-ease-out), transform var(--ww-t-slow) var(--ww-ease-out); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0.04s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 0.10s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 0.22s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 0.28s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 0.34s; }
[data-reveal-stagger].is-in > *:nth-child(n+7) { transition-delay: 0.40s; }

/* -------------------------------------------------------------------------
   4. SMALL FLOURISHES
   ------------------------------------------------------------------------- */
/* Gradient hairline that shimmers under section eyebrows / dividers */
.ww-hairline { height: 1px; background: var(--ww-gradient-hairline); background-size: 200% 100%; animation: ww-hairline-slide 6s linear infinite; }
@keyframes ww-hairline-slide { to { background-position: 200% 0; } }

/* Button primary: subtle sheen sweep on hover */
.ww-button-primary { overflow: hidden; }
.ww-button-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left var(--ww-t-slow) var(--ww-ease); pointer-events: none;
}
.ww-button-primary:hover::after { left: 130%; }

/* Logo mark micro-glow on header hover */
.ww-logo img { transition: filter var(--ww-t-med) var(--ww-ease); }
.ww-logo:hover img { filter: drop-shadow(0 0 12px rgba(157,47,232,0.6)); }

/* -------------------------------------------------------------------------
   5. REDUCED MOTION — honor the user's OS setting
   Kills travel/pulse/drift/reveal transforms but keeps opacity legibility.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ww-wire--pulse { stroke-dasharray: none; opacity: 0.5; }
  .ww-node--pulse { opacity: 0.6; transform: none; }
  .ww-motif-drift { transform: none; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .ww-hairline { background-position: 0 0; }
}