/*
Theme Name: OLEGATOR FM Neon
Theme URI: https://spec-host.ru
Author: Spec-Host
Description: Cinematic neon radio theme for OLEGATOR FM (TV mode, neon HUD, smoke, gator scene). Works best with the companion plugin "OLEGATOR FM Radio Core".
Version: 2.3.1
Text Domain: olegatorfm
*/

:root{
  --bg:#060909;
  --bg2:#020404;
  --neon:#26ff7a;
  --neon2:#00ff55;
  --text:#e9fff2;
  --muted:#7fe8b3;
  --glass: rgba(10, 18, 16, .55);
  --glass2: rgba(10, 18, 16, .35);
  --stroke: rgba(38,255,122,.35);
  --shadow: 0 0 24px rgba(38,255,122,.18), 0 0 90px rgba(0,255,85,.08);
  --radius: 22px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    url('assets/bg-olegator-fog.webp') center center / cover no-repeat fixed,
    radial-gradient(1200px 800px at 60% 10%, rgba(38,255,122,.08), transparent 55%),
    radial-gradient(900px 600px at 20% 90%, rgba(0,255,85,.05), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:var(--neon); text-decoration:none}
a:hover{filter:brightness(1.15)}
.container{width:min(1180px, 92vw); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(3,6,6,.85), rgba(3,6,6,.35));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(38,255,122,.12);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  letter-spacing:.14em; text-transform:uppercase;
}
.brand .title{font-weight:900; font-size:18px}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--neon); box-shadow: 0 0 18px rgba(38,255,122,.8);
}
.nav a{
  margin-left:18px;
  padding:10px 12px;
  border-radius:14px;
  color:rgba(233,255,242,.9);
  border:1px solid transparent;
}
.nav a:hover{
  border-color: rgba(38,255,122,.25);
  background: rgba(10,18,16,.35);
  box-shadow: var(--shadow);
}
.hero{
  position:relative;
  padding:42px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
}
.card{
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(10,18,16,.55), rgba(10,18,16,.28));
  border:1px solid rgba(38,255,122,.16);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 220px at 25% 0%, rgba(38,255,122,.18), transparent 60%);
  pointer-events:none;
}
.card .inner{position:relative; padding:22px 22px 18px}
.h1{
  font-size:44px; line-height:1.05;
  margin:0 0 10px;
  letter-spacing:.02em;
}
.sub{color:rgba(233,255,242,.78); margin:0 0 18px; max-width:58ch}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{
  border:1px solid rgba(38,255,122,.22);
  background: rgba(10,18,16,.35);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color:rgba(233,255,242,.86);
}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(38,255,122,.25);
  background: rgba(10,18,16,.35);
  color:rgba(233,255,242,.92);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:.15s;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: rgba(38,255,122,.45);
  background: rgba(10,18,16,.5);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(38,255,122,.18), rgba(10,18,16,.35));
  border-color: rgba(38,255,122,.55);
}
.section{
  padding:22px 0 46px;
}
.grid3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}
.kv{display:flex; align-items:center; justify-content:space-between; gap:12px}
.kv .label{color:rgba(233,255,242,.72); font-size:13px}
.kv .value{font-weight:700}
.footer{
  border-top:1px solid rgba(38,255,122,.12);
  padding:22px 0;
  color:rgba(233,255,242,.6);
}

/* TV page */

.tv-eq-stage{
  position:absolute;
  left:0; right:0;
  top:8vh;
  height:54vh;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  pointer-events:none;
}
.tv-big-eq{
  width:min(1200px, 96vw);
  height:54vh;
  max-height:520px;
  filter: drop-shadow(0 0 28px rgba(38,255,122,.28));
  opacity:.95;
}
@media (max-width: 760px){
  .tv-eq-stage{top:6vh;height:42vh}
  .tv-big-eq{height:42vh;max-height:420px}
}

