/* ── Water Lab Hub — Phase 1 ─────────────────────────────────────────
   Loaded after index.html inline <style>.
   Only adds / overrides — never removes existing layout.
   ────────────────────────────────────────────────────────────────── */

/* ── Custom properties ── */
:root {
  --card-r: 22px;
  --card-trans: .38s cubic-bezier(.34,1.56,.64,1);
}

/* ── Per-game accent via data attribute ── */
.game-card[data-game="hafiza-karti"]    { --ac: 6,182,212;  }
.game-card[data-game="su-damlasi-runner"]{ --ac: 249,115,22; }
.game-card[data-game="urun-eslestir"]   { --ac: 34,197,94;  }
.game-card[data-game="su-kelime"]       { --ac: 167,139,250;}

/* ── Animated lab background ── */
.lab-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.lab-bg::before {
  content: '';
  position: absolute;
  inset: -60%;
  background:
    radial-gradient(ellipse 55% 40% at 18% 28%, rgba(6,182,212,.11) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 68%, rgba(14,165,233,.08) 0%, transparent 55%),
    radial-gradient(ellipse 38% 50% at 62% 8%,  rgba(10,137,187,.06) 0%, transparent 50%);
  animation: lab-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* subtle scanline texture */
.lab-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(56,189,248,.014) 2px,
    rgba(56,189,248,.014) 3px
  );
}

@keyframes lab-drift {
  0%   { transform: translate(0, 0)    scale(1); }
  40%  { transform: translate(-4%, 3%) scale(1.05); }
  100% { transform: translate(3%, -2%) scale(.97); }
}

/* everything above the bg */
body { position: relative; z-index: 1; }

/* ── Hero mascot ── */
.hero-mascot {
  display: block;
  margin: 0 auto 18px;
  width: 54px;
  height: 67px;
  filter: drop-shadow(0 6px 22px rgba(6,182,212,.6));
  animation: mascot-bob 4s ease-in-out infinite;
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* Badge pulse — opacity only, compositor safe */
.hero-badge { animation: badge-ring 3.5s ease-in-out infinite; }

@keyframes badge-ring {
  0%, 100% { opacity: 1;   }
  50%       { opacity: .65; }
}

/* ── Game grid — perspective container ── */
.games-grid {
  perspective: 1400px;
  max-width: 720px;
  padding: 0 16px 80px;
  gap: 24px;
}

/* ── Glassmorphism card ── */
.game-card {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.075) 0%,
    rgba(255,255,255,.035) 100%
  );
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--card-r);
  box-shadow:
    0 4px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform var(--card-trans), box-shadow var(--card-trans), border-color var(--card-trans);
  animation: card-enter .72s cubic-bezier(.22,1,.36,1) both;
  will-change: transform;
  overflow: visible; /* let glow escape */
  position: relative;
}

/* clip overflow inside, but let ::after glow breathe */
.game-card > * { border-radius: calc(var(--card-r) - 1px); overflow: hidden; }
.game-card > *:first-child { border-radius: var(--card-r) var(--card-r) 0 0; }

/* inner clip wrapper for thumb+body */
.game-card .gc-thumb,
.game-card .gc-body { overflow: hidden; }

/* staggered entrance */
.game-card:nth-child(1) { animation-delay: .05s; }
.game-card:nth-child(2) { animation-delay: .18s; }
.game-card:nth-child(3) { animation-delay: .31s; }
.game-card:nth-child(4) { animation-delay: .44s; }

@keyframes card-enter {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* accent glow on hover — uses per-card --ac variable */
.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(var(--ac, 56,189,248), .32);
  box-shadow:
    0 28px 52px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(var(--ac, 56,189,248), .28),
    0 0 40px rgba(var(--ac, 56,189,248), .14);
}

/* submerge on active (tap/click) */
.game-card:active {
  transform: translateY(-2px) scale(.983);
  transition: transform .10s ease, box-shadow .10s ease;
}

