/* ==========================================================================
   RESET OKRAJŮ STRÁNKY (ODSTRANĚNÍ BÍLÉHO MEZER NA OKRAJÍCH)
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   KONFIGURACE RETRO RÁDIA POMOCÍ CSS PROMĚNNÝCH
   ========================================================================== */
:root {
  --bg-color: #8B4513;              /* Základní barva rádia */
  --bg-glow-color: #c25e1a;         /* Světlejší teplá hnědá/oranžová pro záři uprostřed */
  --bg-dark-color: #4a2309;         /* Tmavší odstín pro ztmavnutí okrajů */

  /* ========================================================================
     >>> NASTAVENÍ VÝŠKY A VYTAŽENÍ NAHORU POD HLAVIČKU <<<
     ======================================================================== */
  --frame-height: 280px;            /* Celková výška bloku rádia */
  --header-offset: 100px;           /* O kolik px vyjede plocha rádia NAHORU pod nadpis */

  --tuner-margin-top: 140px;        /* Odsazení vodicí čáry stupnice od horního okraje */

  --line-width: 2px;
  --line-color: #ffffff;
  --line-opacity: 0.3;
  --scale-font-size: 16px;
  
  --pointer-color: #ff3333;
  --pointer-width: 6px;

  --pointer-type: %;        
  --pointer-offset: 15;             /* Riska bude 15 % od levého kraje a 15 % od pravého */

  --pixels-per-scale: 140;
  --min-scales: 3;
  --max-scales: 14;

  --jitter-amount: 1.5;
  --jitter-speed: 0.08;

  --enable-intro: 1;
  --intro-speed: 4;

  --fm-mhz-font: "Arial Black", "Impact", sans-serif; 
  --fm-mhz-size: 18px;          

  /* DEFINICE CELKOVÉHO ROZSAHU STUPNICE */
  --min-frequency: 87.5;            
  --max-frequency: 108.0;           

  --tuned-frequency: 106.5;         /* Aktuálně naladěná frekvence */
  --station-name: "Český rozhlas Brno";
}

/* ==========================================================================
   STRUKTURA A KONTEJNER RÁDIA (PROCENTUÁLNÍ ROZVRŽENÍ NA OBRAZOVCE)
   ========================================================================== */

#radio-container {
  position: absolute;
  top: calc(-1 * var(--header-offset));
  left: 0;
  width: 100%;
  height: calc(var(--frame-height) + var(--header-offset));
  
  /* Kombinace horizontální tech mřížky a podkladové záře */
  background-color: var(--bg-color);
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 6px,
      rgba(0, 0, 0, 0.08) 6px,
      rgba(0, 0, 0, 0.08) 8px
    ),
    radial-gradient(ellipse at 50% 40%, var(--bg-glow-color) 0%, var(--bg-color) 60%, var(--bg-dark-color) 100%);
  box-shadow: inset 0 0 60px rgba(255, 175, 100, 0.25);
  
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* ==========================================================================
   1. SLOUPCOVÝ SPEKTRÁLNÍ EKVALIZÉR
   ========================================================================== */

#radio-container::before {
  content: "";
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 110px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 12px,
    rgba(255, 190, 120, 0.22) 12px,
    rgba(255, 190, 120, 0.22) 16px
  );
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1) 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1) 20%, transparent 80%);
  animation: eqBarsPulse 2.5s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ==========================================================================
   2. JEMNÁ SVÍTÍCÍ HLASOVÁ KŘIVKA (VOICE WAVE)
   ========================================================================== */

#radio-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q150,15 300,60 T600,60 T900,60 T1200,60' fill='none' stroke='rgba(255,210,160,0.5)' stroke-width='2.5'/%3E%3Cpath d='M0,60 Q150,105 300,60 T600,60 T900,60 T1200,60' fill='none' stroke='rgba(255,160,80,0.3)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100px;
  background-position: 0 100px;
  filter: drop-shadow(0 0 8px rgba(255, 180, 100, 0.8));
  animation: voiceWaveMove 8s linear infinite, voiceWaveGlow 3s ease-in-out infinite alternate;
  opacity: 0.85;
  pointer-events: none;
}

/* ==========================================================================
   ANIMACE
   ========================================================================== */

@keyframes eqBarsPulse {
  0% {
    opacity: 0.25;
    transform: scaleY(0.75);
    filter: drop-shadow(0 0 2px rgba(255, 160, 80, 0.3));
  }
  50% {
    opacity: 0.7;
    transform: scaleY(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 200, 120, 0.8));
  }
  100% {
    opacity: 0.35;
    transform: scaleY(0.85);
    filter: drop-shadow(0 0 4px rgba(255, 170, 90, 0.4));
  }
}

@keyframes voiceWaveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes voiceWaveGlow {
  0% {
    filter: drop-shadow(0 0 4px rgba(255, 180, 100, 0.5));
    opacity: 0.5;
  }
  100% {
    filter: drop-shadow(0 0 12px rgba(255, 200, 130, 0.95));
    opacity: 0.9;
  }
}

#radio-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.content-above-radio {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  color: #ffffff;
}