/* Paragon Soul — CRT / phosphor terminal flourishes
   Layered on top of main.css + player.css, touches nothing there. */

:root {
	--glow: #00e633;
	--glow-soft: rgba(0, 230, 51, 0.55);
}

/* ---- CRT screen overlay: scanlines + vignette ---- */

body::before,
body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
}

body::before {
	z-index: 40;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0.14) 2px,
		rgba(0, 0, 0, 0.14) 3px
	);
	mix-blend-mode: multiply;
	animation: crtFlicker 7s infinite;
}

body::after {
	z-index: 41;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
}

/* Keep the CRT overlay off tile cover art/video — lift the whole tile above it
   (image + its own title overlay stay in their existing local order) so
   zooming in on a hover shows a clean image, not scanlines/vignette.
   Stays well under #player (9999) / #header (10000) / #menu (10002) / #loading (100020). */
.tiles article {
	position: relative;
	z-index: 60;
}

@keyframes crtFlicker {
	0%, 100% { opacity: 1; }
	92%      { opacity: 1; }
	92.4%    { opacity: 0.93; }
	92.8%    { opacity: 1; }
	96%      { opacity: 1; }
	96.3%    { opacity: 0.9; }
	96.7%    { opacity: 1; }
}

/* ---- Phosphor glow on headings / logo ---- */

.title,
#menu h2 {
	animation: phosphorPulse 3.2s ease-in-out infinite;
}

@keyframes phosphorPulse {
	0%, 100% { filter: drop-shadow(0 0 2px var(--glow-soft)); }
	50%      { filter: drop-shadow(0 0 9px var(--glow-soft)); }
}

/* ---- Tile entrance stagger ---- */

.tiles article {
	transition-delay: calc(var(--tile-index, 0) * 40ms);
}

/* ---- Tile hover flourishes (layered on top of existing hover rules) ---- */

body:not(.is-touch) .tiles article:hover > .image {
	filter: saturate(1.25);
}

body:not(.is-touch) .tiles article:hover > a h2 {
	filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 10px var(--glow));
	letter-spacing: 0.5px;
	transition: filter 0.3s ease, letter-spacing 0.3s ease;
}

.tiles article > a h2 {
	transition: filter 0.3s ease, letter-spacing 0.3s ease;
}

/* ---- Now-playing tile highlight ---- */

.tiles article.now-playing > .image {
	animation: nowPlayingPulse 2.4s ease-in-out infinite;
}

@keyframes nowPlayingPulse {
	0%, 100% { box-shadow: inset 0 0 0 2px var(--glow), 0 0 10px 1px var(--glow-soft); }
	50%      { box-shadow: inset 0 0 0 2px var(--glow), 0 0 26px 6px var(--glow-soft); }
}

/* ---- Player: glowing cover art + progress bar ---- */

#cover {
	animation: coverGlow 2.4s ease-in-out infinite;
}

@keyframes coverGlow {
	0%, 100% { box-shadow: 0 0 10px 1px var(--glow-soft); }
	50%      { box-shadow: 0 0 22px 5px var(--glow-soft); }
}

div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-value {
	box-shadow: 0 0 8px 1px var(--glow-soft);
}
div#player-progress-bar-container progress#song-played-progress[value]::-moz-progress-bar {
	box-shadow: 0 0 8px 1px var(--glow-soft);
}

#player {
	transition: box-shadow 0.4s ease;
	box-shadow: 0 -2px 20px rgba(0, 230, 51, 0.15);
}

/* ---- MOTD caret ---- */

#motd::after {
	content: '_';
	animation: blinker 1s step-start infinite;
	margin-left: 2px;
}

/* ---- Retro scrollbar ---- */

::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #000;
}
::-webkit-scrollbar-thumb {
	background: var(--glow);
	border-radius: 5px;
	box-shadow: 0 0 6px var(--glow);
}
* {
	scrollbar-color: var(--glow) #000;
	scrollbar-width: thin;
}

/* ---- Respect reduced-motion preferences ---- */

@media (prefers-reduced-motion: reduce) {
	body::before,
	.title,
	#menu h2,
	.tiles article.now-playing > .image,
	#cover {
		animation: none !important;
	}
}

/* ---- Phones: keep it light — save battery, avoid moire on small/HiDPI screens ---- */

@media screen and (max-width: 736px) {
	body::before {
		opacity: 0.5;
		animation: none;
	}
	body::after {
		background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.35) 100%);
	}
	.title,
	#menu h2,
	#cover {
		animation: none;
	}
	.tiles article.now-playing > .image {
		animation-duration: 3.2s;
	}
}