/* Nov 2026 promo ($10 Takes it Home) — hero styles.
   Numbers from the Figma hero frames (desktop 1920×914, mobile 390×796, NAV excluded):
   figma/assets-hero.json, figma/structure-hero.json, figma/facts-hero(-m).json.
   The stage is sized to the green band (705px desktop / 627px mobile); the coins and the
   mascot hang past its bottom with overflow:visible, same as the Figma art. */

#nov-promo {
	text-align: center;
}

#nov-promo .nov-stage {
	position: relative;
	display: grid;
	container-type: inline-size;
	overflow: visible;
}

#nov-promo .nov-back-pic,
#nov-promo .nov-circle-pic,
#nov-promo .nov-coins-pic,
#nov-promo .nov-reindeer-pic {
	display: contents;
}

#nov-promo .nov-back {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto;
}

/* --- art: always behind the copy group on desktop --- */
#nov-promo .nov-circle {
	position: absolute;
	z-index: 1;
	left: 26.875cqw;
	top: -0.052cqw;
	width: 46.25cqw;
	height: auto;
	pointer-events: none;
}

#nov-promo .nov-reindeer {
	position: absolute;
	z-index: 1;
	left: 17.865cqw;
	top: 10.625cqw;
	width: 14.792cqw;
	height: auto;
	pointer-events: none;
}

/* --- the front-coin animation (ticket: "front coin animation") --- */
#nov-promo .nov-anim-coin {
	position: absolute;
	z-index: 1;
	height: auto;
	pointer-events: none;
	will-change: rotate;
}

#nov-promo .nov-anim-coins          { left: 18.827cqw; top: 28.732cqw; width: 19.792cqw; transform-origin: 50.008% 50.099%; animation: nov-coins-rotate 2.000827s linear infinite; }
#nov-promo .nov-anim-coins-x        { left: 7.961cqw;  top: -10.451cqw; width: 24.01cqw;  transform-origin: 49.922% 50.039%; animation: nov-coins-x-rotate 2.000827s linear infinite; }
#nov-promo .nov-anim-coins-x-x      { left: 68.646cqw; top: 23.736cqw; width: 15.26cqw;  transform-origin: 50% 49.926%;     animation: nov-coins-x-x-rotate 2.000827s linear infinite; }
#nov-promo .nov-anim-coins-x-x-x    { left: 45.542cqw; top: -9.188cqw; width: 10.313cqw; transform-origin: 50.051% 50.128%; animation: nov-coins-x-x-x-rotate 2.000827s linear infinite; }
#nov-promo .nov-anim-coins-x-x-x-x  { left: 15.573cqw; top: 25.833cqw; width: 10.729cqw; transform-origin: 50.243% 50%;     animation: nov-coins-x-x-x-x-rotate 2.000827s linear infinite; }
#nov-promo .nov-anim-coins-x-x-x-x-x   { left: 59.896cqw; top: 30.989cqw; width: 6.771cqw; transform-origin: 49.608% 50.007%; animation: nov-coins-x-x-x-x-x-rotate 2.000827s linear infinite; }
#nov-promo .nov-anim-coins-x-x-x-x-x-x { left: 70.261cqw; top: -2.444cqw; width: 12.5cqw;  transform-origin: 49.992% 49.944%; animation: nov-coins-x-x-x-x-x-x-rotate 2.000827s linear infinite; }