/* ── Ripple wave (injected by hub.js) ── */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  transform: scale(0);
  animation: ripple-go .6s ease-out forwards;
  pointer-events: none;
  z-index: 20;
  top: 0; left: 0;          /* positioned via inline style from JS */
}

@keyframes ripple-go {
  to { transform: scale(4.5); opacity: 0; }
}

/* ── Progress strip ── */
#lab-progress {
  max-width: 720px;
  margin: -8px auto 36px;
  padding: 0 16px;
}

.lab-progress-inner {
  background: rgba(3,15,30,.72);
  border: 1px solid rgba(56,189,248,.14);
  border-radius: 18px;
  padding: 18px 22px 16px;
}

.lab-progress-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 14px;
}

.lab-progress-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
  animation: dot-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1);  }
  50%       { opacity: .4; transform: scale(.65); }
}

.lab-games-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lab-game-stat {
  flex: 1;
  min-width: 90px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 9px 11px;
}

.lab-stat-label {
  display: block;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 3px;
}

.lab-stat-val {
  font-size: .88rem;
  font-weight: 800;
  color: #64748b;
}

.lab-stat-val.active { color: #38bdf8; }

.lab-xp-track {
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 4px;
  overflow: hidden;
}

.lab-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4 0%, #0ea5e9 60%, #38bdf8 100%);
  border-radius: 4px;
  width: 0%;
  transition: width 1.3s cubic-bezier(.22,1,.36,1);
}

.lab-xp-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: .6rem;
  color: #475569;
}

.lab-xp-meta strong { color: #64748b; font-weight: 700; }

/* ── Reduced motion — respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  .hero-mascot     { animation: none; }
  .hero-badge      { animation: none; }
  .lab-bg::before  { animation: none; }
  .lab-progress-title::before { animation: none; }
  .game-card       { animation: none; }
  .lab-xp-fill     { transition: none; }

  .game-card:hover { transform: translateY(-4px); }
  .game-card:active{ transform: none; }
}

/* ── Mobile refinements ── */
@media (max-width: 480px) {
  .games-grid { gap: 16px; }
  .hero-mascot { width: 44px; height: 55px; }
  .lab-progress-inner { padding: 14px 16px 12px; }
  .lab-game-stat { min-width: 78px; }
  .lab-stat-val { font-size: .82rem; }
}

/* ══════════════════════════════════════════════════════════════
   Phase 2 — Live Cards · Enhanced Ripple · Mascot · Rank · Depth
   ══════════════════════════════════════════════════════════════ */

/* ── Ambient card animations default to paused; play when visible ── */
.run-scene,
.bm-win,
.mc.flip { animation-play-state: paused; }

.game-card.is-visible .run-scene,
.game-card.is-visible .bm-win,
.game-card.is-visible .mc.flip { animation-play-state: running; }

/* ── Runner live scene ── */
.run-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Ground strip */
.run-gnd {
  position: absolute;
  bottom: 22%;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,.3) 20%, rgba(56,189,248,.5) 50%, rgba(56,189,248,.3) 80%, transparent 100%);
}

/* Scrolling obstacles */
.run-obs {
  position: absolute;
  bottom: calc(22% + 2px);
  border-radius: 3px;
  animation: obs-scroll 3.2s linear infinite;
  animation-play-state: inherit;
}

.run-obs-1 {
  width: 10px; height: 18px;
  background: rgba(194,65,12,.85);
  left: 100%;
  animation-duration: 3.2s;
  animation-delay: 0s;
}

.run-obs-2 {
  width: 8px; height: 12px;
  background: rgba(107,58,31,.9);
  left: 100%;
  animation-duration: 3.2s;
  animation-delay: 1.6s;
}

@keyframes obs-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100vw - 80px)); }
}

/* Water drop player */
.run-drip {
  position: absolute;
  bottom: calc(22% + 2px);
  left: 22%;
  width: 14px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 60%, #38bdf8 0%, #0ea5e9 60%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 6px rgba(56,189,248,.7));
  animation: drip-bob 1.1s ease-in-out infinite;
  animation-play-state: paused;
}

