/**
 * Seasonal theme — Bonfire Night (29 Oct 2026; EC_SeasonalTheme).
 *
 * Loaded ONLY while the theme is active; every rule is scoped to the body
 * class it adds, so the Default website is untouched. The homepage hero is
 * the main event — an animated fireworks sky (bonfire-night.js) drawn on a
 * canvas inside the hero's ambient layer, behind every piece of content.
 * Elsewhere it stays quiet: a deeper navy / purple atmosphere, teal-purple-
 * orange edge lines, an occasional soft light trail along the header, small
 * twinkling sparks beside section headings, a warmer glow on competition
 * cards when touched, and the stronger orange button embers (button.js,
 * from the body class). Colours: navy, teal, cyan, deep blue, purple,
 * orange, coral, white — no gold. Nothing decorative takes clicks, covers
 * text, prizes or controls, or moves for visitors who prefer reduced motion.
 */

.ec-season--bonfire-night {
	--ec-bn-teal: 44, 213, 227;
	--ec-bn-cyan: 124, 236, 243;
	--ec-bn-blue: 74, 120, 255;
	--ec-bn-purple: 150, 104, 240;
	--ec-bn-orange: 255, 132, 52;
	--ec-bn-coral: 255, 112, 96;
}

/* Homepage hero: the sky ------------------------------------------------ */
.ec-bonfire-sky {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Night atmosphere behind the hero content: deep purple and blue highs, a
   faint orange glow low at the edges, as if from a bonfire off-screen. */
.ec-season--bonfire-night .ec-home-hero__ambient::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(46rem 26rem at 6% -6%, rgba(var(--ec-bn-purple), 0.3), transparent 70%),
		radial-gradient(40rem 24rem at 96% -2%, rgba(var(--ec-bn-blue), 0.26), transparent 70%),
		radial-gradient(30rem 12rem at 0% 104%, rgba(var(--ec-bn-orange), 0.12), transparent 70%),
		radial-gradient(30rem 12rem at 100% 104%, rgba(var(--ec-bn-coral), 0.1), transparent 70%),
		linear-gradient(180deg, rgba(4, 9, 22, 0.42), rgba(6, 12, 26, 0.26));
}

.ec-season--bonfire-night .ec-home-hero__trust {
	border-top-color: rgba(var(--ec-bn-purple), 0.32);
}

/* Sitewide edges ---------------------------------------------------------- */
.ec-season--bonfire-night .ec-site-header {
	border-bottom-color: rgba(var(--ec-bn-purple), 0.32);
}

.ec-season--bonfire-night .ec-site-footer::before {
	background: linear-gradient(90deg, transparent, rgba(var(--ec-bn-teal), 0.75) 20%, rgba(var(--ec-bn-purple), 0.7) 50%, rgba(var(--ec-bn-orange), 0.55) 78%, transparent);
}

/* An occasional soft light trail along the header's lower edge: idle most
   of the time, then a short teal → purple → orange glint crosses once. */
.ec-bn-header-trail {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--ec-bn-cyan), 0) 38%, rgba(var(--ec-bn-cyan), 0.9) 46%, rgba(var(--ec-bn-purple), 0.85) 50%, rgba(var(--ec-bn-orange), 0.8) 54%, transparent 62%) no-repeat;
	background-size: 40% 100%;
	background-position: -60% 0;
	opacity: 0;
}

/* Deeper night atmosphere at the top of every other page's content. */
.ec-season--bonfire-night .ec-layout__main {
	background-image:
		radial-gradient(60rem 22rem at 10% 0%, rgba(var(--ec-bn-purple), 0.1), transparent 70%),
		radial-gradient(50rem 20rem at 92% 0%, rgba(var(--ec-bn-blue), 0.08), transparent 70%);
	background-repeat: no-repeat;
}

/* Small twinkling sparks beside section headings (a four-point star). */
.ec-season--bonfire-night .ec-section__header > .ec-section__title {
	position: relative;
}

.ec-season--bonfire-night .ec-section__header > .ec-section__title::after {
	content: "";
	position: absolute;
	top: -0.1em;
	right: -0.9em;
	width: 0.6em;
	height: 0.6em;
	pointer-events: none;
	background: radial-gradient(circle, #ffffff 0 12%, rgba(var(--ec-bn-cyan), 1) 30%, rgba(var(--ec-bn-purple), 0.9) 70%);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
	filter: drop-shadow(0 0 4px rgba(var(--ec-bn-cyan), 0.7));
	opacity: 0.85;
}

/* Competition cards: their own teal edge stays; touch / hover adds a warm
   orange-purple glow beneath it. */
.ec-season--bonfire-night .ec-competition-card:hover,
.ec-season--bonfire-night .ec-competition-card:focus-within {
	box-shadow: var(--ec-elevation-1), 0 0 22px rgba(var(--ec-bn-teal), 0.16), 0 10px 32px -12px rgba(var(--ec-bn-orange), 0.35), 0 -6px 26px -14px rgba(var(--ec-bn-purple), 0.4);
}

/* Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ec-bn-header-trail {
		animation: ec-bn-trail 14s ease-in-out 3s infinite;
	}

	.ec-season--bonfire-night .ec-section__header > .ec-section__title::after {
		animation: ec-bn-twinkle 5.5s ease-in-out infinite;
	}
}

@keyframes ec-bn-trail {
	0%,
	78% {
		opacity: 0;
		background-position: -60% 0;
	}

	80% {
		opacity: 1;
	}

	96% {
		opacity: 1;
		background-position: 160% 0;
	}

	100% {
		opacity: 0;
		background-position: 160% 0;
	}
}

@keyframes ec-bn-twinkle {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.75) rotate(0deg);
	}

	45% {
		opacity: 0.95;
		transform: scale(1.05) rotate(20deg);
	}

	60% {
		opacity: 0.6;
		transform: scale(0.9) rotate(30deg);
	}
}

/* Phones: the hero opens a band of night sky above the headline — the only
   room a phone has for fireworks that never touch the headline, the prize or
   its price. Only while the theme runs (and never with reduced motion, where
   there are no fireworks). Headings get a smaller spark. */
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) {
	.ec-season--bonfire-night .ec-home-hero__intro {
		padding-top: calc(var(--ec-space-3) + 4.25rem);
	}
}

@media (max-width: 639px) {
	.ec-season--bonfire-night .ec-section__header > .ec-section__title::after {
		right: -0.8em;
		width: 0.45em;
		height: 0.45em;
	}
}