/* الكتاب المسموع — dark cinematic theme */
:root {
  --bg: #07090f;
  --panel: rgba(16, 19, 27, 0.72);
  --text: #eff2f7;
  --muted: #9aa2b2;
  --neon: #00d4ff;
  --neon-soft: rgba(0, 212, 255, 0.22);
  --gold: #e8c547;
  --border: rgba(26, 43, 59, 0.9);
  --glass-blur: 16px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Cairo', system-ui, sans-serif;
}

.glass {
  background: var(--panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.neon-glow {
  box-shadow: 0 0 24px var(--neon-soft), 0 0 48px rgba(0, 212, 255, 0.08);
}

.neon-text {
  color: var(--neon);
  text-shadow: 0 0 18px var(--neon-soft);
}

.hero-cinematic {
  background: linear-gradient(135deg, #0a1220 0%, #07090f 45%, #10131b 100%);
  position: relative;
  overflow: hidden;
}

.hero-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(0, 212, 255, 0.15), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(0, 212, 255, 0.08), transparent 55%);
  pointer-events: none;
}

.waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}

.waveform span {
  width: 4px;
  background: linear-gradient(to top, var(--neon), transparent);
  border-radius: 2px;
  animation: wave 1.2s ease-in-out infinite;
}

.waveform span:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.waveform span:nth-child(3) { animation-delay: 0.2s; height: 90%; }
.waveform span:nth-child(4) { animation-delay: 0.3s; height: 45%; }
.waveform span:nth-child(5) { animation-delay: 0.4s; height: 75%; }
.waveform span:nth-child(6) { animation-delay: 0.5s; height: 55%; }

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

.skeleton {
  background: linear-gradient(90deg, #1a2030 25%, #252d42 50%, #1a2030 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 12px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.story-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 212, 255, 0.12);
}

.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-top: 1px solid var(--border);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #1a2b3b; border-radius: 8px; }