/* ── Retro Gaming Pixel Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ── Reset & Variables ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black:    #050505;
  --white:    #f0f0f0;
  --accent:   #39ff14;
  --dim:      #666;
  --dim2:     #999;
  --card:     #0e0e0e;
  --border:   #1e1e1e;
  --header-h: 64px;
  --pixel-shadow: 3px 3px 0 #006600;
  --pixel-glow: 0 0 10px rgba(57,255,20,0.6), 0 0 20px rgba(57,255,20,0.2);
}

html, body {
  height: 100%;
  overflow: hidden;
  cursor: none;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'VT323', 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  animation: crt-flicker 10s step-end infinite;
}

@keyframes crt-flicker {
  0%, 94%, 100% { opacity: 1; }
  95%  { opacity: 0.96; }
  96%  { opacity: 1; }
  97%  { opacity: 0.94; }
  98%  { opacity: 1; }
  99%  { opacity: 0.97; }
}

/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── CRT persistent scanlines ── */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8988;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
}

/* ── CRT vignette ── */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8987;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%);
}

/* ── Glitch layers ── */
#glitch-r, #glitch-g, #glitch-b {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8990;
  opacity: 0;
  mix-blend-mode: screen;
}
#glitch-r { background: rgba(255,0,60,0.04); }
#glitch-g { background: rgba(57,255,20,0.04); }
#glitch-b { background: rgba(0,100,255,0.04); }

body.glitching #glitch-r {
  animation: glitch-r 0.18s steps(2) forwards;
}
body.glitching #glitch-g {
  animation: glitch-g 0.18s steps(2) forwards;
}
body.glitching #glitch-b {
  animation: glitch-b 0.18s steps(2) forwards;
}

@keyframes glitch-r {
  0%  { opacity: 1; clip-path: inset(8% 0 76% 0);  transform: translate(-6px, 0); }
  25% { clip-path: inset(55% 0 12% 0); transform: translate(6px, 1px); }
  50% { clip-path: inset(22% 0 52% 0); transform: translate(-4px, -1px); }
  75% { clip-path: inset(72% 0 5% 0);  transform: translate(5px, 0); }
  100%{ opacity: 0; clip-path: inset(0); transform: translate(0); }
}
@keyframes glitch-g {
  0%  { opacity: 1; clip-path: inset(45% 0 30% 0); transform: translate(4px, 0); }
  33% { clip-path: inset(15% 0 68% 0); transform: translate(-5px, 2px); }
  66% { clip-path: inset(80% 0 8% 0);  transform: translate(3px, -1px); }
  100%{ opacity: 0; clip-path: inset(0); transform: translate(0); }
}
@keyframes glitch-b {
  0%  { opacity: 1; clip-path: inset(62% 0 18% 0); transform: translate(-3px, 1px); }
  50% { clip-path: inset(25% 0 48% 0); transform: translate(4px, -2px); }
  100%{ opacity: 0; clip-path: inset(0); transform: translate(0); }
}

/* ── Scan lines on glitch ── */
body.glitching::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 8995;
  animation: scanlines 0.18s steps(1) forwards;
}
@keyframes scanlines {
  0%, 100% { opacity: 0; }
  30%, 70%  { opacity: 1; }
}

/* ── Custom Cursor — Pixel Style ── */
#cursor {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 0;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.06s ease;
  box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(57,255,20,0.4);
  image-rendering: pixelated;
}
#cursor-ring {
  width: 28px; height: 28px;
  border: 2px solid rgba(57,255,20,0.5);
  border-radius: 0;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transition: width .12s steps(3), height .12s steps(3), border-color .18s ease;
  image-rendering: pixelated;
}
#cursor-ring.hovered {
  width: 44px; height: 44px;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(57,255,20,0.4), inset 0 0 8px rgba(57,255,20,0.05);
}

/* ── Header ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  background: rgba(5,5,5,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 20px rgba(57,255,20,0.04);
}

.logo {
  font-family: 'Press Start 2P', 'Syne', sans-serif;
  font-weight: 800; font-size: 13px;
  letter-spacing: .07em;
  text-decoration: none;
  color: var(--white);
  cursor: none;
  flex-shrink: 0;
  text-shadow: 0 0 10px rgba(57,255,20,0.3);
}
.logo span {
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent), 0 0 24px rgba(57,255,20,0.3);
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
nav.main-nav a {
  font-family: 'Press Start 2P', 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  transition: color .15s, text-shadow .15s;
  cursor: none;
}
nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--white);
  text-shadow: 0 0 8px rgba(240,240,240,0.5);
}

.btn-nav {
  font-family: 'Press Start 2P', 'Space Mono', monospace;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black) !important;
  background: var(--accent);
  padding: 10px 18px;
  border-radius: 0;
  transition: transform .1s steps(2), box-shadow .1s steps(2), text-shadow .1s !important;
  cursor: none;
  box-shadow: var(--pixel-shadow);
  text-shadow: none;
}
.btn-nav:hover {
  opacity: 1 !important;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #006600;
  text-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* ── Page content container ── */
