/* ==========================================================================
   MYTHIC SCRIPTS — HALLOWEEN PREMIUM THEME
   Couche de thème autonome : n'agit que quand <html data-event="halloween">
   (posé par le petit script « HALLOWEEN THEME » du template HTML).
   Supprimer ce dossier + le bloc du template = retour au thème d'origine.
   ========================================================================== */

/* ---------- Palette & tokens -------------------------------------------- */

html[data-event=halloween] {
	--hw-bar-h: 0px;
	--hw-gothic: "Cinzel", "Trajan Pro", Georgia, serif;
	--hw-pumpkin: oklch(70% .19 52);
	--hw-pumpkin-bright: oklch(80% .16 68);
	--hw-pumpkin-deep: oklch(50% .16 40);
	--hw-ink: oklch(17% .03 40);
	--hw-purple: oklch(52% .2 305);
	--hw-bone: oklch(95% .015 80);
	--hw-glow: oklch(70% .19 52 / .35);

	/* L'accent « cobalt » du site devient citrouille */
	--cobalt: oklch(67% .195 48);
	--cobalt-bright: oklch(76% .17 62);
	--cobalt-deep: oklch(44% .15 38);
	--grad-cobalt: linear-gradient(oklch(79% .165 66), oklch(65% .2 45));
	--grad-cobalt-hover: linear-gradient(oklch(83% .15 72), oklch(70% .19 52));
	--shadow-cobalt: inset 0 1px 0 #ffffff59, 0 1px 2px #00000066, 0 4px 14px oklch(67% .195 48 / .3);
	--shadow-cobalt-hover: inset 0 1px 0 #ffffff66, 0 2px 6px #00000066, 0 8px 26px oklch(70% .19 52 / .48);
	--destructive: oklch(62% .2 40);
	--destructive-bright: oklch(84% .2 138);
	--accent-hover: oklch(82% .15 70);
	--accent-soft: oklch(67% .195 48 / .14);

	scroll-padding-top: calc(var(--hw-bar-h) + 5rem);
}

html[data-event=halloween].hw-has-bar { --hw-bar-h: 40px; }

/* Sombre — « Midnight Haunt » : noir violacé, os, citrouille */
html[data-event=halloween][data-theme=dark] {
	--void: oklch(13.2% .02 300);
	--void-sunken: oklch(10.2% .016 300);
	--void-raised: oklch(17.4% .028 300);
	--void-hover: oklch(21.5% .036 300);
	--silver: oklch(95% .015 80);
	--silver-muted: oklch(77% .022 75);
	--silver-subtle: oklch(59% .03 300);
	--silver-faint: oklch(40% .04 300);
	--silver-ghost: oklch(27% .035 300);
	--line: oklch(78% .08 300 / .12);
	--line-strong: oklch(78% .1 300 / .22);
	--hero-blue: oklch(14.5% .04 300);
	--grid-color: oklch(75% .16 55 / .045);
	--hero-top-glow: oklch(50% .2 305 / .34);
	--hero-bottom-glow: oklch(62% .2 48 / .3);
}

/* Clair — « Bone & Ember » : parchemin, encre violette, braise */
html[data-event=halloween][data-theme=light] {
	--void: oklch(97.6% .01 80);
	--void-sunken: oklch(94.5% .016 75);
	--void-raised: oklch(99.6% .005 80);
	--void-hover: oklch(93.8% .02 72);
	--silver: oklch(21% .045 300);
	--silver-muted: oklch(41% .04 300);
	--silver-subtle: oklch(55% .03 300);
	--silver-faint: oklch(78% .025 300);
	--silver-ghost: oklch(88% .015 300);
	--line: oklch(21% .045 300 / .11);
	--line-strong: oklch(21% .045 300 / .2);
	--hero-blue: oklch(22% .09 300);
	--grid-color: oklch(100% 0 0 / .06);
	--hero-top-glow: oklch(70% .19 55 / .5);
	--hero-bottom-glow: oklch(50% .22 320 / .55);
	--cobalt-bright: oklch(60% .19 44);
	--destructive-bright: oklch(55% .17 145);
}

/* ---------- Base ----------------------------------------------------------- */

