/* ═══════════════════════════════════════════════════════════════════════════
   effects.css — Shimmer, glow, shake, pulse, particle, avatar animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────────────── */
/* Hold shimmer (::after pseudo-element, continuous) */
@keyframes shimmer-pulse{0%{box-shadow:0 0 0 0 var(--shimmer-color)}50%{box-shadow:0 0 18px 4px var(--shimmer-color)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes shimmer-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35) drop-shadow(0 0 8px var(--shimmer-color))}}
@keyframes shimmer-rainbow{0%{background-position:-200%}100%{background-position:300%}}
@keyframes shimmer-sweep{0%{transform:translateX(-110%) skewX(-15deg)}100%{transform:translateX(120%) skewX(-15deg)}}

/* Shimmer-fly (one-shot on hover) */
@keyframes shimmer-fly{0%{transform:translateX(-110%) skewX(-12deg)}100%{transform:translateX(110%) skewX(-12deg)}}
@keyframes shimmer-pulse-anim{0%,100%{opacity:0}40%,60%{opacity:1}}
@keyframes shimmer-glow-anim{0%,100%{opacity:0}40%,60%{opacity:.35}}
@keyframes shimmer-glow-outer{0%,100%{filter:none}50%{filter:drop-shadow(0 0 14px var(--shimmer-color))}}

/* ── NEW shimmer type keyframes ──────────────────────────────────── */
/* Bounce — sweep left→right→left in one pass */
@keyframes shimmer-bounce{
  0%   {transform:translateX(-110%) skewX(-12deg)}
  44%  {transform:translateX(110%)  skewX(-12deg)}
  56%  {transform:translateX(110%)  skewX( 12deg)}
  100% {transform:translateX(-110%) skewX( 12deg)}
}
@keyframes shimmer-bounce-aft{
  0%,100%{transform:translateX(-100%) skewX(-15deg)}
  48%,52%{transform:translateX(120%)  skewX(-15deg)}
}

/* Ripple — radial wave expanding from centre (fly element) */
@keyframes shimmer-ripple{
  0%   {opacity:.9;clip-path:circle(5%  at 50% 50%)}
  55%  {opacity:.6;clip-path:circle(60% at 50% 50%)}
  100% {opacity:0 ;clip-path:circle(90% at 50% 50%)}
}
/* Ripple — expanding ring (hold/sh-hold state) */
@keyframes shimmer-ripple-ring{
  0%  {box-shadow:0 0 0 0   var(--shimmer-color)}
  60% {box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0   transparent}
}

/* Neon — flickering outer glow (fly element) */
@keyframes shimmer-neon-fly{
  0%,100%{opacity:0}
  8%     {opacity:.9} 10%{opacity:.1} 13%{opacity:.9}
  32%    {opacity:0}
  60%    {opacity:.8} 63%{opacity:.1} 66%{opacity:.8}
  88%    {opacity:0}
}
/* Neon — outer glow flicker for fly wrapper */
@keyframes shimmer-neon-outer{
  0%,100%{filter:none}
  8%     {filter:drop-shadow(0 0 10px var(--shimmer-color))}
  10%    {filter:none}
  13%    {filter:drop-shadow(0 0 10px var(--shimmer-color))}
  32%    {filter:none}
  60%    {filter:drop-shadow(0 0 8px var(--shimmer-color))}
  63%    {filter:none}
  66%    {filter:drop-shadow(0 0 8px var(--shimmer-color))}
}
/* Neon — hold state box-shadow flicker */
@keyframes shimmer-neon-hold{
  0%,100%{box-shadow:none;filter:none}
  8%     {box-shadow:0 0 12px 3px var(--shimmer-color);filter:brightness(1.15)}
  10%    {box-shadow:none;filter:none}
  13%    {box-shadow:0 0 12px 3px var(--shimmer-color);filter:brightness(1.15)}
  32%    {box-shadow:none;filter:none}
  60%    {box-shadow:0 0 10px 2px var(--shimmer-color);filter:brightness(1.1)}
  63%    {box-shadow:none;filter:none}
  66%    {box-shadow:0 0 10px 2px var(--shimmer-color);filter:brightness(1.1)}
}

/* Spark — quick double-sweep */
@keyframes shimmer-spark{
  0%   {transform:translateX(-110%) skewX(-12deg);opacity:1}
  18%  {transform:translateX(110%)  skewX(-12deg);opacity:.7}
  19%  {transform:translateX(-110%) skewX(-12deg);opacity:0}
  20%  {transform:translateX(-110%) skewX(-12deg);opacity:.5}
  38%  {transform:translateX(110%)  skewX(-12deg);opacity:0}
  100% {transform:translateX(110%)  skewX(-12deg);opacity:0}
}

