@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&family=Outfit:wght@500;700;900&family=Playfair+Display:ital,wght@0,600;0,800;1,600&family=Syne:wght@700;800&display=swap');

/* ─── ZOLT V2 — APPLE MUSIC LYRICS STYLING ────────────────────────────────── */

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 400;
	src: url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsRegular.woff2") format("woff2");
}

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 500;
	src: url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsMedium.woff2") format("woff2");
}

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 600;
	src: url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsSemibold.woff2") format("woff2");
}

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 700;
	src: url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsBold.woff2") format("woff2");
}

/* Scroll Container */
.LyricsScrollContainer {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	box-sizing: border-box;
	container-type: size;
}

/* Hide default scrollbars but keep scroll functional */
.LyricsScrollContainer::-webkit-scrollbar {
	width: 6px;
}

.LyricsScrollContainer::-webkit-scrollbar-track {
	background: transparent;
}

.LyricsScrollContainer::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.LyricsScrollContainer::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Lyrics Container */
.Lyrics {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	padding-top: 30vh;
	padding-bottom: 30vh;

	--vocal-idle-opacity: 0.35;
	--vocal-active-opacity: 1;
	--vocal-sung-opacity: 0.6;
	--background-idle-opacity: calc(var(--vocal-idle-opacity) * 0.539);
	--background-active-opacity: calc(var(--vocal-active-opacity) * 0.8);
	--background-sung-opacity: calc(var(--vocal-sung-opacity) * 0.669);

	--vocal-lyrics-scale: 6;
	--maximum-lyrics-size: 3.2rem;
	--minimum-lyrics-size: 1.8rem;
}

/* Group */
.VocalsGroup {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1.3;
	letter-spacing: -0.5px;
	transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	font-family: "BeautifulLyrics", sans-serif !important;
	unicode-bidi: isolate;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	cursor: pointer;
	text-align: center;
	align-items: center;
	width: 100%;
}

.VocalsGroup:focus,
.VocalsGroup:focus-visible {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Base Vocals-Container */
.Vocals {
	display: flex;
	transition: opacity 0.3s cubic-bezier(0.61, 1, 0.88, 1);
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	--lyrics-size: clamp(var(--minimum-lyrics-size), calc(1cqw * var(--vocal-lyrics-scale)), var(--maximum-lyrics-size));
}

/* Lead Vocals-Container */
.Vocals.Lead {
	opacity: var(--vocal-idle-opacity);
	font-size: var(--lyrics-size);
	font-weight: 700;
}

.Vocals.Lead.Sung {
	opacity: var(--vocal-sung-opacity);
}

.Vocals.Lead.Active {
	opacity: var(--vocal-active-opacity);
}

.VocalsGroup:hover .Vocals.Lead {
	opacity: var(--vocal-active-opacity);
}

/* Base-Synced Lyric */
.Synced {
	position: relative;
	margin: -0.5px -0.75px;
	padding: 0.5px 0.75px;
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Active Lyric Line Glow using Dynamic Album Art Color Thief variable */
.Vocals.Active .Synced {
	color: #ffffff;
}

.Vocals.Sung .Synced {
	color: rgba(255, 255, 255, 0.8);
}

/* Line-Synced Lyric */
.Line {
	display: inline-block;
	white-space: pre-wrap;
	text-align: inherit;
	width: 100%;
	box-sizing: border-box;
}

.Vocals.Lead .Line {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
	transform-origin: center center;
}

.Vocals.Lead.Active .Line {
	transform: scale(1.05);
}

/* Loading Spinner */
.lyrics-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: auto;
}

.lyrics-loader .spinner {
	animation: rotate 2s linear infinite;
	width: 100%;
	height: 100%;
}

.lyrics-loader .path {
	stroke: var(--accent, var(--text-2));
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/* ─── FULLSCREEN LAYOUT STATES ───────────────────────────────────────────── */

/* Fullscreen lyrics container layout */
.fs-lyrics-container {
	flex: 1;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	pointer-events: auto;
	box-sizing: border-box;

	/* Smooth fade-out masks for scrolling boundary edges without black background borders */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* State 1: Art Only (default) - lyrics hidden */
#fullscreen-player.lyrics-state-art .fs-lyrics-container {
	display: none;
}

/* State 2: Split Screen (left art, right lyrics) */
#fullscreen-player.lyrics-state-split #fs-center {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4) var(--sp-12);
	gap: var(--sp-12);
}

#fullscreen-player.lyrics-state-split .fs-lyrics-container {
	display: flex;
	height: 50vh;
	min-height: 300px;
	max-height: 550px;
	animation: lyricsSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#fullscreen-player.lyrics-state-split .fs-lyrics-container .Lyrics {
	--vocal-lyrics-scale: 5.2;
	--maximum-lyrics-size: 2.8rem;
}