html[data-event=halloween] ::selection { background: var(--cobalt); color: var(--hw-ink); }

html[data-event=halloween] ::-webkit-scrollbar-thumb { background: oklch(70% .19 52 / .3); }
html[data-event=halloween] ::-webkit-scrollbar-thumb:hover { background: oklch(70% .19 52 / .55); }

/* Texte sombre sur les boutons citrouille (lisibilité) */
html[data-event=halloween] :is(.btn-primary, .pill, .chip.active) { color: var(--hw-ink); }
html[data-event=halloween] .btn-primary svg { stroke: currentColor; }
html[data-event=halloween] .count-badge { color: var(--hw-ink); background: var(--hw-bone); }

/* Reflet qui balaie les boutons principaux au survol */
html[data-event=halloween] .btn-primary { position: relative; overflow: hidden; }
html[data-event=halloween] .btn-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, #ffffff73 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}
html[data-event=halloween] .btn-primary:hover:not(:disabled)::after {
	transform: translateX(120%);
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* Thème clair : le header transparent et le hero gardent des pastilles blanches */
html[data-event=halloween][data-theme=light] header[data-top=true] .pill,
html[data-event=halloween][data-theme=light] .hero-glow .btn-primary,
html[data-event=halloween][data-theme=light] .hero-glow .chip.active { color: var(--cobalt-deep); }
/* Le hero clair est violet foncé : le logo du header transparent doit passer en blanc */
html[data-event=halloween][data-theme=light] header[data-top=true] { color: var(--silver); }
html[data-event=halloween][data-theme=light] header[data-top=true] .count-badge { color: var(--hw-ink); background: var(--cobalt-bright); }

/* ---------- Logo : petit chapeau de sorcière ------------------------------ */

html[data-event=halloween] header a[aria-label="Mythic Scripts home"] { position: relative; }
html[data-event=halloween] header a[aria-label="Mythic Scripts home"]::before {
	content: "";
	position: absolute;
	left: -7px;
	top: -13px;
	width: 26px;
	height: 23px;
	background: url(hat.svg) center / contain no-repeat;
	transform: rotate(-20deg);
	transform-origin: 60% 90%;
	filter: drop-shadow(0 2px 3px #0006) drop-shadow(0 0 4px oklch(75% .17 60 / .5));
	pointer-events: none;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
html[data-event=halloween] header a[aria-label="Mythic Scripts home"]:hover::before { transform: rotate(-8deg) translateY(-2px); }

/* ---------- Bandeau événement (créé par halloween.js) --------------------- */

html[data-event=halloween].hw-has-bar body { padding-top: var(--hw-bar-h); }
html[data-event=halloween].hw-has-bar header.fixed { top: var(--hw-bar-h); }

/* Fond réservé avant que le script ne dessine le bandeau : pas de saut de page */
html[data-event=halloween].hw-has-bar body::before,
.hw-bar {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--hw-bar-h);
	background:
		radial-gradient(ellipse 30% 140% at 50% 120%, oklch(70% .19 52 / .28), transparent 70%),
		linear-gradient(90deg, #0f0818, #22113a 28%, #2c1340 50%, #22113a 72%, #0f0818);
	border-bottom: 1px solid oklch(70% .19 52 / .32);
}
html[data-event=halloween].hw-has-bar body::before { content: ""; z-index: 59; }

.hw-bar {
	z-index: 60;
	display: none;
	overflow: hidden;
	color: oklch(95% .015 80);
	font-family: var(--font-sans);
	box-shadow: 0 8px 28px -12px oklch(70% .19 52 / .55);
}
html[data-event=halloween].hw-has-bar .hw-bar { display: block; }

.hw-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 35%;
	background: linear-gradient(100deg, transparent, oklch(82% .14 65 / .13), transparent);
	animation: hw-sweep 7s ease-in-out infinite;
	pointer-events: none;
}

.hw-bar__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	height: 100%;
	padding: 0 3rem;
	color: inherit;
	text-decoration: none;
	font-size: .8125rem;
	white-space: nowrap;
}
.hw-bar__icon { display: inline-flex; width: 22px; height: 22px; filter: drop-shadow(0 0 6px oklch(70% .19 52 / .7)); animation: hw-flicker 3.2s ease-in-out infinite; }
.hw-bar__icon svg { width: 100%; height: 100%; }
.hw-bar__title {
	font-family: var(--hw-gothic);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .16em;
	background: linear-gradient(180deg, oklch(92% .09 80), oklch(74% .18 58));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hw-bar__sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: oklch(70% .19 52 / .6); }
.hw-bar [hidden] { display: none !important; }
.hw-bar__msg { color: oklch(86% .03 75); font-weight: 550; }
.hw-bar__msg strong { color: oklch(82% .16 68); font-weight: 700; }
.hw-bar__timer { display: inline-flex; align-items: center; gap: .2rem; font-variant-numeric: tabular-nums; }
.hw-bar__ends { margin-right: .35rem; color: oklch(72% .03 300); font-size: .75rem; }
.hw-bar__timer b {
	min-width: 1.75rem;
	padding: .14rem .3rem;
	border-radius: .375rem;
	border: 1px solid oklch(100% 0 0 / .09);
	background: oklch(100% 0 0 / .06);
	color: oklch(84% .15 70);
	font-weight: 700;
	text-align: center;
}
.hw-bar__timer i { margin-right: .25rem; font-style: normal; font-size: .6875rem; color: oklch(72% .03 300); }
.hw-bar__cta {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	height: 1.65rem;
	padding: 0 .8rem;
	border-radius: 9999px;
	background: var(--grad-cobalt);
	box-shadow: var(--shadow-cobalt);
	color: var(--hw-ink);
	font-weight: 650;
	font-size: .75rem;
	transition: transform .18s, box-shadow .18s;
}
.hw-bar__link:hover .hw-bar__cta { transform: translateY(-1px); box-shadow: var(--shadow-cobalt-hover); }
.hw-bar__close {
	position: absolute;
	top: 50%;
	right: .6rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	color: oklch(80% .03 300);
	opacity: .65;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .15s, background .15s;
}
.hw-bar__close:hover { opacity: 1; background: oklch(100% 0 0 / .08); }

@media (max-width: 900px) {
	.hw-bar__msg, .hw-bar__sep--msg { display: none; }
}
@media (max-width: 640px) {
	.hw-bar__link { gap: .55rem; padding: 0 2.6rem 0 .8rem; justify-content: flex-start; }
	.hw-bar__title { font-size: .78rem; letter-spacing: .1em; }
	.hw-bar__ends, .hw-bar__cta, .hw-bar__sep { display: none; }
	.hw-bar__timer b { min-width: 1.45rem; padding: .1rem .2rem; font-size: .75rem; }
	.hw-bar__timer i { margin-right: .12rem; }
}
@media (max-width: 370px) {
	.hw-bar__title { display: none; }
}

/* ---------- Heros : lune, brume, titres embrasés -------------------------- */

html[data-event=halloween] .hero-glow {
	position: relative;
	z-index: 0;
	overflow-x: clip;
}

/* Pleine lune (pas sur les fiches produit qui ont déjà une grande image) */
html[data-event=halloween] .hero-glow:not(:has(img))::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: clamp(84px, 14%, 150px);
	right: clamp(-36px, 5vw, 110px);
	width: clamp(130px, 17vw, 250px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		url(bat.svg) 18% 64% / 26% auto no-repeat,
		radial-gradient(circle at 63% 38%, oklch(80% .07 72 / .5) 0 7%, transparent 7.6%),
		radial-gradient(circle at 40% 68%, oklch(80% .07 72 / .42) 0 10%, transparent 10.6%),
		radial-gradient(circle at 72% 70%, oklch(80% .07 72 / .35) 0 5%, transparent 5.6%),
		radial-gradient(circle at 30% 34%, oklch(82% .06 75 / .35) 0 4.5%, transparent 5%),
		radial-gradient(circle at 36% 30%, oklch(98.5% .025 88), oklch(92% .06 80) 42%, oklch(83% .1 68) 78%, oklch(74% .13 58));
	box-shadow:
		0 0 50px 6px oklch(88% .1 78 / .28),
		0 0 160px 50px oklch(70% .18 55 / .2);
	opacity: .92;
	pointer-events: none;
	animation: hw-moon 9s ease-in-out infinite;
}

/* Mobile : petite lune discrète dans le coin, au-dessus du titre */
@media (max-width: 640px) {
	html[data-event=halloween] .hero-glow:not(:has(img))::before {
		top: 78px;
		right: -26px;
		width: 104px;
		opacity: .6;
	}
}

/* Brume qui dérive en bas du hero */
html[data-event=halloween] .hero-glow::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -30%;
	right: -30%;
	bottom: 0;
	height: 60%;
	background:
		radial-gradient(ellipse 22% 42% at 12% 92%, oklch(88% .03 300 / .13), transparent 70%),
		radial-gradient(ellipse 18% 36% at 34% 96%, oklch(88% .03 300 / .1), transparent 70%),
		radial-gradient(ellipse 26% 46% at 58% 94%, oklch(88% .03 300 / .12), transparent 70%),
		radial-gradient(ellipse 20% 38% at 82% 97%, oklch(88% .03 300 / .1), transparent 70%),
		linear-gradient(to top, oklch(70% .19 52 / .07), transparent 55%);
	filter: blur(6px);
	pointer-events: none;
	animation: hw-fog 34s ease-in-out infinite alternate;
}

