@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
	--spotify-black: #121212;
	--spotify-gray-dark: #1E1E1E;
	--spotify-gray-medium: #282828;
	--spotify-gray-light: #535353;
	--spotify-text-dim: #b3b3b3;
	--spotify-text-bright: #ffffff;
	--spotify-green: #1DB954;
}

body {
	font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.fade-in-element {
	animation: fadeIn 0.7s ease-out forwards;
	opacity: 0;
}

img {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	border: 1px solid var(--spotify-gray-medium);
}

.card {
	background-color: var(--spotify-gray-dark);
	border: 1px solid var(--spotify-gray-medium);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#lyric-container {
	scroll-behavior: smooth;
	mask-image: linear-gradient(transparent, black 15%, black 85%, transparent);
	-webkit-mask-image: linear-gradient(transparent, black 15%, black 85%, transparent);
	scrollbar-width: thin;
	scrollbar-color: var(--spotify-gray-light) var(--spotify-gray-dark);
}

#lyric-container::-webkit-scrollbar {
	width: 8px;
}

#lyric-container::-webkit-scrollbar-track {
	background: var(--spotify-gray-dark);
	border-radius: 4px;
}

#lyric-container::-webkit-scrollbar-thumb {
	background-color: var(--spotify-gray-light);
	border-radius: 4px;
	border: 2px solid var(--spotify-gray-dark);
	transition: background-color 0.2s ease;
}

#lyric-container::-webkit-scrollbar-thumb:hover {
	background-color: var(--spotify-text-dim);
}

.lyric-line {
	opacity: 0.4;
	transform: scale(0.98);
	transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	padding: 14px 0;
	line-height: 1.6;
	color: var(--spotify-text-dim);
	cursor: default;
}

.lyric-line:not(.active):hover {
    opacity: 0.7;
    color: var(--spotify-text-bright);
}

.lyric-line.active {
	opacity: 1;
	transform: scale(1.02);
	font-weight: 700;
	color: var(--spotify-text-bright);
	text-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
}

audio {
    display: none;
}

.player-slider, .volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--spotify-gray-medium);
    border-radius: 3px;
    outline: none;
    transition: background 0.1s ease;
    cursor: pointer;
}

.player-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--spotify-text-bright);
    border-radius: 50%;
    border: none;
    transition: all 0.2s ease;
	opacity: 0;
}

.volume-slider::-webkit-slider-thumb {
	opacity: 1; 
}

.player-slider:hover::-webkit-slider-thumb {
    opacity: 1;
}

.player-slider::-moz-range-track,
.volume-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: var(--spotify-gray-medium);
    border-radius: 3px;
    border: none;
}

.player-slider::-moz-range-thumb,
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--spotify-text-bright);
    border-radius: 50%;
    border: none;
	opacity: 0;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
	opacity: 1;
}

.player-slider:hover::-moz-range-thumb {
    opacity: 1;
}