/* DISABLETRON — terminal-neon theme.
Dark base, neon green/gold/cyan, JetBrains Mono labels, glass + glow.
8K-ready: rem/clamp scaling, no fixed-pixel layouts. */
:root {
--bg: #0a0a0a;
--bg2: #101013;
--ink: #e9edf6;
--dim: #8a93ab;
--green: #00ff88;
--gold: #ffd700;
--cyan: #00d4ff;
--purple: #9b59b6;
--red: #ff4444;
--glass: rgba(255, 255, 255, 0.045);
--edge: rgba(255, 255, 255, 0.12);
--radius: clamp(14px, 1.3vw, 22px);
--maxw: 1240px;
font-size: clamp(15px, 1.04vw, 20px);
}
* { box-sizing: border-box; }
/* defensive overflow guard: no media can exceed its container / the viewport */
img, video, iframe, svg, canvas { max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: "Inter", system-ui, sans-serif; line-height: 1.55; overflow-x: hidden;
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; }
.dim { color: var(--dim); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
/* glass */
.glass {
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid var(--edge); border-radius: var(--radius);
backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow: 0 18px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14);
}
/* ambient neon orbs */
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.22; }
.o1 { width: 46vw; height: 46vw; background: var(--gold); top: -12vw; left: -8vw; }
.o2 { width: 42vw; height: 42vw; background: var(--cyan); bottom: -14vw; right: -8vw; }
.o3 { width: 38vw; height: 38vw; background: var(--purple); top: 38%; left: 44%; opacity: 0.16; }
body::after { /* black hex-grid texture (BetOnGoat style) */
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%2300ff88' fill-opacity='0.05'/%3E%3C/svg%3E");
}
/* boot splash */
.splash {
position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
background: radial-gradient(ellipse at 50% 40%, #0b1018, #05060a 70%);
transition: opacity .6s ease, visibility .6s;
}
.splash.hidden { opacity: 0; visibility: hidden; }
.scanlines { position: absolute; inset: 0;
background: repeating-linear-gradient(0deg, rgba(0,255,136,0.06) 0 2px, transparent 2px 4px); }
.splash-core { text-align: center; }
.splash-orb {
width: clamp(70px, 9vw, 130px); aspect-ratio: 1; margin: 0 auto 1.4rem; border-radius: 50%;
background: conic-gradient(from 0deg, var(--green), var(--cyan), var(--gold), var(--green));
filter: blur(2px); animation: spin 2.4s linear infinite, pulse 1.6s ease-in-out infinite;
}
.boot { color: var(--green); font-size: clamp(.8rem, 1.6vw, 1rem); text-shadow: 0 0 12px rgba(0,255,136,0.6); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 60px rgba(0,255,136,0.6); } }
/* nav */
.nav {
/* sticky nav clears the Dynamic Island / notch in standalone PWA mode (inset is 0 on devices without one) */
position: sticky; top: calc(.7rem + env(safe-area-inset-top)); z-index: 40; width: min(var(--maxw), 94vw);
margin: .7rem auto; display: flex; align-items: center; justify-content: space-between;
padding: .7rem 1.2rem; border-radius: 999px;
}
.brand { font-weight: 800; font-size: 1rem; color: var(--green); text-shadow: 0 0 14px rgba(0,255,136,0.4); display: flex; align-items: center; }
.brand-logo { height: clamp(1.5rem, 2.4vw, 2.2rem); width: auto; display: block; filter: drop-shadow(0 0 10px rgba(0,255,136,0.5)); }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: clamp(.7rem, 1.8vw, 1.5rem); font-size: .8rem; }
.nav-links a { color: var(--dim); transition: color .2s, text-shadow .2s; }
.nav-links a:hover { color: var(--green); text-shadow: 0 0 10px rgba(0,255,136,0.5); }
/* hero */
.hero { display: grid; place-items: center; padding: clamp(3rem, 10vw, 9rem) 1rem clamp(2rem,5vw,4rem); }
.hero-inner { width: min(var(--maxw), 94vw); text-align: center; }
.kicker { display: inline-block; color: var(--green); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
margin-bottom: 1.4rem; padding: .42rem .9rem; border: 1px solid rgba(0,255,136,.32); border-radius: 999px;
background: rgba(0,255,136,.06); backdrop-filter: blur(6px); }
.hero-title {
font-size: clamp(1.8rem, 8vw, 4.6rem); font-weight: 900; letter-spacing: -0.01em; line-height: 1.1;
display: block; white-space: nowrap; padding: .06em .04em .14em; max-width: 100%; word-break: normal;
background: linear-gradient(120deg, #eafff5 0%, #00ff88 42%, #39ff14 64%, #00ffff 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 0 8px #00ff88) drop-shadow(0 0 22px #00ffcc) drop-shadow(0 0 48px rgba(0,255,136,.7)) drop-shadow(0 0 90px rgba(0,255,200,.4));
animation: neonFluor 3.2s ease-in-out infinite;
}
@keyframes neonFluor {
0%,100% { filter: drop-shadow(0 0 8px #00ff88) drop-shadow(0 0 22px #00ffcc) drop-shadow(0 0 48px rgba(0,255,136,.7)) drop-shadow(0 0 90px rgba(0,255,200,.4)); }
47% { filter: drop-shadow(0 0 11px #00ff88) drop-shadow(0 0 28px #00ffcc) drop-shadow(0 0 64px rgba(0,255,136,.9)) drop-shadow(0 0 120px rgba(0,255,200,.55)); }
49% { filter: drop-shadow(0 0 4px #00ff88) drop-shadow(0 0 10px #00ffcc); }
51% { filter: drop-shadow(0 0 12px #00ff88) drop-shadow(0 0 32px #00ffcc) drop-shadow(0 0 72px rgba(0,255,136,.95)); }
}
body.light .hero-title { animation: none; }
.tagline { color: var(--dim); font-size: clamp(1rem, 2.2vw, 1.35rem); max-width: 60ch; margin: 1.2rem auto 1.8rem; }
/* buttons */
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.cta-row.center { justify-content: center; margin-top: 1.4rem; }
.hero .cta-row { justify-content: center; }
.btn {
display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: .82rem; letter-spacing: .06em;
padding: .75rem 1.3rem; border-radius: 999px; border: 1px solid var(--edge);
background: var(--glass); color: var(--ink); transition: transform .15s, box-shadow .25s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-small { padding: .5rem 1rem; font-size: .74rem; }
.btn-primary { border: 0; color: #04130b;
background: linear-gradient(120deg, var(--green), #7dffc0);
box-shadow: 0 8px 26px rgba(0,255,136,0.35); }
.btn-primary:hover { box-shadow: 0 10px 34px rgba(0,255,136,0.55); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); box-shadow: 0 0 22px rgba(0,255,136,0.25); }
.btn[data-net="spotify"]:hover { border-color: var(--green); color: var(--green); }
.btn[data-net="apple"]:hover { border-color: #fff; color: #fff; }
.btn[data-net="soundcloud"]:hover { border-color: #ff7700; color: #ff8c33; }
.btn[data-net="amazon"]:hover { border-color: var(--cyan); color: var(--cyan); }
/* hero stats */
.hero-stats { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0; margin-top: 2.8rem;
border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; backdrop-filter: blur(6px); background: rgba(10,12,16,.4); }
.hstat { text-align: center; padding: 1rem clamp(1.2rem,3.5vw,2.8rem); position: relative; }
.hstat + .hstat { border-left: 1px solid var(--edge); }
.hstat-value { font-family: var(--display), "JetBrains Mono", monospace; font-weight: 800; font-size: clamp(1.05rem,2.2vw,1.6rem); color: var(--gold); text-shadow: 0 0 16px rgba(255,215,0,0.28); letter-spacing: .02em; }
.hstat-label { font-family: "JetBrains Mono", monospace; font-size: .62rem; color: var(--dim); letter-spacing: .16em; margin-top: .45rem; text-transform: uppercase; }
/* sections */
.section { width: min(var(--maxw), 94vw); margin: clamp(3rem,8vw,7rem) auto; }
.section-head { margin-bottom: 1.8rem; }
.section-tag { color: var(--cyan); font-size: .72rem; letter-spacing: .18em; }
.section-title { font-size: clamp(1.6rem, 4vw, 2.8rem); margin-top: .4rem; }
.section-sub { color: var(--dim); margin-top: .4rem; }
/* latest / news */
.latest-list { display: flex; flex-direction: column; gap: .7rem; }
.latest-item { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; flex-wrap: wrap; transition: transform .2s, box-shadow .2s; }
.latest-item:hover { transform: translateX(4px); box-shadow: 0 0 0 1px rgba(0,255,136,0.25), 0 12px 30px rgba(0,0,0,.5); }
.latest-date { color: var(--gold); font-size: .72rem; letter-spacing: .1em; min-width: 5rem; }
.latest-tag { color: var(--cyan); font-size: .6rem; letter-spacing: .14em; border: 1px solid var(--edge); border-radius: 999px; padding: .15rem .55rem; }
.latest-text { color: #cdd4e6; font-size: .95rem; flex: 1; min-width: 12rem; }
/* nav active state */
.nav-links a.active { color: var(--green); text-shadow: 0 0 10px rgba(0,255,136,0.5); }
.page-head { margin-top: 1.4rem; }
/* discography grid */
.album-grid { display: grid; gap: clamp(1rem,2vw,1.6rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.album { overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.album:hover { transform: translateY(-5px); box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,136,.25); }
.album-cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, filter .4s; }
.album:hover .album-cover img { transform: scale(1.06); filter: brightness(.65); }
.album-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: var(--green); opacity: 0; transition: opacity .3s; text-shadow: 0 0 20px rgba(0,255,136,.7); }
.album:hover .album-play { opacity: 1; }
.album-meta { padding: var(--radius); display: flex; flex-direction: column; gap: .45rem; }
.album-tag { color: var(--cyan); font-size: .64rem; letter-spacing: .12em; }
.album-title { font-size: 1.05rem; }
.album-desc { color: var(--dim); font-size: .82rem; line-height: 1.45; margin: .1rem 0 .2rem; }
.album-meta .btn { align-self: flex-start; margin-top: .3rem; }
/* featured / embeds */
.featured-label { color: var(--green); font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .12em; margin-bottom: .9rem; }
.apple-embed { display: block; width: 100%; border: 0; }
#ytWrap .yt { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; display: block; }
.empty-note { padding: 2.4rem; text-align: center; color: var(--dim); letter-spacing: .12em; }
/* player */
.player { padding: clamp(.8rem, 1.6vw, 1.4rem); }
.player iframe { display: block; width: 100%; }
/* tracks */
.track-grid { display: grid; gap: clamp(1rem,2vw,1.6rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.track { overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.track:hover { transform: translateY(-5px); box-shadow: 0 22px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,255,136,0.25); }
.track-cover { position: relative; aspect-ratio: 1; overflow: hidden; background: #11131c; }
.track-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, filter .4s; }
.track:hover .track-cover img { transform: scale(1.06); filter: brightness(.7); }
.play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: var(--green);
opacity: 0; transition: opacity .3s; text-shadow: 0 0 20px rgba(0,255,136,0.7); }
.track:hover .play { opacity: 1; }
.track-meta { padding: var(--radius); display: flex; flex-direction: column; gap: .5rem; }
.track-tag { color: var(--cyan); font-size: .66rem; letter-spacing: .14em; }
.track-title { font-size: 1.1rem; }
.track-link { align-self: flex-start; margin-top: .3rem; }
/* bio */
.bio { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: clamp(1.2rem,3vw,2.4rem); padding: clamp(1.2rem,2.5vw,2.2rem); align-items: center; }
.bio-img { width: 100%; border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; }
.bio-text { color: #cdd4e6; font-size: clamp(1rem,1.4vw,1.15rem); max-width: 62ch; white-space: pre-line; }
@media (max-width: 720px) { .bio { grid-template-columns: 1fr; } }
/* gallery */
.gallery-grid { display: grid; gap: clamp(.7rem,1.4vw,1.1rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
border: 1px solid var(--edge); cursor: zoom-in; transition: transform .25s, box-shadow .25s; }
.gallery-grid img:hover { transform: scale(1.03); box-shadow: 0 0 0 1px var(--green), 0 14px 40px rgba(0,0,0,.5); }
/* contact */
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding: clamp(1.4rem,3vw,2.4rem); }
.social { display: flex; flex-wrap: wrap; gap: .7rem; }
/* footer */
.footer { width: min(var(--maxw), 94vw); margin: 4rem auto 2.4rem; padding-top: 1.4rem;
border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between;
gap: .6rem; color: var(--dim); font-size: .74rem; }
.footer .foot-link, .footer .foot-login { color: var(--dim); text-decoration: none; letter-spacing: .04em; transition: color .2s; }
.footer .foot-link:hover, .footer .foot-login:hover { color: var(--ink); }
/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
background: rgba(3,4,8,.86); backdrop-filter: blur(10px); padding: 1.4rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: var(--radius); border: 1px solid var(--edge); }
.lb-close { position: fixed; top: 1.2rem; right: 1.4rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
border: 1px solid var(--edge); background: var(--glass); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
/* MASSIVE scaling on large / 4K / 8K displays — everything is rem/clamp based,
so bumping the root font-size + max width scales the whole GUI up cleanly. */
@media (min-width: 2200px) { :root { font-size: 24px; --maxw: 1760px; } }
@media (min-width: 3200px) { :root { font-size: 30px; --maxw: 2400px; } }
@media (min-width: 5000px) { :root { font-size: 44px; --maxw: 3400px; } }
/* UHD scaling, applied downward — shrink the whole rem-based UI to fit phones */
@media (max-width: 600px) { :root { font-size: 15px; } }
@media (max-width: 380px) { :root { font-size: 13.5px; } }
@media (min-width: 7000px) { :root { font-size: 60px; --maxw: 4800px; } }
@media (min-width: 2200px) {
.hero-title { font-size: clamp(4.6rem, 6vw, 8rem); }
.glass { backdrop-filter: blur(60px) saturate(180%); }
.orb { filter: blur(160px); }
}
/* betongoat 12D hex-black background — replicated, sitewide */
.ambient { display: none !important; } /* replaced by #neonbg */
body::after { content: none !important; } /* drop old hex texture */
body { background: #0a0a0a; }
body::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
background: radial-gradient(ellipse at 15% 10%, rgba(255,215,0,0.14) 0%, transparent 45%),
radial-gradient(ellipse at 85% 15%, rgba(0,212,255,0.10) 0%, transparent 40%),
radial-gradient(ellipse at 50% 60%, rgba(155,89,182,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(0,212,255,0.08) 0%, transparent 40%),
radial-gradient(ellipse at 80% 70%, rgba(255,215,0,0.10) 0%, transparent 35%);
background-size: 200% 200%; animation: meshDrift 20s ease-in-out infinite; }
#neonbg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
background:
radial-gradient(circle at 35% 30%, rgba(0,255,255,0.10), transparent 60%),
radial-gradient(circle at 65% 40%, rgba(255,0,255,0.10), transparent 60%),
radial-gradient(circle at 50% 50%, rgba(57,255,20,0.10), transparent 60%),
#0a0a0a; }
#neonbg .nb-hex { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-repeat: repeat; }
#neonbg .nb-hex1 { background-image: url("data:image/svg+xml;utf8,");
animation: spHexPulse 8s ease-in-out infinite, spHexRotate 240s linear infinite; }
#neonbg .nb-hex2 { opacity: .5; background-image: url("data:image/svg+xml;utf8,");
animation: spHexPulse 11s ease-in-out infinite reverse, spHexRotate 300s linear infinite reverse; }
#neonbg .nb-const { opacity: .42; background-size: 600px 600px; background-image: url("data:image/svg+xml;utf8,");
animation: spHexPulse 14s ease-in-out infinite, spHexRotate 420s linear infinite, constDrift 52s ease-in-out infinite;
will-change: transform, opacity, background-position; }
#neonbg .nb-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(120px); opacity: .28; will-change: transform, opacity; }
#neonbg .nb-tl { top: -140px; left: -140px; background: #00ffff; animation: nbDrift1 26s ease-in-out infinite; }
#neonbg .nb-tr { top: -140px; right: -140px; background: #ff00ff; animation: nbDrift2 31s ease-in-out infinite; }
#neonbg .nb-bl { bottom: -140px; left: -140px; background: #39ff14; animation: nbDrift2 29s ease-in-out infinite reverse; }
#neonbg .nb-br { bottom: -140px; right: -140px; background: #ffd700; animation: nbDrift1 34s ease-in-out infinite reverse; }
#neonbg .nb-viz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; mix-blend-mode: screen; pointer-events: none; }
#neonbg .nb-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,255,255,0.018) 3px, rgba(0,255,255,0.018) 4px); }
/* alien UFO beam — slow iridescent conic sweep from above */
#neonbg .nb-ufo { position: absolute; top: -40%; left: 50%; width: 160vw; height: 160vw; transform: translateX(-50%);
background: conic-gradient(from 0deg at 50% 0%, transparent 0deg, rgba(0,255,255,0.05) 40deg, transparent 90deg, rgba(255,0,255,0.05) 150deg, transparent 200deg, rgba(57,255,20,0.05) 270deg, transparent 320deg, rgba(0,255,255,0.05) 360deg);
filter: blur(26px); opacity: .8; animation: spHexRotate 34s linear infinite; }
/* casino psych — wandering color spotlight */
#neonbg .nb-psych { position: absolute; inset: -20%; mix-blend-mode: screen; opacity: .78;
background: radial-gradient(circle at 50% 50%, rgba(255,0,255,0.10), transparent 35%);
animation: nbPsych 9s ease-in-out infinite; }
@keyframes meshDrift { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
@keyframes spHexPulse { 0%,100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes spHexRotate { to { transform: rotate(360deg); } }
@keyframes nbDrift1 { 0%,100% { transform: translate(0,0) scale(1); opacity:.14; } 50% { transform: translate(60px,40px) scale(1.18); opacity:.22; } }
@keyframes nbDrift2 { 0%,100% { transform: translate(0,0) scale(1.1); opacity:.18; } 50% { transform: translate(-50px,30px) scale(.92); opacity:.12; } }
@keyframes nbPsych { 0% { background-position: 10% 20%; } 25% { background-position: 80% 30%; } 50% { background-position: 60% 80%; } 75% { background-position: 20% 70%; } 100% { background-position: 10% 20%; } }
/* Constellation drift. Uses background-position, NOT transform: the layer already
runs spHexRotate on transform, and two animations on the same property don't
compose — the later one just wins and the rotation would be lost. */
@keyframes constDrift { 0%,100% { background-position: 0 0; } 25% { background-position: 26px -30px; } 50% { background-position: -22px 34px; } 75% { background-position: 18px 14px; } }
/* whole-field psychedelic hue cycle — casino color wheel */
#neonbg { animation: nbHue 13s linear infinite; }
body.warp #neonbg { animation-duration: 5s; }
body.warp #neonbg .nb-psych { animation-duration: 4s; opacity: .95; }
body.warp #neonbg .nb-ufo { animation-duration: 12s; opacity: 1; }
body.warp #neonbg .nb-glow { opacity: .42; }
body.warp #neonbg .nb-viz { opacity: 1; }
body.viz-off #neonbg .nb-viz { display: none; }
body.scan-off #neonbg .nb-scan { display: none; }
@keyframes nbHue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #neonbg .nb-const { animation: none; } }
/* art gallery (sellable) */
.art-grid { display: grid; gap: clamp(1rem,2vw,1.6rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.art-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 140%); z-index: 9999; max-width: min(92vw, 560px); padding: .9rem 1.1rem; border: 1px solid rgba(0,255,136,.5); border-radius: 12px; background: rgba(10,12,16,.92); backdrop-filter: blur(10px); color: #e8ecf3; font-size: .82rem; line-height: 1.5; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,136,.18); cursor: pointer; opacity: 0; transition: transform .35s, opacity .35s; }
.art-toast.show { transform: translate(-50%, 0); opacity: 1; }
.art-toast a { color: #00ff88; font-weight: 700; text-decoration: none; }
.art-toast a:hover { text-decoration: underline; }
.art-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.art-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,136,.28); }
.art-cover { position: relative; border: 0; padding: 0; cursor: zoom-in; background: #000; aspect-ratio: 16/9; overflow: hidden; }
.art-cover .acl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.art-cover .acl.on { opacity: 1; }
.art-cover:hover .acl.on { transform: scale(1.04); transition: opacity .8s ease, transform .5s ease; }
.art-anim { position: absolute; top: .7rem; left: .7rem; z-index: 2; color: var(--green); font-size: .62rem; letter-spacing: .12em;
background: rgba(0,0,0,.6); border: 1px solid var(--edge); border-radius: 999px; padding: .2rem .55rem; }
.art-zoom { position: absolute; bottom: .7rem; right: .7rem; z-index: 2; color: var(--ink); font-size: 1.1rem; opacity: 0; transition: opacity .2s;
background: rgba(0,0,0,.5); border: 1px solid var(--edge); border-radius: 8px; width: 2rem; height: 2rem; display: grid; place-items: center; }
.art-card:hover .art-zoom { opacity: 1; }
.art-cardmeta { padding: var(--radius); display: flex; flex-direction: column; gap: .35rem; }
.art-tag { color: var(--cyan); font-size: .64rem; letter-spacing: .14em; }
.art-title { font-size: 1.15rem; }
.art-ed { color: var(--dim); font-size: .68rem; letter-spacing: .06em; }
.art-buyrow { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; gap: .6rem; }
.art-price { font-weight: 800; font-size: 1.1rem; color: var(--gold); text-shadow: 0 0 14px rgba(255,215,0,.3); }
/* gallery intro */
.art-intro { color: var(--dim); font-size: .82rem; line-height: 1.6; max-width: 70ch; margin: 0 0 1.6rem; }
.art-intro b { color: var(--green); }
/* image protection: transparent guard layer + tiled watermark over previews */
.art-cover .acl { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.art-guard { position: absolute; inset: 0; z-index: 3; background: transparent; } /* intercepts right-click / drag-save */
.art-wm { position: absolute; inset: -20%; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; gap: .4rem 1.2rem;
transform: rotate(-24deg); opacity: .14; color: #fff; font-size: .7rem; letter-spacing: .25em; pointer-events: none;
text-shadow: 0 1px 2px rgba(0,0,0,.5); overflow: hidden; line-height: 2.6; }
/* purchase tiers */
.art-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .7rem; }
.art-tiers .tier { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem .3rem; cursor: pointer;
border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--ink);
font-family: var(--display), "JetBrains Mono", monospace; transition: border-color .2s, transform .15s, background .2s; }
.art-tiers .tier:hover { border-color: var(--green); transform: translateY(-2px); background: rgba(0,255,136,.07); }
.art-tiers .tier-name { font-size: .54rem; letter-spacing: .12em; color: var(--cyan); }
.art-tiers .tier-price { font-size: .95rem; font-weight: 800; color: var(--gold); }
.art-tiers .tier-note { font-size: .46rem; letter-spacing: .06em; color: var(--dim); }
/* network / links */
.network-grid { display: grid; gap: clamp(1rem,2vw,1.4rem); grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr)); }
.net-card { display: flex; flex-direction: column; gap: .5rem; padding: var(--radius); transition: transform .2s, box-shadow .25s; }
.net-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,136,.25); }
.net-name { font-size: 1.2rem; color: var(--green); }
.net-desc { color: var(--dim); font-size: .92rem; flex: 1; }
.net-go { color: var(--cyan); font-size: .72rem; letter-spacing: .1em; }
/* merch / redbubble storefront */
.merch-hero { text-align: center; padding: clamp(1.6rem,4vw,3rem); display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.merch-logo { width: clamp(70px,12vw,120px); height: auto; filter: drop-shadow(0 0 18px rgba(0,255,136,.45)); }
.merch-h { font-size: clamp(1.4rem,4vw,2.4rem); letter-spacing: .08em; color: var(--green); margin: 0; }
.merch-sub { color: var(--dim); font-size: .8rem; max-width: 46ch; line-height: 1.5; }
.merch-cta { display: inline-block; margin-top: .4rem; padding: .8rem 1.7rem; border-radius: 999px; font-size: .82rem; letter-spacing: .14em; color: #04140b; background: linear-gradient(120deg, var(--green), var(--cyan)); box-shadow: 0 10px 34px rgba(0,255,136,.35); transition: transform .18s, box-shadow .25s; }
.merch-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 46px rgba(0,255,136,.55); }
.merch-grid { display: grid; gap: clamp(1rem,2vw,1.4rem); grid-template-columns: repeat(auto-fill, minmax(min(100%,260px),1fr)); margin-top: clamp(1.4rem,3vw,2.2rem); }
.merch-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: var(--radius); transition: transform .2s, box-shadow .25s; }
.merch-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,136,.3); }
.merch-ico { font-size: 2rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(0,229,255,.5)); }
.merch-name { font-size: 1.15rem; color: var(--green); margin: 0; }
.merch-desc { color: var(--dim); font-size: .88rem; flex: 1; }
.merch-go { color: var(--cyan); font-size: .72rem; letter-spacing: .1em; }
.merch-section { text-align: center; color: var(--cyan); font-size: .74rem; letter-spacing: .14em; margin: clamp(2rem,4vw,3rem) 0 clamp(1rem,2vw,1.4rem); }
.merch-prods { display: grid; gap: clamp(.8rem,1.6vw,1.2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%,200px),1fr)); }
.merch-prod { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform .2s, box-shadow .25s; }
.merch-prod:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,255,.3); }
.merch-prod-img { display: block; aspect-ratio: 1/1; overflow: hidden; background: #050505; }
.merch-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.merch-prod:hover .merch-prod-img img { transform: scale(1.05); }
.merch-prod-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .8rem; }
.merch-prod-title { font-size: .82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merch-prod-go { color: var(--green); font-size: .66rem; letter-spacing: .08em; white-space: nowrap; }
.merch-foot { text-align: center; color: var(--dim); font-size: .66rem; letter-spacing: .08em; margin-top: clamp(1.4rem,3vw,2rem); opacity: .8; }
/* intro animation overlay */
#intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
background: radial-gradient(ellipse at 50% 45%, #0b0c12, #000 75%);
transition: opacity .6s ease; }
#intro.hide { opacity: 0; pointer-events: none; }
#intro canvas { width: 100vw; height: 100vh; display: block; }
#introSkip { position: fixed; bottom: 1.4rem; right: 1.6rem; background: none; border: 1px solid var(--edge);
color: var(--dim); border-radius: 999px; padding: .5rem 1rem; font-size: .72rem; letter-spacing: .1em; cursor: pointer; }
#introSkip:hover { color: var(--green); border-color: var(--green); }
/* radio source switcher */
.radio-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.radio-tab { cursor: pointer; border: 1px solid var(--edge); border-radius: 999px; padding: .5rem 1rem;
background: var(--glass); color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: .72rem;
letter-spacing: .06em; transition: color .2s, border-color .2s, background .2s; }
.radio-tab:hover { color: var(--ink); }
.radio-tab.is-active { color: var(--green); border-color: var(--green); background: rgba(0,255,136,.1); }
.radio-body { padding: clamp(.8rem,1.6vw,1.4rem); }
.radio-body.is-live { padding: clamp(1rem,2.5vw,2rem); }
.radio-embed { display: block; width: 100%; border: 0; border-radius: 14px; }
.live-now { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; margin-bottom: 1rem; }
.live-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 1.6s ease-in-out infinite; }
.live-ctrls { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; }
.live-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; max-height: 320px; overflow-y: auto; }
.live-list li { padding: .55rem .8rem; border-radius: 10px; cursor: pointer; color: var(--dim); font-size: .85rem; transition: background .2s, color .2s; }
.live-list li:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.live-list li.is-active { color: var(--green); background: rgba(0,255,136,.1); }
/* AI chat widget */
.chat-launcher { position: fixed; bottom: 1.4rem; left: calc(1.4rem + env(safe-area-inset-left)); z-index: 60; cursor: pointer;
width: 64px; height: 64px; padding: 0; border-radius: 50%; overflow: hidden;
border: 1px solid var(--green); background: rgba(0,255,136,0.10); backdrop-filter: blur(10px);
box-shadow: 0 8px 26px rgba(0,255,136,.35), 0 0 0 0 rgba(0,255,136,.5);
transition: transform .15s, box-shadow .25s; animation: chatPulse 3.2s ease-in-out infinite; }
.chat-launcher img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-launcher:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 34px rgba(0,255,136,.6); }
@keyframes chatPulse { 0%,100% { box-shadow: 0 8px 26px rgba(0,255,136,.35), 0 0 0 0 rgba(0,255,136,.4); } 50% { box-shadow: 0 8px 30px rgba(0,255,136,.5), 0 0 0 10px rgba(0,255,136,0); } }
.chat-head-ico { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .5rem; }
.chat-head span { display: inline-flex; align-items: center; white-space: nowrap; }
.chat-panel { position: fixed; bottom: 1.4rem; left: calc(1.4rem + env(safe-area-inset-left)); z-index: 61; width: min(380px, 92vw);
height: min(540px, 76vh); height: min(540px, 76svh); height: min(540px, 76dvh); display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem;
border-bottom: 1px solid var(--edge); color: var(--green); font-size: .8rem; letter-spacing: .06em; }
.chat-head button { background: none; border: 0; color: var(--ink); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.chat-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; }
.chat-msg.user { align-self: flex-end; background: linear-gradient(120deg, var(--green), #7dffc0); color: #04130b; border-bottom-right-radius: 4px; }
.chat-msg.bot { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--edge); border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--edge); }
.chat-form input { flex: 1; background: rgba(0,0,0,.3); border: 1px solid var(--edge); border-radius: 999px;
padding: .6rem .9rem; color: var(--ink); font-family: inherit; font-size: .9rem; outline: none; }
.chat-form input:focus { border-color: var(--green); }
/* --- Live fan counter (top-center, under the nav) --- */
#fancount { position: fixed; top: 4.4rem; left: 50%; transform: translateX(-50%); z-index: 55;
display: flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px;
border: 1px solid var(--edge); background: rgba(8,10,12,.7); backdrop-filter: blur(10px);
font-size: .62rem; letter-spacing: .14em; color: var(--dim); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#fancount.live { border-color: rgba(0,255,136,.3); }
#fancount .fc-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }
#fancount.live .fc-dot { background: var(--green); box-shadow: 0 0 9px var(--green); animation: rbBlink 1.6s ease-in-out infinite; }
#fancount .fc-online { color: var(--green); font-weight: 700; }
#fancount .fc-fans { color: var(--gold); font-weight: 700; }
#fancount .fc-sep { color: var(--edge); margin: 0 .15rem; }
@media (max-width: 560px) { #fancount { font-size: .55rem; top: 4rem; padding: .3rem .7rem; } }
@media (min-width: 2200px) { #fancount { font-size: 1rem; top: 5.4rem; padding: .6rem 1.4rem; } }
@media (min-width: 3200px) { #fancount { font-size: 1.5rem; } }
/* --- Auto radio bar (bottom-right, clear of the bottom-left AI launcher) --- */
#radiobar { position: fixed; bottom: 1.4rem; right: calc(1.4rem + env(safe-area-inset-right)); z-index: 60; display: flex; align-items: center; gap: .7rem;
padding: .55rem .8rem; border-radius: 999px; border: 1px solid var(--edge);
background: rgba(8,10,12,.72); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: min(360px, 84vw); }
#radiobar.playing { border-color: var(--green); box-shadow: 0 10px 30px rgba(0,255,136,.28); }
#radiobar.live { border-color: #ff2d6b; box-shadow: 0 10px 30px rgba(255,45,107,.35); }
#radiobar .rb-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
#radiobar.playing .rb-dot { background: var(--green); box-shadow: 0 0 10px var(--green); animation: rbBlink 1.6s ease-in-out infinite; }
#radiobar.live .rb-dot { background: #ff2d6b; box-shadow: 0 0 10px #ff2d6b; animation: rbBlink .9s ease-in-out infinite; }
@keyframes rbBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#radiobar .rb-btn { background: none; border: 0; color: var(--ink); font-size: 1rem; cursor: pointer; padding: .15rem .25rem; line-height: 1; flex: none; }
#radiobar .rb-btn:hover { color: var(--green); }
#radiobar .rb-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
#radiobar .rb-station { font-size: .58rem; letter-spacing: .12em; color: var(--green); opacity: .85; }
#radiobar.live .rb-station { color: #ff2d6b; }
#radiobar .rb-track { font-size: .76rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ytradio-host { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* ===== Radio bar — rich upgrade (art + EQ + progress + tap-for-sound) ===== */
#radiobar.rb-rich { max-width: min(430px, 92vw); gap: .55rem; padding: .45rem .65rem .45rem .45rem; }
#radiobar .rb-art { position: relative; width: 48px; height: 48px; flex: none; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #0a0a0a; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
#radiobar .rb-art-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .4s; }
#radiobar.playing .rb-art-img { animation: rbSpin 9s linear infinite; }
@keyframes rbSpin { to { transform: rotate(360deg); } }
#radiobar .rb-art:hover .rb-art-img { filter: brightness(1.15) saturate(1.25); }
#radiobar .rb-eq { position: absolute; left: 0; right: 0; bottom: 4px; display: none; justify-content: center; gap: 2px; height: 14px; align-items: flex-end; pointer-events: none; }
#radiobar.playing:not(.muted) .rb-eq { display: flex; }
#radiobar .rb-eq i { width: 3px; height: 3px; background: var(--green); box-shadow: 0 0 6px var(--green); animation: rbEq .9s ease-in-out infinite; }
#radiobar .rb-eq i:nth-child(2){ animation-delay:.15s } #radiobar .rb-eq i:nth-child(3){ animation-delay:.3s } #radiobar .rb-eq i:nth-child(4){ animation-delay:.45s }
@keyframes rbEq { 0%,100% { height: 3px; } 50% { height: 13px; } }
#radiobar .rb-tap { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: .42rem; letter-spacing: .08em; line-height: 1.05; color: #04140b; background: linear-gradient(120deg, var(--green), var(--cyan)); opacity: .94; animation: rbBlink 1.1s ease-in-out infinite; }
#radiobar.muted.playing .rb-tap { display: flex; }
#radiobar .rb-mid { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; gap: 3px; }
#radiobar .rb-prog { height: 3px; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden; }
#radiobar #rbProg { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .5s linear; }
#radiobar .rb-ctrls { display: flex; align-items: center; gap: .05rem; flex: none; }
#radiobar .rb-play { font-size: 1.15rem; color: var(--green); }
/* ===== Now Playing overlay ===== */
.rbnp { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(2,4,6,.8); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.rbnp.open { opacity: 1; pointer-events: auto; }
.rbnp-inner { position: relative; width: min(560px, 94vw); padding: clamp(1.5rem,4vw,2.6rem); border-radius: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .85rem; transform: translateY(18px) scale(.97); transition: transform .3s;
/* phone landscape (short viewport) must scroll internally rather than clip the controls off-screen */
max-height: 92vh; max-height: 92svh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rbnp.open .rbnp-inner { transform: none; }
.rbnp-x { position: absolute; top: .6rem; right: .9rem; background: none; border: 0; color: var(--dim); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.rbnp-x:hover { color: var(--green); }
.rbnp-art-wrap { position: relative; width: clamp(150px,38vw,230px); aspect-ratio: 1/1; }
.rbnp-art { width: 100%; height: 100%; border-radius: 50%; background: #050505 center/cover no-repeat; box-shadow: 0 0 44px rgba(0,255,136,.32), inset 0 0 0 6px rgba(0,0,0,.55); }
.rbnp.is-playing .rbnp-art { animation: rbSpin 10s linear infinite; }
.rbnp-art-wrap::after { content:''; position:absolute; left:50%; top:50%; width:13%; height:13%; transform:translate(-50%,-50%); border-radius:50%; background:#050505; box-shadow:0 0 0 4px rgba(255,255,255,.12); }
.rbnp-ring { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(0,229,255,.4); animation: rbPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes rbPulse { 0% { transform: scale(.95); opacity: .7; } 100% { transform: scale(1.14); opacity: 0; } }
.rbnp-station { font-size: .62rem; letter-spacing: .16em; color: var(--cyan); }
.rbnp-title { font-size: clamp(1.05rem,3vw,1.6rem); margin: 0; color: var(--text); max-width: 100%; }
.rbnp-prog { width: 80%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.13); overflow: hidden; }
.rbnp-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .5s linear; }
.rbnp-viz { width: 100%; max-width: 460px; height: 80px; opacity: .92; }
.rbnp-ctrls { display: flex; align-items: center; gap: 1rem; }
.rbnp-btn { background: none; border: 0; color: var(--text); font-size: 1.45rem; cursor: pointer; text-decoration: none; line-height: 1; }
.rbnp-btn:hover { color: var(--green); }
.rbnp-big { width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(120deg, var(--green), var(--cyan)); color: #04140b; font-size: 1.5rem; box-shadow: 0 8px 26px rgba(0,255,136,.42); }
.rbnp-full { font-size: .62rem; letter-spacing: .12em; }
/* 12D hex skin on the radio bar — faint hex mesh + neon edge */
#radiobar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; z-index: -1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 26px 30px; }
#radiobar { position: fixed; overflow: hidden; }
/* UHD / 8K scaling — keep controls crisp and legible on big panels */
@media (min-width: 2200px) { #radiobar { gap: 1rem; padding: .8rem 1.2rem; max-width: 520px; } #radiobar .rb-btn { font-size: 1.5rem; } #radiobar .rb-station { font-size: .8rem; } #radiobar .rb-track { font-size: 1.05rem; } #radiobar .rb-dot { width: 13px; height: 13px; } }
@media (min-width: 3200px) { #radiobar { gap: 1.4rem; padding: 1.1rem 1.7rem; max-width: 720px; border-radius: 999px; } #radiobar .rb-btn { font-size: 2.1rem; } #radiobar .rb-station { font-size: 1.1rem; } #radiobar .rb-track { font-size: 1.5rem; } #radiobar .rb-dot { width: 18px; height: 18px; } }
@media (min-width: 5000px) { #radiobar { gap: 2rem; padding: 1.6rem 2.4rem; max-width: 1040px; } #radiobar .rb-btn { font-size: 3rem; } #radiobar .rb-station { font-size: 1.6rem; } #radiobar .rb-track { font-size: 2.1rem; } #radiobar .rb-dot { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) {
.splash-orb, .caret { animation: none; }
html { scroll-behavior: auto; }
}
/* ===================== FUTURISTIC FX LAYER ===================== */
/* mouse-tracking spotlight (sits behind content, above the bg) */
#spot { position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(560px circle at var(--mx,50%) var(--my,28%), rgba(0,255,136,0.08), transparent 42%); }
/* HUD viewport frame + scan beam */
#hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#hud .corner { position: absolute; width: 28px; height: 28px; border: 2px solid var(--green); opacity: .5;
filter: drop-shadow(0 0 6px rgba(0,255,136,.6)); }
#hud .tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
#hud .tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
#hud .bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
#hud .br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
#hud .scanbeam { position: absolute; left: 0; right: 0; height: 2px; top: 0;
background: linear-gradient(90deg, transparent, rgba(0,255,136,.45), transparent);
filter: blur(1px); opacity: .45; animation: hudScan 8s linear infinite; }
@keyframes hudScan { 0% { top: -2%; } 100% { top: 102%; } }
/* scroll-reveal (JS adds .reveal then .is-in) */
.reveal { opacity: 0; transform: translateY(30px) scale(.985);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
/* animated neon underline under section titles */
.section-title::after { content: ''; position: absolute; left: 0; bottom: -.45rem; width: 3rem; height: 2px;
background: linear-gradient(90deg, var(--green), transparent); box-shadow: 0 0 10px var(--green); }
.section-title { position: relative; }
/* nav: growing neon underline */
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
background: var(--green); box-shadow: 0 0 8px var(--green); transition: width .25s; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
/* primary button light-sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
background: linear-gradient(110deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); }
.btn-primary:hover::after { animation: sheen .8s ease; }
@keyframes sheen { to { left: 150%; } }
/* hero title living glow */
.hero-title { animation: titleGlow 5s ease-in-out infinite; }
@keyframes titleGlow {
0%,100% { filter: drop-shadow(0 0 30px rgba(0,255,136,.25)); }
50% { filter: drop-shadow(0 0 55px rgba(0,212,255,.45)); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
#hud .scanbeam, .hero-title { animation: none; }
}
/* site forms (subscribe / contact) */
.site-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: clamp(1rem,2vw,1.4rem); }
.site-form-col { flex-direction: column; align-items: stretch; }
.site-form input, .site-form textarea { flex: 1; min-width: 12rem; background: rgba(0,0,0,.3); border: 1px solid var(--edge); border-radius: 12px; padding: .7rem .9rem; color: var(--ink); font-family: inherit; font-size: .95rem; outline: none; }
.site-form input:focus, .site-form textarea:focus { border-color: var(--green); }
.site-form textarea { resize: vertical; border-radius: 14px; width: 100%; }
.form-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; width: 100%; }
.form-status { color: var(--green); font-size: .82rem; letter-spacing: .04em; }
.bcast-now { display: flex; align-items: center; gap: .5rem; color: var(--green); font-size: .8rem; letter-spacing: .1em; margin-bottom: .8rem; }
/* LIVE OLED panel */
.livebox { padding: clamp(1.6rem,4vw,3rem); text-align: center; }
.oled { display: inline-flex; align-items: center; gap: .6rem; font-family: "JetBrains Mono", monospace; font-weight: 800;
font-size: clamp(1.6rem,5vw,3rem); letter-spacing: .06em; color: var(--dim); }
.oled-dot { width: .7em; height: .7em; border-radius: 50%; background: #444; }
.oled.on { color: var(--green); text-shadow: 0 0 34px rgba(0,255,136,.6); }
.oled.on .oled-dot { background: var(--red); box-shadow: 0 0 18px var(--red); animation: oledblink 1s steps(1) infinite; }
@keyframes oledblink { 50% { opacity: .15; } }
#livelisteners { margin-top: .5rem; color: var(--dim); font-size: .85rem; letter-spacing: .1em; }
.livebox audio { width: 100%; margin-top: 1.3rem; }
/* ===== ORBITRON futuristic display type ===== */
:root{ --display:"Orbitron"; }
h1,h2,h3,.hero-title,.section-title{ font-family:var(--display),"Inter",sans-serif; }
.hero-title{ letter-spacing:.02em; }
.section-title{ letter-spacing:.01em; }
.hstat-value,.oled,.section-tag,.kicker,.latest-date,.album-tag,.nav-links a,.brand,.btn,.track-tag,.art-tag,.net-name{
font-family:var(--display),"JetBrains Mono",monospace; }
.nav-links a{ font-weight:600; letter-spacing:.06em; }
.btn{ letter-spacing:.05em; }
/* ===== SPACESHIP COCKPIT PANEL =====
Docked lower-right, above the radio mini-player — reachable without reaching
to a corner, and never mid-viewport. #cockpit's own box is sized by the tab
ONLY; .cp-body is taken out of flow (position:absolute) so the collapsed
drawer — invisible but previously still occupying flex-layout width — can't
shove the tab away from the true screen edge. Same rule at every breakpoint
(no per-media overrides) so phone portrait, phone landscape and tablet widths
can't fall through to a stale default the way top:50% used to. */
#cockpit { position: fixed; right: env(safe-area-inset-right); bottom: calc(6.4rem + env(safe-area-inset-bottom)); z-index: 58; }
#cockpit .cp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
min-width: 44px; min-height: 44px;
background: linear-gradient(180deg, rgba(0,255,136,.28), rgba(0,212,255,.2)); color: #eafff4;
border: 2px solid rgba(0,255,136,.7); border-right: 0; border-radius: 16px 0 0 16px; padding: 1.35rem .85rem;
font-size: .82rem; font-weight: 800; letter-spacing: .16em; writing-mode: vertical-rl; text-orientation: mixed;
text-shadow: 0 0 12px rgba(0,255,136,.8); backdrop-filter: blur(10px); transition: color .2s, box-shadow .25s, transform .2s;
animation: cpTabPulse 2.4s ease-in-out infinite; }
#cockpit .cp-tab:hover { color: #fff; transform: translateX(-3px); box-shadow: -8px 0 42px rgba(0,255,136,.7); animation: none; }
@keyframes cpTabPulse {
0%, 100% { box-shadow: -6px 0 26px rgba(0,255,136,.35), 0 0 0 rgba(0,212,255,0); border-color: rgba(0,255,136,.6); }
50% { box-shadow: -10px 0 48px rgba(0,255,136,.75), -2px 0 60px rgba(0,212,255,.45); border-color: rgba(0,212,255,.95); } }
@media (prefers-reduced-motion: reduce) { #cockpit .cp-tab { animation: none; box-shadow: -8px 0 40px rgba(0,255,136,.55); } }
#cockpit .cp-tab span { writing-mode: vertical-rl; }
/* absolutely positioned + hidden (not just translated) while collapsed: it can never
render expanded-over-content on load, and it can never widen #cockpit's own box. */
#cockpit .cp-body { position: absolute; right: 100%; bottom: 0; width: 250px; padding: 1.1rem 1.1rem 1rem; border-radius: 16px 0 0 16px; border-right: 0;
transform: translateX(16px); opacity: 0; visibility: hidden; pointer-events: none;
transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s linear .35s;
/* short viewports (phone landscape) must scroll internally instead of clipping off-screen */
max-height: 90vh; max-height: 90svh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#cockpit.open .cp-body { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto;
transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
#cockpit.open .cp-tab { box-shadow: -6px 0 32px rgba(0,255,136,.5); }
.cp-title { color: var(--green); font-size: .62rem; letter-spacing: .22em; margin-bottom: .9rem; text-shadow: 0 0 12px rgba(0,255,136,.5); }
/* LED bank */
.cp-leds { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: 1.1rem;
padding: .7rem .4rem; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid var(--edge); }
.cp-led-cell { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.cp-led { width: 16px; height: 16px; border-radius: 50%; background: #1a1f29; border: 1px solid #2a3140;
box-shadow: inset 0 0 4px rgba(0,0,0,.8); transition: all .3s; }
.cp-led-lbl { font-size: .42rem; letter-spacing: .06em; color: var(--dim); }
.cp-led.on { animation: ledBlink 1.4s ease-in-out infinite; }
.cp-led[data-led="online"].on, .cp-led[data-led="secure"].on, .cp-led[data-led="radio"].on {
background: var(--green); border-color: var(--green); box-shadow: 0 0 10px var(--green), 0 0 20px rgba(0,255,136,.6), inset 0 0 4px #fff; }
.cp-led[data-led="live"].on { background: var(--red); border-color: var(--red); box-shadow: 0 0 10px var(--red), 0 0 20px rgba(255,68,68,.7), inset 0 0 4px #fff; animation-duration: .8s; }
.cp-led[data-led="warp"].on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--gold), 0 0 20px rgba(255,215,0,.7), inset 0 0 4px #fff; }
@keyframes ledBlink { 0%,100% { filter: brightness(1); } 50% { filter: brightness(.45); } }
/* toggle switches */
.cp-switches { display: flex; flex-direction: column; gap: .55rem; }
.cp-row { display: flex; align-items: center; justify-content: space-between; padding: .35rem .1rem; }
.cp-sw-lbl { font-size: .56rem; letter-spacing: .1em; color: var(--ink); }
.cp-switch { position: relative; width: 46px; height: 24px; border-radius: 999px; cursor: pointer; flex: none;
background: #14181f; border: 1px solid #2a3140; transition: background .25s, border-color .25s, box-shadow .25s; padding: 0; }
.cp-switch .cp-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: #4a5163; transition: transform .25s, background .25s; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cp-switch.on { background: linear-gradient(120deg, rgba(0,255,136,.35), rgba(0,212,255,.3)); border-color: var(--green); box-shadow: 0 0 14px rgba(0,255,136,.5), inset 0 0 8px rgba(0,255,136,.3); }
.cp-switch.on .cp-knob { transform: translateX(22px); background: var(--green); box-shadow: 0 0 10px var(--green); }
.cp-readout { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--edge); font-size: .52rem; letter-spacing: .1em; color: var(--dim); text-align: center; }
.cp-readout #cpClock { color: var(--cyan); }
@media (max-width: 560px) { #cockpit .cp-body { width: 210px; } }
@media (min-width: 2200px) { #cockpit .cp-body { width: 420px; padding: 1.8rem; } .cp-led { width: 26px; height: 26px; } .cp-led-lbl { font-size: .62rem; } .cp-sw-lbl { font-size: .82rem; } .cp-switch { width: 64px; height: 34px; } .cp-switch .cp-knob { width: 28px; height: 28px; } .cp-switch.on .cp-knob { transform: translateX(30px); } .cp-title { font-size: .9rem; } #cockpit .cp-tab { font-size: 1.05rem; padding: 1.6rem 1rem; } }
/* ===== LIGHT MODE ===== */
body.light { --bg:#eceff5; --bg2:#dfe4ee; --ink:#0d1119; --dim:#566076; --glass:rgba(255,255,255,0.6); --edge:rgba(10,15,30,0.14); }
body.light { background:#eceff5; }
body.light::after { display:none; }
body.light #neonbg { background: radial-gradient(circle at 35% 30%, rgba(0,160,200,0.10), transparent 60%), radial-gradient(circle at 65% 40%, rgba(150,0,170,0.08), transparent 60%), radial-gradient(circle at 50% 50%, rgba(0,160,90,0.08), transparent 60%), #eceff5; animation-duration: 22s; }
body.light #neonbg .nb-glow { opacity:.08; }
body.light #neonbg .nb-viz { opacity:.28; mix-blend-mode: multiply; }
body.light #neonbg .nb-ufo, body.light #neonbg .nb-psych { opacity:.18; }
body.light #neonbg .nb-hex, body.light #neonbg .nb-const { opacity:.5; filter: invert(1) hue-rotate(180deg); }
body.light .glass { background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.45)); box-shadow: 0 18px 50px rgba(20,30,60,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
body.light .hero-title { background: linear-gradient(120deg, #0d1119 0%, #00a060 48%, #0090c0 100%); -webkit-background-clip:text; background-clip:text; filter: drop-shadow(0 0 30px rgba(0,160,90,0.2)); }
body.light .nav, body.light #radiobar, body.light #fancount, body.light #cockpit .cp-body { background: rgba(255,255,255,0.7); }
body.light .hstat-value { color:#b8860b; text-shadow:none; }
body.light .section-tag { color:#0090c0; }
body.light .kicker { color:#00855a; border-color:rgba(0,133,90,.3); background:rgba(0,133,90,.08); }
body.light .btn { color:#0d1119; }
/* ===== LIQUID GLASS ===== */
.glass {
background:
linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.05)) !important;
backdrop-filter: blur(28px) saturate(200%) brightness(1.08); -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 18px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 1px rgba(0,0,0,0.3), inset 0 0 40px rgba(255,255,255,0.04);
position: relative; overflow: hidden;
}
.glass::before { /* glossy liquid highlight sweep */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 55%; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent);
border-radius: inherit; opacity: .7;
}
.glass::after { /* slow specular shimmer */
content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .06;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%);
transform: translateX(-30%); animation: glassSheen 9s ease-in-out infinite;
}
@keyframes glassSheen { 0%,70%,100% { transform: translateX(-60%) rotate(0deg); opacity:0; } 80% { opacity:.10; } 85% { transform: translateX(60%); opacity:.04; } }
body.light .glass { backdrop-filter: blur(28px) saturate(170%) brightness(1.02); -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.02); border-color: rgba(255,255,255,0.6); }
/* ===== COCKPIT: analog gauges + mode selector + beefier toggles ===== */
.cp-gauges { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; margin: 0 0 .9rem;
padding: .6rem .3rem; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid var(--edge); }
.cp-gauge { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.cp-gauge svg { width: 100%; height: auto; filter: drop-shadow(0 0 4px rgba(0,255,136,.3)); }
.cp-needle { transform-box: view-box; transition: transform .12s ease-out; filter: drop-shadow(0 0 3px #00ff88); }
.cp-g-arc { transition: stroke-dashoffset .12s ease-out; }
.cp-g-lbl { font-size: .42rem; letter-spacing: .08em; color: var(--dim); }
.cp-mode { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .9rem;
padding: .45rem .6rem; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid rgba(0,255,136,.25); }
.cp-mbtn { background: none; border: 1px solid var(--edge); color: var(--green); border-radius: 6px; cursor: pointer;
width: 22px; height: 22px; font-size: .7rem; line-height: 1; transition: .2s; }
.cp-mbtn:hover { background: rgba(0,255,136,.15); border-color: var(--green); box-shadow: 0 0 10px rgba(0,255,136,.4); }
.cp-mode-name { flex: 1; text-align: center; font-size: .56rem; letter-spacing: .12em; color: var(--cyan); text-shadow: 0 0 8px rgba(0,212,255,.5); }
/* analog metal toggle look */
.cp-switch { background: linear-gradient(180deg,#0c1016,#1a212c); border: 1px solid #333c4a;
box-shadow: inset 0 2px 4px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05); }
.cp-switch .cp-knob { background: linear-gradient(180deg,#6b7488,#3a4150); border: 1px solid #20262f;
box-shadow: 0 2px 4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.cp-switch.on { background: linear-gradient(180deg, rgba(0,255,136,.25), rgba(0,160,90,.4)); border-color: var(--green); }
.cp-switch.on .cp-knob { background: linear-gradient(180deg,#7dffc0,#00ff88); box-shadow: 0 0 12px var(--green), inset 0 1px 0 rgba(255,255,255,.5); }
@media (min-width: 2200px) { .cp-g-lbl { font-size: .6rem; } .cp-mode-name { font-size: .8rem; } .cp-mbtn { width: 34px; height: 34px; font-size: 1rem; } }
/* ===== LIVE NOW badge (auto-switch) ===== */
#livebadge { position: fixed; top: 4.4rem; right: 1.2rem; z-index: 59; display: inline-flex; align-items: center; gap: .45rem;
padding: .4rem .85rem; border-radius: 999px; font-size: .62rem; letter-spacing: .14em; text-decoration: none;
color: #fff; background: linear-gradient(120deg, #ff2d6b, #ff5c33); border: 1px solid rgba(255,255,255,.5);
box-shadow: 0 8px 26px rgba(255,45,107,.5); animation: liveThrob 1.1s ease-in-out infinite; }
#livebadge[hidden] { display: none; }
#livebadge .lb-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
@keyframes liveThrob { 0%,100% { transform: scale(1); box-shadow: 0 8px 26px rgba(255,45,107,.5); } 50% { transform: scale(1.06); box-shadow: 0 8px 34px rgba(255,45,107,.85); } }
@media (min-width: 2200px) { #livebadge { font-size: 1rem; top: 5.4rem; padding: .6rem 1.3rem; } }
/* cockpit broadcast readout */
.cp-broadcast { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding: .5rem .7rem; border-radius: 8px;
background: rgba(0,0,0,.45); border: 1px solid var(--edge); font-size: .54rem; letter-spacing: .12em; color: var(--dim); transition: .3s; }
.cp-broadcast .cpb-dot { width: 9px; height: 9px; border-radius: 50%; background: #3a4150; flex: none; }
.cp-broadcast.on { border-color: #ff2d6b; color: #fff; background: rgba(255,45,107,.12); box-shadow: 0 0 16px rgba(255,45,107,.3); }
.cp-broadcast.on .cpb-dot { background: #ff2d6b; box-shadow: 0 0 10px #ff2d6b; animation: ledBlink .8s ease-in-out infinite; }
@media (min-width: 2200px) { .cp-broadcast { font-size: .82rem; } .cp-broadcast .cpb-dot { width: 14px; height: 14px; } }
/* ===== top "What's New" announcement ticker ===== */
#announce { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .42rem .8rem; position: relative; z-index: 45;
background: linear-gradient(90deg, rgba(0,255,136,.14), rgba(0,212,255,.1)); border-bottom: 1px solid rgba(0,255,136,.3); font-size: .62rem; letter-spacing: .08em; }
#announce .an-tag { color: var(--green); white-space: nowrap; font-weight: 700; text-shadow: 0 0 8px rgba(0,255,136,.5); }
#announce .an-track { flex: 1; overflow: hidden; }
#announce .an-run { display: inline-flex; white-space: nowrap; animation: anScroll 34s linear infinite; }
#announce .an-item { padding: 0 .3rem; color: var(--ink); }
#announce .an-item b { color: var(--gold); margin-right: .35rem; }
#announce .an-sep { color: var(--green); opacity: .5; margin: 0 .7rem; }
#announce .an-x { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .3rem; }
#announce .an-x:hover { color: var(--green); }
body.light #announce { background: linear-gradient(90deg, rgba(0,160,90,.12), rgba(0,144,192,.1)); }
@keyframes anScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 2200px) { #announce { font-size: 1rem; padding: .7rem 1.4rem; } }
/* ===== live video takeover ===== */
#livetakeover { width: min(var(--maxw), 94vw); margin: 1rem auto 0; border-radius: 16px; overflow: hidden;
border: 1px solid #ff2d6b; box-shadow: 0 0 40px rgba(255,45,107,.35); background: #000; }
#livetakeover .lt-head { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; font-size: .68rem; letter-spacing: .14em;
color: #fff; background: linear-gradient(90deg, rgba(255,45,107,.85), rgba(255,92,51,.7)); }
#livetakeover .lt-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: liveThrob 1s ease-in-out infinite; }
#livetakeover .lt-full { margin-left: auto; color: #fff; text-decoration: none; font-weight: 700; opacity: .9; }
#livetakeover .lt-full:hover { opacity: 1; }
#livetakeover .lt-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
#livetakeover .lt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* cockpit broadcast-source switcher (admin only) */
.cp-src { margin-top: .8rem; padding: .6rem .5rem; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,45,107,.3); }
.cp-src[hidden] { display: none; }
.cp-src-lbl { font-size: .5rem; letter-spacing: .14em; color: #ff7aa0; margin-bottom: .45rem; text-align: center; }
.cp-src-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.cp-srcbtn { font-size: .5rem; letter-spacing: .06em; padding: .4rem .2rem; border-radius: 6px; cursor: pointer;
border: 1px solid var(--edge); background: rgba(255,255,255,.03); color: var(--ink); transition: .2s; }
.cp-srcbtn:hover { border-color: #ff2d6b; color: #fff; }
.cp-srcbtn.on { background: linear-gradient(120deg, rgba(255,45,107,.4), rgba(255,92,51,.3)); border-color: #ff2d6b; color: #fff; box-shadow: 0 0 12px rgba(255,45,107,.4); }
@media (min-width: 2200px) { .cp-srcbtn { font-size: .72rem; } .cp-src-lbl { font-size: .7rem; } }
/* ===== Top Mixes (Mixcloud) ===== */
.mixes-grid { display: grid; gap: clamp(.8rem,1.6vw,1.2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr)); }
.mix-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform .2s, box-shadow .25s; }
.mix-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,255,.3); }
.mix-cover { position: relative; aspect-ratio: 1/1; border: 0; padding: 0; cursor: pointer; background: #050505; overflow: hidden; display: block; width: 100%; }
.mix-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s, filter .3s; }
.mix-cover:hover img { transform: scale(1.05); filter: brightness(1.1); }
.mix-noimg { display: grid; place-items: center; height: 100%; color: var(--green); font-size: 2rem; }
.mix-rank { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.62); color: var(--gold); padding: .15rem .45rem; border-radius: 6px; font-size: .62rem; letter-spacing: .05em; }
.mix-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #fff; opacity: 0; transition: opacity .2s; text-shadow: 0 0 16px rgba(0,0,0,.85); }
.mix-cover:hover .mix-play { opacity: 1; }
.mix-meta { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.mix-name { font-size: .9rem; color: var(--text); margin: 0; line-height: 1.25; }
.mix-name a { color: inherit; text-decoration: none; transition: color .2s, text-shadow .2s; }
.mix-name a:hover { color: var(--green); text-shadow: 0 0 14px rgba(0,255,136,.55); }
.mix-stat { font-size: .64rem; color: var(--cyan); letter-spacing: .04em; }
.mix-link { color: var(--green); text-decoration: none; font-weight: 700; white-space: nowrap; }
.mix-link:hover { text-shadow: 0 0 12px rgba(0,255,136,.6); }
.mix-player iframe { display: block; border: 0; width: 100%; }
@media (hover: none) and (pointer: coarse) { .mix-play { opacity: 1; } }
/* ===================== iOS / MOBILE FRIENDLY ===================== */
html, body { -webkit-text-size-adjust: 100%; }
button, a, .rb-btn, .rbnp-btn, .radio-tab, .tier, .cp-switch { -webkit-tap-highlight-color: transparent; }
/* kill the 300ms double-tap-to-zoom delay on chrome controls (promo/kiosk feel) — never on prose */
button, .btn, .rb-btn, .rbnp-btn, .radio-tab, .tier, .cp-switch, .cp-mbtn, .nav-links a,
.wall-x, .wall-full, .wall-cta-btn, .cp-tab, .chat-launcher, .an-x, .di-x, .di-go { touch-action: manipulation; }
/* long-press text-selection callout looks broken on kiosk chrome — never applied to prose/bio copy */
.nav, .footer, #cockpit, #radiobar, .wall-hud, #hud, #announce, #fancount, #dtinstall {
-webkit-user-select: none; user-select: none; }
/* safe-area aware fixed UI (notch + home indicator) */
#radiobar { bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
.chat-launcher, .chat-panel { bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
#intro canvas { height: 100dvh; }
/* touch devices: larger hit targets */
@media (hover: none) and (pointer: coarse) {
.rb-btn { padding: .4rem .45rem; font-size: 1.2rem; }
.radio-tab { padding: .55rem .9rem; }
/* nav links: real ~40px touch height (was .15rem ≈ 24px) */
.nav-links a { padding: .6rem .15rem; display: inline-flex; align-items: center; }
/* art purchase tiers: comfortable touch height */
.art-tiers .tier { min-height: 40px; }
}
/* ===================== DESKTOP / WIDESCREEN LAYOUT ===================== */
/* Repairs widescreen behaviour without touching the mobile (max-width) rules below.
Goal: content reads well on big monitors; fixed widgets dock to edges/corners
and never float over the centred content column (width: min(--maxw, 94vw)). */
@media (min-width: 900px) {
/* 1. fit widescreen: widen the content column on big monitors so it isn't a
narrow ribbon stranded in the middle of the screen */
:root { --maxw: 1500px; }
/* 1+2. hero: tasteful title, breathing room, let it wrap if ever needed */
.hero-title { white-space: normal; }
/* 3. hero CTA buttons + streaming-link grid never overlap: explicit wrap + gap,
cap each button so a long label can't blow the row out */
.hero .cta-row, .cta-row { flex-wrap: wrap; gap: .9rem; row-gap: 1rem; }
#heroLinks, #listenLinks { flex-wrap: wrap; gap: .9rem; row-gap: 1rem; justify-content: center; }
#heroLinks .btn, #listenLinks .btn { flex: 0 0 auto; max-width: 100%; }
/* 4. cockpit panel: positioning is now a single universal rule (see the
SPACESHIP COCKPIT PANEL block above) so it can't fall back to a stale
top:50% default at widths this override didn't cover (e.g. phone landscape). */
/* 5. fan count: park in the top-LEFT corner under the nav, never centred over hero */
#fancount { top: 5.2rem; left: 1.2rem; right: auto; transform: none; }
/* 5. live badge already sits top-right; nudge it down so it clears the sticky nav */
#livebadge { top: 5.2rem; }
}
/* ===== TABLET (641–899px): close the gap between mobile (≤640) and desktop (≥900).
Without this, #fancount reverts to its centered default (floating over the hero)
and the hero title keeps white-space:nowrap (can overflow a ~700px screen). ===== */
@media (min-width: 641px) and (max-width: 899px) {
/* fan count: dock top-left under the nav, never centered over content */
#fancount { top: 5rem; left: 1.2rem; right: auto; transform: none; }
/* live badge: clear the sticky nav */
#livebadge { top: 5rem; }
/* hero title: allow wrapping so a long brand can't push horizontal overflow */
.hero-title { white-space: normal; }
/* CTA / streaming rows: explicit wrap + caps so a long label can't blow the row out */
.hero .cta-row, .cta-row { flex-wrap: wrap; gap: .9rem; row-gap: .9rem; }
#heroLinks, #listenLinks { flex-wrap: wrap; gap: .9rem; row-gap: .9rem; justify-content: center; }
#heroLinks .btn, #listenLinks .btn { flex: 0 0 auto; max-width: 100%; }
}
@media (max-width: 640px) {
/* nav: keep one line, swipe horizontally instead of overflowing */
.nav-links { gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; flex-wrap: nowrap; max-width: 70vw; }
.nav-links::-webkit-scrollbar { display: none; }
/* hero title: guarantee one-line fit on a phone (vw was overflowing) */
.hero-title { font-size: clamp(1.2rem, 8vw, 3rem); letter-spacing: -0.03em;
filter: drop-shadow(0 0 8px #00ff88) drop-shadow(0 0 24px rgba(0,255,200,.55)); }
/* grid item must not expand to the nowrap title's min-content (that blew out the pill row) */
.hero-inner, .section { width: 94vw; min-width: 0; max-width: 94vw; }
.hero-title { max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
/* streaming-link rows: 2-up grid — cells are fractions of the container, so they can never overflow */
#heroLinks, #listenLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; width: 100%; max-width: 100%; }
#heroLinks .btn, #listenLinks .btn { width: 100%; min-width: 0; text-align: center; justify-content: center;
font-size: .64rem; padding: .58rem .4rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .cta-row, .cta-row { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.btn { white-space: nowrap; }
/* inputs >=16px so iOS doesn't zoom on focus */
.chat-form input, input, textarea { font-size: 16px; }
/* radio bar: centered mini-player, clear of the home indicator + chat button */
#radiobar.rb-rich { left: 50%; right: auto; transform: translateX(-50%);
width: calc(100vw - 1.2rem); max-width: 480px; bottom: calc(.6rem + env(safe-area-inset-bottom));
justify-content: space-between; }
#radiobar .rb-art { width: 44px; height: 44px; }
#radiobar .rb-track { font-size: .74rem; }
/* chat launcher + panel lift above the bottom mini-player */
.chat-launcher { bottom: calc(5.4rem + env(safe-area-inset-bottom)); left: .8rem; }
.chat-panel { bottom: calc(5.4rem + env(safe-area-inset-bottom)); left: .6rem; width: calc(100vw - 1.2rem); }
/* fan counter below the notch */
#fancount { top: calc(3.6rem + env(safe-area-inset-top)); }
/* cockpit drawer fits the screen */
#cockpit .cp-body { width: min(80vw, 270px); }
/* now-playing overlay: fit + clear insets */
.rbnp { padding: .8rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.rbnp-art-wrap { width: clamp(140px, 46vw, 200px); }
.rbnp-viz { height: 64px; }
.rbnp-ctrls { gap: .7rem; }
}
/* ===== Install-app banner (PWA) ===== */
#dtinstall { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 150%); z-index: 120;
display: flex; align-items: center; gap: .7rem; max-width: min(430px, 92vw); padding: .55rem .65rem;
border-radius: 16px; border: 1px solid var(--green); box-shadow: 0 14px 40px rgba(0,255,136,.28);
transition: transform .38s cubic-bezier(.2,.8,.2,1); }
#dtinstall.show { transform: translate(-50%, 0); }
#dtinstall .di-ico { width: 38px; height: 38px; border-radius: 9px; flex: none; }
#dtinstall .di-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
#dtinstall .di-txt b { color: var(--green); font-size: .66rem; letter-spacing: .1em; }
#dtinstall .di-txt span { color: var(--dim); font-size: .62rem; }
#dtinstall .di-go { flex: none; background: linear-gradient(120deg, var(--green), var(--cyan)); color: #04140b;
border: 0; border-radius: 999px; padding: .5rem .95rem; font-size: .64rem; letter-spacing: .1em; cursor: pointer; font-family: inherit; }
#dtinstall .di-x { flex: none; background: none; border: 0; color: var(--dim); font-size: 1.25rem; line-height: 1; cursor: pointer; }
#dtinstall .di-x:hover { color: var(--green); }
@media (max-width: 640px) { #dtinstall { bottom: calc(5.8rem + env(safe-area-inset-bottom)); width: calc(100vw - 1.4rem); } }
/* ===================== MOBILE AUDIT FIXES ===================== */
/* keyboard / switch-control focus rings (none existed before) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .radio-tab:focus-visible,
input:focus-visible, textarea:focus-visible, .cp-switch:focus-visible, .tier:focus-visible {
outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
/* inputs can never trigger iOS focus-zoom */
input, textarea, select { font-size: max(16px, 1rem); }
/* when the install banner is up, move the chat launcher out of its way */
body.has-install .chat-launcher { display: none; }
@media (hover: none) and (pointer: coarse) {
/* hover-only affordances must be visible on touch (Play / zoom were invisible) */
.album-play, .play, .art-zoom { opacity: 1 !important; }
/* reduce GPU-heavy blur on phones: 28px backdrop-filter stacked across many
glass cards causes scroll jank on mobile Chrome. Lighter blur reads the same. */
.glass { backdrop-filter: blur(14px) saturate(160%) brightness(1.05);
-webkit-backdrop-filter: blur(14px) saturate(160%) brightness(1.05); }
#neonbg .nb-glow { filter: blur(80px); }
.glass::after { display: none; } /* drop the per-card specular shimmer on touch */
/* genuine 44px hit targets on the mini-player */
#radiobar .rb-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#radiobar .rb-ctrls { gap: .12rem; }
.radio-tab { min-height: 44px; }
/* lighter compositing = smoother iOS scroll */
#neonbg { animation: none !important; }
}
@media (max-width: 640px) {
/* lift install banner clear of the radio mini-player */
#dtinstall { bottom: calc(9rem + env(safe-area-inset-bottom)); }
/* fan counter below the nav, right-aligned, no centering overlap */
#fancount { top: calc(3.3rem + env(safe-area-inset-top)); right: .6rem; left: auto; transform: none; font-size: .52rem; }
/* overlay close buttons clear the notch */
.rbnp-x, .lb-close { top: calc(.6rem + env(safe-area-inset-top)); }
/* never truncate the brand name on the smallest phones */
.hero-title { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* honour reduced-motion across the decorative layer (was only partial) */
@media (prefers-reduced-motion: reduce) {
#announce .an-run, #neonbg, #radiobar .rb-art-img, .chat-launcher, .glass::after,
.rbnp.is-playing .rbnp-art, .rbnp-ring { animation: none !important; }
}
/* ============ THE WALL — full-screen 8K hyperspeed beat-reactive art experience ============ */
/* height uses dvh (dynamic viewport) so the mobile URL bar never leaves a black gap; svh/100% fall back. */
#dtwall{position:fixed;inset:0;top:0;left:0;width:100vw;width:100svw;height:100vh;height:100svh;height:100dvh;
z-index:9000;background:#000;opacity:0;visibility:hidden;
transition:opacity .55s ease;overflow:hidden;cursor:none;contain:strict;
/* kiosk/promo feel: no rubber-band bounce, no pinch-zoom/edge-swipe-back gesture stealing taps */
touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#dtwall.on{opacity:1;visibility:visible}
/* iOS Safari has no element fullscreen — this CSS "pseudo-fullscreen" mode covers the whole dynamic viewport */
#dtwall.pseudo-fs{position:fixed;inset:0;width:100vw;height:100dvh;z-index:9999}
html.wall-pseudo-fs,html.wall-pseudo-fs body{overflow:hidden!important;height:100%;overscroll-behavior:none}
#dtwall.cursor{cursor:default}
.wall-art{position:absolute;inset:-4vmax;background-size:cover;background-position:center;
opacity:0;transition:opacity 1.4s ease;will-change:transform,opacity;filter:saturate(1.25) contrast(1.06)}
.wall-art.show{opacity:1}
@keyframes wallKen{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.22) translate(-2.2%,-1.6%)}}
.wall-art.show{animation:wallKen 9s ease-out forwards}
.wall-viz{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none}
.wall-vignette{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.86) 100%);
box-shadow:inset 0 0 22vmax rgba(0,0,0,.55)}
.wall-hue{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
background:linear-gradient(120deg,rgba(0,255,255,.10),rgba(255,0,255,.10),rgba(57,255,20,.08),rgba(255,215,0,.10));
animation:wallHue 26s linear infinite}
@keyframes wallHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.wall-scan{position:absolute;inset:0;pointer-events:none;opacity:.16;
background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.wall-hud{position:absolute;inset:0;pointer-events:none;z-index:3;
font-family:"JetBrains Mono",ui-monospace,monospace;color:#eaffff;
text-shadow:0 0 14px rgba(0,255,255,.55),0 2px 8px rgba(0,0,0,.9)}
.wall-brand{position:absolute;top:calc(clamp(16px,4vmin,46px) + env(safe-area-inset-top));left:calc(clamp(16px,4vmin,52px) + env(safe-area-inset-left));
font-weight:800;letter-spacing:.42em;font-size:clamp(.62rem,1.5vmin,1.15rem);opacity:.92}
.wall-brand b{color:#00ffff}
/* live badge sits below the close/fullscreen buttons in the top-right so it never collides */
.wall-live{position:absolute;top:calc(clamp(58px,9vmin,96px) + env(safe-area-inset-top));right:calc(clamp(16px,4vmin,52px) + env(safe-area-inset-right));
display:flex;align-items:center;gap:.55em;font-size:clamp(.55rem,1.35vmin,1rem);letter-spacing:.28em;opacity:.85}
.wall-live .wl-dot{width:.62em;height:.62em;border-radius:50%;background:#39ff14;box-shadow:0 0 12px #39ff14;
animation:wallBlink 1.4s steps(1) infinite}
@keyframes wallBlink{50%{opacity:.25}}
.wall-now{position:absolute;left:calc(clamp(16px,4vmin,52px) + env(safe-area-inset-left));bottom:calc(clamp(18px,5vmin,58px) + env(safe-area-inset-bottom));max-width:74vw}
.wall-now .wn-title{font-size:clamp(1.3rem,5.4vmin,4.6rem);font-weight:900;letter-spacing:.01em;line-height:1.02;
font-family:"Orbitron",Inter,sans-serif;color:#fff;text-transform:uppercase}
.wall-now .wn-sub{margin-top:.5em;font-size:clamp(.6rem,1.5vmin,1.05rem);letter-spacing:.26em;color:#9be9ff;opacity:.9}
.wall-now .wn-sub .wn-track{color:#ffd700}
.wall-hint{position:absolute;right:calc(clamp(16px,4vmin,52px) + env(safe-area-inset-right));bottom:calc(clamp(18px,5vmin,58px) + env(safe-area-inset-bottom));text-align:right;
font-size:clamp(.5rem,1.25vmin,.92rem);letter-spacing:.2em;opacity:.6;transition:opacity .5s}
/* phones: keyboard-hint kbd row is meaningless on touch — hide it so the now-playing block has room */
@media (hover:none) and (pointer:coarse){.wall-hint{display:none}}
#dtwall.idle .wall-hint,#dtwall.idle .wall-brand,#dtwall.idle .wall-live{opacity:.12}
.wall-hint kbd{display:inline-block;border:1px solid rgba(0,255,255,.4);border-radius:4px;
padding:.05em .45em;margin:0 .12em;color:#bff;background:rgba(0,255,255,.06)}
.wall-x,.wall-full{position:absolute;top:calc(clamp(14px,3.6vmin,40px) + env(safe-area-inset-top));pointer-events:auto;
width:2.4em;height:2.4em;border-radius:50%;border:1px solid rgba(0,255,255,.4);background:rgba(0,0,0,.4);
color:#bff;font-size:clamp(.95rem,2.4vmin,1.4rem);cursor:pointer;z-index:5;line-height:1;
display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.wall-x{right:calc(clamp(14px,4vmin,52px) + env(safe-area-inset-right))}
.wall-full{right:calc(clamp(60px,11vmin,120px) + env(safe-area-inset-right))}
.wall-x:hover,.wall-full:hover{background:rgba(0,255,255,.15);box-shadow:0 0 18px rgba(0,255,255,.4)}
/* bigger tap targets on touch so the controls clear thumbs */
@media (hover:none) and (pointer:coarse){.wall-x,.wall-full{width:2.7em;height:2.7em}}
.wall-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:overlay}
/* launch button (hero CTA + cockpit) */
.btn-wall{position:relative;overflow:hidden;border:1px solid rgba(0,255,255,.55)!important;
background:linear-gradient(100deg,rgba(0,255,255,.14),rgba(255,0,255,.14))!important;color:#dffaff!important;
font-weight:800;letter-spacing:.18em;text-shadow:0 0 10px rgba(0,255,255,.6)}
.btn-wall::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
transform:translateX(-130%);animation:wallSheen 3.4s ease-in-out infinite}
@keyframes wallSheen{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.cp-wall{width:100%;margin:8px 0 2px;padding:9px;cursor:pointer;border-radius:8px;
border:1px solid rgba(0,255,255,.5);background:linear-gradient(100deg,rgba(0,255,255,.12),rgba(255,0,255,.12));
color:#dffaff;font-family:"JetBrains Mono",monospace;font-weight:800;letter-spacing:.16em;font-size:.74rem}
.cp-wall:hover{box-shadow:0 0 18px rgba(0,255,255,.4)}
@media (prefers-reduced-motion:reduce){.wall-art.show,.wall-hue,.btn-wall::after{animation:none}}
/* downloadable visualizer cards (trippy.html #visualizer) */
.viz-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.viz-dl-card{position:relative;padding:22px 22px 26px;border-radius:14px;display:flex;flex-direction:column;gap:10px}
.viz-dl-tag{align-self:flex-start;font-size:.6rem;letter-spacing:.22em;padding:.25em .7em;border-radius:999px;
border:1px solid rgba(0,255,255,.45);color:#9be9ff;background:rgba(0,255,255,.06)}
.viz-dl-card:nth-child(2) .viz-dl-tag{border-color:rgba(255,0,255,.5);color:#ffd0ff;background:rgba(255,0,255,.07)}
.viz-dl-t{font-family:"Orbitron",Inter,sans-serif;font-weight:900;font-size:1.5rem;color:#fff;letter-spacing:.02em;margin:.1em 0}
.viz-dl-p{font-size:.82rem;line-height:1.55;color:#9aa6bd;margin-bottom:.4em}
.viz-dl-card .btn-wall{margin-top:auto;align-self:flex-start;cursor:pointer;text-decoration:none;
padding:.7em 1.2em;border-radius:999px;font-size:.78rem}
/* ============ ENTER THE WALL — neon CTA with running LED marquee (above What's New) ============ */
.wall-cta-sec{padding:clamp(18px,4vw,46px) 0 clamp(6px,2vw,20px)}
.wall-cta{display:flex;justify-content:center}
.wall-cta-frame{position:relative;padding:clamp(12px,2.2vw,20px);border-radius:20px;isolation:isolate}
/* running LED bulbs around all four edges (casino marquee) */
.wall-cta-frame::before,.wall-cta-frame::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:0}
.wall-cta-frame::before{ /* top + bottom rows */
color:#ff35e6;
background:
radial-gradient(circle,currentColor 34%,transparent 40%) repeat-x left top/26px 11px,
radial-gradient(circle,currentColor 34%,transparent 40%) repeat-x left bottom/26px 11px;
filter:drop-shadow(0 0 6px currentColor);animation:wallLedX 1.3s linear infinite}
.wall-cta-frame::after{ /* left + right columns */
color:#22e9ff;
background:
radial-gradient(circle,currentColor 34%,transparent 40%) repeat-y left top/11px 26px,
radial-gradient(circle,currentColor 34%,transparent 40%) repeat-y right top/11px 26px;
filter:drop-shadow(0 0 6px currentColor);animation:wallLedY 1.3s linear infinite}
@keyframes wallLedX{to{background-position:26px top,-26px bottom}}
@keyframes wallLedY{to{background-position:left 26px,right -26px}}
.wall-cta-btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.45em;cursor:pointer;
padding:clamp(16px,3.4vw,34px) clamp(26px,6.5vw,80px);border-radius:13px;
border:2px solid rgba(0,255,255,.65);
background:linear-gradient(100deg,rgba(255,0,255,.20),rgba(0,255,255,.20)),#070a0f;
color:#eaffff;font-family:"Orbitron",Inter,sans-serif;font-weight:900;text-transform:uppercase;
text-shadow:0 0 16px rgba(0,255,255,.85),0 0 34px rgba(255,0,255,.55);
box-shadow:0 0 30px rgba(0,255,255,.45),0 0 66px rgba(255,0,255,.32),inset 0 0 26px rgba(0,255,255,.20);
animation:wallGlowPulse 2.1s ease-in-out infinite;transition:transform .15s ease}
.wall-cta-btn:hover{transform:scale(1.035)}
.wall-cta-btn:active{transform:scale(.985)}
.wall-cta-main{font-size:clamp(1.15rem,4.6vw,2.6rem);letter-spacing:.14em;line-height:1}
.wall-cta-sub{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;
font-size:clamp(.5rem,1.5vw,.82rem);letter-spacing:.3em;color:#9be9ff;text-shadow:0 0 10px rgba(0,255,255,.5)}
@keyframes wallGlowPulse{
0%,100%{box-shadow:0 0 30px rgba(0,255,255,.45),0 0 66px rgba(255,0,255,.32),inset 0 0 26px rgba(0,255,255,.20);border-color:rgba(0,255,255,.65)}
50%{box-shadow:0 0 50px rgba(0,255,255,.75),0 0 110px rgba(255,0,255,.55),inset 0 0 38px rgba(0,255,255,.32);border-color:rgba(255,0,255,.85)}}
@media (prefers-reduced-motion:reduce){
.wall-cta-frame::before,.wall-cta-frame::after,.wall-cta-btn{animation:none}}
/* ============ TRIPPY — psychedelic visual section (altered perception, glitch, dream logic) ============ */
.trip-defs{position:absolute;width:0;height:0;overflow:hidden}
.trip-intro{max-width:62ch;margin:1.1rem auto 0;color:var(--ink);opacity:.92;line-height:1.6;
font-size:clamp(.95rem,1.4vw,1.1rem);text-align:center}
.trip-intro b{color:var(--cyan)}
/* --- the stage --- */
.trip-stage{position:relative;overflow:hidden;border-radius:var(--radius);isolation:isolate;
height:clamp(320px,52vh,620px);display:flex;align-items:center;justify-content:center;margin-top:.6rem}
.trip-warp{position:absolute;inset:-12%;z-index:0;filter:url(#tripMelt)} /* static melt displacement */
.trip-melt{position:absolute;inset:0;
background:
conic-gradient(from 0deg at 35% 40%, #00d4ff, #9b59b6, #ff35e6, #00ff88, #ffd700, #00d4ff),
radial-gradient(60% 60% at 70% 65%, rgba(255,53,230,.9), transparent 70%);
background-blend-mode:screen;opacity:.55;
animation:tripDrift 32s linear infinite, tripHue 40s linear infinite} /* hue cycles cleanly (no url() in animated filter) */
.trip-rings{position:absolute;inset:-30%;z-index:1;opacity:.32;mix-blend-mode:screen;
background:repeating-radial-gradient(circle at 50% 50%,
transparent 0 22px, rgba(0,212,255,.5) 23px 24px,
transparent 25px 46px, rgba(255,53,230,.45) 47px 48px);
animation:tripBreathe 18s ease-in-out infinite}
.trip-noise{position:absolute;inset:0;z-index:2;opacity:.14;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:200px 200px}
.trip-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:radial-gradient(ellipse at center,transparent 40%,rgba(8,8,12,.72) 100%)}
.trip-stage-copy{position:relative;z-index:4;text-align:center;padding:1rem;
text-shadow:0 2px 26px rgba(0,0,0,.85)}
.trip-glyph{color:var(--cyan);letter-spacing:.4em;font-size:clamp(.55rem,1.3vw,.8rem);opacity:.85;margin-bottom:.6em}
.trip-lead{margin-top:.9em;color:#eaffff;font-size:clamp(.9rem,2vw,1.3rem);letter-spacing:.04em;
font-family:"JetBrains Mono",ui-monospace,monospace}
/* --- glitch wordmark (slow RGB-split, no flashing) --- */
.trip-word{position:relative;display:inline-block;font-family:var(--display),Inter,sans-serif;font-weight:900;
font-size:clamp(2rem,9vw,6rem);letter-spacing:.04em;line-height:.95;color:#fff;text-transform:uppercase}
.trip-word::before,.trip-word::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.trip-word::before{color:#00d4ff;animation:tripGlitchA 5.5s steps(60) infinite;clip-path:inset(0 0 55% 0)}
.trip-word::after{color:#ff35e6;animation:tripGlitchB 6.7s steps(60) infinite;clip-path:inset(55% 0 0 0)}
/* --- modes grid --- */
.trip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(.7rem,1.6vw,1.1rem)}
.trip-card{position:relative;padding:clamp(1rem,2.2vw,1.5rem);border-radius:var(--radius);overflow:hidden}
.trip-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.0;transition:opacity .4s ease;
background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(255,53,230,.12))}
.trip-card:hover::before,.trip-card:focus-within::before{opacity:1}
.trip-card-no{color:var(--purple);font-size:.8rem;letter-spacing:.3em}
.trip-card-t{margin:.35em 0 .5em;font-size:clamp(1.05rem,2vw,1.3rem);
background:linear-gradient(100deg,var(--cyan),#ff35e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.trip-card p{color:var(--dim);line-height:1.55;font-size:clamp(.85rem,1.3vw,.98rem)}
/* --- motion (slow, smooth, no high-frequency flashing) --- */
@keyframes tripDrift{to{transform:rotate(1turn) scale(1.06)}}
@keyframes tripHue{to{filter:hue-rotate(360deg)}}
@keyframes tripBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes tripGlitchA{0%,92%,100%{transform:translate(0,0)}93%{transform:translate(-2px,-1px)}96%{transform:translate(2px,1px)}}
@keyframes tripGlitchB{0%,90%,100%{transform:translate(0,0)}94%{transform:translate(2px,1px)}97%{transform:translate(-2px,-1px)}}
/* --- accessibility: reduced motion freezes everything into a calm still --- */
@media (prefers-reduced-motion:reduce){
.trip-melt,.trip-rings,.trip-word::before,.trip-word::after{animation:none}
.trip-melt{opacity:.42}
.trip-word::before{clip-path:inset(0 0 60% 0);transform:translateX(-1px)}
.trip-word::after{clip-path:inset(60% 0 0 0);transform:translateX(1px)}
}
/* === THE WALL → sales funnel: COLLECT THIS deep-link === */
.wall-collect{
display:inline-flex; align-items:center; gap:.4em;
margin-top:10px; min-height:44px; padding:11px 18px;
pointer-events:auto; cursor:pointer;
font:600 .82rem/1 "JetBrains Mono",ui-monospace,monospace;
letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
color:#001016;
background:linear-gradient(100deg,#00d4ff,#00ff88);
border:1px solid rgba(255,255,255,.45); border-radius:10px;
box-shadow:0 0 14px rgba(0,212,255,.55), 0 0 26px rgba(255,53,230,.28);
transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.wall-collect:hover,.wall-collect:focus-visible{
transform:translateY(-1px);
filter:brightness(1.08);
box-shadow:0 0 20px rgba(0,212,255,.8), 0 0 38px rgba(255,53,230,.45);
}
.wall-collect:focus-visible{ outline:2px solid #ff35e6; outline-offset:3px; }
.wall-collect[hidden]{ display:none; }
/* Targeted store card pulse after a COLLECT deep-link (smooth, non-flashing) */
.art-card.collect-focus{
animation:collectPulse 2.4s ease-out 1;
position:relative; z-index:2;
}
@keyframes collectPulse{
0% { box-shadow:0 0 0 0 rgba(0,212,255,0), 0 0 0 0 rgba(255,53,230,0); outline:2px solid rgba(0,212,255,0); outline-offset:6px; }
18% { box-shadow:0 0 28px 4px rgba(0,212,255,.85), 0 0 48px 8px rgba(255,53,230,.5); outline:2px solid rgba(0,212,255,.9); outline-offset:6px; }
100% { box-shadow:0 0 0 0 rgba(0,212,255,0), 0 0 0 0 rgba(255,53,230,0); outline:2px solid rgba(0,212,255,0); outline-offset:6px; }
}
@media (prefers-reduced-motion:reduce){
.wall-collect{ transition:none; }
.wall-collect:hover,.wall-collect:focus-visible{ transform:none; }
.art-card.collect-focus{
animation:none;
box-shadow:0 0 24px 3px rgba(0,212,255,.7), 0 0 40px 6px rgba(255,53,230,.4);
outline:2px solid rgba(0,212,255,.85); outline-offset:6px;
}
}
/* ============================================================================
HOMEPAGE VISUAL UPGRADE — striking hero, animated neon accents, sharper cards.
Scoped + low-specificity so it layers on the existing neon system without
regressing the responsive (≤640 / 641–899 / ≥900) breakpoints above.
============================================================================ */
/* --- Hero: dedicated animated neon backdrop, sits BEHIND the text, dark + cheap.
A slow conic "aurora" sweep + a faint scanning beam. GPU-only transforms/opacity. --- */
.hero{ position:relative; isolation:isolate; overflow:clip; }
.hero::before{ /* aurora wash */
content:""; position:absolute; inset:-30% -10% auto -10%; height:160%; z-index:-1; pointer-events:none;
background:
radial-gradient(40% 60% at 22% 18%, rgba(0,255,136,.16), transparent 70%),
radial-gradient(46% 64% at 80% 24%, rgba(0,212,255,.14), transparent 72%),
radial-gradient(50% 60% at 50% 92%, rgba(255,0,255,.10), transparent 74%);
filter:blur(20px); opacity:.9; animation:heroAurora 22s ease-in-out infinite alternate; }
.hero::after{ /* slow neon scan beam */
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:screen; opacity:.5;
background:linear-gradient(100deg, transparent 42%, rgba(0,255,200,.12) 50%, transparent 58%);
background-size:260% 100%; animation:heroScan 9s linear infinite; }
@keyframes heroAurora{ 0%{ transform:translate3d(-2%,0,0) scale(1); } 100%{ transform:translate3d(2%,-2%,0) scale(1.06); } }
@keyframes heroScan{ 0%{ background-position:140% 0; } 100%{ background-position:-40% 0; } }
/* --- Kicker pill: live-status feel — soft breathing glow + a pulsing lead dot --- */
.hero .kicker{ position:relative; box-shadow:0 0 0 0 rgba(0,255,136,.0); animation:kickGlow 3.6s ease-in-out infinite; }
@keyframes kickGlow{ 0%,100%{ box-shadow:0 0 14px rgba(0,255,136,.12), inset 0 0 12px rgba(0,255,136,.06); }
50%{ box-shadow:0 0 22px rgba(0,255,136,.30), inset 0 0 16px rgba(0,255,136,.10); } }
/* --- Hero title: keep the existing fluor glow, add a subtle gradient drift so the
neon sheen travels across the wordmark. Pure background-position move = GPU-cheap. --- */
.hero-title{ background-size:200% auto; animation:neonFluor 3.2s ease-in-out infinite, titleGlow 5s ease-in-out infinite, heroTitleFlow 12s ease-in-out infinite; }
@keyframes heroTitleFlow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
/* --- Tagline: refined rhythm + a hairline neon rule above it for vertical structure --- */
.hero .tagline{ position:relative; padding-top:1.1rem; line-height:1.55; }
.hero .tagline::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:64px; height:2px; border-radius:2px;
background:linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
box-shadow:0 0 12px rgba(0,255,136,.5); }
/* --- Hero stats: tighter neon framing + a top accent line so the row reads as a unit --- */
.hero-stats{ position:relative; box-shadow:0 0 0 1px rgba(0,255,136,.10), 0 16px 50px rgba(0,0,0,.45); }
.hero-stats::before{ content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
background:linear-gradient(90deg, transparent, rgba(0,255,200,.6), transparent); }
.hstat-value{ transition:text-shadow .25s; }
.hero-stats:hover .hstat-value{ text-shadow:0 0 24px rgba(255,215,0,.5); }
/* --- Section titles: stronger animated underline (grows + glows), clearer hierarchy --- */
.section-title::after{ width:3.4rem; transition:width .4s ease, box-shadow .4s ease;
background:linear-gradient(90deg, var(--green), var(--cyan) 70%, transparent);
box-shadow:0 0 14px rgba(0,255,136,.7); }
.section:hover .section-title::after{ width:5.2rem; box-shadow:0 0 20px rgba(0,255,200,.85); }
/* --- "What's New" rows: card lift, left neon spine that lights on hover, sharper meta --- */
.latest-item{ position:relative; border-radius:14px; overflow:hidden;
transition:transform .2s, box-shadow .25s, background .25s; }
.latest-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:linear-gradient(180deg, var(--green), var(--cyan)); opacity:.35; transition:opacity .25s, box-shadow .25s; }
.latest-item:hover{ transform:translateX(5px); }
.latest-item:hover::before{ opacity:1; box-shadow:0 0 16px rgba(0,255,136,.7); }
.latest-text{ font-weight:500; }
/* --- Featured / Latest Release player: framed glass with a soft neon halo + corner ticks --- */
#featured.player{ position:relative; border-radius:18px;
box-shadow:0 0 0 1px rgba(0,255,200,.14), 0 24px 70px rgba(0,0,0,.5), 0 0 60px rgba(0,212,255,.10); }
#featured .featured-label{ display:inline-flex; align-items:center; gap:.5em;
padding:.32em .8em; border:1px solid rgba(0,255,136,.35); border-radius:999px;
background:rgba(0,255,136,.06); box-shadow:0 0 16px rgba(0,255,136,.14); }
/* --- Join the List: make the form a focal neon card --- */
#join .site-form{ position:relative; border-radius:16px;
background:linear-gradient(180deg, rgba(0,255,136,.04), rgba(0,212,255,.03)), var(--glass);
box-shadow:0 0 0 1px rgba(0,255,136,.12), 0 18px 50px rgba(0,0,0,.45); transition:box-shadow .3s; }
#join .site-form:focus-within{ box-shadow:0 0 0 1px rgba(0,255,136,.4), 0 18px 50px rgba(0,0,0,.5), 0 0 40px rgba(0,255,136,.18); }
/* phones: lighten the hero backdrop animation cost (no scan beam, slower aurora) */
@media (hover:none) and (pointer:coarse){
.hero::after{ display:none; }
.hero::before{ animation-duration:34s; filter:blur(14px); opacity:.7; }
}
/* light mode: keep the wordmark calm (the dark-only fluor gradient doesn't apply) */
body.light .hero-title{ animation:none; background-size:auto; }
body.light .hero::before{ opacity:.4; }
body.light .hero::after{ display:none; }
/* reduced-motion: freeze every new hero/title/accent animation, keep the static styling */
@media (prefers-reduced-motion:reduce){
.hero::before, .hero::after, .hero .kicker, .hero-title, .section:hover .section-title::after{ animation:none; }
.hero::after{ opacity:.25; }
}
/* ===================== ACID ENGINE (acid.js) =====================
Full-viewport WebGL kaleidoscope + the CSS trip layer it drives.
All motion is slow and continuous — nothing here strobes. Everything
collapses to a still frame under prefers-reduced-motion. */
#acid { position: absolute; inset: 0; width: 100%; height: 100%;
mix-blend-mode: screen; pointer-events: none; will-change: transform;
animation: acidBreathe 37s ease-in-out infinite; }
@keyframes acidBreathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
/* the field pushes harder behind the chrome when the engine is hot */
body.acid #neonbg { animation-duration: 9s; }
body.acid #neonbg .nb-psych { opacity: .9; }
body.acid #neonbg .nb-hex { opacity: .85; }
body.acid-max #neonbg { animation-duration: 6s; }
body.acid-max #neonbg .nb-ufo { opacity: 1; animation-duration: 46s; }
body.acid-max #neonbg .nb-glow { opacity: .38; }
body.acid.warp #acid { animation-duration: 15s; }
/* chromatic split on display type — small offsets, long cycle, no flicker */
body.acid .hero-title, body.acid .section-title, body.acid .wall-cta-main {
animation: acidSplit 11s ease-in-out infinite; }
@keyframes acidSplit {
0%,100% { text-shadow: -1px 0 rgba(255,0,255,.55), 1px 0 rgba(0,255,255,.55), 0 0 34px rgba(57,255,20,.30) }
33% { text-shadow: 1.5px 0 rgba(0,255,255,.55), -1.5px 0 rgba(255,215,0,.5), 0 0 46px rgba(255,0,255,.32) }
66% { text-shadow: -1.5px 1px rgba(57,255,20,.55), 1.5px -1px rgba(255,0,255,.5), 0 0 40px rgba(0,255,255,.30) }
}
body.acid-max .hero-title { animation-duration: 7s; }
/* liquid iridescence over the glass panels */
body.acid .glass { position: relative; }
body.acid .glass::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
background: conic-gradient(from 0deg, rgba(0,255,255,.10), rgba(255,0,255,.10), rgba(57,255,20,.10), rgba(255,215,0,.10), rgba(0,255,255,.10));
mix-blend-mode: screen; opacity: .55; animation: acidSpin 64s linear infinite; }
body.acid-max .glass::before { opacity: .8; animation-duration: 34s; }
@keyframes acidSpin { to { transform: rotate(360deg) } }
/* cockpit ACID control block */
#cockpit .cp-acid { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
#cockpit .cp-acid-lbl { font-size: 9px; letter-spacing: .18em; opacity: .6; margin-bottom: 6px; }
#cockpit .cp-fold { width: 100%; margin-top: 7px; padding: 7px 8px; font-size: 9.5px; letter-spacing: .14em;
color: #cfe; background: rgba(255,255,255,.05); border: 1px solid rgba(0,255,255,.28); border-radius: 8px; cursor: pointer;
transition: background .2s, box-shadow .2s; }
#cockpit .cp-fold:hover { background: rgba(0,255,255,.12); box-shadow: 0 0 18px rgba(0,255,255,.35); }
/* light mode keeps the trip but pulls it way down so text stays readable */
body.light #acid { mix-blend-mode: multiply; opacity: .35; }
body.light.acid .hero-title, body.light.acid .section-title { animation: none; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
#acid { animation: none !important; }
body.acid .hero-title, body.acid .section-title, body.acid .wall-cta-main { animation: none !important; text-shadow: 0 0 24px rgba(0,255,255,.25) !important; }
body.acid .glass::before { animation: none !important; }
}
/* ---- ACID console (trippy page) ---- */
.acid-console { margin: 22px 0 8px; padding: 18px 18px 15px; border-radius: 16px; position: relative; overflow: hidden;
border: 1px solid rgba(0,255,255,.22); }
.acid-console.hot { border-color: rgba(255,0,255,.45); box-shadow: 0 0 46px rgba(255,0,255,.22); }
.acid-con-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acid-con-tag { font-size: 12px; letter-spacing: .2em; color: #00ffff; }
.acid-con-state { font-size: 12px; letter-spacing: .18em; color: #39ff14; padding: 3px 10px; border-radius: 999px;
border: 1px solid rgba(57,255,20,.35); background: rgba(57,255,20,.07); }
.acid-console.hot .acid-con-state { color: #ff5cf6; border-color: rgba(255,0,255,.45); background: rgba(255,0,255,.09); }
.acid-con-sub { font-size: 9.5px; letter-spacing: .16em; opacity: .55; margin: 8px 0 14px; }
.acid-con-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.acid-lv { flex: 1 1 92px; padding: 11px 8px; font-size: 10.5px; letter-spacing: .14em; cursor: pointer;
color: #cfe; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
.acid-lv:hover { background: rgba(0,255,255,.10); border-color: rgba(0,255,255,.4); }
.acid-lv.on { color: #041; background: linear-gradient(135deg, #00ffff, #39ff14); border-color: transparent;
box-shadow: 0 0 26px rgba(0,255,255,.45); font-weight: 800; }
.acid-con-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.acid-con-btn { flex: 1 1 180px; padding: 11px 10px; font-size: 10px; letter-spacing: .16em; cursor: pointer;
color: #cfe; background: rgba(255,255,255,.04); border: 1px solid rgba(0,255,255,.28); border-radius: 10px;
transition: background .2s, box-shadow .2s; }
.acid-con-btn:hover { background: rgba(0,255,255,.12); box-shadow: 0 0 22px rgba(0,255,255,.32); }
.acid-con-max { border-color: rgba(255,0,255,.42); color: #ffd9ff; }
.acid-con-max:hover { background: rgba(255,0,255,.16); box-shadow: 0 0 26px rgba(255,0,255,.4); }
.acid-con-note { font-size: 9px; letter-spacing: .14em; opacity: .45; margin-top: 12px; }
.acid-con-note b { color: #00ffff; }
@media (max-width: 560px) { .acid-lv { flex: 1 1 44%; } }
/* keep chrome readable while the acid field burns behind it */
body.acid #nav .nav-inner, body.acid header#nav > *, body.acid #radiobar, body.acid #announce {
backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
body.acid #nav::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, rgba(6,6,10,.82), rgba(6,6,10,.55)); }
body.acid #nav { position: relative; }
body.acid .hero-inner, body.acid .section-head { position: relative; z-index: 1; }