@keyframes nov-coins-rotate {
	0% { rotate: 0rad; }
	20.237% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	37.325% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.157rad; }
	50.472% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
	72.216% { rotate: 0rad; }
	100% { rotate: 0rad; }
}
@keyframes nov-coins-x-rotate {
	0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	16.343% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.087rad; }
	29.588% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.105rad; }
	54.272% { rotate: 0rad; }
	100% { rotate: 0rad; }
}
@keyframes nov-coins-x-x-rotate {
	0% { rotate: 0rad; }
	10.981% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	28.173% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.192rad; }
	41.32% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
	65.253% { rotate: 0rad; }
	100% { rotate: 0rad; }
}
@keyframes nov-coins-x-x-x-rotate {
	0% { rotate: 0rad; }
	7.655% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	24.846% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.192rad; }
	37.993% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
	61.926% { rotate: 0rad; }
	100% { rotate: 0rad; }
}
@keyframes nov-coins-x-x-x-x-rotate {
	0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	17.192% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.192rad; }
	30.338% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
	54.272% { rotate: 0rad; }
	100% { rotate: 0rad; }
}
@keyframes nov-coins-x-x-x-x-x-rotate {
	0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	16.343% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.087rad; }
	31.287% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.07rad; }
	54.272% { rotate: 0rad; }
	100% { rotate: 0rad; }
}
@keyframes nov-coins-x-x-x-x-x-x-rotate {
	0% { rotate: 0rad; }
	17.192% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
	35.402% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.087rad; }
	48.247% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.122rad; }
	71.464% { rotate: 0rad; }
	100% { rotate: 0rad; }
}

#nov-promo .nov-stage.nov-anim-paused .nov-anim { animation-play-state: paused; }

/* --- the copy column: one flex column, Figma's own gaps, centred in the stage --- */
#nov-promo .nov-group {
	grid-area: 1 / 1;
	z-index: 2;
	justify-self: center;
	align-self: start;
	margin-top: 9.01cqw;
	width: 38.906cqw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#nov-promo .nov-l1,
#nov-promo .nov-l2,
#nov-promo .nov-l3,
#nov-promo .nov-l4 { white-space: nowrap; }
#nov-promo .nov-l1 { margin: 0; }
#nov-promo .nov-l2 { display: block; margin: -1.198cqw 0 0; transform-origin: 50% 50%; }
#nov-promo .nov-l3 { margin: 0.365cqw 0 0; }
#nov-promo .nov-l4 { margin: 0.3125cqw 0 0; }
#nov-promo .nov-cta { margin-top: 1.146cqw; }

/* live text (figma-facts.mjs --text-css) */
#nov-promo [data-figma~="5:44"] {
	font-family: "r41-etoile", cursive;
	font-size: max(16px, 4.531cqw);
	line-height: 1.12;
	color: #fdf7f1;
	text-transform: uppercase;
	-webkit-text-stroke: max(1px, 0.33cqw) #084f2b;
	paint-order: stroke fill;
	filter: drop-shadow(0.412cqw 0.577cqw 0 #084f2b);
}
#nov-promo [data-figma~="1:5239"] {
	font-family: "r41-etoile", cursive;
	font-size: max(14px, 2.292cqw);
	/* Figma's own text box is 49px tall at a 44px font (structure-hero.json), tighter
	   than the font's nominal 1.32 line height; the extra leading was pushing every
	   element below it (and the CTA) down by ~12px. */
	line-height: 1.1136;
	color: #084f2b;
	-webkit-text-stroke: max(1px, 0.313cqw) #fdf7f1;
	paint-order: stroke fill;
}
#nov-promo [data-figma~="6:116"] {
	font-family: "r41-etoile", cursive;
	font-size: max(10px, 1.146cqw);
	/* Same fix: Figma's box is 27px tall at a 22px font, not the nominal 1.318. */
	line-height: 1.2273;
	color: #084f2b;
	-webkit-text-stroke: max(1px, 0.208cqw) #fdf7f1;
	paint-order: stroke fill;
}

