/* ==========================================================================
   FuturisticStream v2.0 — Signature Accents
   Kept separate so the "flourish" layer can be dialled independently.
   ========================================================================== */

/* Ambient grid on void background — signal-space feel, zero animation cost */
body {
	background-image:
		linear-gradient(rgba(123,97,255,0.030) 1px, transparent 1px),
		linear-gradient(90deg, rgba(123,97,255,0.030) 1px, transparent 1px);
	background-size: 56px 56px;
	background-attachment: fixed;
}

/* Logo glow */
.fs-logo__mark {
	box-shadow: 0 0 16px rgba(123,97,255,0.55);
}

/* Header: thin accent line at very bottom on scroll */
.fs-header.is-scrolled {
	border-bottom-color: rgba(123,97,255,0.22);
}

/* Nav active underline pulse */
.fs-nav__list .current-menu-item > a {
	position: relative;
}
.fs-nav__list .current-menu-item > a::after {
	content: '';
	position: absolute;
	bottom: -2px; left: 12px; right: 12px;
	height: 2px;
	background: var(--accent-2);
	border-radius: 2px;
}

/* Hero poster float glow */
.fs-hero__poster-float img {
	animation: fs-float 5s ease-in-out infinite;
}
@keyframes fs-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
	.fs-hero__poster-float img { animation: none; }
}

/* Watch page backdrop */
.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%);
}

/* Card focus ring */
.fs-card:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
	border-radius: var(--radius);
}

/* Genre chip hover shimmer */
.fs-genre-chip:hover,
.fs-genre-pill:hover {
	box-shadow: 0 0 12px rgba(123,97,255,0.2);
}

/* Network card color-glow on hover */
.fs-network-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 24px rgba(var(--network-r,123),var(--network-g,97),var(--network-b,255),0.2);
}

/* Skeleton shimmer */
.fs-skeleton-card {
	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; } }