/* ── Shake keyframes ─────────────────────────────────────────────── */
@keyframes shake-s{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px) rotate(-.5deg)}40%{transform:translateX(2px) rotate(.5deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes shake-m{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px) rotate(-1deg)}40%{transform:translateX(4px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes shake-w{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-8px) rotate(-3deg)}30%{transform:translateX(8px) rotate(3deg)}45%{transform:translateX(-6px) rotate(-2deg)}60%{transform:translateX(6px) rotate(2deg)}75%{transform:translateX(-4px)}90%{transform:translateX(4px)}}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 var(--live)}50%{box-shadow:0 0 6px 2px var(--live)}}
@keyframes dot-pulse-pend{0%,100%{box-shadow:0 0 0 0 var(--pend)}50%{box-shadow:0 0 6px 2px var(--pend)}}
@keyframes logo-shine{0%{transform:translateX(-150%) rotate(-45deg)}50%{transform:translateX(300%) rotate(-45deg)}100%{transform:translateX(300%) rotate(-45deg)}}
@keyframes av-glow{0%,100%{box-shadow:0 0 6px 2px var(--av-c,rgba(6,182,212,.35)),0 2px 8px rgba(0,0,0,.35)}50%{box-shadow:0 0 18px 6px var(--av-c,rgba(6,182,212,.65)),0 2px 8px rgba(0,0,0,.35)}}
@keyframes xp-gain-flash{}

/* ── Shake triggers ──────────────────────────────────────────────── */
body.effects-on.shake-s .client-row:hover,body.effects-on.shake-s .stat-card:hover,body.effects-on.shake-s .fchip:hover{animation:shake-s .4s ease!important}
body.effects-on.shake-m .client-row:hover,body.effects-on.shake-m .stat-card:hover,body.effects-on.shake-m .fchip:hover{animation:shake-m .4s ease!important}
body.effects-on.shake-w .client-row:hover,body.effects-on.shake-w .stat-card:hover,body.effects-on.shake-w .fchip:hover{animation:shake-w .5s ease!important}

/* ── Client row shimmer ──────────────────────────────────────────── */
body.effects-on .client-row{position:relative}
body.effects-on .client-row::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(6,182,212,.12) 50%,transparent 65%);transform:translateX(-100%) skewX(-15deg);pointer-events:none;transition:none;clip-path:inset(0)}
body.effects-on .client-row:hover::after,body.effects-on .client-row.sh-hold::after{animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards}

/* ── Stat card shimmer ───────────────────────────────────────────── */
body.effects-on .stat-card{overflow:hidden;position:relative}
body.effects-on .stat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(6,182,212,.10) 50%,transparent 65%);transform:translateX(-100%) skewX(-15deg);pointer-events:none}
body.effects-on .stat-card:hover::after,body.effects-on .stat-card.sh-hold::after{animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards}

/* ── Client modal service shimmer ────────────────────────────────── */
body.effects-on .cm-svc{overflow:hidden;position:relative}
body.effects-on .cm-svc::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(6,182,212,.15) 50%,transparent 70%);transform:translateX(-100%) skewX(-15deg);pointer-events:none}
body.effects-on .cm-svc:hover::after,body.effects-on .cm-svc.sh-hold::after{animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards}

/* ── Filter chip shimmer ─────────────────────────────────────────── */
body.effects-on .fchip{overflow:hidden;position:relative}
body.effects-on .fchip::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(-100%) skewX(-15deg);pointer-events:none}
body.effects-on .fchip:hover::after,body.effects-on .fchip.sh-hold::after{animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards}

/* ── Tag shimmer ─────────────────────────────────────────────────── */
body.effects-on .tag-gov::after,body.effects-on .tag-health::after,body.effects-on .tag-nfp::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%) skewX(-15deg);pointer-events:none}
body.effects-on .tag-gov:hover::after,body.effects-on .tag-health:hover::after,body.effects-on .tag-nfp:hover::after,body.effects-on .tag-gov.sh-hold::after,body.effects-on .tag-health.sh-hold::after,body.effects-on .tag-nfp.sh-hold::after{animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards}

/* ── Logo shine ──────────────────────────────────────────────────── */
.nrt-logo{overflow:hidden;position:relative}
.nrt-logo::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-150%) rotate(-45deg);animation:logo-shine 3.5s ease-in-out 1s infinite}

