/**
 * Campaign skin: Halloween (`ta-campaign--halloween`).
 * Loaded after campaign.css by inc/campaign.php. Tokens first, then the
 * moon, bats and cobweb in the hero.
 */

:root {
	--ta-cp-bg: #0f0b13;
	--ta-cp-bg-2: #0b080f;
	--ta-cp-surface: #1a1421;
	--ta-cp-raised: #261d2f;
	--ta-cp-line: rgba(255, 236, 214, 0.08);
	--ta-cp-line-strong: rgba(255, 236, 214, 0.2);
	--ta-cp-heading: #fbf3ea;
	--ta-cp-text: #e1d6cb;
	--ta-cp-muted: #ab9fae;
	--ta-cp-accent: #ff7a1a;
	--ta-cp-accent-hover: #ff9442;
	--ta-cp-accent-text: #ff9d52;
	--ta-cp-on-accent: #1c0d02;
	--ta-cp-star: #ffb648;
	--ta-cp-glow-1: rgba(255, 122, 26, 0.26);
	--ta-cp-glow-2: rgba(139, 92, 246, 0.24);
	--ta-cp-accent-font: 'Creepster', var(--ta-cp-display);
}

/* Creepster runs narrow and low; give it room so it reads at display sizes. */
.ta-campaign--halloween .ta-cp-accent {
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* Hero: a rising moon, a few bats and a cobweb in the corner ------------- */

.ta-campaign--halloween.ta-cp-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='%23000'%3E%3Cpath d='M32 9c-1.2 0-2 1-2.3 2.4L28.6 9l-.6 3.4C25 10.6 20.4 11 17 14c.5-3 2.3-5.4 4.6-6.6C15.8 7 10.5 10 7.6 15c-1.4-1.6-4-2.2-7.6-1.6 4 1.8 6.2 5 6.6 9 2.6-2.6 6.4-3 9.6-1 .7-2.6 3-4.4 5.6-4.4 2.2 0 4.2 1.2 5.2 3.2C28.6 21.6 30 22 32 24c2-2 3.4-2.4 5-3.8 1-2 3-3.2 5.2-3.2 2.6 0 4.9 1.8 5.6 4.4 3.2-2 7-1.6 9.6 1 .4-4 2.6-7.2 6.6-9-3.6-.6-6.2 0-7.6 1.6C53.5 10 48.2 7 42.4 7.4 44.7 8.6 46.5 11 47 14c-3.4-3-8-3.4-11-1.6L35.4 9l-1.1 2.4C34 10 33.2 9 32 9z'/%3E%3C/svg%3E")
			no-repeat 85% 27% / 64px auto,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='%236b5a7c'%3E%3Cpath d='M32 9c-1.2 0-2 1-2.3 2.4L28.6 9l-.6 3.4C25 10.6 20.4 11 17 14c.5-3 2.3-5.4 4.6-6.6C15.8 7 10.5 10 7.6 15c-1.4-1.6-4-2.2-7.6-1.6 4 1.8 6.2 5 6.6 9 2.6-2.6 6.4-3 9.6-1 .7-2.6 3-4.4 5.6-4.4 2.2 0 4.2 1.2 5.2 3.2C28.6 21.6 30 22 32 24c2-2 3.4-2.4 5-3.8 1-2 3-3.2 5.2-3.2 2.6 0 4.9 1.8 5.6 4.4 3.2-2 7-1.6 9.6 1 .4-4 2.6-7.2 6.6-9-3.6-.6-6.2 0-7.6 1.6C53.5 10 48.2 7 42.4 7.4 44.7 8.6 46.5 11 47 14c-3.4-3-8-3.4-11-1.6L35.4 9l-1.1 2.4C34 10 33.2 9 32 9z'/%3E%3C/svg%3E")
			no-repeat 92% 22% / 38px auto,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='%23a08fb0'%3E%3Cpath d='M32 9c-1.2 0-2 1-2.3 2.4L28.6 9l-.6 3.4C25 10.6 20.4 11 17 14c.5-3 2.3-5.4 4.6-6.6C15.8 7 10.5 10 7.6 15c-1.4-1.6-4-2.2-7.6-1.6 4 1.8 6.2 5 6.6 9 2.6-2.6 6.4-3 9.6-1 .7-2.6 3-4.4 5.6-4.4 2.2 0 4.2 1.2 5.2 3.2C28.6 21.6 30 22 32 24c2-2 3.4-2.4 5-3.8 1-2 3-3.2 5.2-3.2 2.6 0 4.9 1.8 5.6 4.4 3.2-2 7-1.6 9.6 1 .4-4 2.6-7.2 6.6-9-3.6-.6-6.2 0-7.6 1.6C53.5 10 48.2 7 42.4 7.4 44.7 8.6 46.5 11 47 14c-3.4-3-8-3.4-11-1.6L35.4 9l-1.1 2.4C34 10 33.2 9 32 9z'/%3E%3C/svg%3E")
			no-repeat 12% 58% / 34px auto,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 0L200 60M0 0L150 150M0 0L60 200M0 0L200 0M0 0L0 200'/%3E%3Cpath d='M40 0Q36 14 48 14Q38 30 30 30Q30 40 12 36Q14 44 0 40'/%3E%3Cpath d='M90 0Q80 30 105 31Q86 62 66 66Q66 86 26 92Q30 104 0 90'/%3E%3Cpath d='M145 0Q128 46 160 48Q130 94 104 104Q100 132 42 140Q46 160 0 142'/%3E%3C/svg%3E")
			no-repeat left top / 240px auto,
		radial-gradient(circle at 86% 26%, #ffe8c4 0 64px, rgba(255, 196, 120, 0.35) 66px, rgba(255, 140, 50, 0.12) 120px, transparent 220px);
	pointer-events: none;
}

@media (max-width: 1024px) {
	.ta-campaign--halloween.ta-cp-hero::after {
		background-size: 48px auto, 30px auto, 28px auto, 160px auto, auto;
		opacity: 0.55;
	}
}

/* On phones the headline fills the width, so the moon would sit behind it. */
@media (max-width: 767px) {
	.ta-campaign--halloween.ta-cp-hero::after {
		display: none;
	}
}

/* Bats drift a little; the moon and web stay put. */
@media (prefers-reduced-motion: no-preference) {
	.ta-campaign--halloween.ta-cp-hero::after {
		animation: ta-cp-hw-drift 9s ease-in-out infinite alternate;
	}

	@keyframes ta-cp-hw-drift {
		to {
			background-position: 84% 25%, 94% 19%, 13% 54%, left top, 0 0;
		}
	}
}

/* Orange promo bar: the countdown pills read better dark-on-orange. */
.ta-campaign--halloween.ta-cp-promo .ta-cp-countdown > span:not(.ta-cp-countdown__label) {
	background: rgba(28, 13, 2, 0.85);
	color: #ffd9b8;
}

/* Deal badges get a little glow, like a lit pumpkin. */
.ta-campaign--halloween .ta-cp-deal__badge {
	box-shadow: 0 0 18px -2px rgba(255, 122, 26, 0.55);
}