/* Promo banner
   Seasonal bar under the header: icon, serif campaign name, offer text and a
   copyable code chip. Each theme only sets the custom properties below. */

.se-promo {
	--promo-bg: #031634;
	--promo-fg: #fff;
	--promo-title: #E3CC9C;
	--promo-icon: #CCB27F;
	--promo-icon-alt: #E3CC9C;
	--promo-dot: #CCB27F;
	--promo-chip-bg: #CCB27F;
	--promo-chip-fg: #031634;
	--promo-chip-hover: #E3CC9C;
	--promo-border: rgba(204, 178, 127, .6);
	--promo-focus: #fff;
	--promo-shine: rgba(255, 255, 255, .65);
	--promo-ring: var(--promo-chip-bg);

	position: relative;
	color: var(--promo-fg);
	background: var(--promo-bg);
	border-top: 1px solid var(--promo-border);
}

/* Night sky: midnight gradient, scattered stars, gold crescent */
.se-promo--night {
	--promo-bg:
		radial-gradient(1px 1px at 8% 30%, #fff, transparent),
		radial-gradient(1px 1px at 17% 72%, rgba(255, 255, 255, .7), transparent),
		radial-gradient(1.5px 1.5px at 29% 22%, #f3e6c8, transparent),
		radial-gradient(1px 1px at 41% 80%, rgba(255, 255, 255, .6), transparent),
		radial-gradient(1px 1px at 58% 18%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 71% 66%, #f3e6c8, transparent),
		radial-gradient(1px 1px at 83% 28%, rgba(255, 255, 255, .8), transparent),
		radial-gradient(1px 1px at 94% 74%, #fff, transparent),
		linear-gradient(100deg, #01081a 0%, #031634 55%, #0a2550 100%);
}

/* Spring bloom: pale sage with drifting blossom, navy text */
.se-promo--spring {
	--promo-bg:
		radial-gradient(3px 2px at 6% 28%, rgba(226, 158, 172, .75), transparent),
		radial-gradient(2px 3px at 14% 76%, rgba(255, 255, 255, .95), transparent),
		radial-gradient(3px 2px at 24% 40%, rgba(255, 255, 255, .9), transparent),
		radial-gradient(2px 3px at 37% 18%, rgba(226, 158, 172, .6), transparent),
		radial-gradient(3px 2px at 63% 82%, rgba(226, 158, 172, .7), transparent),
		radial-gradient(2px 3px at 76% 24%, rgba(255, 255, 255, .95), transparent),
		radial-gradient(3px 2px at 88% 62%, rgba(226, 158, 172, .65), transparent),
		radial-gradient(2px 3px at 96% 30%, rgba(255, 255, 255, .9), transparent),
		linear-gradient(100deg, #f4f7f0 0%, #ecf2e8 55%, #e6efe1 100%);
	--promo-fg: #031634;
	--promo-title: #2e5a43;
	--promo-icon: #e2a3b0;
	--promo-icon-alt: #CCB27F;
	--promo-dot: #d48a98;
	--promo-chip-bg: #031634;
	--promo-chip-fg: #E3CC9C;
	--promo-chip-hover: #0a2550;
	--promo-border: #cddcc5;
	--promo-focus: #031634;
	--promo-shine: rgba(255, 255, 255, .3);
	--promo-ring: var(--promo-icon);
}

/* Summer sun: warm sand-to-apricot with a low sun glow, navy text */
.se-promo--summer {
	--promo-bg:
		radial-gradient(40% 220% at 4% 50%, rgba(255, 249, 232, .9), transparent 70%),
		linear-gradient(100deg, #fcebc8 0%, #f6d79d 55%, #efc283 100%);
	--promo-fg: #031634;
	--promo-title: #6a3a0c;
	--promo-icon: #c26a1c;
	--promo-icon-alt: #c26a1c;
	--promo-dot: #c26a1c;
	--promo-chip-bg: #031634;
	--promo-chip-fg: #E3CC9C;
	--promo-chip-hover: #0a2550;
	--promo-border: #e8c07a;
	--promo-focus: #031634;
	--promo-shine: rgba(255, 255, 255, .3);
	--promo-ring: var(--promo-icon);
}

/* Christmas: deep evergreen, falling snow, gold star, cranberry accent */
.se-promo--christmas {
	--promo-bg:
		radial-gradient(1.5px 1.5px at 5% 24%, #fff, transparent),
		radial-gradient(2px 2px at 12% 70%, rgba(255, 255, 255, .8), transparent),
		radial-gradient(1px 1px at 21% 38%, #fff, transparent),
		radial-gradient(2px 2px at 33% 84%, rgba(255, 255, 255, .7), transparent),
		radial-gradient(1.5px 1.5px at 46% 14%, #fff, transparent),
		radial-gradient(1px 1px at 55% 76%, rgba(255, 255, 255, .8), transparent),
		radial-gradient(2px 2px at 67% 30%, rgba(255, 255, 255, .75), transparent),
		radial-gradient(1.5px 1.5px at 79% 80%, #fff, transparent),
		radial-gradient(1px 1px at 88% 20%, #fff, transparent),
		radial-gradient(2px 2px at 96% 58%, rgba(255, 255, 255, .8), transparent),
		linear-gradient(100deg, #072419 0%, #0e3a2b 55%, #134a37 100%);
	--promo-dot: #d0566a;
}

/* New Year dawn: night turning to first light, gold sparkles */
.se-promo--newyear {
	--promo-bg:
		radial-gradient(1.5px 1.5px at 9% 26%, #f3e6c8, transparent),
		radial-gradient(1px 1px at 19% 74%, #fff, transparent),
		radial-gradient(2px 2px at 34% 20%, rgba(227, 204, 156, .9), transparent),
		radial-gradient(1px 1px at 52% 82%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 66% 16%, #f3e6c8, transparent),
		radial-gradient(70% 180% at 100% 100%, rgba(232, 160, 120, .35), transparent 70%),
		linear-gradient(100deg, #031634 0%, #22204a 55%, #3d2a55 100%);
	--promo-icon-alt: #f3c9a8;
}

.se-promo [hidden] {
	display: none !important;
}

.se-promo__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 16px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 13px 20px;
	text-align: center;
}

.se-promo__icon {
	flex: none;
	width: 22px;
	height: 22px;
	fill: var(--promo-icon);
}

.se-promo__icon .se-promo__icon-alt {
	fill: var(--promo-icon-alt);
}

.se-promo__icon .se-promo__icon-rays {
	fill: none;
	stroke: var(--promo-icon);
}

.se-promo__title {
	font-family: 'Baskervville', Georgia, serif;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--promo-title);
}

.se-promo__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--promo-dot);
}

.se-promo .se-promo__text {
	margin: 0;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--promo-fg);
}

.se-promo .se-promo__text a {
	color: var(--promo-title);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Code button
   The button carries the entrance, hover lift, press and spark burst. The face
   inside it is the visible chip: it pops and rings when the code is copied, and
   clips the hover shine and the roll between "code" and "Code copied". */

.se-promo .se-promo__code {
	position: relative;
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--promo-chip-fg);
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s ease;
	animation: se-promo-rise .6s cubic-bezier(.2, .7, .2, 1) .4s backwards;
}

.se-promo .se-promo__code:hover,
.se-promo .se-promo__code:focus {
	background: none;
	color: var(--promo-chip-fg);
}

.se-promo .se-promo__code:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}

.se-promo .se-promo__code:active {
	transform: scale(.9);
	box-shadow: none;
	transition-duration: .08s;
}

.se-promo .se-promo__code:focus-visible {
	outline: 2px solid var(--promo-focus);
	outline-offset: 2px;
}

.se-promo__code.is-copied .se-promo__code-face {
	background: var(--promo-chip-hover);
	animation: se-promo-pop .55s cubic-bezier(.3, 1.5, .5, 1), se-promo-ring .7s ease-out;
}

/* Sparks: a ring of dots that flies outward when the code is copied. */
.se-promo__code::before {
	content: '';
	position: absolute;
	inset: -16px -22px;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(circle 4px at 4px 50%, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 4px at calc(100% - 4px) 50%, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 3px at 12% 8%, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 4px at 34% 4px, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 3px at 66% 4px, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 3px at 88% 8%, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 3px at 12% 92%, var(--promo-icon) 96%, transparent),
		radial-gradient(circle 3px at 34% calc(100% - 4px), var(--promo-icon) 96%, transparent),
		radial-gradient(circle 4px at 66% calc(100% - 4px), var(--promo-icon) 96%, transparent),
		radial-gradient(circle 3px at 88% 92%, var(--promo-icon) 96%, transparent);
}

.se-promo__code.is-copied::before {
	animation: se-promo-burst .65s ease-out;
}

.se-promo__code-face {
	position: relative;
	display: grid;
	overflow: hidden;
	padding: 6px 12px;
	background: var(--promo-chip-bg);
	transition: background-color .2s ease;
}

/* Both states sit in the same cell; the wider one sets the button width. */
.se-promo__code-default,
.se-promo__code-done {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), opacity .25s ease;
}

.se-promo__code-done {
	opacity: 0;
	transform: translateY(120%);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.se-promo__code.is-copied .se-promo__code-default {
	opacity: 0;
	transform: translateY(-120%);
}

.se-promo__code.is-copied .se-promo__code-done {
	opacity: 1;
	transform: none;
}

.se-promo__code-tick {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
}

.se-promo__code.is-copied .se-promo__code-tick {
	animation: se-promo-tick .35s ease-out .15s forwards;
}

/* Shine: a soft band of light that sweeps across the face. It runs once
   after the banner has settled, then again on every hover. */
.se-promo__code-face::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 55%;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 15%, var(--promo-shine) 50%, transparent 85%);
	transform: translateX(-130%);
	animation: se-promo-shine .9s ease-in-out 1.3s;
}

.se-promo__code:hover .se-promo__code-face::after {
	animation: se-promo-shine-hover .75s ease-in-out;
}

.se-promo__code-value {
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.se-promo__code-hint {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

/* Entrance: the banner's contents rise into place one after another. */
.se-promo__inner > * {
	animation: se-promo-rise .6s cubic-bezier(.2, .7, .2, 1) var(--promo-delay, 0s) backwards;
}

.se-promo__inner > .se-promo__icon {
	animation: se-promo-swing .8s cubic-bezier(.3, 1.4, .5, 1) .05s backwards;
}

.se-promo__inner > .se-promo__title { --promo-delay: .12s; }
.se-promo__inner > .se-promo__dot { --promo-delay: .2s; }
.se-promo__inner > .se-promo__text { --promo-delay: .26s; }

/* Already seen this session (flag set in <head>): show the banner at rest.
   Hover shine and the copy effect still play. */
.se-promo-seen .se-promo__inner > *,
.se-promo-seen .se-promo__inner > .se-promo__icon,
.se-promo-seen .se-promo .se-promo__code,
.se-promo-seen .se-promo__code-face::after {
	animation: none;
}

@keyframes se-promo-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes se-promo-swing {
	from {
		opacity: 0;
		transform: rotate(-50deg) scale(.4);
	}
}

@keyframes se-promo-shine {
	from { transform: translateX(-130%); }
	to { transform: translateX(240%); }
}

/* Same as se-promo-shine; a second name lets hover restart the sweep. */
@keyframes se-promo-shine-hover {
	from { transform: translateX(-130%); }
	to { transform: translateX(240%); }
}

@keyframes se-promo-pop {
	0% { transform: scale(.88); }
	45% { transform: scale(1.14); }
	70% { transform: scale(.97); }
	100% { transform: scale(1); }
}

@keyframes se-promo-ring {
	from { box-shadow: 0 0 0 0 var(--promo-ring); }
	to { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
}

@keyframes se-promo-burst {
	0% {
		opacity: 1;
		transform: scale(.55);
	}
	100% {
		opacity: 0;
		transform: scale(1.25);
	}
}

@keyframes se-promo-tick {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.se-promo__inner > *,
	.se-promo__inner > .se-promo__icon,
	.se-promo .se-promo__code,
	.se-promo__code.is-copied .se-promo__code-face,
	.se-promo__code.is-copied::before,
	.se-promo__code-face::after,
	.se-promo__code:hover .se-promo__code-face::after {
		animation: none;
	}

	.se-promo .se-promo__code:hover,
	.se-promo .se-promo__code:active {
		transform: none;
	}

	.se-promo__code-default,
	.se-promo__code-done,
	.se-promo__code.is-copied .se-promo__code-default {
		transform: none;
	}

	.se-promo__code-tick {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 768px) {
	.se-promo__inner {
		gap: 6px 12px;
		padding: 11px 16px;
	}

	.se-promo__dot {
		display: none;
	}

	.se-promo__title {
		font-size: 19px;
	}

	.se-promo .se-promo__text {
		font-size: 14px;
	}
}