/* ===== FMSangi — Powerful Romantic Design Layer =====
   Loaded last so it upgrades the base look with:
   - animated gradient orb background (whole site)
   - glassmorphism + glow on cards
   - bold hero typography with glow
   - animated gradient section underlines
   - shimmering CTA + glowing buttons
*/

/* ---- Animated background orbs (fixed, behind everything) ---- */
body{position:relative;overflow-x:hidden}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(40vw 40vw at 12% 18%, rgba(230,57,113,.22), transparent 60%),
    radial-gradient(38vw 38vw at 88% 12%, rgba(255,111,181,.18), transparent 60%),
    radial-gradient(45vw 45vw at 70% 85%, rgba(166,75,242,.20), transparent 60%),
    radial-gradient(35vw 35vw at 20% 90%, rgba(244,196,48,.10), transparent 60%);
  filter:saturate(1.1);
  animation:orbFloat 18s ease-in-out infinite alternate;
}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,15,26,0) 60%,rgba(11,15,26,.6));pointer-events:none}
@keyframes orbFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-3%,0) scale(1.08)}}

/* ---- Glass header ---- */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(20,8,20,.55);border-bottom:1px solid rgba(255,111,181,.12)}
.brand{font-weight:800;letter-spacing:-.5px}
.navtoggle{color:#fff}

/* ---- Hero typography boost ---- */
.hero3 .left{border:1px solid rgba(255,111,181,.18);box-shadow:0 30px 80px rgba(230,57,113,.12)}
.hero3 h1{font-size:4rem;letter-spacing:-2px;text-shadow:0 4px 30px rgba(230,57,113,.25)}
.hero3 h1 .grad{background:linear-gradient(100deg,#FF8FC7,#E63971 40%,#A64BF2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero3 .tag{font-size:1.25rem;color:#e9c7da}
.btn-glow{font-size:1.1rem;padding:16px 38px;box-shadow:0 10px 36px rgba(230,57,113,.5);letter-spacing:.3px}
.btn-glow:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 48px rgba(255,111,181,.65)}

/* ---- Glass cards with glow ---- */
.showcard,.nowcard,.hostcard,.newscard,.epitem,.statstrip .s{
  background:linear-gradient(160deg,rgba(40,18,38,.85),rgba(24,12,26,.9));
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,111,181,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;
}
.showcard:hover,.nowcard:hover,.hostcard:hover,.newscard:hover{
  transform:translateY(-8px);
  border-color:rgba(255,111,181,.45);
  box-shadow:0 24px 60px rgba(230,57,113,.35)
}
.epitem:hover{transform:translateX(6px);border-color:rgba(255,111,181,.4)}
.statstrip .s:hover{transform:translateY(-6px);border-color:rgba(255,111,181,.4);box-shadow:0 18px 44px rgba(166,75,242,.3)}

/* card tops get a stronger gradient */
.showcard .top{box-shadow:inset 0 -30px 50px rgba(0,0,0,.3)}

/* ---- Animated gradient section underlines ---- */
.sechead h2{position:relative;padding-left:18px}
.sechead h2:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:6px;border-radius:6px;background:linear-gradient(180deg,#FF8FC7,#E63971,#A64BF2);box-shadow:0 0 14px rgba(230,57,113,.6)}
.sechead h2:after{content:"";position:absolute;left:18px;right:0;bottom:-10px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,111,181,.6),transparent);}

/* ---- Genre chips glow ---- */
.genres .chip{border:1px solid rgba(255,111,181,.16);background:rgba(40,18,38,.7);backdrop-filter:blur(6px)}
.genres .chip:hover{box-shadow:0 8px 24px rgba(230,57,113,.4);transform:translateY(-3px)}

/* ---- CTA shimmer ---- */
.ctabanner{position:relative;overflow:hidden;border:1px solid rgba(255,111,181,.25);box-shadow:0 20px 60px rgba(230,57,113,.3)}
.ctabanner:before{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);animation:shimmer 4.5s infinite}
@keyframes shimmer{0%{left:-60%}60%,100%{left:140%}}
.ctabanner h2{font-size:2.4rem}
.ctabanner .btn-white{font-size:1.05rem;padding:15px 38px;box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* ---- Live bar glow ---- */
.livebar{border:1px solid rgba(255,111,181,.16);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.livebar .grn{color:#FF6FB5}
.livebar .lb b{color:#FF8FC7}

/* ---- Share buttons glow ---- */
.sharebar a{border:1px solid rgba(255,111,181,.16);background:rgba(40,18,38,.7)}
.sharebar a:hover{box-shadow:0 10px 28px rgba(230,57,113,.45)}

/* ---- Player bar glass + glow ---- */
.player{backdrop-filter:blur(16px);background:rgba(20,8,20,.82);border-top:1px solid rgba(255,111,181,.2);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.playbtn{box-shadow:0 0 0 4px rgba(230,57,113,.15),0 8px 24px rgba(230,57,113,.4)}

/* ---- Smooth reveal (already applied via .reveal) ---- */
.reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:768px){
  .hero3 h1{font-size:2.4rem}
  .ctabanner h2{font-size:1.6rem}
}