/* vicecity variant B: NIGHT TAPE (retro arcade / VHS) */
:root{
  --hue:0deg;
  --bg:#0a0418; --bg2:#130828; --bg3:#1d0c3a;
  --mag:#ff2fa8; --cyan:#2ff3ff; --vio:#8a3bff; --sun:#ffb03a; --ink:#fff; --mut:#c8bde3; --line:rgba(255,255,255,.13);
  --f-d:'Audiowide','Righteous',system-ui,sans-serif; --f-m:'Monoton',cursive; --f-t:'VT323',ui-monospace,monospace; --f-b:'Space Grotesk',system-ui,sans-serif;
  --chrome:linear-gradient(180deg,#ffffff 0%,#dff6ff 30%,#7fb3d9 48%,#2a1a4d 51%,#ff6ad5 62%,#ffd27a 86%,#fff4d6 100%);
  --r:16px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.6;overflow-x:clip}
main,.foot{transition:filter .6s ease}
.tuned main,.tuned .foot{filter:hue-rotate(var(--hue))}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.skip{position:absolute;left:12px;top:-60px;background:#fff;color:#000;padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.pink{color:var(--mag);text-shadow:0 0 22px rgba(255,47,168,.6)}

/* VHS overlay over the whole page */
.vhs{position:fixed;inset:0;pointer-events:none;z-index:150;mix-blend-mode:overlay;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px)}
.vhs::after{content:"";position:absolute;left:0;right:0;height:90px;top:-100px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);animation:roll 7s linear infinite}
@keyframes roll{to{transform:translateY(calc(100vh + 200px))}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:400 .95rem/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--mag),var(--vio));border:2px solid transparent;border-radius:6px;
  padding:1em 1.5em;box-shadow:4px 4px 0 var(--cyan),0 10px 30px -10px rgba(255,47,168,.8);transition:transform .15s,box-shadow .15s,filter .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--cyan),0 14px 34px -10px rgba(255,47,168,.9);filter:brightness(1.1)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--cyan)}
.btn b{font-weight:400}
.btn--lg{font-size:1.02rem;padding:1.1em 1.7em}
.btn--sm{font-size:.78rem;padding:.75em 1.1em;box-shadow:3px 3px 0 var(--cyan)}
.btn--line{background:rgba(10,4,24,.6);border-color:var(--cyan);box-shadow:4px 4px 0 var(--mag);backdrop-filter:blur(4px)}
.btn--line:hover{box-shadow:6px 6px 0 var(--mag)}
.tag{font:400 .64em/1 var(--f-b);font-weight:700;letter-spacing:.1em;background:rgba(0,0,0,.4);border-radius:4px;padding:.4em .6em}
.tag:empty{display:none}
.is-soon{opacity:.82;cursor:default}
.is-soon:hover{transform:none;filter:none}

/* nav */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;padding:10px max(16px,calc((100% - 1180px)/2));
  background:rgba(10,4,24,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(47,243,255,.25)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 1.3rem/1 var(--f-d);letter-spacing:.04em;margin-right:auto}
