/* ============================================================
   CULT ON AIR — ENHANCE LAYER  (v1 · 2026-06)
   Layer ADDITIVO di sola estetica. Va caricato PER ULTIMO,
   dopo cult-on-air-inline.css. Non modifica struttura né logica.
   Per disattivarlo: rimuovere il suo <link>. Niente si rompe.
   ============================================================ */

:root{
  --cae-cyan:#00e5ff;
  --cae-pink:#ff1b8d;
  --cae-violet:#7b2cff;
  --cae-red:#ff3f5c;
  --cae-gold:#f0c050;
  --cae-green:#2ec97a;
}

/* ---------- 1. ATMOSFERA: aloni vivi sullo sfondo --------- */
body::before{
  content:"";
  position:fixed; inset:-20vmax; z-index:0; pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 12% -8%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(46vmax 46vmax at 108% 18%, rgba(255,27,141,.10), transparent 60%),
    radial-gradient(50vmax 50vmax at 50% 120%, rgba(123,44,255,.09), transparent 62%);
  animation:caeDrift 22s ease-in-out infinite alternate;
}
@keyframes caeDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2%,1.5%,0) scale(1.06)}
}
#app{position:relative; z-index:1}

/* ---------- 2. BRAND header: glow + gradiente animato ------ */
.hdr-name{
  background:linear-gradient(90deg,#fff 0%,#bfe9ff 30%,#ff8fc4 60%,#fff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:caeShine 7s linear infinite;
  filter:drop-shadow(0 0 14px rgba(0,229,255,.22));
}
@keyframes caeShine{to{background-position:220% 0}}
.hdr-logo{
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 24px rgba(0,229,255,.28);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hdr-logo:hover{transform:scale(1.05) rotate(-2deg); box-shadow:0 0 30px rgba(255,27,141,.40)}

/* ---------- 3. CARD LIVE: aura viva + badge pulsante ------- */
.now-card{position:relative; isolation:isolate}
.now-card::after{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(120deg,var(--cae-cyan),var(--cae-pink),var(--cae-violet),var(--cae-cyan));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; animation:caeBorder 9s linear infinite;
}
@keyframes caeBorder{to{background-position:300% 0}}

.live-badge{box-shadow:0 0 18px rgba(255,63,92,.35)}
.live-dot{
  box-shadow:0 0 0 0 rgba(255,63,92,.7);
  animation:caePulse 1.8s ease-out infinite;
}
@keyframes caePulse{
  0%{box-shadow:0 0 0 0 rgba(255,63,92,.65)}
  70%{box-shadow:0 0 0 10px rgba(255,63,92,0)}
  100%{box-shadow:0 0 0 0 rgba(255,63,92,0)}
}

/* ---------- 4. PLAY: invito magnetico --------------------- */
#mainPlay{position:relative; overflow:visible}
#mainPlay::before{
  content:""; position:absolute; inset:-6px; border-radius:inherit; z-index:-1;
  background:radial-gradient(closest-side,rgba(255,63,92,.55),transparent 78%);
  animation:caeBreath 2.6s ease-in-out infinite;
}
@keyframes caeBreath{
  0%,100%{transform:scale(.96); opacity:.55}
  50%{transform:scale(1.10); opacity:.95}
}
#mainPlay:hover{filter:brightness(1.08)}
#mainPlay:active::before{animation:none}

/* ---------- 5. PULSANTI NAV: premium, leggibili, tattili --- */
.db{
  transition:transform .2s ease, box-shadow .28s ease, filter .28s ease !important;
}
.db .db-label{
  text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9) !important;
}
.db .db-sub{
  text-shadow:0 1px 6px rgba(0,0,0,.9) !important;
  color:rgba(238,242,255,.78) !important;
}
.db::before{ /* sheen che attraversa al hover */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg); transition:left .6s ease; z-index:2; pointer-events:none;
}
.db:hover::before{left:140%}
.db:hover{transform:translateY(-4px) !important}
.db:active{transform:scale(.98) !important}

