/* CW-ARCADE — NEON SIGNATURE SYSTEM
   Two related glow techniques, both built from Ana Tudor's animated
   conic-gradient ring pattern (a typed @property --angle driving pure-
   CSS rotation, no JS) but tuned to this brand's cyan/violet/magenta
   arc instead of a full rainbow, and applied with a clear rule so the
   effect reads as one deliberate system rather than decoration:

   .neon-ring  — "Transparent Animated Glow Grid Card" (bleeding edge):
     a hollow ring right at the element's own border, duplicated once
     more, blurred, and pushed further outward — the glow spills past
     the panel into the page around it, like a lit arcade-cabinet
     screen. Used on every product screenshot/video frame (.holo-frame)
     and the two highest-stakes conversion panels (the featured annual
     plan, the closing CTA) — the "look at the product" and "act now"
     moments earn the boldest treatment.

   .neon-glow-inner — "Neon Inner Glow Card" (contained wash): the ring
     sits behind the card's own content, oversized and heavily blurred,
     and is clipped by the card's own overflow:hidden — so the glow
     never leaves the card, it just lights the inside of it. Used on
     every card in the "Who It's For" and "Recognition" grids, each
     recolored to that card's own accent (the same accent already
     driving its icon) via --neon-1 / --neon-2, so a card's glow always
     matches its icon rather than a shared rainbow.

   Both share one rotation keyframe and are paused off-screen (see
   js/neon.js) and under prefers-reduced-motion, exactly like the
   site's other continuous animations (flame walls, aurora). */

@keyframes neon-spin {
  to {
    --angle: 360deg;
  }
}

/* ============ .neon-ring — bleeding edge glow ============ */
.neon-ring {
  position: relative;
  --angle: 0deg;
}

/* .panel (layout.css) also draws its own quiet ::before edge ring on the
   same pseudo-element slot; since it shares equal selector specificity and
   loads earlier, every property below is declared explicitly (rather than
   left to inherit a default) so nothing from .panel::before — opacity,
   mask, background, padding — leaks through on a card that carries both
   classes. */
.neon-ring::before,
.neon-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  opacity: 1;
  background: conic-gradient(
    from var(--angle),
    var(--neon-1),
    var(--neon-2),
    var(--neon-3),
    var(--neon-1)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: none;
  animation: neon-spin 8s linear infinite paused;
}

.neon-ring::after {
  inset: -18px;
  padding: 0;
  z-index: 0;
  filter: blur(22px);
  opacity: 0.55;
}

.neon-ring.is-live::before,
.neon-ring.is-live::after {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .neon-ring::before,
  .neon-ring::after {
    animation: none;
    --angle: 45deg;
  }
}

/* ============ .neon-glow-inner — contained inner wash ============ */
.neon-glow-inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --angle: 0deg;
}

/* Same collision note as .neon-ring above: .panel::before shares this
   pseudo-element slot on every card, so mask/background/padding/transition
   are explicitly cleared rather than left to leak through. */
.neon-glow-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px;
  padding: 0;
  border: solid 14px;
  border-image: conic-gradient(from var(--angle), var(--neon-1), var(--neon-2), var(--neon-1)) 1;
  background: none;
  mask: none;
  -webkit-mask: none;
  filter: blur(15px);
  opacity: 0.6;
  pointer-events: none;
  transition: none;
  animation: neon-spin 7s linear infinite paused;
}

.neon-glow-inner.is-live::before {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .neon-glow-inner::before {
    animation: none;
    --angle: 45deg;
  }
}