/* Titres de hero : dégradé os → citrouille */
html[data-event=halloween] .hero-glow :is(h1, h2) {
	background: linear-gradient(180deg, oklch(97% .02 85) 18%, oklch(86% .11 72) 62%, oklch(72% .19 52) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 6px 30px oklch(65% .2 50 / .3));
	padding-bottom: .06em;
}

/* Badge « Halloween Edition » au-dessus du titre de l'accueil */
html[data-event=halloween] .hero-glow:has(> .ornaments) h1::before {
	content: "Halloween Edition";
	display: block;
	width: fit-content;
	margin-bottom: 1.25rem;
	padding: .5rem 1rem .45rem;
	border: 1px solid oklch(70% .19 52 / .45);
	border-radius: 9999px;
	background: oklch(70% .19 52 / .1);
	box-shadow: 0 0 24px -4px oklch(70% .19 52 / .45), inset 0 1px 0 oklch(100% 0 0 / .08);
	color: oklch(84% .15 70);
	-webkit-text-fill-color: oklch(84% .15 70);
	font-family: var(--hw-gothic);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .24em;
	line-height: 1;
}

/* Ornements du hero → étoiles, lunes et chauves-souris qui scintillent */
html[data-event=halloween] .ornaments { color: oklch(80% .14 66 / .6); }
html[data-event=halloween] .ornaments span { font-size: 0; animation: hw-twinkle 4.5s ease-in-out infinite; }
html[data-event=halloween] .ornaments span::before { content: "✦"; font-size: 13px; }
html[data-event=halloween] .ornaments span:nth-child(3n + 2)::before { content: "☾"; font-size: 17px; }
html[data-event=halloween] .ornaments span:nth-child(4n + 3)::before {
	content: "";
	display: block;
	width: 22px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url(bat.svg) center / contain no-repeat;
	mask: url(bat.svg) center / contain no-repeat;
}
html[data-event=halloween] .ornaments span:nth-child(2n) { animation-delay: -1.5s; }
html[data-event=halloween] .ornaments span:nth-child(3n) { animation-delay: -3s; }

