/* ============================================================
   motion.css — movimento e vida do site
   Tudo respeita "reduzir movimento" do sistema (já tratado no fim).
   ============================================================ */

html{overflow-x:hidden}
/* ---------- barra de progresso da página ---------- */
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:300;background:linear-gradient(90deg,var(--y),var(--red));transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- entrada do topo ---------- */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.55) rotate(-8deg)}60%{transform:scale(1.06) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
.hero-title{animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s both}
.hero-sub{animation:rise .9s cubic-bezier(.2,.7,.2,1) .35s both}
.hero-cta{animation:rise .9s cubic-bezier(.2,.7,.2,1) .55s both}
.hero-logo{animation:pop 1s cubic-bezier(.2,.9,.3,1.2) .25s both,float 6s ease-in-out 1.3s infinite}
.mainnav a,.topright>*{animation:drop .6s ease-out backwards}
.mainnav a:nth-child(2){animation-delay:.05s}.mainnav a:nth-child(3){animation-delay:.1s}.mainnav a:nth-child(4){animation-delay:.15s}.mainnav a:nth-child(5){animation-delay:.2s}.mainnav a:nth-child(6){animation-delay:.25s}
.brand{animation:pop .9s cubic-bezier(.2,.9,.3,1.2) both}

/* logo brilhando e reagindo à rádio */
.hero-logo{position:relative}
.hero-logo img{transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(var(--sy,0px));transition:transform .18s ease-out;will-change:transform}
.hero-logo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%) 160% 0/260% 100% no-repeat;-webkit-mask:url("../img/logo.png") center/contain no-repeat;mask:url("../img/logo.png") center/contain no-repeat;animation:shine 5s ease-in-out 2s infinite}
@keyframes shine{0%{background-position:160% 0}38%,100%{background-position:-60% 0}}
body.is-playing .hero-logo{animation:pop 1s cubic-bezier(.2,.9,.3,1.2) .25s both,beat .86s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.035)}30%{transform:scale(1)}}

/* equalizador dançante do fundo */
.hero-eq canvas{display:block;width:100%;height:100%}
.hero-eq.has-canvas{background:none;opacity:1}

/* notas musicais subindo */
.notes{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.notes i{position:absolute;bottom:-40px;font-style:normal;font-size:var(--s,34px);color:rgba(0,0,0,.14);animation:noteUp var(--t,11s) linear var(--dl,0s) infinite}
@keyframes noteUp{0%{transform:translate3d(0,0,0) rotate(-12deg);opacity:0}12%{opacity:1}50%{transform:translate3d(var(--dx,30px),-230px,0) rotate(10deg)}100%{transform:translate3d(calc(var(--dx,30px)*-1),-520px,0) rotate(-14deg);opacity:0}}

/* ---------- cabeçalho que encolhe ao rolar (desktop) ---------- */
@media (min-width:861px){
  .topbar{position:sticky;top:0;transition:height .3s ease,padding .3s ease,box-shadow .3s}
  .brand{transition:width .3s ease,top .3s ease}
  .topbar.scrolled{height:88px;padding-bottom:14px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
  .topbar.scrolled .brand{width:118px;top:4px}
  .topbar.scrolled .socials{display:none}
  .topbar.scrolled .topright{gap:0}
}

/* ---------- aparecer ao rolar ---------- */
.js-motion .rv{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js-motion .rv-l{transform:translateX(-40px)}
.js-motion .rv-r{transform:translateX(40px)}
.js-motion .rv-z{transform:scale(.92)}
.js-motion .rv.in{opacity:1;transform:none}

/* ---------- player vivo ---------- */
.pb-play::before,.np-play::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--y);opacity:0;pointer-events:none}
body.is-playing .pb-play::before,body.is-playing .np-play::before{animation:ring 1.8s ease-out infinite}
body.is-playing .pb-play::after{display:none}
@keyframes ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.55);opacity:0}}
body.is-playing .playerbar{box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,212,0,.35),0 0 46px rgba(255,212,0,.14)}
body.is-playing .tag-onair{animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
body.is-playing .miniplayer{animation:miniglow 2.2s ease-in-out infinite}
@keyframes miniglow{50%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(255,212,0,.55)}}