.game-card.is-visible .run-drip { animation-play-state: running; }

@keyframes drip-bob {
  0%, 100% { transform: translateY(0);    }
  45%       { transform: translateY(-14px); }
}

/* Keep thumb children above the scene */
.game-card[data-game="su-damlasi-runner"] .gc-thumb > *:not(.run-scene) {
  position: relative;
  z-index: 1;
}

/* ── Memory card ambient peek flip ── */
.mc.flip {
  animation: card-peek 5s ease-in-out infinite;
  animation-delay: var(--peek-delay, 0s);
}

.mc.flip:nth-child(2)  { --peek-delay: 0s;   }
.mc.flip:nth-child(6)  { --peek-delay: 1.8s; }
.mc.flip:nth-child(7)  { --peek-delay: 3.4s; }

@keyframes card-peek {
  0%, 30%, 100% { transform: scaleX(1);   }
  15%            { transform: scaleX(.05); }
  22%            { transform: scaleX(1);   }
}

/* Matched-pair glow pulse on open mc-a cards */
.mc.open.mc-a {
  animation: match-pulse 4.2s ease-in-out infinite;
  animation-play-state: paused;
}

.game-card.is-visible .mc.open.mc-a { animation-play-state: running; }

@keyframes match-pulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%       { transform: scale(1.06); opacity: 1;   }
}

/* ── Factory window lights animation ── */
.bm-win {
  animation: win-flicker 5s ease-in-out infinite;
  animation-delay: var(--win-delay, 0s);
}

.bm-win:nth-child(1) { --win-delay: 0s;   animation-duration: 4.5s; }
.bm-win:nth-child(2) { --win-delay: .9s;  animation-duration: 5.2s; }
.bm-win:nth-child(3) { --win-delay: 1.7s; animation-duration: 4.8s; }
.bm-win:nth-child(4) { --win-delay: .4s;  animation-duration: 5.8s; }
.bm-win:nth-child(5) { --win-delay: 2.1s; animation-duration: 4.6s; }
.bm-win:nth-child(6) { --win-delay: .6s;  animation-duration: 5.1s; }
.bm-win:nth-child(7) { --win-delay: 1.3s; animation-duration: 4.9s; }
.bm-win:nth-child(8) { --win-delay: 2.5s; animation-duration: 5.5s; }

@keyframes win-flicker {
  0%, 100% { opacity: 1;    }
  40%       { opacity: .65; }
  55%       { opacity: .42; }
  70%       { opacity: .82; }
}

/* ── Enhanced ripple — accent-coloured ── */
.ripple-wave {
  background: radial-gradient(
    circle,
    rgba(var(--ac, 56,189,248), .38) 0%,
    rgba(var(--ac, 56,189,248), .12) 50%,
    transparent 70%
  );
  filter: blur(2px);
}

/* Concentric ring */
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(var(--ac, 56,189,248), .55);
  transform: scale(0);
  animation: ring-expand .7s ease-out forwards;
  pointer-events: none;
  z-index: 19;
}

@keyframes ring-expand {
  to { transform: scale(3.8); opacity: 0; }
}

/* ── Mascot reaction ── */
@keyframes mascot-excited {
  0%,100% { transform: translateY(0)     rotate(0deg);    }
  20%      { transform: translateY(-13px) rotate(-8deg);   }
  40%      { transform: translateY(-16px) rotate(6deg);    }
  60%      { transform: translateY(-10px) rotate(-5deg);   }
  80%      { transform: translateY(-6px)  rotate(3deg);    }
}

.hero-mascot.mascot-react {
  animation: mascot-excited .65s ease-in-out !important;
  filter: drop-shadow(0 6px 28px rgba(6,182,212,.9)) !important;
}

/* ── Lab Rank badge ── */
.lab-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid currentColor;
  opacity: .85;
}

