/* ==========================================================================
   Bem Logic Studios - Master Stylesheet
   Theme: Cybernetic Dark Luxury / AAA Video Game Studio
   ========================================================================== */

:root {
  --bg-primary: #07080d;
  --bg-card: rgba(13, 17, 28, 0.75);
  --border-cyan: rgba(6, 182, 212, 0.25);
  --border-purple: rgba(168, 85, 247, 0.25);
  --neon-cyan: #00f2fe;
  --neon-purple: #9d4edd;
  --glow-cyan: 0 0 25px rgba(0, 242, 254, 0.35);
  --glow-purple: 0 0 25px rgba(157, 78, 221, 0.35);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #07080d;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
  border: 1px solid rgba(6, 182, 212, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: #00f2fe;
}

/* Background Gradients & Glows */
.cyber-grid {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.glass-panel {
  background: rgba(11, 15, 25, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-panel-glow {
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(6, 182, 212, 0.3);
  box-shadow: 0 10px 40px -10px rgba(0, 242, 254, 0.15);
}

/* Card Hover 3D Tilt Effect */
.game-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.game-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 40px -15px rgba(0, 242, 254, 0.25);
  border-color: rgba(6, 182, 212, 0.6);
}

/* Glowing Border Animation */
@keyframes neon-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}
.animate-neon-pulse {
  animation: neon-pulse 3s infinite ease-in-out;
}

/* Audio Visualizer Bar Animation */
@keyframes sound-wave-1 { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes sound-wave-2 { 0%, 100% { height: 16px; } 50% { height: 8px; } }
@keyframes sound-wave-3 { 0%, 100% { height: 8px; } 50% { height: 18px; } }

.audio-bar-1 { animation: sound-wave-1 0.8s infinite ease-in-out; }
.audio-bar-2 { animation: sound-wave-2 0.7s infinite ease-in-out 0.2s; }
.audio-bar-3 { animation: sound-wave-3 0.9s infinite ease-in-out 0.4s; }

/* Interactive Terminal Scanline effect */
.terminal-window {
  background: rgba(8, 10, 15, 0.95);
  box-shadow: inset 0 0 40px rgba(0, 242, 254, 0.05), 0 20px 50px rgba(0, 0, 0, 0.8);
  position: relative;
}
.terminal-window::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
}

/* Custom Text Gradient */
.text-gradient-cyan {
  background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 50%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Modal Transition */
.modal-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop.active .modal-content {
  transform: scale(1) translateY(0);
}