@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');

:root {
  --neon-cyan: #00f0ff;
  --neon-pink: #ff007f;
  --neon-purple: #c026d3;
  --neon-violet: #8b5cf6;
}

/* TOP HEADER VIBRANT NEON GRADIENT (-10% ONLY) */
.header-neon-gradient {
  background: linear-gradient(90deg, 
    rgba(255, 0, 128, 0.20) 0%, 
    rgba(147, 51, 234, 0.35) 35%, 
    rgba(6, 182, 212, 0.20) 70%, 
    rgba(255, 0, 128, 0.20) 100%
  );
  background-size: 300% 300%;
  animation: gradient-shift 10s ease infinite;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #ff007f, #a855f7, #00f0ff, #ff007f) 1;
  box-shadow: 0 4px 28px rgba(168, 85, 247, 0.32), 0 10px 50px rgba(0, 240, 255, 0.18);
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* BODY STAGE ATMOSPHERE - TIDAK PERNAH HITAM KELAM */
body {
  background-color: #050212 !important;
  background-image: 
    radial-gradient(circle at 50% -10%, rgba(168, 85, 247, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 10% 40%, rgba(236, 72, 153, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 90% 60%, rgba(0, 240, 255, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(147, 51, 234, 0.30) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
}

/* CYBER GRID & SCANLINE - ARSIRAN EDM NEON GEMERLAP */
.cyber-grid {
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 0, 128, 0.22) 1px, transparent 1px);
  background-size: 40px 40px;
  box-shadow: inset 0 0 140px rgba(147, 51, 234, 0.35);
}

/* FULL-SCREEN STAGE AMBIENT GLOW ORBS (FIXED VIEWPORT - NYALA GEMERLAP SAMPAI BAWAH) */
.stage-glow-container {
  position: fixed;
  inset: 0;
  pointer-events-none;
  z-index: 0;
  overflow: hidden;
}

.stage-orb-top {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1050px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 0, 128, 0.50) 0%, rgba(147, 51, 234, 0.45) 50%, rgba(0, 240, 255, 0.25) 75%, transparent 85%);
  filter: blur(95px);
  animation: nebula-pulse-center 6s infinite ease-in-out;
}

.stage-orb-left {
  position: absolute;
  top: 35%;
  left: -180px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.42) 0%, rgba(255, 0, 128, 0.32) 50%, transparent 75%);
  filter: blur(105px);
  animation: nebula-pulse-1 8s infinite ease-in-out;
}

.stage-orb-right {
  position: absolute;
  top: 45%;
  right: -180px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.40) 0%, rgba(59, 130, 246, 0.28) 50%, transparent 75%);
  filter: blur(105px);
  animation: nebula-pulse-2 9s infinite ease-in-out;
}

.stage-orb-bottom {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(217, 70, 239, 0.42) 0%, rgba(147, 51, 234, 0.38) 50%, rgba(0, 240, 255, 0.22) 75%, transparent 85%);
  filter: blur(115px);
  animation: nebula-pulse-center 7s infinite ease-in-out;
}

/* VIBRANT DANCING NEON CLOUDS & STROBE PULSE - SILAU KILAU TERANG */
@keyframes nebula-pulse-1 {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.85; filter: blur(85px); }
  50% { transform: scale(1.25) translate(35px, -25px); opacity: 1; filter: blur(105px); }
}

@keyframes nebula-pulse-2 {
  0%, 100% { transform: scale(1.15) translate(0, 0); opacity: 0.80; filter: blur(85px); }
  50% { transform: scale(0.92) translate(-40px, 30px); opacity: 0.95; filter: blur(75px); }
}

@keyframes nebula-pulse-center {
  0%, 100% { transform: scale(1); opacity: 0.80; }
  50% { transform: scale(1.25); opacity: 1; }
}

.cloud-pulse-1 { animation: nebula-pulse-1 7s infinite ease-in-out; }
.cloud-pulse-2 { animation: nebula-pulse-2 9s infinite ease-in-out; }
.cloud-pulse-center { animation: nebula-pulse-center 5s infinite ease-in-out; }

