/* ==========================================================
   KÖPA IPTV - 100% GPU COMPOSITED ANIMATIONS ENGINE
   Zero Layout Shifts, Zero Paint Costs, 60FPS Fluid Performance
   ========================================================== */

/* 1. CONTINUOUS ROTATING CONIC GLOW BORDER */
@keyframes rotateConicBorder {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.conic-glow-border {
  position: relative;
  border-radius: var(--radius-xl);
  background: 
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    conic-gradient(from var(--border-angle), #ff6b00 0%, #ffa200 25%, #10b981 50%, #ffa200 75%, #ff6b00 100%) border-box;
  border: 2px solid transparent;
  animation: rotateConicBorder 4s linear infinite;
  will-change: --border-angle;
}

/* 2. AMBIENT FLOAT ELEVATE (GPU Composited) */
@keyframes floatElevate {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatElevate 5s ease-in-out infinite;
  will-change: transform;
}

/* 3. PULSE LIVE BROADCAST DOT (GPU Composited Scale & Opacity) */
@keyframes pulseLiveDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.animate-pulse-live {
  animation: pulseLiveDot 1.8s infinite ease-in-out;
  will-change: transform, opacity;
}

/* 4. SHIMMER BUTTON SWEEP (GPU Composited Transform Translate) */
@keyframes shimmerSweepGpu {
  0% { transform: translateX(-150%) rotate(25deg); }
  100% { transform: translateX(250%) rotate(25deg); }
}

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  animation: shimmerSweepGpu 3.2s infinite ease-in-out;
  will-change: transform;
  pointer-events: none;
}

/* 5. AUDIO EQUALIZER BARS (GPU Composited scaleY - Zero Reflow) */
@keyframes equalizeBarGpu {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

.equalizer-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.eq-bar {
  width: 3px;
  height: 18px;
  background: var(--primary);
  border-radius: 2px;
  transform-origin: bottom;
  animation: equalizeBarGpu 1s ease-in-out infinite;
  will-change: transform;
}

.eq-bar:nth-child(1) { animation-duration: 0.8s; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { animation-duration: 1.1s; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { animation-duration: 0.7s; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { animation-duration: 1.3s; animation-delay: 0.4s; }

/* 6. RADAR PING FOR SERVER NODES (GPU Composited) */
@keyframes radarPingGpu {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.node-ping-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.node-ping-indicator::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #10b981;
  animation: radarPingGpu 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}


/* ==========================================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION SUPPORT
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .conic-glow-border {
    animation: none !important;
  }
  .animate-float, .animate-pulse-live, .btn-shimmer::after, .eq-bar, .node-ping-indicator::after {
    animation: none !important;
  }
}