/* ==========================================================================
   Futuristic accents layered on top of main.css.
   Kept separate + small on purpose: this file is the only place "flourish"
   lives, so it's easy to dial back without touching structural CSS.
   ========================================================================== */

.fs-watch__backdrop {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 60vh;
	background-image: var(--watch-bg);
	background-size: cover;
	background-position: center 15%;
	z-index: -1;
}
.fs-watch__backdrop::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(7,7,15,0.5) 0%, var(--bg-void) 90%);
}

/* Subtle ambient grid on the void background — reads as "signal space"
   without competing with content. Very low opacity, static (no animation
   cost), respects reduced-motion trivially since it never moves. */
body {
	background-image:
		linear-gradient(rgba(123,97,255,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(123,97,255,0.035) 1px, transparent 1px);
	background-size: 48px 48px;
	background-attachment: fixed;
}

.fs-logo__mark {
	box-shadow: 0 0 14px rgba(123,97,255,0.5);
}

/* Accent-colored focus ring on cards for keyboard nav visibility against dark bg */
.fs-card:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
	border-radius: var(--radius);
}

.fs-btn--primary:active { transform: translateY(0); box-shadow: none; }

/* Loading skeleton shimmer for lazily-populated rows (search/browse via JS) */
.fs-skeleton-card {
	aspect-ratio: 2/3;
	border-radius: var(--radius);
	background: linear-gradient(100deg, var(--bg-card-solid) 30%, #1c1c38 50%, var(--bg-card-solid) 70%);
	background-size: 200% 100%;
	animation: fs-shimmer 1.4s ease-in-out infinite;
}
@keyframes fs-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fs-skeleton-card { animation: none; }
}