:root {
  --background: #050508;
  --foreground: #FAF9F6;
  
  --font-serif: "Georgia", "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  
  --color-bg-primary: #050508;
  --color-bg-card: #0C0C12;
  --color-text-primary: #FAF9F6;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  
  --color-accent-ice: #94B9FF;
  --color-accent-ice-hover: #739EFF;
  --color-accent-ice-light: rgba(148, 185, 255, 0.08);
  
  --color-border-primary: rgba(255, 255, 255, 0.05);
  --color-border-hover: rgba(255, 255, 255, 0.12);
}

@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-reverse {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.animate-marquee {
  animation: marquee 15s linear infinite;
  will-change: transform;
}
.animate-marquee-reverse {
  animation: marquee-reverse 15s linear infinite;
  will-change: transform;
}

/* A.V.A Demo Audio Player Tabs */
.ava-tab {
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}
.ava-tab:hover {
  color: var(--color-text-primary);
  background: rgba(255,255,255,0.03);
}
.ava-tab.active-tab {
  color: var(--color-accent-ice);
  background: rgba(148, 185, 255, 0.06);
}
.ava-tab.active-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent-ice);
  border-radius: 2px 2px 0 0;
}

@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Scrollbar for Dark Theme */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050508;
}
::-webkit-scrollbar-thumb {
  background: #1C1C24;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2E2E3C;
}

/* Base styles */
body {
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: hidden;
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
}

.noise-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  opacity: 0.015;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.grid-bg {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 80px 80px;
}

.gradient-glow {
  background: 
    radial-gradient(circle 800px at 50% 200px, rgba(148, 185, 255, 0.04), transparent 85%),
    radial-gradient(circle 600px at 85% 600px, rgba(99, 102, 241, 0.02), transparent 80%);
}

.gradient-accent {
  background: linear-gradient(135deg, #94B9FF 0%, #1D2B42 100%);
}

.clip-path-inset-bottom {
  clip-path: inset(100% 0px 0px 0px);
}

.clip-path-inset-zero {
  clip-path: inset(0px 0px 0px 0px);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}


.hover\:\[animation-play-state\:paused\]:hover {
  animation-play-state: paused;
}

.orb-container {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}