.tv-root{
  min-height: calc(100vh - 0px);
  position:relative;
  overflow:hidden;
}
.tv-bg{
  position:absolute; inset:0;
  background:
    url('assets/bg-olegator-fog.webp') center center / cover no-repeat,
    radial-gradient(1200px 800px at 50% 25%, rgba(38,255,122,.14), transparent 60%),
    radial-gradient(900px 700px at 20% 90%, rgba(0,255,85,.07), transparent 62%),
    conic-gradient(from 220deg at 60% 0%, rgba(0,255,120,.08), rgba(0,0,0,0) 35%, rgba(0,255,120,.05) 70%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, #030706, #010202);
}
.scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.02) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
  opacity:.12;
  pointer-events:none;
}
.noise{
  position:absolute; inset:0;
  background-image: url('assets/noise.svg');
  opacity:.12;
  mix-blend-mode: overlay;
  pointer-events:none;
  animation: noiseMove 2.2s steps(2,end) infinite;
}
@keyframes noiseMove{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2%,1%,0)}
  50%{transform:translate3d(1%,-2%,0)}
  75%{transform:translate3d(2%,2%,0)}
  100%{transform:translate3d(0,0,0)}
}
.smoke{
  position:absolute; inset:-20vh -10vw;
  pointer-events:none;
  filter: blur(0px);
  opacity:.75;
}
.smoke span{
  position:absolute;
  width:55vmax; height:55vmax;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(180,255,220,.12),
    rgba(38,255,122,.06) 35%,
    rgba(0,0,0,0) 70%);
  animation: drift 16s linear infinite;
  mix-blend-mode: screen;
}
.smoke span:nth-child(1){left:-10vmax; top:-6vmax; animation-duration:18s}
.smoke span:nth-child(2){left:25vmax; top:-12vmax; animation-duration:22s; opacity:.55}
.smoke span:nth-child(3){left:55vmax; top:8vmax; animation-duration:20s; opacity:.45}
.smoke span:nth-child(4){left:-20vmax; top:22vmax; animation-duration:24s; opacity:.38}
.smoke span:nth-child(5){left:35vmax; top:34vmax; animation-duration:26s; opacity:.30}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8vmax, -6vmax,0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

.gator-stage{
  position:absolute;
  left:0; right:0;
  top:8vh;
  height:min(520px, 52vh);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.gator-svg{
  width:min(1200px, 96vw);
  height:auto;
  filter: drop-shadow(0 0 24px rgba(38,255,122,.12)) drop-shadow(0 0 90px rgba(0,255,85,.08));
  opacity:.98;
}
.eye-glow{
  transform-origin:center;
  animation: eyePulse 2.2s ease-in-out infinite;
}
@keyframes eyePulse{
  0%,100%{opacity:.55; filter: drop-shadow(0 0 10px rgba(38,255,122,.6))}
  50%{opacity:1; filter: drop-shadow(0 0 24px rgba(38,255,122,.95))}
}

.tv-ui{
  position:relative;
  z-index:10;
  padding-top: 52vh;
  padding-bottom: 34px;
}
.tv-shell{
  width:min(980px, 94vw);
  margin:0 auto;
  border-radius: 28px;
  border:1px solid rgba(38,255,122,.18);
  background: linear-gradient(180deg, rgba(8,14,13,.72), rgba(8,14,13,.35));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.tv-shell .top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(38,255,122,.12);
}
.tv-shell .title{
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:14px;
  display:flex; align-items:center; gap:10px;
}
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background: var(--neon);
  box-shadow: 0 0 18px rgba(38,255,122,.9);
  animation: liveBlink 1.2s ease-in-out infinite;
}
@keyframes liveBlink{0%,100%{opacity:.45}50%{opacity:1}}
.tv-shell .body{padding:18px}


/* --- DJ card + featured news --- */
.ofm-djcard{display:flex;flex-direction:column;gap:10px}
.ofm-djcard-top .kv{margin:0}
.ofm-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(0,255,120,.95);box-shadow:0 0 14px rgba(0,255,120,.7);margin-right:8px;vertical-align:middle}
.ofm-djcard-name{font-size:26px;font-weight:800;letter-spacing:.2px}
.ofm-djcard-track{opacity:.85;font-size:14px;line-height:1.35}
.ofm-djcard-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.ofm-mini-link{color:rgba(180,255,220,.95);text-decoration:none;border:1px solid rgba(0,255,120,.25);padding:8px 10px;border-radius:10px;background:rgba(0,10,6,.25)}
.ofm-mini-link:hover{border-color:rgba(0,255,120,.55);box-shadow:0 0 22px rgba(0,255,120,.18)}
.news-title{margin:12px 0 6px;font-size:20px;font-weight:800}
.news-excerpt{opacity:.85;line-height:1.5}