#fullscreen-player.lyrics-state-split .fs-art-container {
	transform: scale(0.95) translateX(-2vw);
}

#fullscreen-player.lyrics-state-split.controls-hidden .fs-art-container {
	transform: scale(1.05) translateX(-2vw);
}

/* State 3: Lyrics Only (centered lyrics, hidden art) */
#fullscreen-player.lyrics-state-lyrics #fs-center {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4) var(--sp-24);
}

#fullscreen-player.lyrics-state-lyrics .fs-art-container {
	opacity: 0;
	transform: scale(0.8) translateY(-40px);
	pointer-events: none;
	display: none !important;
}

#fullscreen-player.lyrics-state-lyrics .fs-lyrics-container {
	display: flex;
	width: 100%;
	max-width: 760px;
	height: 60vh;
	animation: lyricsSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lyricsSlideIn {
	0% {
		opacity: 0;
		transform: translateX(45px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ─── LYRIC FONTS & GENERAL OVERRIDES ─────────────────────────────────── */

.VocalsGroup {
	font-family: "BeautifulLyrics", sans-serif !important;
}



/* ─── NEON GLOW LYRICS ANIMATION ────────────────────────────────────────── */

/* Add vibrant glow when in neon style */
.fs-lyrics-container.anim-neon .Vocals.Active .Synced {
	color: #ffffff;
	text-shadow: 0 0 8px var(--accent, #ffffff), 
	             0 0 20px var(--accent-glow, rgba(255,255,255,0.5)),
	             0 0 35px var(--accent-glow, rgba(255,255,255,0.3));
	animation: neonPulse 2s infinite alternate ease-in-out, neonFlicker 0.15s infinite alternate;
}

.fs-lyrics-container.anim-neon .Vocals.Sung .Synced {
	color: rgba(255, 255, 255, 0.5);
}

@keyframes neonPulse {
	from {
		text-shadow: 0 0 8px var(--accent, #ffffff), 0 0 15px var(--accent-glow, rgba(255,255,255,0.4));
	}
	to {
		text-shadow: 0 0 12px var(--accent, #ffffff), 0 0 25px var(--accent-glow, rgba(255,255,255,0.6)), 0 0 40px var(--accent-glow, rgba(255,255,255,0.4));
	}
}

@keyframes neonFlicker {
	0%, 100% { opacity: 0.98; }
	50% { opacity: 1; }
}

/* ─── TYPEWRITER REVEAL LYRICS ANIMATION ────────────────────────────────── */

.Typewriter .word {
	opacity: 0.15;
	transition: opacity 0.25s ease;
	display: inline-block;
	animation: none;
}

.Vocals.Active .Typewriter .word {
	animation: typewriterWordFade 0.2s ease forwards;
	animation-delay: var(--word-delay);
}

.Vocals.Sung .Typewriter .word {
	opacity: 0.75;
}

@keyframes typewriterWordFade {
	to {
		opacity: 1;
	}
}

.fs-lyrics-container.anim-typewriter .Vocals.Active .Synced {
	animation: typewriterLineSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes typewriterLineSlide {
	from {
		transform: translateY(8px) scale(0.98);
	}
	to {
		transform: translateY(0) scale(1);
	}
}

/* ─── LYRIC ALIGNMENT STYLES ─────────────────────────────────────────── */

/* Center Alignment (Default) */
.Lyrics.align-center .VocalsGroup {
	text-align: center;
	align-items: center;
}
.Lyrics.align-center .Vocals {
	justify-content: center;
}
.Lyrics.align-center .Line {
	text-align: center;
}
.Lyrics.align-center .Vocals.Lead .Line {
	transform-origin: center center;
}

/* Left Alignment */
.Lyrics.align-left .VocalsGroup {
	text-align: left;
	align-items: flex-start;
}
.Lyrics.align-left .Vocals {
	justify-content: flex-start;
}
.Lyrics.align-left .Line {
	text-align: left;
}
.Lyrics.align-left .Vocals.Lead .Line {
	transform-origin: left center;
}

/* Right Alignment */
.Lyrics.align-right .VocalsGroup {
	text-align: right;
	align-items: flex-end;
}
.Lyrics.align-right .Vocals {
	justify-content: flex-end;
}
.Lyrics.align-right .Line {
	text-align: right;
}
.Lyrics.align-right .Vocals.Lead .Line {
	transform-origin: right center;
}