/* ==========================================================
   KOLLENIPTV.SE — SCANDINAVIAN MICRO-ANIMATIONS ENGINE
   100% GPU-Composited, Zero Layout Shifts, 60FPS Fluid Performance
   ========================================================== */

/* 1. CONTINUOUS ROTATING BORDER (SUBTLE TEAL / SLATE) */
@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, 24px);
  background: 
    linear-gradient(var(--bg-card, #FFFFFF), var(--bg-card, #FFFFFF)) padding-box,
    conic-gradient(from var(--border-angle), #14B8A6 0%, #0284C7 35%, #162033 70%, #14B8A6 100%) border-box;
  border: 1.5px solid transparent;
  animation: rotateConicBorder 6s linear infinite;
  will-change: --border-angle;
}

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

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

/* 3. PULSE LIVE BROADCAST DOT */
@keyframes pulseLiveDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

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

/* 4. SUBTLE SHIMMER BUTTON SWEEP */
@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.25) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  animation: shimmerSweepGpu 4s infinite ease-in-out;
  will-change: transform;
  pointer-events: none;
}

/* 5. AUDIO EQUALIZER BARS */
@keyframes equalizeBarGpu {
  0%, 100% { transform: scaleY(0.25); }
  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, #14B8A6);
  border-radius: 2px;
  transform-origin: bottom;
  animation: equalizeBarGpu 1.2s ease-in-out infinite;
}

.eq-bar:nth-child(2) { animation-delay: 0.2s; }
.eq-bar:nth-child(3) { animation-delay: 0.4s; }
.eq-bar:nth-child(4) { animation-delay: 0.1s; }

/* 6. FADE IN ENTRANCE */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInSlideUp 0.35s ease-out forwards;
}