/* the animated headline ("10 Bucks!"): live text, real font, Figma's own jitter keyframes */
#nov-promo [data-figma~="5:45"] {
	font-family: "r41-etoile", cursive;
	font-size: max(28px, 9.219cqw);
	line-height: 1.12;
	color: #fdf7f1;
	text-transform: uppercase;
	-webkit-text-stroke: max(1px, 0.33cqw) #084f2b;
	paint-order: stroke fill;
	filter: drop-shadow(0.412cqw 0.577cqw 0 #084f2b);
}
#nov-promo .nov-l2 {
	pointer-events: none;
	animation: nov-txt-spooky-savings-translate 2.000827s linear infinite;
}
@keyframes nov-txt-spooky-savings-translate {
	0% { translate: 0% 0%; }
	27.894% { translate: 0% 0%; }
	32.393% { translate: -0.433% 0.704%; }
	36.391% { translate: 0.577% -0.704%; }
	39.89% { translate: -0.866% 1.408%; }
	42.888% { translate: 1.01% -1.408%; }
	45.887% { translate: -1.299% 2.113%; }
	48.886% { translate: 1.443% -2.113%; }
	51.385% { translate: -1.732% 2.113%; }
	53.884% { translate: 1.732% -2.817%; }
	56.383% { translate: -2.02% 2.817%; }
	58.882% { translate: 2.02% -2.817%; }
	61.381% { translate: -1.299% 1.408%; }
	63.88% { translate: 0% 0%; }
	100% { translate: 0% 0%; }
}

/* CTA (get_design_context on the Figma CTA instance: fill, radius, font, padding) */
#nov-promo .nov-cta {
	background: #084f2b;
	color: #fdf7f1;
	border-radius: max(22px, 2.8125cqw);
	font-size: max(14px, 1.0417cqw);
	padding: max(7px, 0.46875cqw) max(18px, 1.5625cqw);
	cursor: pointer;
}

