/* Halloween theme. Everything is scoped to html.halloween, which
   /js/halloween.js only adds during the seasonal window, so this file is
   inert the rest of the year. */

html.halloween {
	--bg: #08040d;
	--bg-soft: #0c0612;
	--panel: #120a1a;
	--panel-hi: #1a0f25;
	--panel-lo: #0e0715;
	--line: rgba(255, 150, 50, 0.12);
	--line-hi: rgba(255, 150, 50, 0.28);
	--text: #f6efe8;
	--text-mid: #b3a3a8;
	--text-dim: #7f6f7e;
	--orange: #ff8a1f;
	--violet: #b78bff;
	--hw-orange: #ff7a00;
	--hw-glow: rgba(255, 122, 0, 0.35);
}
html.halloween body {
	background:
		radial-gradient(900px 500px at 85% -10%, rgba(255, 122, 0, 0.14), transparent 60%),
		radial-gradient(800px 500px at 0% 0%, rgba(140, 70, 220, 0.16), transparent 60%),
		var(--bg);
}
html.halloween .btn.primary {
	background: var(--hw-orange);
	border-color: var(--hw-orange);
	color: #140800;
	box-shadow: 0 0 22px -4px var(--hw-glow);
}
html.halloween .btn.primary:hover {
	background: #ff9a2e;
	border-color: #ff9a2e;
}
html.halloween .eyebrow {
	color: var(--hw-orange);
}
html.halloween .nav a.active,
html.halloween .nav a:hover {
	color: var(--hw-orange);
}
html.halloween .plan.featured {
	border-color: var(--hw-orange);
	box-shadow: 0 0 40px -12px var(--hw-glow);
}
html.halloween .brand span:last-child {
	text-shadow: 0 0 14px var(--hw-glow);
}

/* ---------- decoration ---------- */
.hw-deco {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}
.hw-fog {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -40px;
	height: 220px;
	background: radial-gradient(60% 100% at 30% 100%, rgba(150, 90, 220, 0.18), transparent 70%),
		radial-gradient(50% 100% at 75% 100%, rgba(255, 122, 0, 0.12), transparent 70%);
	filter: blur(14px);
	animation: hw-drift 14s ease-in-out infinite alternate;
}
.hw-web {
	position: absolute;
	top: var(--nav-h, 64px);
	left: 0;
	width: 130px;
	height: 130px;
	color: rgba(255, 255, 255, 0.16);
}
.hw-bat {
	position: absolute;
	top: calc(8% + var(--i) * 13%);
	left: -60px;
	font-size: 22px;
	opacity: 0.55;
	filter: grayscale(1) brightness(0.7);
	animation: hw-fly calc(22s + var(--i) * 6s) linear infinite;
	animation-delay: calc(var(--i) * -9s);
}
@keyframes hw-fly {
	0% { transform: translate(0, 0) scale(0.8); }
	25% { transform: translate(30vw, -30px) scale(1); }
	50% { transform: translate(60vw, 24px) scale(0.9); }
	75% { transform: translate(90vw, -20px) scale(1); }
	100% { transform: translate(120vw, 10px) scale(0.8); }
}
@keyframes hw-drift {
	from { transform: translateX(-3%); }
	to { transform: translateX(3%); }
}

/* ---------- promo banner ---------- */
.hw-promo {
	margin-top: 8px;
	margin-bottom: -8px;
	position: relative;
	z-index: 2;
}
.hw-promo-in {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: var(--r-lg, 16px);
	border: 1px solid var(--hw-orange);
	background: linear-gradient(100deg, rgba(255, 122, 0, 0.18), rgba(140, 70, 220, 0.16));
	box-shadow: 0 0 40px -14px var(--hw-glow);
}
.hw-promo-ico {
	font-size: 34px;
	line-height: 1;
	animation: hw-bob 2.4s ease-in-out infinite;
}
.hw-promo-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.hw-promo-txt b {
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}
.hw-promo-txt span {
	color: var(--text-mid);
	font-size: 0.9rem;
}
.hw-promo code {
	font-family: var(--mono);
	font-weight: 600;
	color: #ffb25c;
	background: rgba(0, 0, 0, 0.45);
	border: 1px dashed var(--hw-orange);
	padding: 2px 8px;
	border-radius: 6px;
}
@keyframes hw-bob {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-4px) rotate(4deg); }
}
@media (max-width: 640px) {
	.hw-promo-in {
		flex-wrap: wrap;
	}
	.hw-copy {
		width: 100%;
	}
	.hw-web {
		width: 90px;
		height: 90px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hw-bat,
	.hw-fog,
	.hw-promo-ico {
		animation: none;
	}
	.hw-bat {
		display: none;
	}
}