/* FESTIVAL LASER LIGHT BEAMS (FIXED DI SELURUH LAYAR PAS DISCROLL) */
.laser-beam-1 {
  position: fixed;
  top: -150px;
  left: 12%;
  width: 3.5px;
  height: 140vh;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.85), rgba(255, 0, 128, 0.60), transparent);
  transform: rotate(-32deg);
  filter: blur(1.5px);
  box-shadow: 0 0 20px #00f0ff, 0 0 45px #ff007f;
  animation: laser-sweep-1 12s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

.laser-beam-2 {
  position: fixed;
  top: -150px;
  right: 12%;
  width: 3.5px;
  height: 140vh;
  background: linear-gradient(180deg, rgba(255, 0, 128, 0.85), rgba(168, 85, 247, 0.60), transparent);
  transform: rotate(32deg);
  filter: blur(1.5px);
  box-shadow: 0 0 20px #ff007f, 0 0 45px #a855f7;
  animation: laser-sweep-2 14s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

@keyframes laser-sweep-1 {
  0%, 100% { transform: rotate(-32deg) translateX(0); opacity: 0.50; }
  50% { transform: rotate(-15deg) translateX(75px); opacity: 0.85; }
}

@keyframes laser-sweep-2 {
  0%, 100% { transform: rotate(32deg) translateX(0); opacity: 0.50; }
  50% { transform: rotate(15deg) translateX(-75px); opacity: 0.85; }
}

/* HERO BANNER ULTRA NEON VIBRANT GLOW - SILAU KILAU GEMERLAP TERANG */
.hero-neon-box {
  background: linear-gradient(135deg, 
    rgba(255, 0, 128, 0.28) 0%, 
    rgba(147, 51, 234, 0.55) 40%, 
    rgba(6, 182, 212, 0.30) 100%
  );
  border: 1.5px solid rgba(244, 114, 182, 0.75);
  box-shadow: 
    0 0 30px rgba(255, 0, 128, 0.55),
    0 0 70px rgba(168, 85, 247, 0.60),
    0 0 120px rgba(0, 240, 255, 0.35),
    inset 0 0 40px rgba(236, 72, 153, 0.35);
}

.neon-title-glow {
  text-shadow: 
    0 0 10px #ff007f, 
    0 0 25px rgba(255, 0, 128, 0.85), 
    0 0 50px rgba(168, 85, 247, 0.75),
    0 0 75px rgba(0, 240, 255, 0.60);
}

/* CRISP HIGH-CONTRAST HERO ACCENT (SILAU GEMERLAP TERANG BENDERANG & JELAS DIBACA) */
.hero-title-highlight {
  display: inline;
  background: linear-gradient(90deg, #00f0ff 0%, #ffffff 40%, #a855f7 75%, #00f0ff 100%);
  background-size: 200% auto;
  animation: shine-text 4s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(0, 240, 255, 0.9)) drop-shadow(0 0 35px rgba(236, 72, 153, 0.7));
  font-weight: 900;
  letter-spacing: -0.01em;
}

@keyframes shine-text {
  to {
    background-position: 200% center;
  }
}

/* DANCE BEAT EQUALIZER ANIMATION */
@keyframes beat-jump-1 { 0%, 100% { height: 6px; } 50% { height: 28px; } }
@keyframes beat-jump-2 { 0%, 100% { height: 22px; } 50% { height: 8px; } }
@keyframes beat-jump-3 { 0%, 100% { height: 10px; } 50% { height: 32px; } }
@keyframes beat-jump-4 { 0%, 100% { height: 30px; } 50% { height: 12px; } }
@keyframes beat-jump-5 { 0%, 100% { height: 14px; } 50% { height: 26px; } }

.beat-bar-1 { animation: beat-jump-1 0.45s infinite ease-in-out; }
.beat-bar-2 { animation: beat-jump-2 0.55s infinite ease-in-out; }
.beat-bar-3 { animation: beat-jump-3 0.38s infinite ease-in-out; }
.beat-bar-4 { animation: beat-jump-4 0.48s infinite ease-in-out; }
.beat-bar-5 { animation: beat-jump-5 0.52s infinite ease-in-out; }

/* CARD NEON GLOW - ARSIRAN KILAU EDM */
.luxury-card {
  position: relative;
  background: linear-gradient(180deg, rgba(28, 20, 54, 0.88) 0%, rgba(14, 15, 36, 0.92) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(217, 70, 239, 0.55);
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    0 10px 25px -5px rgba(0, 0, 0, 0.85), 
    0 0 25px rgba(168, 85, 247, 0.35),
    inset 0 0 20px rgba(255, 0, 128, 0.16);
}

.luxury-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: linear-gradient(180deg, rgba(42, 24, 78, 0.95) 0%, rgba(20, 16, 44, 0.95) 100%);
  border-color: #00f0ff;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.9),
    0 0 45px rgba(255, 0, 128, 0.85),
    0 0 30px rgba(0, 240, 255, 0.65),
    inset 0 0 20px rgba(0, 240, 255, 0.25);
}

.luxury-card.playing {
  background: linear-gradient(180deg, rgba(55, 18, 85, 0.95) 0%, rgba(26, 10, 45, 0.95) 100%);
  border-color: #ff007f;
  box-shadow: 
    0 0 50px rgba(255, 0, 128, 0.85),
    0 0 30px rgba(0, 240, 255, 0.6),
    inset 0 0 25px rgba(255, 0, 128, 0.4);
}

/* TOP LASER ON PLAYER BAR */
.player-laser-top {
  height: 3px;
  background: linear-gradient(90deg, 
    #ff007f 0%, 
    #00f0ff 25%, 
    #ff007f 50%, 
    #a855f7 75%, 
    #00f0ff 100%
  );
  background-size: 200% 100%;
  animation: gradient-shift 4s linear infinite;
  box-shadow: 0 -3px 20px #ff007f, 0 -6px 40px #00f0ff;
}

/* FILTER PILLS */
.filter-pill {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
}

.filter-pill.active {
  background: linear-gradient(135deg, #ff007f, #9333ea);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.6), 0 0 4px #00f0ff;
  color: #fff;
  transform: scale(1.05);
}

.filter-pill:hover:not(.active) {
  background: rgba(255, 0, 128, 0.15);
  border-color: #ff007f;
  box-shadow: 0 0 15px rgba(255, 0, 128, 0.4);
  color: #fff;
}

/* FLOATING MINI DRAGGABLE, PINCHABLE, ROTATABLE BADGE */
#mini-player-badge {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  will-change: transform, left, top;
  transform-origin: center center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#mini-player-badge.is-dragging {
  cursor: grabbing !important;
  box-shadow: 0 0 50px rgba(255, 0, 128, 0.8), 0 0 25px rgba(0, 240, 255, 0.6) !important;
  border-color: #00f0ff !important;
}

#mini-player-badge.is-animating {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), left 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 10s linear infinite;
}

