/* ============================================================
   Neural Media Hub — Shared Design System v2
   All neural-themed pages link this file.
   ============================================================ */

/* -- Gradient text -- */
.neural-gradient {
    background: linear-gradient(135deg, #00d2ff, #9d4edd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -- Gradient background -- */
.bg-neural-gradient {
    background: linear-gradient(135deg, #00d2ff, #9d4edd);
}

/* -- Glassmorphism -- */
.glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* -- Ambient glow background -- */
.neural-bg {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 210, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(157, 78, 221, 0.15) 0%, transparent 50%);
}

/* -- Audio visualizer bars -- */
.visualizer-bar {
    display: inline-block;
    width: 3px;
    margin: 0 1px;
    background: #00d2ff;
    border-radius: 2px;
    animation: visualize 0.6s infinite alternate;
    height: 2px;
}

@keyframes visualize {
    0%   { height: 2px; }
    100% { height: 24px; }
}

.visualizer-paused .visualizer-bar {
    animation: none;
    height: 3px;
    opacity: 0.35;
    transition: height 0.4s ease, opacity 0.4s ease;
}

/* -- Card hover lift -- */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.2);
}

/* -- Subtle grid overlay -- */
.grid-lines::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(90deg, rgba(77, 124, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(77, 124, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
}

/* -- Text clamping -- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* -- Volume / range slider -- */
input[type="range"] {
    accent-color: #00d2ff;
    cursor: pointer;
}

/* -- Skeleton loading -- */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.6; }
}
.skeleton {
    background: rgba(77, 124, 255, 0.12);
    border-radius: 8px;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* -- Pulsing live indicator -- */
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.75); }
}
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    animation: live-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

/* -- Neural glow animation -- */
@keyframes neural-glow {
    0%   { box-shadow: 0 0 5px rgba(77, 124, 255, 0.5), 0 0 10px rgba(77, 124, 255, 0.3); }
    100% { box-shadow: 0 0 12px rgba(77, 124, 255, 0.9), 0 0 24px rgba(77, 124, 255, 0.5); }
}
.animate-glow {
    animation: neural-glow 2s ease-in-out infinite alternate;
}

/* -- Smooth scrolling -- */
html {
    scroll-behavior: smooth;
}

/* -- Custom scrollbar -- */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #080a1a;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.5);
}

/* -- Focus styles for accessibility -- */
:focus-visible {
    outline: 2px solid #00d2ff;
    outline-offset: 2px;
}

/* -- Selection color -- */
::selection {
    background: rgba(0, 210, 255, 0.3);
    color: #f0f2ff;
}

/* -- Utility for the volume slider track -- */
input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(8, 10, 26, 0.8);
    border-radius: 4px;
    height: 4px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00d2ff;
    margin-top: -5px;
    cursor: pointer;
}
input[type="range"]::-moz-range-track {
    background: rgba(8, 10, 26, 0.8);
    border-radius: 4px;
    height: 4px;
}
input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00d2ff;
    border: none;
    cursor: pointer;
}

/* -- Per-page accent overrides (pink for MP3, amber for Books) -- */
.neural-pink input[type="range"],
.neural-pink input[type="range"]::-webkit-slider-thumb {
    accent-color: #ff6b9d;
}
.neural-pink input[type="range"]::-webkit-slider-thumb {
    background: #ff6b9d;
}
.neural-pink input[type="range"]::-moz-range-thumb {
    background: #ff6b9d;
}

.neural-amber input[type="range"],
.neural-amber input[type="range"]::-webkit-slider-thumb {
    accent-color: #ffbf00;
}
.neural-amber input[type="range"]::-webkit-slider-thumb {
    background: #ffbf00;
}
.neural-amber input[type="range"]::-moz-range-thumb {
    background: #ffbf00;
}