/* Chiffres « By the numbers » en lettres de braise */
html[data-event=halloween] span.font-display {
	background: linear-gradient(180deg, var(--silver) 30%, var(--cobalt-bright));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Bandes de séparation ------------------------------------------ */

html[data-event=halloween] .hatch {
	background-image:
		repeating-linear-gradient(-45deg, oklch(70% .19 52 / .22) 0 1px, transparent 1px 9px),
		radial-gradient(ellipse 50% 160% at 50% 50%, oklch(52% .2 305 / .14), transparent 70%);
}

/* ---------- Cartes produit ------------------------------------------------- */

html[data-event=halloween] .card-grid article.group {
	position: relative;
	transition: box-shadow .3s;
}
html[data-event=halloween] .card-grid article.group:hover {
	box-shadow:
		inset 0 0 0 1px oklch(70% .19 52 / .45),
		inset 0 -70px 90px -60px oklch(70% .19 52 / .3);
}
/* Toile d'araignée qui se tisse dans le coin au survol */
html[data-event=halloween] .card-grid article.group::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 96px;
	height: 96px;
	background: oklch(96% .02 80 / .7);
	-webkit-mask: url(web.svg) top right / contain no-repeat;
	mask: url(web.svg) top right / contain no-repeat;
	opacity: 0;
	transform: scale(.6);
	transform-origin: top right;
	transition: opacity .35s, transform .45s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}
