/* ============================================
   CUSTOM SVG ICON SYSTEM
   Futuristic Sports Broadcast Aesthetic
   Replaces Phosphor Icons with hand-crafted SVGs
   ============================================ */

/* --- Base Icon Container --- */
.ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  line-height: 1;
  flex-shrink: 0;
  transition: filter 0.3s ease, transform 0.25s ease;
}

.ci svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --- Dual-Layer Rendering --- */
.ci .accent {
  opacity: 0.30;
  transition: opacity 0.3s ease;
}

.ci .primary {
  opacity: 1;
}

/* Hover intensifies accent layer */
a:hover .ci .accent,
button:hover .ci .accent,
.btn:hover .ci .accent {
  opacity: 0.50;
}

/* --- Color Inheritance --- */
.ci svg {
  stroke: currentColor;
  fill: none;
}

.ci .accent {
  fill: currentColor;
  stroke: none;
}

/* Override for filled accent elements that need stroke */
.ci .accent-stroke {
  fill: none;
  stroke: currentColor;
  opacity: 0.30;
}

/* --- Gradient Definitions (used by SVG <defs>) --- */
.ci .grad-start { stop-color: var(--color-secondary, #8b5cf6); }
.ci .grad-end   { stop-color: var(--color-secondary-hover, #a78bfa); }

/* --- Glow Effects --- */

/* Bottom tab bar active */
.bottom-tab-link.active .ci {
  filter: drop-shadow(0 0 5px rgba(var(--tab-accent-rgb, var(--icon-default-rgb, var(--color-primary-rgb))), 0.48));
}

/* Page title icons - ambient glow pulse */
.page-title .ci {
  animation: ci-glow-breathe 4s ease-in-out infinite;
}

/* Widget/section title icons - subtle static glow */
.widget-title .ci,
h2 .ci, h3 .ci, h4 .ci {
  filter: drop-shadow(0 0 3px rgba(var(--icon-heading-rgb, var(--icon-default-rgb, var(--color-primary-rgb))), 0.3));
}

/* Button icons */
.btn:hover .ci {
  filter: drop-shadow(0 0 4px var(--primary-alpha-35, rgba(99, 102, 241, 0.35)));
}

/* Badge icons - inherit badge color glow */
.badge-winning .ci  { filter: drop-shadow(0 0 3px var(--success-alpha-40, rgba(16, 185, 129, 0.4))); }
.badge-losing .ci   { filter: drop-shadow(0 0 3px var(--danger-alpha-40, rgba(239, 68, 68, 0.4))); }
.badge-default .ci  { filter: drop-shadow(0 0 3px var(--warning-alpha-40, rgba(245, 158, 11, 0.4))); }

/* --- Animations --- */

@keyframes ci-glow-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(var(--icon-page-title-rgb, var(--icon-default-rgb, var(--color-primary-rgb))), 0.28));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(var(--icon-page-title-rgb, var(--icon-default-rgb, var(--color-primary-rgb))), 0.58));
  }
}

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

@keyframes ci-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes ci-bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ci-shimmer {
  0%   { filter: drop-shadow(0 0 2px var(--primary-alpha-20, rgba(99, 102, 241, 0.2))); }
  50%  { filter: drop-shadow(0 0 10px var(--primary-alpha-60, rgba(99, 102, 241, 0.6))) brightness(1.2); }
  100% { filter: drop-shadow(0 0 2px var(--primary-alpha-20, rgba(99, 102, 241, 0.2))); }
}

/* Spinner icon */
.ci-spinning svg {
  animation: ci-spin 0.8s linear infinite;
}

/* Pulsing state */
.ci-pulsing {
  animation: ci-pulse 2s ease-in-out infinite;
}