.lab-rank-badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* rank colour scale (0=novice … 4=master) */
.rank-0 { color: #64748b; border-color: rgba(100,116,139,.35); }
.rank-1 { color: #38bdf8; border-color: rgba(56,189,248,.35);  }
.rank-2 { color: #34d399; border-color: rgba(52,211,153,.35);  }
.rank-3 { color: #a78bfa; border-color: rgba(167,139,250,.35); }
.rank-4 { color: #f59e0b; border-color: rgba(245,158,11,.35);  }

/* ── Caustic depth layer (injected by hub.js) ── */
.lab-caustic {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 30% 20% at 35% 55%, rgba(6,182,212,.07) 0%, transparent 60%),
    radial-gradient(ellipse 25% 30% at 70% 30%, rgba(14,165,233,.05) 0%, transparent 55%);
  animation: caustic-drift 38s ease-in-out infinite alternate-reverse;
  will-change: transform;
}

@keyframes caustic-drift {
  0%   { transform: translate(0, 0)    scale(1)     rotate(0deg); }
  33%  { transform: translate(5%, -3%) scale(1.06)  rotate(.5deg); }
  66%  { transform: translate(-4%, 4%) scale(.95)   rotate(-.4deg); }
  100% { transform: translate(2%, -5%) scale(1.03)  rotate(.3deg); }
}

/* ── Reduced motion — Phase 2 additions ── */
@media (prefers-reduced-motion: reduce) {
  .run-drip,
  .run-obs,
  .mc.flip,
  .mc.open.mc-a,
  .bm-win,
  .lab-caustic    { animation: none; }
  .ripple-wave,
  .ripple-ring    { animation: none; display: none; }
  .hero-mascot.mascot-react { animation: none !important; }
}

/* ── Mobile Phase 2 refinements ── */
@media (max-width: 480px) {
  .run-drip  { width: 11px; height: 14px; }
  .run-obs-1 { width: 8px;  height: 14px; }
  .run-obs-2 { width: 6px;  height: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   Phase 3 — Water Intelligence Atmosphere
   AI assistant · Card shimmer · Micro-orbs · Rank atmosphere
   ══════════════════════════════════════════════════════════════ */

/* ── AI Water Assistant panel ── */
#lab-ai {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 0 16px;
  min-height: 48px; /* reserve space to prevent CLS */
}

.lab-ai-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(6,182,212,.04);
  border: 1px solid rgba(6,182,212,.12);
  border-radius: 14px;
  padding: 10px 14px;
  animation: ai-appear .6s cubic-bezier(.22,1,.36,1) both;
}

@keyframes ai-appear {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lab-ai-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
  animation: dot-pulse 2.5s ease-in-out infinite;
}

.lab-ai-label {
  flex-shrink: 0;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #0ea5e9;
}

.lab-ai-text {
  flex: 1;
  font-size: .72rem;
  color: #64748b;
  line-height: 1.4;
  transition: opacity .45s ease;
}

/* ── Card hover shimmer sweep (transform-only — compositor safe) ── */
.game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  /* narrow highlight band wider than card, shifted off-left by default */
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,.07) 45%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.07) 55%,
    transparent 100%
  );
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-120%);
  opacity: 0;
  will-change: transform, opacity;
}

.game-card:hover::after,
.game-card:focus-visible::after {
  animation: shimmer-sweep 1.1s ease-out forwards;
}

@keyframes shimmer-sweep {
  0%   { transform: translateX(-120%); opacity: 1; }
  100% { transform: translateX(160%);  opacity: 0; }
}

/* ── Micro-orbs (injected into .lab-bg by hub.js) ── */
.lab-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.55) 0%, transparent 70%);
  pointer-events: none;
  animation: orb-float linear infinite;
  animation-duration: var(--orb-dur, 42s);
  animation-delay: var(--orb-delay, 0s);
}

@keyframes orb-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: var(--orb-op, .06); }
  88%  { opacity: var(--orb-op, .06); }
  100% { transform: translateY(-110vh) translateX(var(--orb-drift, 16px)); opacity: 0; }
}

