:root { --ink:#32124b; --purple:#5e1680; --pink:#ec008c; --yellow:#ffe900; --cream:#fff9ec; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:white; font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
button,input { font:inherit; } button { cursor:pointer; } em { font-style:normal; }
main { min-height:100svh; position:relative; background:radial-gradient(circle at 80% 10%,rgba(236,0,140,.26),transparent 28rem),linear-gradient(140deg,#210c34 0%,#3a1056 55%,#6a147d 100%); }
.topbar { height:94px; display:flex; align-items:center; justify-content:space-between; padding:12px clamp(22px,5vw,82px); position:relative; z-index:10; animation:introHeader .8s cubic-bezier(.16,1,.3,1) .08s both; }
.brand img { width:108px; height:70px; object-fit:contain; }
.live-badge { display:flex; align-items:center; gap:9px; color:var(--yellow); font-size:12px; font-weight:900; letter-spacing:.18em; border:1px solid rgba(255,255,255,.2); border-radius:99px; padding:10px 14px; background:rgba(20,5,35,.32); backdrop-filter:blur(12px); }
.live-badge span,.on-air i { width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 5px rgba(236,0,140,.16),0 0 18px var(--pink); animation:blink 1.4s infinite; }
.hero { min-height:calc(100svh - 190px); max-width:1440px; margin:0 auto; padding:5vh clamp(24px,7vw,104px) 150px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:30px; position:relative; }
.hero-copy { position:relative; z-index:3; }
.eyebrow { display:inline-flex; margin:0 0 20px; padding:8px 13px; border-left:4px solid var(--yellow); color:#ff80ca; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(11px,1vw,14px); font-weight:900; animation:introCopy .72s cubic-bezier(.16,1,.3,1) .42s both; }
h1 { margin:0; font-size:clamp(64px,8vw,126px); line-height:.82; letter-spacing:-.075em; text-transform:uppercase; font-weight:950; animation:introCopy .85s cubic-bezier(.16,1,.3,1) .54s both; }
h1 span { color:var(--yellow); }
.genres { margin:28px 0 26px; font-weight:800; letter-spacing:.12em; font-size:clamp(12px,1.3vw,17px); animation:introCopy .72s cubic-bezier(.16,1,.3,1) .7s both; }
.genres b { color:var(--pink); padding:0 7px; }
.hero-play { border:0; border-radius:99px; display:inline-flex; align-items:center; gap:14px; background:var(--pink); color:white; font-weight:950; letter-spacing:.055em; padding:9px 24px 9px 10px; box-shadow:0 16px 40px rgba(236,0,140,.34); transition:transform .2s ease,box-shadow .2s ease; animation:introCopy .72s cubic-bezier(.16,1,.3,1) .84s both; }
.hero-play:hover { transform:translateY(-3px); box-shadow:0 20px 50px rgba(236,0,140,.48); }
.hero-play>span:first-child,.controls button { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); }
.play-icon { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid var(--ink); margin-left:3px; }
.pause-icon { width:12px; height:15px; border-left:4px solid var(--ink); border-right:4px solid var(--ink); }
.logo-stage { min-height:520px; position:relative; display:grid; place-items:center; z-index:2; animation:introLogo 1.05s cubic-bezier(.16,1,.3,1) .18s both; }
.logo-stage img { width:min(630px,48vw); position:relative; z-index:4; filter:drop-shadow(0 38px 42px rgba(10,0,20,.48)); animation:float 4s ease-in-out infinite; }
.logo-glow { position:absolute; width:min(450px,38vw); aspect-ratio:1; border-radius:50%; background:var(--pink); filter:blur(70px); opacity:.3; }
.pulse-ring { position:absolute; border:2px solid rgba(255,233,0,.18); border-radius:50%; aspect-ratio:1; }
.ring-a { width:74%; animation:pulse 3.2s infinite; } .ring-b { width:95%; animation:pulse 3.2s .8s infinite; }
.sticker { position:absolute; z-index:5; padding:10px 15px; border-radius:10px; font-weight:950; transform:rotate(-9deg); box-shadow:0 10px 25px rgba(0,0,0,.25); }
.sticker-one { top:15%; right:6%; background:var(--yellow); color:var(--ink); animation:introStickerOne .62s cubic-bezier(.16,1,.3,1) .92s both; } .sticker-two { bottom:15%; left:8%; background:var(--pink); transform:rotate(8deg); animation:introStickerTwo .62s cubic-bezier(.16,1,.3,1) 1.02s both; }
.frequency { position:absolute; inset:auto 0 60px; display:flex; align-items:center; justify-content:center; gap:7px; opacity:.12; height:170px; overflow:hidden; animation:introFrequency 1.2s ease-out .58s both; }
.frequency i { width:8px; height:30%; border-radius:20px; background:white; animation:equalize 1.1s ease-in-out infinite alternate; }
.frequency i:nth-child(3n) { height:80%; } .frequency i:nth-child(4n) { height:52%; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.65; }
.orb-one { width:18px; height:18px; background:var(--yellow); top:10%; left:45%; } .orb-two { width:11px; height:11px; background:var(--pink); bottom:30%; left:4%; }
.player-shell { position:fixed; z-index:20; left:50%; bottom:24px; transform:translateX(-50%); width:min(920px,calc(100% - 32px)); min-height:94px; border-radius:24px; padding:13px 18px; background:rgba(255,249,236,.94); color:var(--ink); box-shadow:0 22px 60px rgba(10,0,20,.42); backdrop-filter:blur(18px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; animation:introPlayer .85s cubic-bezier(.16,1,.3,1) 1.08s both; }
.station-mark { display:flex; align-items:center; gap:13px; min-width:0; } .station-mark>div:last-child { display:grid; min-width:0; }
.cover-wrap { width:66px; height:66px; flex:0 0 66px; border-radius:15px; overflow:hidden; background:var(--ink); box-shadow:0 7px 18px rgba(50,18,75,.2); }
.cover-wrap img { width:100%; height:100%; object-fit:cover; }
.station-mark strong { display:block; max-width:320px; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .station-mark small { color:#775d86; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.on-air { color:var(--pink); font-size:9px; letter-spacing:.17em; font-weight:950; display:flex; align-items:center; gap:7px; } .on-air i { width:6px; height:6px; display:inline-block; }
.mini-wave { display:flex; align-items:center; gap:4px; height:38px; } .mini-wave i { width:4px; height:8px; border-radius:6px; background:var(--pink); }
.mini-wave.active i { animation:miniEqualize .7s ease-in-out infinite alternate; } .mini-wave i:nth-child(2n) { animation-delay:-.2s; } .mini-wave i:nth-child(3n) { animation-delay:-.45s; }
.controls { display:flex; align-items:center; justify-content:flex-end; gap:15px; } .controls button { border:0; width:54px; height:54px; }
.volume-wrap { display:flex; align-items:center; gap:8px; font-size:9px; font-weight:950; } .volume-wrap input { width:90px; accent-color:var(--pink); }
footer { position:absolute; bottom:4px; width:100%; text-align:center; font-size:9px; letter-spacing:.12em; opacity:.55; text-transform:uppercase; }
.footer-dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--yellow); margin:0 9px 2px; }
.whatsapp-float { position:fixed; z-index:30; top:16px; left:50%; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; color:white; background:#25d366; box-shadow:0 15px 38px rgba(0,0,0,.34),0 0 0 7px rgba(37,211,102,.13); transition:transform .2s ease,box-shadow .2s ease; animation:introWhatsapp .7s cubic-bezier(.16,1,.3,1) 1.4s both; }
.whatsapp-float:hover { transform:translate(-50%,-5px) scale(1.05); box-shadow:0 20px 44px rgba(0,0,0,.4),0 0 0 9px rgba(37,211,102,.17); }
.whatsapp-float svg { width:33px; height:33px; fill:currentColor; }
@keyframes float { 50% { transform:translateY(-13px) rotate(.5deg); } } @keyframes pulse { 0% { transform:scale(.88); opacity:.55; } 100% { transform:scale(1.12); opacity:0; } }
@keyframes equalize { to { transform:scaleY(.25); } } @keyframes miniEqualize { from { height:8px; } to { height:34px; } } @keyframes blink { 50% { opacity:.35; } }
@keyframes introHeader { from { opacity:0; transform:translateY(-32px); } to { opacity:1; transform:translateY(0); } }
@keyframes introCopy { from { opacity:0; transform:translateX(-54px); filter:blur(7px); } to { opacity:1; transform:translateX(0); filter:blur(0); } }
@keyframes introLogo { 0% { opacity:0; transform:scale(.58) rotate(-7deg); filter:blur(12px); } 68% { opacity:1; transform:scale(1.035) rotate(1deg); filter:blur(0); } 100% { opacity:1; transform:scale(1) rotate(0); filter:blur(0); } }
@keyframes introStickerOne { from { opacity:0; transform:translate(38px,-28px) rotate(13deg) scale(.5); } to { opacity:1; transform:translate(0,0) rotate(-9deg) scale(1); } }
@keyframes introStickerTwo { from { opacity:0; transform:translate(-38px,30px) rotate(-12deg) scale(.5); } to { opacity:1; transform:translate(0,0) rotate(8deg) scale(1); } }
@keyframes introFrequency { from { opacity:0; transform:scaleX(.35); } to { opacity:.12; transform:scaleX(1); } }
@keyframes introPlayer { from { opacity:0; transform:translate(-50%,70px) scale(.94); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes introWhatsapp { from { opacity:0; transform:translate(-50%,-35px) scale(.55); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@media (max-width:800px) {
  .topbar { height:80px; padding:8px 20px; } .brand img { width:92px; height:60px; }
  .hero { min-height:calc(100svh - 80px); grid-template-columns:1fr; text-align:center; padding:3vh 22px 160px; gap:0; }
  .hero-copy { order:2; margin-top:-42px; } .eyebrow { margin-bottom:14px; }
  h1 { font-size:clamp(55px,17vw,82px); line-height:.85; } .genres { margin:21px 0 20px; font-size:11px; }
  .logo-stage { min-height:38vh; order:1; } .logo-stage img { width:min(430px,88vw); }
  .sticker-one { top:12%; right:2%; font-size:11px; } .sticker-two { bottom:18%; left:5%; font-size:11px; }
  .player-shell { bottom:14px; min-height:78px; padding:9px 11px; border-radius:19px; grid-template-columns:1fr auto; gap:8px; }
  .cover-wrap { width:55px; height:55px; flex-basis:55px; border-radius:12px; } .station-mark strong { max-width:160px; font-size:13px; } .station-mark small { max-width:160px; font-size:10px; }
  .mini-wave,.volume-wrap { display:none; } .controls button { width:50px; height:50px; } .whatsapp-float { width:52px; height:52px; top:14px; } .whatsapp-float svg { width:28px; height:28px; } footer { display:none; }
}
@media (max-height:720px) and (min-width:801px) { .hero { padding-top:1vh; } .logo-stage { min-height:400px; } .player-shell { bottom:14px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; animation-iteration-count:1!important; } }