.nav__brand img{border-radius:50%;box-shadow:0 0 14px rgba(255,47,168,.6);object-fit:cover}
.nav__links{display:flex;gap:26px}
.nav__links a{text-decoration:none;font:400 1.15rem/1 var(--f-t);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.nav__links a:hover{color:var(--cyan)}

/* hero */
.hero{position:relative;min-height:max(640px,calc(100svh - 58px));display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__grid{position:absolute;left:-50%;right:-50%;bottom:0;height:42%;z-index:-2;perspective:320px;overflow:hidden;opacity:.55;mix-blend-mode:screen}
.hero__grid i{position:absolute;inset:-100% 0 0;transform:rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,47,168,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(255,47,168,.9) 2px,transparent 2px);
  background-size:70px 70px;animation:grid 1.6s linear infinite;
  -webkit-mask-image:linear-gradient(0deg,#000 30%,transparent 85%);mask-image:linear-gradient(0deg,#000 30%,transparent 85%)}
@keyframes grid{to{background-position:0 70px}}
.hero__shade{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(10,4,24,.15),rgba(10,4,24,.55) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(10,4,24,0) 26%)}
.hero__inner{width:min(1180px,100% - 32px);margin-inline:auto;padding:56px 0 88px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__pfp{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--cyan);box-shadow:0 0 0 5px rgba(10,4,24,.6),0 0 40px rgba(47,243,255,.5);margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;padding:.45em 1em;border:1px solid var(--cyan);border-radius:4px;
  font:400 1.15rem/1 var(--f-t);letter-spacing:.14em;text-transform:uppercase;background:rgba(10,4,24,.65);backdrop-filter:blur(4px)}
.dot{width:9px;height:9px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px #ff3b3b;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.hero__title{margin:0;font:400 clamp(4.4rem,19vw,12.5rem)/1 var(--f-d);letter-spacing:.02em;overflow-wrap:anywhere;max-width:100%;text-transform:uppercase;font-style:italic;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 26px rgba(255,47,168,.7)) drop-shadow(6px 6px 0 rgba(138,59,255,.85))}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:0 .08em}
.hero__tag{margin:8px 0 28px;font:400 clamp(1.15rem,2.4vw,1.8rem)/1.25 var(--f-d);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 16px #000}
.hero__tag b{font-weight:400;color:var(--cyan);text-shadow:0 0 18px rgba(47,243,255,.8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:26px}

/* VHS on-screen display */
.osd{position:absolute;inset:18px 22px auto;display:flex;justify-content:space-between;gap:12px;font:400 clamp(1.1rem,2vw,1.6rem)/1 var(--f-t);letter-spacing:.1em;
  color:#fff;text-shadow:2px 0 rgba(255,47,168,.8),-2px 0 rgba(47,243,255,.8);z-index:2;pointer-events:none}
.osd__rec{display:flex;align-items:center;gap:8px}
.osd__rec i{width:12px;height:12px;border-radius:50%;background:#ff2b2b;box-shadow:0 0 10px #ff2b2b;animation:blink 1.1s steps(1) infinite}

/* CA bar */
.ca{display:flex;align-items:stretch;max-width:100%;width:min(640px,100%);border:2px solid var(--cyan);border-radius:6px;overflow:hidden;
  background:rgba(10,4,24,.82);box-shadow:0 0 24px rgba(47,243,255,.25)}
.ca__k{display:flex;align-items:center;padding:0 14px;font:400 .9rem/1 var(--f-d);letter-spacing:.14em;color:#0a0418;background:var(--cyan)}
.ca code{flex:1;min-width:0;padding:14px 14px;font:400 1.25rem/1.2 var(--f-t);letter-spacing:.04em;overflow-wrap:anywhere;text-align:left;align-self:center}
.ca code.is-tba{color:var(--mut);font-size:1.1rem}
.ca__copy{border:0;border-left:2px solid var(--cyan);background:transparent;color:var(--cyan);font:400 .85rem/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;padding:0 18px;cursor:pointer}
.ca__copy:hover:not(:disabled){background:var(--cyan);color:#0a0418}
.ca__copy.ok{background:#3dffa0;color:#0a0418}
.ca__copy:disabled{opacity:.55;cursor:not-allowed}
.ca--big{width:100%;max-width:820px;margin:34px auto 0}
.ca--big code{font-size:1.45rem;padding:18px}

/* marquee */
.ticker{overflow:hidden;background:linear-gradient(90deg,var(--mag),var(--vio));border-block:2px solid var(--cyan);transform:rotate(-1.2deg);margin:-14px -8px 0;position:relative;z-index:3}
.ticker div{display:flex;gap:28px;width:max-content;padding:12px 0;animation:mq 28s linear infinite;font:400 1.1rem/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ticker i{font-style:normal;color:var(--cyan)}
@keyframes mq{to{transform:translateX(-50%)}}

/* section heads */
section{position:relative}
.head{text-align:center;margin-bottom:44px}
.kick{margin:0 0 10px;font:400 1.3rem/1 var(--f-t);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.head h2,.soc__title{margin:0;font:400 clamp(2.2rem,5.4vw,4rem)/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.lead{max-width:56ch;margin:16px auto 0;color:var(--mut)}

/* tape / lore */
.tape-sec{padding:110px 0 90px;background:radial-gradient(900px 500px at 50% 0%,rgba(138,59,255,.25),transparent 70%)}
.cassette{width:min(520px,100%);margin:0 auto 56px;aspect-ratio:1.6;border-radius:18px;padding:5% 6%;display:flex;flex-direction:column;gap:5%;
  background:linear-gradient(160deg,#2a1d45,#140a26);border:2px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.15)}
.cassette__label{border-radius:8px;padding:10px 14px;background:linear-gradient(180deg,#fff2e0 0 30%,var(--sun) 30% 46%,var(--mag) 46% 62%,var(--vio) 62% 78%,#fff2e0 78%);color:#1a0c2e;display:flex;flex-direction:column;gap:2px}
.cassette__brand{font:400 clamp(1rem,3.4vw,1.5rem)/1 var(--f-m);letter-spacing:.06em}
.cassette__sub{font:700 .62rem/1 var(--f-b);letter-spacing:.2em;margin-top:auto;padding-top:24%}
.cassette__window{flex:1;min-height:56px;border-radius:999px;background:#07020f;border:2px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-around;position:relative}
.reel{width:22%;aspect-ratio:1;border-radius:50%;border:5px dashed #e8e0ff;animation:spin 3s linear infinite;background:radial-gradient(circle,#07020f 30%,#3a2a20 31% 60%,transparent 61%)}
.tapeline{position:absolute;left:30%;right:30%;top:50%;height:3px;background:#3a2a20}
@keyframes spin{to{transform:rotate(360deg)}}
.cassette__foot{display:flex;justify-content:space-between;font:400 1rem/1 var(--f-d);color:var(--mut);padding:0 4%}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.side{background:linear-gradient(180deg,rgba(29,12,58,.85),rgba(19,8,40,.85));border:1px solid var(--line);border-top:4px solid var(--mag);border-radius:var(--r);padding:28px}
.side--b{border-top-color:var(--cyan)}
.side h3{margin:0 0 18px;font:400 1.6rem/1.1 var(--f-d);text-transform:uppercase}
.side__k{display:inline-block;margin-right:10px;padding:.25em .55em;border-radius:4px;background:var(--mag);font-size:.6em;vertical-align:middle;letter-spacing:.1em}
.side--b .side__k{background:var(--cyan);color:#0a0418}
.tracks{list-style:none;margin:0;padding:0}
.tracks li{display:grid;grid-template-columns:46px 1fr auto;gap:12px;padding:16px 0;border-top:1px dashed rgba(255,255,255,.16)}
.tracks .n{font:400 1.5rem/1 var(--f-t);color:var(--mag)}
.side--b .tracks .n{color:var(--cyan)}
.tracks b{font:400 1.05rem/1.2 var(--f-d);letter-spacing:.03em;text-transform:uppercase}
.tracks p{margin:6px 0 0;color:var(--mut);font-size:.98rem;line-height:1.55}
.tracks .t{font:400 1.25rem/1 var(--f-t);color:var(--mut)}

/* gallery */
.gallery{padding:20px 0 100px}
.gal{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:auto;gap:18px}
.gal__i{position:relative;margin:0;border-radius:var(--r);overflow:hidden;border:2px solid rgba(255,255,255,.1);background:var(--bg2)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal__i:hover img{transform:scale(1.04)}
.gal__i--tall{grid-row:span 2}
.gal__i figcaption{position:absolute;left:12px;bottom:12px;padding:.35em .7em;font:400 1.15rem/1 var(--f-t);letter-spacing:.12em;background:rgba(10,4,24,.78);border-left:3px solid var(--cyan)}
.gal__i--wide2{grid-column:1 / -1;aspect-ratio:21/8}

/* radio */
.radio-sec{padding:100px 0;background:linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg))}
.radio{width:min(720px,100%);margin:0 auto;padding:26px;border-radius:22px;background:linear-gradient(160deg,#2c2140,#120a22);border:2px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.radio__screen{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4px 12px;padding:22px 24px;border-radius:12px;background:#06020e;border:1px solid rgba(47,243,255,.3);
  box-shadow:inset 0 0 30px rgba(47,243,255,.15)}
.radio__freq{font:400 clamp(3.2rem,10vw,5rem)/.9 var(--f-t);color:var(--cyan);text-shadow:0 0 18px var(--cyan)}
.radio__mhz{font:400 1.6rem/1 var(--f-t);color:var(--cyan);opacity:.7;padding-bottom:6px}
.radio__name{grid-column:1/-1;font:400 clamp(1.1rem,3vw,1.5rem)/1.2 var(--f-d);text-transform:uppercase;color:var(--mag);text-shadow:0 0 14px rgba(255,47,168,.7)}
.radio__now{grid-column:1/-1;font:400 1.25rem/1.2 var(--f-t);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio__dial{position:relative;display:flex;justify-content:space-between;margin:20px 4px;padding:16px 6px 8px;border-top:2px solid rgba(255,255,255,.2);
  font:400 1.1rem/1 var(--f-t);color:var(--mut);background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 12px) top/100% 10px no-repeat}
.radio__needle{position:absolute;top:-10px;left:3%;width:3px;height:44px;background:#ff3b3b;box-shadow:0 0 10px #ff3b3b;transition:left .5s cubic-bezier(.5,1.6,.5,1)}
.radio__btns{display:flex;gap:12px}
.rbtn{flex:0 0 auto;border:2px solid rgba(255,255,255,.2);background:#1b1130;color:#fff;border-radius:10px;padding:14px 18px;font:400 .95rem/1 var(--f-d);letter-spacing:.06em;cursor:pointer;
  box-shadow:0 4px 0 #07020f;transition:transform .1s,box-shadow .1s}
.rbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #07020f}
.rbtn--main{flex:1;background:linear-gradient(135deg,var(--mag),var(--vio));border-color:transparent;text-transform:uppercase}

/* client slot */
.slot-sec{padding:90px 0}
.slot{position:relative;margin:0;border-radius:var(--r);overflow:hidden;border:2px solid var(--cyan);box-shadow:0 0 0 6px rgba(47,243,255,.08),0 0 60px rgba(255,47,168,.25)}
.slot img{width:100%;aspect-ratio:3/1;object-fit:cover}
.slot.has-client img{aspect-ratio:auto}
.slot figcaption{position:absolute;top:12px;left:12px;padding:.35em .7em;font:400 1.15rem/1 var(--f-t);letter-spacing:.12em;text-transform:uppercase;background:rgba(10,4,24,.82);color:var(--cyan);border:1px dashed var(--cyan)}
.slot.has-client figcaption{display:none}

/* buy */
.buy-sec{padding:100px 0;background:radial-gradient(800px 420px at 50% 100%,rgba(255,47,168,.18),transparent 70%)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;padding:26px 22px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--line);overflow:hidden}
.step::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--sun),var(--mag),var(--vio),var(--cyan))}
.step__n{display:block;font:400 3rem/1 var(--f-m);color:var(--mag);margin-bottom:12px}
.step b{display:block;font:400 1.15rem/1.2 var(--f-d);text-transform:uppercase;margin-bottom:8px}
.step p{margin:0;color:var(--mut);font-size:.97rem}
.buy-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:36px}
.warn{text-align:center;margin:16px auto 0;color:var(--mut);font-size:.92rem;max-width:60ch}

/* socials */
.soc-sec{padding:100px 0 110px;background:linear-gradient(180deg,transparent,rgba(138,59,255,.2))}
.soc{text-align:center}
.soc__btns{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:32px}
.sbtn{display:inline-flex;align-items:center;gap:12px;min-width:240px;justify-content:center;padding:20px 28px;border-radius:8px;text-decoration:none;
  font:400 1.05rem/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;background:var(--bg3);border:2px solid var(--mag);box-shadow:5px 5px 0 var(--cyan);transition:transform .15s,box-shadow .15s}
.sbtn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cyan)}
.sbtn svg{width:24px;height:24px;fill:currentColor}

/* footer */
.foot{padding:40px 0 48px;border-top:1px solid var(--line);background:#06020f;color:var(--mut);font-size:.88rem;text-align:center}
.foot__brand{display:flex;align-items:center;justify-content:center;gap:10px;font:400 1.1rem/1 var(--f-d);color:#fff;margin-bottom:14px}
.foot__brand img{border-radius:50%;object-fit:cover}
.foot__line{margin:0 0 8px;color:#fff}
.foot__disc{max-width:80ch;margin:0 auto 12px;line-height:1.55}
.foot__c{margin:0;font:400 1.1rem/1 var(--f-t);letter-spacing:.1em}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr}
  .nav__links{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .sides{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal__i--tall{grid-row:auto}
  .gal__i--tall img{aspect-ratio:4/5}
  .gal__i--wide2{aspect-ratio:16/9}
  .slot img{aspect-ratio:16/9}
  .hero__inner{padding:70px 0 70px}
  .hero__pfp{width:76px;height:76px}
  .hero__cta .btn{flex:1 1 100%}
  .osd{inset:12px 14px auto;font-size:1rem}
  .osd__time{display:none}
  .side{padding:22px 18px}
  .tracks li{grid-template-columns:38px 1fr;}
  .tracks .t{display:none}
  .tape-sec,.radio-sec,.slot-sec,.buy-sec,.soc-sec{padding:72px 0}
  .ca code{font-size:1.05rem;padding:12px}
  .ca--big code{font-size:1.15rem}
  .ca__copy{padding:0 12px}
  .sbtn{min-width:0;flex:1 1 100%}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}