/* --- mobile (390-wide frame): its own measurements, not the desktop ones scaled --- */
@media (max-width: 767px) {
	#nov-promo .nov-circle { display: none; }

	#nov-promo .nov-reindeer {
		z-index: 3; /* Figma paints the mascot in front of the copy on this frame */
		left: 1.282cqw;
		top: 84.615cqw;
		width: 39.744cqw;
	}

	#nov-promo .nov-anim-coins,
	#nov-promo .nov-anim-coins-x,
	#nov-promo .nov-anim-coins-x-x,
	#nov-promo .nov-anim-coins-x-x-x,
	#nov-promo .nov-anim-coins-x-x-x-x {
		z-index: 3; /* likewise: in front, on this frame */
	}
	#nov-promo .nov-anim-coins          { left: 73.515cqw; top: 86.982cqw; width: 34.872cqw; transform-origin: 50.059% 49.927%; animation: nov-coins-m-rotate 3s linear infinite; }
	#nov-promo .nov-anim-coins-x        { left: 41.582cqw; top: -23.649cqw; width: 23.846cqw; transform-origin: 49.72% 50.103%; animation: nov-coins-x-m-rotate 3s linear infinite; }
	#nov-promo .nov-anim-coins-x-x      { left: -18.885cqw; top: 71.228cqw; width: 24.872cqw; transform-origin: 50.309% 49.562%; animation: nov-coins-x-x-m-rotate 3s linear infinite; }
	#nov-promo .nov-anim-coins-x-x-x    { left: 56.218cqw; top: 100.877cqw; width: 15.641cqw; transform-origin: 49.623% 49.565%; animation: nov-coins-x-x-x-m-rotate 3s linear infinite; }
	#nov-promo .nov-anim-coins-x-x-x-x  { left: 92.567cqw; top: 7.044cqw; width: 28.718cqw; transform-origin: 49.866% 49.305%; animation: nov-coins-x-x-x-x-m-rotate 3s linear infinite; }
	#nov-promo .nov-anim-coins-x-x-x-x-x,
	#nov-promo .nov-anim-coins-x-x-x-x-x-x { display: none; } /* desktop-only coins: the <picture> source also swaps to a 1x1 gif, so nothing downloads */

	@keyframes nov-coins-m-rotate {
		0% { rotate: 0rad; }
		7.324% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
		18.79% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.192rad; }
		27.558% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
		43.52% { rotate: 0rad; }
		100% { rotate: 0rad; }
	}
	@keyframes nov-coins-x-m-rotate {
		0% { rotate: 0rad; }
		5.105% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
		16.571% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.192rad; }
		25.339% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
		41.301% { rotate: 0rad; }
		100% { rotate: 0rad; }
	}
	@keyframes nov-coins-x-x-m-rotate {
		0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
		11.466% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.192rad; }
		20.234% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.07rad; }
		36.196% { rotate: 0rad; }
		100% { rotate: 0rad; }
	}
	@keyframes nov-coins-x-x-x-m-rotate {
		0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
		10.9% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.087rad; }
		20.867% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.07rad; }
		36.196% { rotate: 0rad; }
		100% { rotate: 0rad; }
	}
	@keyframes nov-coins-x-x-x-x-m-rotate {
		0% { rotate: 0rad; }
		11.466% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; }
		23.611% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.087rad; }
		32.178% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.122rad; }
		47.662% { rotate: 0rad; }
		100% { rotate: 0rad; }
	}

	#nov-promo .nov-group {
		margin-top: 23.014cqw;
		width: 99.867cqw;
	}
	#nov-promo .nov-l2 { margin-top: -2.923cqw; }
	#nov-promo .nov-l3 { margin: 1.462cqw 0 0; }
	#nov-promo .nov-l4 { margin: 2.59cqw 0 0; }
	#nov-promo .nov-cta {
		margin-top: 6.359cqw;
		color: #ffffff; /* the mobile CTA instance is white text, not cream */
		border-radius: max(22px, 13.846cqw);
		font-size: max(14px, 5.128cqw);
		padding: max(7px, 2.308cqw) max(18px, 7.692cqw);
	}

	#nov-promo [data-figma~="5:44"] {
		font-size: max(16px, 10.721cqw);
		-webkit-text-stroke: max(1px, 0.781cqw) #084f2b;
		filter: drop-shadow(0.976cqw 1.366cqw 0 #084f2b);
	}
	#nov-promo [data-figma~="1:5239"] {
		font-size: max(14px, 7.856cqw);
		-webkit-text-stroke: max(1px, 1.071cqw) #fdf7f1;
	}
	#nov-promo [data-figma~="6:116"] {
		font-size: max(10px, 4.796cqw);
		-webkit-text-stroke: max(1px, 0.872cqw) #fdf7f1;
	}

	#nov-promo [data-figma~="5:45"] {
		font-size: max(28px, 21.811cqw);
		-webkit-text-stroke: max(1px, 0.781cqw) #084f2b;
		filter: drop-shadow(0.976cqw 1.366cqw 0 #084f2b);
	}
	#nov-promo .nov-l2 {
		animation: nov-txt-spooky-savings-m-translate 3s linear infinite;
	}
	@keyframes nov-txt-spooky-savings-m-translate {
		0% { translate: 0% 0%; }
		18.604% { translate: 0% 0%; }
		21.604% { translate: -0.43% 0.687%; }
		24.271% { translate: 0.574% -0.687%; }
		26.604% { translate: -0.861% 1.373%; }
		28.604% { translate: 1.004% -1.373%; }
		30.604% { translate: -1.291% 2.06%; }
		32.604% { translate: 1.435% -2.06%; }
		34.271% { translate: -1.721% 2.06%; }
		35.937% { translate: 1.721% -2.746%; }
		37.604% { translate: -2.008% 2.746%; }
		39.271% { translate: 2.008% -2.746%; }
		40.937% { translate: -1.291% 1.373%; }
		42.604% { translate: 0% 0%; }
		100% { translate: 0% 0%; }
	}
}

/* "10 Bucks!" letters (5:45 / 27:82 text animation): after the jitter each character bursts out
   in a fixed shuffle of Figma's random order, 47.561ms apart, 317.073ms each: 110px up, 55deg,
   280%, 10px blur, fading out; they come back when the loop restarts. */
