Drift accent gradients on buttons, hero, spotlight, active rows and modals

web-player/src/lib/components/player/Queue.svelte

@@ -31,7 +31,7 @@
 
 		{#if player.current.id}
 			<p class="mb-3 text-eyebrow text-fg-2">Reproduciendo</p>
-			<div class="mb-6 rounded-control surface-active p-2.5">
+			<div class="mb-6 surface-active rounded-control p-2.5">
 				<MediaIdentity
 					trackId={player.current.id}
 					title={player.current.title}

web-player/src/lib/components/ui/overlay/Modal.svelte

@@ -90,7 +90,7 @@
 		<div
 			bind:this={panel}
 			transition:pop={{ duration: 200 }}
-			class="glass-panel max-h-[85dvh] w-full overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
+			class="glass-panel max-h-[85dvh] w-full glow-drift overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
 			role="dialog"
 			aria-modal="true"
 			aria-label={title}

web-player/src/routes/+page.svelte

@@ -134,7 +134,7 @@
 </svelte:head>
 
 <Page>
-	<div class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5">
+	<div class="relative hero-surface overflow-hidden rounded-panel-lg px-6 py-8 sm:px-9 sm:py-8.5">
 		<div
 			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
 		>
@@ -209,7 +209,7 @@
 		{#if spotlight}
 			<section>
 				<div
-					class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface lg:grid-cols-2"
+					class="grid spotlight-surface grid-cols-1 overflow-hidden rounded-panel-lg lg:grid-cols-2"
 				>
 					<div class="flex flex-col justify-center p-8 sm:p-9">
 						<div

web-player/src/routes/layout.css

@@ -225,14 +225,24 @@
 }
 @utility surface-active {
 	background-image: var(--mf-g-active);
+	background-size: 180% 100%;
+	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility surface-active-hover {
 	background-image: var(--mf-g-hover);
+	background-size: 180% 100%;
+	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility hero-surface {
 	background-image: var(--mf-hero-bg);
+	background-size: 180% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
 }
 @utility spotlight-surface {
+	background-size:
+		180% 100%,
+		100% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
 	background-image:
 		var(--mf-spotlight-bg),
 		linear-gradient(
@@ -242,6 +252,10 @@
 			transparent 92.5%
 		);
 }
+@utility glow-drift {
+	background-size: 180% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
+}
 @utility field-control {
 	@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-fg-2 focus:bg-surface-2 focus:outline-none;
 }
@@ -341,6 +355,15 @@ button:disabled {
 	}
 }
 
+@keyframes gradient-drift {
+	from {
+		background-position: 0% 50%;
+	}
+	to {
+		background-position: 100% 50%;
+	}
+}
+
 @keyframes sheen {
 	from {
 		background-position: 200% 0;
@@ -380,6 +403,7 @@ button:disabled {
 	*::before,
 	*::after {
 		animation-duration: 0.001ms !important;
+		animation-iteration-count: 1 !important;
 		animation-delay: 0ms !important;
 		transition-duration: 0.001ms !important;
 		scroll-behavior: auto !important;