/* ── Rank-reactive atmosphere ── */
/* Rank 3: subtle ambient glow on cards */
:root[data-rank="3"] .game-card {
  box-shadow:
    0 4px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 18px rgba(var(--ac, 56,189,248), .07);
}

/* Rank 4: stronger ambient glow + brighter border + enhanced caustic */
:root[data-rank="4"] .game-card {
  box-shadow:
    0 4px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.11),
    0 0 30px rgba(var(--ac, 56,189,248), .13);
  border-color: rgba(255,255,255,.18);
}

:root[data-rank="4"] .hero-mascot {
  filter: drop-shadow(0 6px 32px rgba(6,182,212,.9));
}

:root[data-rank="4"] .lab-caustic {
  filter: brightness(1.6);
}

/* Rank 4: more vibrant lab-bg drift */
:root[data-rank="4"] .lab-bg::before {
  animation-duration: 14s;
}

/* ── Reduced motion — Phase 3 additions ── */
@media (prefers-reduced-motion: reduce) {
  .lab-ai-inner  { animation: none; }
  .game-card::after { display: none; }
  .lab-orb       { animation: none; display: none; }
}

/* ── Mobile Phase 3 refinements ── */
@media (max-width: 480px) {
  #lab-ai { margin-bottom: 16px; }
  .lab-ai-text { font-size: .68rem; }
}

/* ══════════════════════════════════════════════════════════════
   Water Intelligence entry card
   ══════════════════════════════════════════════════════════════ */

.game-card[data-game="water-intelligence"] { --ac: 0,200,255; }

/* Tag + badge variants */
.tag-cyan {
  background: rgba(0,200,255,0.10);
  color: rgba(0,200,255,0.90);
  border: 1px solid rgba(0,200,255,0.22);
}

.badge-ai {
  background: linear-gradient(135deg, rgba(0,200,255,0.16), rgba(124,58,237,0.16));
  color: rgba(0,200,255,0.92);
  border: 1px solid rgba(0,200,255,0.28);
  box-shadow: 0 2px 8px rgba(0,200,255,0.15);
}

/* Thumb — dark atmospheric */
.thumb-wi {
  background: linear-gradient(135deg, #030912 0%, #071627 60%, #030d1e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 140px;
}

/* Horizontal scan sweep */
.wi-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.55), transparent);
  animation: wi-scan 2.8s linear infinite;
  animation-play-state: paused;
}

/* Three rings */
.wi-ring {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.wi-ring:nth-child(2) {
  width: 96px; height: 96px;
  border: 1px solid rgba(0,200,255,0.14);
  animation: wi-ring-cw 10s linear infinite;
  animation-play-state: paused;
}
.wi-ring:nth-child(3) {
  width: 64px; height: 64px;
  border: 2px solid transparent;
  border-top-color: rgba(0,200,255,0.70);
  border-right-color: rgba(0,200,255,0.20);
  animation: wi-ring-cw 2.2s linear infinite;
  animation-play-state: paused;
}
.wi-ring:nth-child(4) {
  width: 40px; height: 40px;
  border: 1px solid rgba(124,58,237,0.32);
  animation: wi-ring-ccw 6s linear infinite;
  animation-play-state: paused;
}

/* Core emoji */
.wi-core {
  position: relative;
  z-index: 1;
  font-size: 24px;
  animation: wi-core-breathe 2.4s ease-in-out infinite;
  animation-play-state: paused;
}

/* Play when card is visible */
.game-card.is-visible .wi-scan-line,
.game-card.is-visible .wi-ring,
.game-card.is-visible .wi-core { animation-play-state: running; }

@keyframes wi-scan {
  0%   { transform: translateY(-80px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(80px); opacity: 0; }
}
@keyframes wi-ring-cw  { to { transform: rotate(360deg); } }
@keyframes wi-ring-ccw { to { transform: rotate(-360deg); } }
@keyframes wi-core-breathe {
  0%,100% { opacity: .75; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wi-scan-line,
  .wi-ring,
  .wi-core { animation: none !important; }
}