/* ── Avatar glow ─────────────────────────────────────────────────── */
body.effects-on .client-avatar{overflow:hidden;position:relative}
body.effects-on .client-avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%) skewX(-15deg);pointer-events:none}
body.effects-on .client-avatar:hover::after{animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards}
body.effects-on .client-avatar{animation:av-glow 3s ease-in-out infinite}
body.effects-on .client-avatar:hover{animation:av-glow .9s ease-in-out infinite}

/* ── Effects on global ───────────────────────────────────────────── */
body.effects-on{--dot-live-glow:0 0 8px rgba(34,197,94,.6);--stat-glow:0 0 20px rgba(6,182,212,.1)}

/* ════════════════════════════════════════════════════════════════════
   SHIMMER-FLY — one-shot overlay appended to element on mouseover
   Semi-transparent gradient colours keep text readable without needing
   blend modes (which were hiding the shimmer on dark cards).
   ════════════════════════════════════════════════════════════════════ */
.shimmer-fly{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;overflow:hidden;
}
/* Glow/neon wrappers need overflow:visible for their drop-shadow */
.shimmer-fly.sh-glow,.shimmer-fly.sh-neon{overflow:visible;}

/* ── Base inner — SWEEP (default, no style class needed) ─────────── */
.shimmer-fly-inner{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 10%,var(--shimmer-color) 45%,var(--shimmer-clr2) 55%,transparent 85%);
  transform:translateX(-110%) skewX(-12deg);
  animation:shimmer-fly var(--shimmer-dur,.55s) ease forwards;
}

/* ── PULSE ───────────────────────────────────────────────────────── */
.shimmer-fly.sh-pulse .shimmer-fly-inner{
  animation:shimmer-pulse-anim var(--shimmer-dur,.55s) ease forwards;
  background:var(--shimmer-color);
  opacity:0;transform:none;
}

/* ── GLOW ────────────────────────────────────────────────────────── */
.shimmer-fly.sh-glow{animation:shimmer-glow-outer var(--shimmer-dur,.55s) ease forwards}
.shimmer-fly.sh-glow .shimmer-fly-inner{
  background:var(--shimmer-color);
  transform:none;border-radius:inherit;
  animation:shimmer-glow-anim var(--shimmer-dur,.55s) ease forwards;
}

/* ── BOUNCE ──────────────────────────────────────────────────────── */
.shimmer-fly.sh-bounce .shimmer-fly-inner{
  animation:shimmer-bounce calc(var(--shimmer-dur,.55s) * 1.6) ease forwards;
}

/* ── RIPPLE ──────────────────────────────────────────────────────── */
.shimmer-fly.sh-ripple .shimmer-fly-inner{
  background:radial-gradient(circle at 50% 50%,var(--shimmer-color) 0%,var(--shimmer-clr2) 40%,transparent 65%);
  transform:none;
  animation:shimmer-ripple var(--shimmer-dur,.55s) ease forwards;
}

/* ── NEON ────────────────────────────────────────────────────────── */
.shimmer-fly.sh-neon{animation:shimmer-neon-outer var(--shimmer-dur,.55s) ease forwards;overflow:visible}
.shimmer-fly.sh-neon .shimmer-fly-inner{
  background:var(--shimmer-color);
  transform:none;border-radius:inherit;
  animation:shimmer-neon-fly var(--shimmer-dur,.55s) ease forwards;
}

/* ── SPARK ───────────────────────────────────────────────────────── */
.shimmer-fly.sh-spark .shimmer-fly-inner{
  animation:shimmer-spark calc(var(--shimmer-dur,.55s) * 1.2) ease forwards;
}

/* ── RAINBOW colour override — only changes gradient, NOT animation  */
/*    Animation is inherited from whichever style class is active.    */
.shimmer-fly.sh-rainbow .shimmer-fly-inner{
  background:linear-gradient(105deg,
    transparent 8%,
    rgba(255,90,90,.52)  22%,
    rgba(255,200,0,.52)  36%,
    rgba(80,215,80,.52)  48%,
    rgba(0,195,255,.52)  60%,
    rgba(110,80,255,.52) 74%,
    rgba(255,80,200,.52) 86%,
    transparent 95%
  );
  /* NO animation override — inherits from style class above */
}
/* Pulse+rainbow — background override only; animation comes from sh-pulse */
.shimmer-fly.sh-pulse.sh-rainbow .shimmer-fly-inner{
  background:linear-gradient(90deg,
    rgba(255,90,90,.45),rgba(255,200,0,.45),
    rgba(80,215,80,.45),rgba(0,195,255,.45),
    rgba(110,80,255,.45),rgba(255,80,200,.45)
  );
}
/* Glow+rainbow — background override only; animation comes from sh-glow */
.shimmer-fly.sh-glow.sh-rainbow .shimmer-fly-inner{
  background:linear-gradient(135deg,
    rgba(255,90,90,.35),rgba(0,195,255,.35),rgba(255,80,200,.35)
  );
}