#nov-promo .nov-l2 { --nov-burst-y: -5.729cqw; --nov-burst-blur: 0.521cqw; }
#nov-promo .nov-ch { display: inline-block; animation-duration: 2.000827s; animation-timing-function: linear; animation-iteration-count: infinite; }
#nov-promo .nov-ch-1 { animation-name: nov-burst-5; }
#nov-promo .nov-ch-2 { animation-name: nov-burst-2; }
#nov-promo .nov-ch-3 { animation-name: nov-burst-7; }
#nov-promo .nov-ch-4 { animation-name: nov-burst-0; }
#nov-promo .nov-ch-5 { animation-name: nov-burst-3; }
#nov-promo .nov-ch-6 { animation-name: nov-burst-6; }
#nov-promo .nov-ch-7 { animation-name: nov-burst-1; }
#nov-promo .nov-ch-8 { animation-name: nov-burst-4; }
@keyframes nov-burst-0 {
	0%, 63.880% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	79.727%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-1 {
	0%, 66.257% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	82.104%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-2 {
	0%, 68.634% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	84.481%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-3 {
	0%, 71.011% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	86.858%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-4 {
	0%, 73.388% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	89.235%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-5 {
	0%, 75.765% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	91.612%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-6 {
	0%, 78.142% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	93.989%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-7 {
	0%, 80.519% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	96.366%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@media (max-width: 767px) {
	#nov-promo .nov-l2 { --nov-burst-y: -28.205cqw; --nov-burst-blur: 2.564cqw; }
	#nov-promo .nov-ch { animation-duration: 3s; }
	#nov-promo .nov-ch-1 { animation-name: nov-burst-m-5; }
	#nov-promo .nov-ch-2 { animation-name: nov-burst-m-2; }
	#nov-promo .nov-ch-3 { animation-name: nov-burst-m-7; }
	#nov-promo .nov-ch-4 { animation-name: nov-burst-m-0; }
	#nov-promo .nov-ch-5 { animation-name: nov-burst-m-3; }
	#nov-promo .nov-ch-6 { animation-name: nov-burst-m-6; }
	#nov-promo .nov-ch-7 { animation-name: nov-burst-m-1; }
	#nov-promo .nov-ch-8 { animation-name: nov-burst-m-4; }
}
@keyframes nov-burst-m-0 {
	0%, 42.604% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	53.173%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-1 {
	0%, 44.189% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	54.758%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-2 {
	0%, 45.775% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	56.344%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-3 {
	0%, 47.360% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	57.929%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-4 {
	0%, 48.945% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	59.515%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-5 {
	0%, 50.531% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	61.100%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-6 {
	0%, 52.116% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	62.685%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}
@keyframes nov-burst-m-7 {
	0%, 53.702% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
	64.271%, 100% { translate: 0 var(--nov-burst-y); rotate: 55deg; scale: 2.8; opacity: 0; filter: blur(var(--nov-burst-blur)); }
}

/* Must stay last: .nov-l2's own unconditional `animation:` declarations above (desktop
   and mobile) share this rule's specificity, so whichever comes later in the cascade
   wins. Placed here, this one wins and reduced motion actually stops every .nov-anim
   element — including the headline jitter, which otherwise kept running (and shifting
   the static-capture screenshot a few px between takes) even under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	#nov-promo .nov-anim { animation: none; }
}

/* Figma (1:2957): the BG group clips the circle and the 3:10190 coin layer to the 705px band;
   the front coins (3:10193, 3:10245) and the mascot hang past it onto the page below. The
   section used to carry overflow-hidden, which cut them off at the band. Desktop clips
   sideways only; on the 390 frame everything is clipped to the band (1:598), as before. */
#nov-promo { overflow: hidden; }
#nov-promo .nov-band-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
@media (min-width: 768px) {
	/* open only the bottom edge: the header above covers the top coins in Figma, so the top and
	   sides stay cut at the band (clip-path). No overflow-x: clip, Safari before 16 drops it and
	   falls back to overflow: hidden, which cut the mascot's feet and the front coins at the band. */
	#nov-promo { overflow: visible; -webkit-clip-path: inset(0 0 -100vh 0); clip-path: inset(0 0 -100vh 0); }
}