html[data-event=halloween] .card-grid article.group:hover::after { opacity: 1; transform: none; }
html[data-event=halloween][data-theme=light] .card-grid article.group::after { background: oklch(25% .05 300 / .4); }

/* Pastilles promo : citrouille + chauve-souris */
html[data-event=halloween] .sale-badge {
	gap: .3rem;
	background: linear-gradient(135deg, oklch(79% .165 66), oklch(63% .2 42));
	color: var(--hw-ink);
	box-shadow: inset 0 1px 0 #ffffff59, 0 2px 8px #0006, 0 0 18px oklch(70% .19 52 / .45);
}
html[data-event=halloween] .sale-badge::before,
html[data-event=halloween] [style*="background: var(--destructive)"]::before {
	content: "";
	width: 15px;
	height: 8px;
	background: currentColor;
	-webkit-mask: url(bat.svg) center / contain no-repeat;
	mask: url(bat.svg) center / contain no-repeat;
}
html[data-event=halloween] [style*="background: var(--destructive)"] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: linear-gradient(135deg, oklch(79% .165 66), oklch(63% .2 42)) !important;
	color: var(--hw-ink);
	box-shadow: inset 0 1px 0 #ffffff59, 0 4px 16px #0005, 0 0 26px oklch(70% .19 52 / .45) !important;
	animation: hw-pulse 2.8s ease-in-out infinite;
}
html[data-event=halloween] [style*="background: var(--destructive)"] > svg { display: none; }

/* ---------- Pied de page : cimetière au clair de lune --------------------- */

html[data-event=halloween] footer {
	position: relative;
	padding-top: 84px;
}
html[data-event=halloween] footer::before,
html[data-event=halloween] footer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 84px;
	pointer-events: none;
}
html[data-event=halloween] footer::before {
	background:
		radial-gradient(ellipse 34% 110% at 68% 100%, oklch(70% .19 52 / .3), transparent 70%),
		radial-gradient(ellipse 50% 120% at 22% 100%, oklch(52% .2 305 / .26), transparent 72%);
}
html[data-event=halloween] footer::after {
	background: var(--void);
	-webkit-mask: url(graveyard.svg) left bottom / auto 84px repeat-x;
	mask: url(graveyard.svg) left bottom / auto 84px repeat-x;
}
html[data-event=halloween][data-theme=light] footer::before {
	background:
		radial-gradient(ellipse 34% 110% at 68% 100%, oklch(76% .15 60 / .55), transparent 70%),
		radial-gradient(ellipse 50% 120% at 22% 100%, oklch(62% .16 310 / .3), transparent 72%);
}

/* ---------- Décor animé (calques créés par halloween.js) ------------------ */

.hw-sky {
	position: fixed;
	inset: 0;
	z-index: 45;
	overflow: hidden;
	pointer-events: none;
}
.hw-bat {
	position: absolute;
	top: 0;
	left: 0;
	color: oklch(22% .045 300);
	filter: drop-shadow(0 0 5px oklch(72% .18 55 / .45));
	will-change: transform;
}
.hw-bat svg { display: block; width: 100%; height: auto; overflow: visible; }

.hw-embers {
	position: fixed;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: screen;
}
html[data-theme=light] .hw-embers { mix-blend-mode: normal; opacity: .55; }

.hw-spider {
	position: absolute;
	top: var(--hw-bar-h);
	right: clamp(28px, 11vw, 190px);
	z-index: 44;
	width: 30px;
	pointer-events: none;
	animation: hw-spider-drop 2.6s cubic-bezier(.3, 1.35, .5, 1) 1.2s both;
}
.hw-spider__body {
	position: relative;
	animation: hw-spider-bob 7s ease-in-out 3.8s infinite;
	transform-origin: 50% -400px;
}
.hw-spider__body::before {
	content: "";
	position: absolute;
	bottom: calc(100% - 12px);
	left: 50%;
	width: 1px;
	height: 900px;
	background: linear-gradient(to top, oklch(92% .02 80 / .55), oklch(92% .02 80 / .15));
}
.hw-spider svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 6px oklch(75% .17 60 / .4)); }