/* ══════════════════════════════════════════════════════════════════
   HOLD-SHIMMER MODES — applied via .sh-hold class on elements
   ══════════════════════════════════════════════════════════════════ */

/* Pulse hold */
body.effects-on.sh-pulse .sh-hold,.sh-hold-b{animation:shimmer-pulse var(--shimmer-dur,.55s) ease!important}
body.effects-on.sh-pulse .sh-hold::after{display:none!important}

/* Glow hold */
body.effects-on.sh-glow .sh-hold,.sh-hold-b{animation:shimmer-glow var(--shimmer-dur,.55s) ease!important}
body.effects-on.sh-glow .sh-hold::after{display:none!important}

/* Bounce hold — ::after sweeps back and forth */
body.effects-on.sh-bounce .sh-hold::after{animation:shimmer-bounce-aft calc(var(--shimmer-dur,.55s)*2) ease-in-out infinite!important}

/* Ripple hold — expanding ring via box-shadow */
body.effects-on.sh-ripple .sh-hold{animation:shimmer-ripple-ring var(--shimmer-dur,.55s) ease-in-out infinite!important}
body.effects-on.sh-ripple .sh-hold::after{display:none!important}

/* Neon hold — flicker glow */
body.effects-on.sh-neon .sh-hold{animation:shimmer-neon-hold calc(var(--shimmer-dur,.55s)*1.4) ease-in-out infinite!important}
body.effects-on.sh-neon .sh-hold::after{display:none!important}

/* Spark hold — rapid double-sweep on ::after */
body.effects-on.sh-spark .sh-hold::after{animation:shimmer-spark calc(var(--shimmer-dur,.55s)*1.2) ease forwards infinite!important}

/* Rainbow hold — scrolling semi-transparent gradient */
body.effects-on.sh-rainbow .sh-hold::after,
body.effects-on.sh-rainbow .sh-hold-b::after{
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,90,90,.42)  18%,
    rgba(255,200,0,.42)  32%,
    rgba(80,215,80,.42)  46%,
    rgba(0,195,255,.42)  58%,
    rgba(110,80,255,.42) 72%,
    rgba(255,80,200,.42) 84%,
    transparent 100%
  );
  background-size:200% 100%;
  animation:shimmer-rainbow var(--shimmer-dur,.55s) linear forwards;
}

/* Shake+hold combos */
body.effects-on.shake-s .sh-hold:not(.tab){animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards,shake-s .35s ease!important}
body.effects-on.shake-m .sh-hold:not(.tab){animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards,shake-m .35s ease!important}
body.effects-on.shake-w .sh-hold:not(.tab){animation:shimmer-sweep var(--shimmer-dur,.55s) ease forwards,shake-w .4s ease!important}
body.effects-on.sh-pulse.shake-s .sh-hold:not(.tab){animation:shimmer-pulse var(--shimmer-dur,.55s) ease,shake-s .35s ease!important}
body.effects-on.sh-pulse.shake-m .sh-hold:not(.tab){animation:shimmer-pulse var(--shimmer-dur,.55s) ease,shake-m .35s ease!important}
body.effects-on.sh-pulse.shake-w .sh-hold:not(.tab){animation:shimmer-pulse var(--shimmer-dur,.55s) ease,shake-w .4s ease!important}

/* ── Dot live/pend effects ───────────────────────────────────────── */
body.effects-on .live{box-shadow:0 0 5px 1px var(--live)!important;animation:dot-pulse 2.5s ease-in-out infinite}
body.effects-on .pend{box-shadow:0 0 5px 1px var(--pend)!important;animation:dot-pulse-pend 2s ease-in-out infinite}
body.effects-on .live:hover,body.effects-on .pend:hover{box-shadow:0 0 10px 3px currentColor!important}

/* ── Matrix view status glow ─────────────────────────────────────── */
body.effects-on .cm-svc-status{transition:all .15s}
body.effects-on .cm-svc-status.live{text-shadow:0 0 8px var(--live)}
body.effects-on .cm-svc-status.pending{text-shadow:0 0 8px var(--pend)}