/* SANFU FM 102.4 — Scheme 02 */
@font-face{
  font-family:'Smiley';
  src:url('../assets/fonts/SmileySans-subset.woff2') format('woff2'),
      url('../assets/fonts/SmileySans-subset.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'NotoSC';
  src:url('../assets/fonts/NotoSansSC-subset.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MiSans';
  src:url('../assets/fonts/MiSans-subset.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{font-family:'Space';src:url('../assets/fonts/SpaceGrotesk-400.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Space';src:url('../assets/fonts/SpaceGrotesk-500.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'Space';src:url('../assets/fonts/SpaceGrotesk-700.ttf') format('truetype');font-weight:700;font-display:swap;}

:root{
  --ink:#0B0B0B;
  --ink-2:#171717;
  --acid:#D8FF3E;
  --chrome:#E8E6DF;
  --silver:#E9E6DF;
  --paper:#F2EBDD;
  --blue:#0047FF;
  --brand-blue:#00A0E9;
  --red:#E60012;
  --orange:#F39800;
  --line:rgba(242,235,221,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:#2A2A2A;font-family:'NotoSC',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
img{display:block;}
button{font:inherit;color:inherit;}

.phone{position:relative;width:750px;height:1334px;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate;}
.layer{position:absolute;inset:0;pointer-events:none;}
.layer button,.layer a,.layer .preset,.layer .track,.layer [role="button"]{pointer-events:auto;}

.mono{font-family:'Space',sans-serif;letter-spacing:.08em;}
.display{font-family:'Smiley',sans-serif;font-weight:400;letter-spacing:-.02em;}
.grain{position:absolute;inset:0;background-image:url('../assets/grain.png');background-size:320px 320px;opacity:.35;mix-blend-mode:screen;pointer-events:none;}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);pointer-events:none;}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(242,235,221,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(242,235,221,.08) 1px,transparent 1px);background-size:54px 54px;}

.chrome-text{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F7F7 26%,#A8A8A8 46%,#FFFFFF 51%,#C9C9C9 64%,#F2F2F2 76%,#8D8D8D 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.65));
}
.pill{display:inline-flex;align-items:center;gap:9px;border:2px solid var(--paper);border-radius:99px;padding:8px 14px 7px;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1;}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--acid);}
.pill--red{border-color:var(--red);color:var(--paper);background:rgba(230,0,18,.18);}
.pill--red .dot{background:var(--red);}
.pill--acid{background:var(--acid);color:var(--ink);border-color:var(--ink);}

.btn{display:flex;align-items:center;justify-content:center;gap:15px;height:90px;border:3px solid var(--ink);border-radius:99px;font-family:'NotoSC';font-weight:900;font-size:30px;letter-spacing:.02em;box-shadow:8px 8px 0 var(--blue);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.btn:active{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--blue);}
.btn--acid{background:var(--acid);color:var(--ink);}
.btn .icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--acid);font-size:20px;}

.brand-logo{width:150px;}
.brand-logo--light{width:150px;}
.hairline{height:1px;background:var(--line);}
.caption{font-size:10px;letter-spacing:.18em;color:rgba(242,235,221,.48);}

/* common radio bits */
.wave{display:flex;align-items:center;gap:3px;height:38px;}
.wave i{display:block;width:3px;background:var(--acid);border-radius:2px;}
.wave i:nth-child(3n){height:70%}.wave i:nth-child(3n+1){height:100%}.wave i:nth-child(3n+2){height:45%}
@media (prefers-reduced-motion: reduce){
  .ticker,.tickerbar .t,.onair i{animation:none !important;}
}