/**
 * Seasonal theme — Halloween Lite (27 Oct 2026; EC_SeasonalTheme).
 *
 * Loaded ONLY while the theme is active, and every rule is scoped to the
 * body class it adds, so the Default website is untouched. Navy/teal stays
 * the identity; Halloween is a light layer on top: an orange-and-purple
 * glow in the hero, warm header/footer/stats lines, a cobweb and bats in
 * the hero's empty corners, two small ghosts. Nothing decorative takes
 * clicks, nothing sits over a prize or a control, and nothing moves for
 * visitors who prefer reduced motion. The stronger Fire button embers are
 * button.js reading the body class (no CSS change to the buttons).
 */

.ec-season--halloween-lite {
	--ec-season-orange: 255, 127, 42;
	--ec-season-purple: 140, 92, 230;
	--ec-season-ghost: #eef9fa;
	--ec-season-ghost-ink: #0d1b2a;
}

/* Warm accents on the existing lines ------------------------------------ */
.ec-season--halloween-lite .ec-site-header {
	border-bottom-color: rgba(var(--ec-season-orange), 0.28);
}

.ec-season--halloween-lite .ec-site-footer::before {
	background: linear-gradient(90deg, transparent, rgba(var(--ec-season-orange), 0.7) 22%, rgba(var(--ec-season-purple), 0.6) 55%, rgba(var(--ec-season-orange), 0.4) 80%, transparent);
}

.ec-season--halloween-lite .ec-home-hero__trust {
	border-top-color: rgba(var(--ec-season-orange), 0.22);
}

/* Shared decoration rules ------------------------------------------------ */
.ec-season-deco {
	position: absolute;
	z-index: 1;
	display: block;
	pointer-events: none;
	user-select: none;
	line-height: 0;
}

.ec-season-deco svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Hero glow (inside the ambient layer, behind everything) */
.ec-season-deco--glow {
	inset: 0;
	z-index: auto;
	background:
		radial-gradient(40rem 24rem at 8% -4%, rgba(var(--ec-season-purple), 0.28), transparent 70%),
		radial-gradient(36rem 22rem at 94% 4%, rgba(var(--ec-season-orange), 0.2), transparent 70%);
}

/* Cobweb: the hero's top-left corner */
.ec-season-deco--web {
	top: 0;
	left: 0;
	width: clamp(3.5rem, 9vw, 7.5rem);
	color: rgba(214, 238, 242, 0.34);
}

/* Two bats: the hero's top-right corner */
.ec-season-deco--bats {
	top: clamp(0.5rem, 1.6vw, 1.25rem);
	right: clamp(0.75rem, 3vw, 2.5rem);
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	color: rgba(176, 156, 230, 0.6);
}

.ec-season-deco--bats svg {
	width: clamp(1.4rem, 2.6vw, 2.2rem);
}

.ec-season-deco--bats svg + svg {
	width: clamp(1rem, 1.9vw, 1.6rem);
	margin-top: 0.9rem;
	transform: rotate(-8deg);
}

/* Ghosts */
.ec-season-ghost__body {
	fill: var(--ec-season-ghost);
}

.ec-season-ghost__eye,
.ec-season-ghost__mouth {
	fill: var(--ec-season-ghost-ink);
}

.ec-season-deco--ghost {
	top: clamp(1.25rem, 3.4vw, 2.75rem);
	left: clamp(8%, 13vw, 16%);
	width: 2.4rem;
	opacity: 0.9;
	filter: drop-shadow(0 0 0.7rem rgba(124, 236, 243, 0.35));
}

.ec-season-deco--footer-ghost {
	top: -1.9rem;
	right: clamp(1rem, 6vw, 5rem);
	width: 2rem;
	opacity: 0.88;
	filter: drop-shadow(0 0 0.6rem rgba(124, 236, 243, 0.3));
}

/* Phones (27 Oct, after review): one small pearlescent ghost with a soft teal glow, centred in the
   hero's top-right margin — the headline's box is 300px wide and centred, so this margin is clear
   of the headline, the prize image and every control at 360–479px. Hidden elsewhere (wider
   screens have the bats / the desktop ghost; below 360px there is no margin). */
.ec-season-deco--ghost-phone {
	display: none;
	top: 0.45rem;
	right: calc((100% - 300px) / 4 - 11px);
	width: 22px;
	filter: drop-shadow(0 0 0.35rem rgba(124, 236, 243, 0.55)) drop-shadow(0 0 0.9rem rgba(249, 194, 236, 0.28));
}

@media (min-width: 360px) and (max-width: 479px) {
	.ec-season-deco--ghost-phone {
		display: block;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ec-season-deco--ghost-phone {
		animation: ec-season-float 7s ease-in-out infinite;
	}

	.ec-season-deco--ghost {
		animation: ec-season-float 7s ease-in-out infinite;
	}

	.ec-season-deco--footer-ghost {
		animation: ec-season-peek 9s ease-in-out infinite;
	}
}

@keyframes ec-season-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-0.4rem);
	}
}

@keyframes ec-season-peek {
	0%,
	100% {
		transform: translateY(0.35rem);
	}

	50% {
		transform: translateY(0);
	}
}

/* The headline spans the hero on narrower screens: the hero ghost sits out,
   the cobweb and bats stay small in their corners. */
@media (max-width: 1023px) {
	.ec-season-deco--ghost {
		display: none;
	}
}

/* Phones: the headline runs nearly edge to edge, so the corners get smaller marks and the
   bats sit out below 480px; nothing may touch the headline's lines (QA: season_theme.js). */
@media (max-width: 639px) {
	.ec-season-deco--web {
		width: 2.25rem;
		color: rgba(214, 238, 242, 0.3);
	}

	.ec-season-deco--bats {
		top: 0.3rem;
		right: 0.5rem;
		gap: 0.35rem;
	}
}

@media (max-width: 479px) {
	.ec-season-deco--bats {
		display: none;
	}
}

@media (max-width: 359px) {
	.ec-season-deco--web {
		display: none;
	}
}