/*
 * Seasons on the home page (includes/seasons.php). html[data-season] is set
 * by the boot script in <head>; these swap the hero's mesh colours (--m1…5)
 * and headline gradient (--hg, kept at 3:1 or more on white).
 */

html[data-season="halloween"] .ga-hero {
	--m1: #FF7A00; --m2: #7B2CBF; --m3: #FFB000; --m4: #5A189A; --m5: #FF4D00;
	--hg: linear-gradient(100deg, #C2410C, #9A3412 30%, #7B2CBF 65%, #5A189A);
}
html[data-season="winter"] .ga-hero {
	--m1: #3B82F6; --m2: #7DD3FC; --m3: #1E40AF; --m4: #60A5FA; --m5: #E11D48;
	--hg: linear-gradient(100deg, #1D4ED8, #9F1239 40%, #166534 75%, #1D4ED8);
}
html[data-season="newyear"] .ga-hero {
	--m1: #E9C46A; --m2: #7C3AED; --m3: #F4A261; --m4: #1E3A8A; --m5: #FDE68A;
	--hg: linear-gradient(100deg, #A16207, #B45309 30%, #7C3AED 65%, #1E3A8A);
}
html[data-season="lunar"] .ga-hero {
	--m1: #E5383B; --m2: #FFBA08; --m3: #D00000; --m4: #F48C06; --m5: #FFD166;
	--hg: linear-gradient(100deg, #B91C1C, #C2410C 45%, #A16207 75%, #B91C1C);
}

/* The effect canvas sits above the mesh, under the hero's content. */
.ga-hero > .tg-fx { position: absolute !important; inset: 0; z-index: 0 !important; width: 100%; height: 100%; pointer-events: none; }

.ga-hero > .tg-fx-btn {
	position: absolute !important; z-index: 2 !important; top: auto; right: 16px; bottom: 16px;
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px !important; margin: 0 !important;
	border: 1px solid rgba(17, 17, 17, .08) !important; border-radius: 999px !important;
	background: rgba(255, 255, 255, .75) !important; color: #333 !important; box-shadow: 0 2px 10px rgba(17, 17, 17, .06) !important;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-size: 12px !important; font-weight: 600 !important; line-height: 1.2; cursor: pointer;
}
.ga-hero > .tg-fx-btn:hover { background: #fff !important; }
html[data-theme="dark"] .ga-hero > .tg-fx-btn { background: rgba(21, 21, 29, .75) !important; border-color: rgba(255, 255, 255, .14) !important; color: #EDEDF2 !important; }

@media (max-width: 640px) {
	.ga-hero > .tg-fx-btn { right: 10px; bottom: 10px; }
}