/* MOBILE PERFORMANCE & ULTRA-SMOOTH SCROLLING ENHANCEMENT */
html, body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
  touch-action: pan-y;
  overscroll-behavior-x: none; /* matiin gesture rubber-band/swipe-navigasi ke samping */
}

@media (max-width: 768px) {
  /* Ringankan rendering GPU mobile dengan mereduksi multi-layer blur & shadows pada 70 card */
  .cyber-grid {
    background-size: 50px 50px;
    opacity: 0.55;
  }
  .luxury-card {
    /* backdrop-filter di 70 card sekaligus adalah biang lag utama di HP — matikan total di mobile,
       ganti transparansi blur dengan background gradient ungu-malam berkelas biar tetap ada nuansa EDM tanpa beban GPU */
    background: linear-gradient(180deg, #181232 0%, #0d0f24 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(217, 70, 239, 0.5) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 14px rgba(168, 85, 247, 0.28) !important;
    will-change: auto;
  }
  .laser-beam-1, .laser-beam-2 {
    display: none; /* Sembunyikan laser pada HP agar scroll 60 FPS bebas lag */
  }
  .stage-orb-top, .stage-orb-left, .stage-orb-right, .stage-orb-bottom,
  .cloud-pulse-center, .cloud-pulse-1, .cloud-pulse-2 {
    /* Animasi awan/orb di HP matikan, ganti jadi glow statis ringan agar GPU tidak overheating/lag */
    animation: none !important;
    filter: blur(55px) !important;
    opacity: 0.45 !important;
  }
  #mini-player-badge {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 0, 128, 0.4) !important;
  }
}

/* MOBILE & DESKTOP MEDIA PROTECTION */
img, audio, .luxury-card img, #player-cover, #mini-cover {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}