/* ---------- botões ---------- */
.btn-red,.btn-blue,.btn-yellow{position:relative;overflow:hidden}
.btn-red::after,.btn-blue::after,.btn-yellow::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.btn-red:hover::after,.btn-blue:hover::after,.btn-yellow:hover::after{left:130%}
.hero-cta .btn-red{animation:nudge 3.2s ease-in-out 3s infinite}
@keyframes nudge{0%,90%,100%{transform:none}93%{transform:translateY(-5px)}96%{transform:translateY(0)}98%{transform:translateY(-2px)}}

/* ---------- cartões ---------- */
.promo-img,.member img,.news-row img,.dest-main,.news-hero{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.promo:hover .promo-img{transform:scale(1.06)}
.promo-img{overflow:hidden}
.member:hover img{transform:scale(1.07)}
.member{transition:transform .3s,border-color .3s}
.member:hover{transform:translateY(-6px);border-color:var(--y)}
.news-row:hover img{transform:scale(1.05)}
.news-row{overflow:hidden}
.news-hero:hover{transform:scale(1.012)}
.pf{transition:transform .25s,border-color .25s,background .25s}
.pf:hover{transform:translateX(6px);border-color:#444}
.top-list li{transition:background .2s,transform .2s}
.top-list li:hover{background:#1d1d1d;transform:translateX(4px)}
.top-list .pos{display:inline-block;transition:transform .25s}
.top-list li:hover .pos{transform:scale(1.18) rotate(-4deg)}
.day{transition:transform .2s,background .2s}
.day:hover{transform:translateY(-3px)}
.soc{transition:transform .2s,color .2s}
.soc:hover{transform:translateY(-3px) rotate(-6deg) scale(1.12)}
.is-now{position:relative}
.prog-item.is-now::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%) -150% 0/60% 100% no-repeat;animation:sweep 3.6s ease-in-out 1s infinite}
@keyframes sweep{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
.pf.is-now{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 1px var(--y) inset,0 0 22px rgba(255,212,0,.3)}}

/* ---------- faixa em movimento ---------- */
.ticker-wrap{overflow:hidden;margin-top:34px;padding:26px 0}
.ticker{background:var(--red);color:#fff;overflow:hidden;transform:rotate(-1.2deg) scale(1.03);box-shadow:0 10px 30px rgba(228,32,42,.25);border-block:3px solid #000;position:relative;z-index:2}
.ticker-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:14px;padding:13px 26px;font-weight:900;font-size:15px;letter-spacing:.08em;white-space:nowrap}
.ticker span::after{content:"★";color:var(--y)}
@keyframes marquee{to{transform:translateX(-50%)}}
.appbanner{margin-top:30px}

/* banner do app: celular balançando */
.ab-phone .phone{animation:phone 4.5s ease-in-out infinite}
@keyframes phone{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-8px)}}
.phone-eq{animation:phoneeq 1.1s ease-in-out infinite alternate}
@keyframes phoneeq{from{background-position:0 100%;opacity:.55}to{background-position:30px 100%;opacity:1}}
.ab-qr{transition:transform .3s}
.ab-qr:hover{transform:rotate(-4deg) scale(1.08)}

/* destaque: zoom lento na imagem */
.dest-main{background-position:35% 50%;animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{to{background-position:70% 50%}}

/* ---------- trocar de aba no app ---------- */
@media (max-width:860px){
  @keyframes viewIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .view{animation:viewIn .38s cubic-bezier(.2,.7,.2,1) both}
  .tabbar .is-active .ico{animation:tabpop .4s cubic-bezier(.2,.9,.3,1.4)}
  @keyframes tabpop{0%{transform:scale(.7)}100%{transform:none}}
  .ticker-wrap{margin-top:18px}
  .ticker{transform:rotate(-1.6deg) scale(1.06)}
  .notes i{--s:26px}
}

/* ---------- reduzir movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .js-motion .rv{opacity:1!important;transform:none!important}
  .ticker{transform:none}
  .ticker-track{animation:none!important;flex-wrap:wrap;width:auto}
  .notes{display:none}
}