.page-wrap {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.page-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.page-scroll::-webkit-scrollbar { width: 3px; }
.page-scroll::-webkit-scrollbar-track { background: transparent; }
.page-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Tags ── */
.tag {
  font-family: 'Press Start 2P', 'Space Mono', monospace;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1px solid rgba(57,255,20,0.4);
  color: var(--accent);
  border-radius: 0;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(57,255,20,0.15);
  transition: box-shadow .1s, background .1s;
}
.tag:hover {
  background: rgba(57,255,20,0.08);
  box-shadow: 1px 1px 0 rgba(57,255,20,0.2);
}

/* ── Social link ── */
.social-lnk {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dim);
  font-family: 'Press Start 2P', 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .15s, text-shadow .15s;
  cursor: none;
}
.social-lnk:hover {
  color: var(--white);
  text-shadow: 0 0 6px rgba(240,240,240,0.4);
}
.social-lnk::before {
  content: '►';
  color: var(--accent);
  font-size: 10px;
  text-shadow: 0 0 6px var(--accent);
}

/* ── Label / Title helpers ── */
.s-label {
  font-family: 'Press Start 2P', 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
  text-shadow: 0 0 8px rgba(57,255,20,0.5);
}
.s-label::after {
  content: '_';
  animation: blink-cursor 1.1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.s-title {
  font-family: 'Press Start 2P', monospace;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 30px);
  line-height: 1.5;
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 #006600, 0 0 20px rgba(57,255,20,0.3);
}