/* Entrance animation (applied on replace) */
.ci-enter {
  animation: ci-bounce-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Fire icon special shimmer */
.ci[data-icon="fire"] {
  animation: ci-shimmer 3s ease-in-out infinite;
}

/* Snowflake icon subtle pulse */
.ci[data-icon="snowflake"] .primary {
  animation: ci-pulse 4s ease-in-out infinite;
}

/* --- Size Variants --- */
/* These match Phosphor size classes */
.ci-sm, .ph-icon-sm .ci { font-size: 16px; }
.ci-md, .ph-icon-md .ci { font-size: 20px; }
.ci-lg, .ph-icon-lg .ci { font-size: 24px; }
.ci-xl, .ph-icon-xl .ci { font-size: 32px; }

/* --- Status Color Overrides --- */
/* When an icon has explicit color via inline style, the glow should match */
.ci[style*="color: var(--color-success)"],
.ci[style*="color: var(--color-success"] {
  filter: drop-shadow(0 0 3px var(--success-alpha-35, rgba(16, 185, 129, 0.35)));
}

.ci[style*="color: var(--color-danger)"],
.ci[style*="color: var(--color-danger"] {
  filter: drop-shadow(0 0 3px var(--danger-alpha-35, rgba(239, 68, 68, 0.35)));
}

.ci[style*="color: var(--color-warning)"],
.ci[style*="color: var(--color-warning"] {
  filter: drop-shadow(0 0 3px var(--warning-alpha-35, rgba(245, 158, 11, 0.35)));
}

.ci[style*="color: var(--color-info)"],
.ci[style*="color: var(--color-info"] {
  filter: drop-shadow(0 0 3px var(--info-alpha-35, rgba(59, 130, 246, 0.35)));
}

/* --- Error Page Large Icons --- */
.error-icon .ci {
  font-size: inherit;
  animation: ci-glow-breathe 3s ease-in-out infinite;
}

/* --- Mobile Bottom Bar --- */
.bottom-tab-icon .ci {
  font-size: 22px;
}

/* --- Toast Icons --- */
.toast .ci {
  font-size: 20px;
  flex-shrink: 0;
}

/* --- Transition for hover interactions --- */
.ci:hover {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE FIX 5: ICON GLOW REPLACEMENT (gated by .perf-fix-icons)
   Replaces animated filter: drop-shadow() with a blurred
   radial-gradient pseudo-element. Static blur is computed once;
   only opacity animates (GPU-compositable, zero per-frame paint).
   Uses currentColor so the glow auto-matches each icon's color.
   ═══════════════════════════════════════════════════════════ */

@keyframes perf-icon-glow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.45; }
}

@keyframes perf-icon-shimmer {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.55; }
}

/* --- Page title icon glow (replaces ci-glow-breathe 4s) --- */
.perf-fix-icons .page-title .ci {
  animation: none;
  filter: none;
  position: relative;
}

.perf-fix-icons .page-title .ci::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  animation: perf-icon-glow 4s ease-in-out infinite;
}

/* --- Error page icon glow (replaces ci-glow-breathe 3s) --- */
.perf-fix-icons .error-icon .ci {
  animation: none;
  filter: none;
  position: relative;
}

.perf-fix-icons .error-icon .ci::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  animation: perf-icon-glow 3s ease-in-out infinite;
}

/* --- Fire icon shimmer (replaces ci-shimmer 3s) --- */
.perf-fix-icons .ci[data-icon="fire"] {
  animation: none;
  filter: none;
  position: relative;
}

.perf-fix-icons .ci[data-icon="fire"]::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  filter: blur(5px);
  pointer-events: none;
  z-index: -1;
  animation: perf-icon-shimmer 3s ease-in-out infinite;
}

/* --- Glow pseudo reduced motion (gated) --- */
@media (prefers-reduced-motion: reduce) {
  .perf-fix-icons .page-title .ci::after,
  .perf-fix-icons .error-icon .ci::after,
  .perf-fix-icons .ci[data-icon="fire"]::after {
    animation: none;
    opacity: 0.2;
  }
}

/* --- Print: remove effects --- */
@media print {
  .ci {
    filter: none !important;
    animation: none !important;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ci,
  .ci svg,
  .ci-spinning svg,
  .page-title .ci {
    animation: none !important;
    transition: none !important;
  }
}