/* bordo neon col colore proprio di ogni pulsante */
#btnLiveRadio:hover{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 26px rgba(255,63,92,.45),inset 0 0 0 1px rgba(255,63,92,.55) !important}
#btnPrograms:hover{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 26px rgba(0,180,255,.45),inset 0 0 0 1px rgba(0,180,255,.55) !important}
#btnAstro:hover{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 26px rgba(240,192,80,.45),inset 0 0 0 1px rgba(240,192,80,.55) !important}
#btnTop10:hover{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 26px rgba(46,201,122,.45),inset 0 0 0 1px rgba(46,201,122,.55) !important}
#btnChatMain:hover{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 26px rgba(0,229,255,.45),inset 0 0 0 1px rgba(0,229,255,.55) !important}
#btnContactMain:hover{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 26px rgba(123,44,255,.45),inset 0 0 0 1px rgba(123,44,255,.55) !important}

/* ---------- 6. ENTRATA: reveal scenografico al "Entra" ----- */
body.cult-ready .now-card,
body.cult-ready .db{
  animation:caeRise .6s cubic-bezier(.16,.84,.3,1) both;
}
body.cult-ready .now-card{animation-delay:.02s}
body.cult-ready #btnLiveRadio{animation-delay:.10s}
body.cult-ready #btnPrograms{animation-delay:.16s}
body.cult-ready #btnAstro{animation-delay:.22s}
body.cult-ready #btnTop10{animation-delay:.28s}
body.cult-ready #btnChatMain{animation-delay:.34s}
body.cult-ready #btnContactMain{animation-delay:.40s}
@keyframes caeRise{
  from{opacity:0; transform:translateY(22px) scale(.985)}
  to{opacity:1; transform:none}
}

/* ---------- 7. WELCOME: prima impressione che invita ------- */
.welcome{
  background:
    radial-gradient(60vmax 60vmax at 15% 10%, rgba(0,229,255,.16), transparent 55%),
    radial-gradient(60vmax 60vmax at 85% 90%, rgba(255,27,141,.16), transparent 55%),
    rgba(4,6,13,.82) !important;
  backdrop-filter:blur(8px);
}
.welcome-box{
  position:relative; isolation:isolate;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(0,229,255,.12) !important;
}
.welcome-box::before{
  content:""; position:absolute; inset:-1.5px; z-index:-1; border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(130deg,var(--cae-cyan),var(--cae-pink),var(--cae-violet),var(--cae-cyan));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:caeBorder 8s linear infinite;
}
.wlc-logo{
  filter:drop-shadow(0 0 22px rgba(0,229,255,.45));
  animation:caeFloat 4.5s ease-in-out infinite;
}
@keyframes caeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wlc-title{
  background:linear-gradient(90deg,#fff,#9fe9ff,#ff8fc4,#fff);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:caeShine 6s linear infinite;
}
.wlc-btn{
  box-shadow:0 10px 30px rgba(255,63,92,.45),0 0 0 1px rgba(255,255,255,.10) !important;
  transition:transform .18s ease, box-shadow .25s ease !important;
}
.wlc-btn:hover{transform:translateY(-2px); box-shadow:0 14px 38px rgba(255,63,92,.6) !important}
.wlc-skip{transition:color .2s ease, letter-spacing .2s ease}
.wlc-skip:hover{color:var(--cae-cyan) !important; letter-spacing:.04em}

/* ---------- 8. MOBILE: priorità alla radio (fold) --------- */
@media (max-width:760px){
  /* meteo header compatto: via il muro di testo, resta il meteo + input */
  #headerWeatherWidget.header-weather-widget{
    min-height:0 !important;
    padding:9px 12px !important;
  }
  #headerWeatherWidget .header-weather-label,
  #headerWeatherWidget .header-weather-hint,
  #headerWeatherWidget .city-help{ display:none !important; }
  #headerWeatherWidget .header-weather-line,
  #wxTxtHeader{ margin-bottom:6px !important; }
  #wxCityRowHeader.header-weather-city-row{ margin-top:2px !important; }

  /* PLAY più presente al tatto */
  #mainPlay{letter-spacing:.06em}
  .db:hover{transform:none !important}
  .db:active{transform:scale(.97) !important}
}

/* ---------- 9. Rispetto preferenze movimento -------------- */
@media (prefers-reduced-motion:reduce){
  body::before,.hdr-name,.now-card::after,.live-dot,#mainPlay::before,
  .welcome-box::before,.wlc-logo,.wlc-title,
  body.cult-ready .now-card,body.cult-ready .db{
    animation:none !important;
  }
  #mainPlay::before{opacity:.6}
}