/* ── Ticker ── */
.ticker {
  border-bottom: 1px solid rgba(57,255,20,0.2);
  border-top: 1px solid rgba(57,255,20,0.08);
  padding: 10px 0;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(57,255,20,0.02);
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 45s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  font-family: 'Press Start 2P', 'Syne', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 20px;
  flex-shrink: 0;
}
.ticker-sep {
  color: var(--accent);
  padding: 0 4px;
  text-shadow: 0 0 6px var(--accent);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* ── Responsive ── */
@media (max-width: 900px) {
  header { padding: 0 24px; }
  nav.main-nav { gap: 16px; }
  nav.main-nav a { font-size: 7px; letter-spacing: .08em; }
}
@media (max-width: 768px) {
  html, body { cursor: auto; }
  #cursor, #cursor-ring { display: none !important; }
  nav.main-nav .btn-nav { display: none; }
  nav.main-nav { gap: 14px; }
  .header-ticker { display: none; }
}
@media (hover: none), (pointer: coarse) {
  #cursor, #cursor-ring { display: none !important; }
}

/* ══════════════════════════════════════════
   RETRO GAMING LAYER
   ══════════════════════════════════════════ */

/* ── Phosphor green tint on scrollbars ── */
.page-scroll::-webkit-scrollbar-thumb { background: rgba(57,255,20,0.3); border-radius: 0; }
.page-scroll { scrollbar-color: rgba(57,255,20,0.25) transparent; }

/* ── Pixel-style input fields ── */
input, select, textarea {
  border-radius: 0 !important;
  font-family: 'VT323', 'Inter', sans-serif !important;
  font-size: 17px !important;
  letter-spacing: .04em;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(57,255,20,0.25) !important;
}
input::placeholder, textarea::placeholder {
  font-family: 'VT323', monospace;
  opacity: 0.5;
}

/* ── Retro pixel submit buttons ── */
.btn-submit {
  border-radius: 0 !important;
  box-shadow: var(--pixel-shadow) !important;
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .10em !important;
  transition: transform .1s steps(2), box-shadow .1s steps(2) !important;
}
.btn-submit:hover {
  opacity: 1 !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #006600 !important;
}
.btn-submit:active { transform: translate(3px, 3px) !important; box-shadow: none !important; }

/* ── Section title glow ── */
.form-section-title {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
  text-shadow: 0 0 8px rgba(57,255,20,0.4);
  border-bottom-color: rgba(57,255,20,0.2) !important;
}

/* ── Labels pixel font ── */
label {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
  letter-spacing: .10em !important;
}

/* ── Stat numbers glow ── */
.stat-n {
  font-family: 'Press Start 2P', 'Syne', sans-serif !important;
  font-size: 28px !important;
  text-shadow: 0 0 12px rgba(57,255,20,0.6), 0 0 24px rgba(57,255,20,0.2);
}
.stat-l {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
}
.stat-cell {
  border-radius: 0;
  transition: background .2s, box-shadow .2s;
}
.stat-cell:hover {
  background: var(--card) !important;
  box-shadow: inset 0 0 0 1px rgba(57,255,20,0.2), inset 0 0 20px rgba(57,255,20,0.04);
}

/* ── Service items ── */
.srv-item { border-radius: 0; }
.srv-item:hover {
  background: var(--card) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.srv-title {
  font-family: 'Press Start 2P', 'Syne', sans-serif !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
}
.srv-desc {
  font-family: 'VT323', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
.srv-icon-txt { text-shadow: 0 0 8px var(--accent); }

/* ── Artist pagination pixel style ── */
.artist-pagination a {
  border-radius: 0 !important;
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
}
.artist-pagination a:hover {
  box-shadow: 2px 2px 0 var(--accent);
  border-color: var(--accent) !important;
}
.artist-back {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
}
.artist-back::before { content: '◄'; }
.artist-type-label {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
  text-shadow: 0 0 8px rgba(57,255,20,0.5);
}
.artist-bio {
  font-family: 'VT323', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.7 !important;
}
.artist-genres-label, .artist-links-label {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
}
.artist-divider {
  box-shadow: 0 0 6px var(--accent);
}

/* ── Pixel-style borders on cards hover ── */
.artist-card:hover {
  outline: 2px solid rgba(57,255,20,0.5);
  box-shadow: 0 0 16px rgba(57,255,20,0.2);
}
.ac-num {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 8px !important;
}
.ac-name {
  font-family: 'Press Start 2P', 'Syne', sans-serif !important;
  font-size: 9px !important;
  line-height: 1.5 !important;
}
.ac-genre {
  font-family: 'VT323', monospace !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
}
.artist-card:hover .ac-num {
  text-shadow: 0 0 8px var(--accent);
}

/* ── Collective cards ── */
.col-type {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
  text-shadow: 0 0 8px rgba(57,255,20,0.4);
}
.col-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: clamp(14px, 1.6vw, 24px) !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  text-shadow: 3px 3px 0 #006600, 0 0 16px rgba(57,255,20,0.3) !important;
}
.col-desc {
  font-family: 'VT323', sans-serif !important;
  font-size: 18px !important;
}
.col-link {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
  text-shadow: 0 0 6px var(--accent);
}
.collective-card:hover {
  outline: 1px solid rgba(57,255,20,0.3);
}

/* ── Info text ── */
.info-section p {
  font-family: 'VT323', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.7 !important;
}
.info-tagline {
  text-shadow: 0 0 40px rgba(57,255,20,0.06);
}
.info-tagline .accent {
  text-shadow: 0 0 20px rgba(57,255,20,0.3);
}

/* ── Create meta items ── */
.create-meta-item {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 7px !important;
  line-height: 1.8 !important;
}
.create-meta-item::before {
  box-shadow: 0 0 4px var(--accent);
}

/* ── Booking form text ── */
.booking-left p {
  font-family: 'VT323', sans-serif !important;
  font-size: 19px !important;
}

/* ── Audio count ── */
.audio-count {
  font-family: 'Press Start 2P', 'Space Mono', monospace !important;
  font-size: 8px !important;
}
.audio-count span {
  text-shadow: 0 0 8px var(--accent);
}

/* ── Page scroll pixel scrollbar ── */
.artist-info-panel::-webkit-scrollbar-thumb,
.audio-grid::-webkit-scrollbar-thumb,
.booking-right::-webkit-scrollbar-thumb,
.create-right::-webkit-scrollbar-thumb,
.info-right::-webkit-scrollbar-thumb { background: rgba(57,255,20,0.25); border-radius: 0; }

/* ── Header Logo Motion Design ── */
img[src="header-logo.png"] {
  animation:
    logo-breathe 4s ease-in-out infinite,
    logo-glow    4s ease-in-out infinite,
    logo-glitch  9s step-end infinite;
  transform-origin: center center;
}

@keyframes logo-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%       { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes logo-glow {
  0%, 100% { filter: brightness(0.9)  drop-shadow(0 0 0px  rgba(57,255,20,0));    opacity: 0.8;  }
  50%       { filter: brightness(1.15) drop-shadow(0 0 10px rgba(57,255,20,0.5));  opacity: 1;    }
}

@keyframes logo-glitch {
  0%, 88%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(57,255,20,0.3)); }
  89%  { transform: translate(calc(-50% - 4px), -50%) scale(1.04); filter: brightness(1.3) drop-shadow(0 0 12px rgba(57,255,20,0.8)) hue-rotate(10deg); }
  90%  { transform: translate(calc(-50% + 4px), -50%) scale(0.98); filter: brightness(0.8) drop-shadow(0 0 4px rgba(255,0,60,0.5)); }
  91%  { transform: translate(-50%, -50%)               scale(1.02); filter: brightness(1.2) drop-shadow(0 0 8px rgba(57,255,20,0.6)); }
  92%  { transform: translate(-50%, -50%)               scale(1);    }
}