.hw-fx {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	border: 1px solid var(--line-strong);
	background: var(--void-raised);
	color: var(--cobalt-bright);
	box-shadow: 0 8px 30px #00000040, 0 0 0 0 oklch(70% .19 52 / 0);
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, color .2s, transform .2s;
}
.hw-fx:hover { border-color: var(--cobalt-bright); box-shadow: 0 8px 30px #00000040, 0 0 18px oklch(70% .19 52 / .35); transform: translateY(-1px); }
.hw-fx__bat { width: 22px; height: 11px; background: currentColor; -webkit-mask: url(bat.svg) center / contain no-repeat; mask: url(bat.svg) center / contain no-repeat; }
.hw-fx[aria-pressed=false] { color: var(--silver-subtle); }
.hw-fx[aria-pressed=false]::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(-35deg);
}
.hw-fx__tip {
	position: absolute;
	left: calc(100% + .6rem);
	padding: .3rem .6rem;
	border-radius: .5rem;
	border: 1px solid var(--line-strong);
	background: var(--void-raised);
	color: var(--silver-muted);
	font-size: .75rem;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .15s, transform .15s;
	pointer-events: none;
}
.hw-fx:hover .hw-fx__tip, .hw-fx:focus-visible .hw-fx__tip { opacity: 1; transform: none; }

/* Pas d'araignée devant l'image d'une fiche produit */
html:has(.hero-glow img) .hw-spider { display: none; }

@media (max-width: 767px) {
	.hw-spider { display: none; }
	.hw-fx { left: .9rem; bottom: .9rem; width: 2.25rem; height: 2.25rem; }
}

/* ---------- Animations ------------------------------------------------------ */

@keyframes hw-sweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(400%); } }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .82; } 45% { opacity: 1; } 47% { opacity: .7; } 50% { opacity: 1; } }
@keyframes hw-moon { 0%, 100% { box-shadow: 0 0 50px 6px oklch(88% .1 78 / .26), 0 0 160px 50px oklch(70% .18 55 / .18); } 50% { box-shadow: 0 0 64px 10px oklch(88% .1 78 / .34), 0 0 190px 64px oklch(70% .18 55 / .24); } }
@keyframes hw-fog { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
@keyframes hw-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes hw-pulse { 0%, 100% { box-shadow: inset 0 1px 0 #ffffff59, 0 4px 16px #0005, 0 0 16px oklch(70% .19 52 / .3); } 50% { box-shadow: inset 0 1px 0 #ffffff59, 0 4px 16px #0005, 0 0 30px oklch(70% .19 52 / .6); } }
@keyframes hw-spider-drop { from { transform: translateY(-140px); } to { transform: translateY(150px); } }
@keyframes hw-spider-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	30% { transform: translateY(-46px) rotate(.4deg); }
	45% { transform: translateY(-46px) rotate(-.4deg); }
	70% { transform: translateY(8px) rotate(.2deg); }
}

/* Effets coupés : bouton chauve-souris ou « réduire les animations » */
html.hw-calm .hw-sky, html.hw-calm .hw-embers, html.hw-calm .hw-spider { display: none; }
html.hw-calm[data-event=halloween] :is(.hero-glow, .hero-glow *, .hw-bar, .hw-bar *, .ornaments span, [style*="background: var(--destructive)"])::after,
html.hw-calm[data-event=halloween] :is(.hero-glow, .hero-glow *, .hw-bar, .hw-bar *, .ornaments span, [style*="background: var(--destructive)"]),
html.hw-calm[data-event=halloween] .hero-glow::before { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	html[data-event=halloween] *,
	html[data-event=halloween] *::before,
	html[data-event=halloween] *::after { animation: none !important; }
	.hw-sky, .hw-embers { display: none; }
	.hw-spider { transform: translateY(150px); }
}