/* oct2 hero: a fluid stage per Figma frame (scripts/stage-hero.mjs). Layers sit where Figma puts them, in % of
   the stage; the stage keeps the frame's aspect ratio (NAV mock excluded) and is the cqw container. */
#oct2-promo { background-color: #ffffff; }
#oct2-promo .oct2-stage { position: relative; width: 100%; margin: 0 auto; container-type: inline-size; overflow: hidden; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
#oct2-promo .oct2-stage picture img { position: absolute; display: block; height: auto; max-width: none; }
#oct2-promo .oct2-cta { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; text-decoration: none; border: none; }
#oct2-promo .oct2-cta:hover, #oct2-promo .oct2-cta:focus-visible { filter: brightness(1.15); }
#oct2-promo.oct2-anim-paused .oct2-anim { animation-play-state: paused; }

/* Desktop stage: Figma frame 1920x855, stage 1920×704 (top 151px is the NAV mock) */
#oct2-promo .oct2-stage {
	aspect-ratio: 1920 / 704;
	max-width: 1920px;  /* mobile art stops growing at 1.5× its frame (the page background continues around it) */
	background-image: url(../images/hero/back.jpg);
	background-image: -webkit-image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
	background-image: image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
}
#oct2-promo .oct2-stage .oct2-cta-coupon { left: 61.51%; top: 81.108%; min-width: max(127px, 9.896cqw); height: max(28px, 2.188cqw); padding: 0 max(7px, 0.521cqw); box-sizing: border-box; border-radius: max(36px, 2.813cqw); background-color: #000000; color: #ffffff; font-size: max(12px, 0.938cqw); }  /* design button 148:40680: 190×42 at (1086, 550), Avenir:Black 18px */
#oct2-promo .oct2-stage .oct2-cta-bundles { left: 67.135%; top: 81.108%; min-width: max(119px, 9.271cqw); height: max(28px, 2.188cqw); padding: 0 max(7px, 0.521cqw); box-sizing: border-box; border-radius: max(36px, 2.813cqw); background-color: #000000; color: #ffffff; font-size: max(12px, 0.938cqw); }  /* design button 1:1768: 178×42 at (1296, 550), Avenir:Black 18px */
#oct2-promo .oct2-stage .oct2-copy-1 { left: 54.583%; top: 21.449%; width: 21.823%; }
#oct2-promo .oct2-stage .oct2-copy-2 { left: 57.031%; top: 62.074%; width: 19.062%; }
#oct2-promo .oct2-stage .oct2-copy-3 { left: 56.302%; top: 34.375%; width: 19.792%; }
#oct2-promo .oct2-stage .oct2-copy-4 { left: 56.667%; top: 41.761%; width: 2.552%; }
#oct2-promo .oct2-stage .oct2-bs-logo { left: 22.396%; top: 9.233%; width: 29.896%; }
#oct2-promo .oct2-stage .oct2-195-408534 { left: 75.104%; top: 0%; width: 24.896%; }
/* Desktop motion (Figma get_motion_context) */
@property --oct2-r { syntax: '<angle>'; initial-value: 0rad; inherits: false; }
/* headline (Figma 159:520388): image 382.7×241.79 at (525.67, 365.59) in the stage, pivot = node centre */
#oct2-promo .oct2-stage .oct2-anim-headline {
	left: 27.379%;
	top: 51.93%;
	width: 19.932%;
	height: 34.345%;
	transform-origin: 49.995% 50.006%;
	transform: rotate(var(--oct2-r, 0rad));
	animation:
		oct2-headline-translate 3s linear infinite,
		oct2-headline-scale 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct2-headline-translate {
	0% { animation-timing-function: ease-out; translate: 0% 0%; }
	4.333% { animation-timing-function: ease-in-out; translate: -1.719% -1.701%; }
	10.667% { translate: 0% 0%; }
	100% { translate: 0% 0%; }
}
@keyframes oct2-headline-scale {
	0% { animation-timing-function: ease-out; scale: 1 1; }
	4.333% { animation-timing-function: ease-in-out; scale: 1.035 1.035; }
	10.667% { scale: 1 1; }
	100% { scale: 1 1; }
}

/* Left nostril — smoke burst (Figma 195:309546): image 34850.28×17117.94 at (-33818.97, 326.97) in the stage, pivot = node centre */
#oct2-promo .oct2-stage .oct2-anim-left-nostril-smoke-burst {
	left: 30.316%;
	top: 46.445%;
	width: 5%;
	height: auto;  /* box from the design context (0.97px node + inset); stage-hero multiplied the inset (wowie fix) */
	transform-origin: 99.491% 0.873%;
	transform: rotate(var(--oct2-r, 0rad));
	animation:
		oct2-left-nostril-smoke-burst-opacity 3s linear infinite,
		oct2-left-nostril-smoke-burst-translate 3s linear infinite,
		oct2-left-nostril-smoke-burst-scale 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct2-left-nostril-smoke-burst-opacity {
	0% { animation-timing-function: ease-out; opacity: 0; }
	3.333% { animation-timing-function: ease-out; opacity: 0.95; }
	12% { animation-timing-function: ease-out; opacity: 0.85; }
	30% { opacity: 0; }
	35% { animation-timing-function: ease-out; opacity: 0; }
	38.333% { animation-timing-function: ease-out; opacity: 0.95; }
	46.667% { animation-timing-function: ease-out; opacity: 0.8; }
	66% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct2-left-nostril-smoke-burst-translate {
	0% { translate: 0% 0%; }
	6.667% { animation-timing-function: ease-out; translate: 0% 0%; }
	30% { animation-timing-function: ease-out; translate: -0.033% -0.028%; }
	35% { translate: 0% 0%; }
	43.333% { animation-timing-function: ease-out; translate: 0% 0%; }
	66% { translate: -0.033% -0.028%; }
	100% { translate: -0.033% -0.028%; }
}
@keyframes oct2-left-nostril-smoke-burst-scale {
	0% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	6.667% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	21.667% { animation-timing-function: ease-out; scale: 1 1; }
	30% { animation-timing-function: ease-out; scale: 1.13 1.13; }
	35% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	43.333% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	56.667% { animation-timing-function: ease-out; scale: 1 1; }
	66% { scale: 1.13 1.13; }
	100% { scale: 1.13 1.13; }
}

/* Right nostril — smoke burst (Figma 195:309575): image 34781.05×17297.19 at (-343.27, 147.72) in the stage, pivot = node centre */
#oct2-promo .oct2-stage .oct2-anim-right-nostril-smoke-burst {
	left: 37.437%;
	top: 46.362%;
	width: 5%;
	height: auto;  /* box from the design context (0.97px node + inset); stage-hero multiplied the inset (wowie fix) */
	transform-origin: 3.572% 1.9%;
	transform: rotate(var(--oct2-r, 0rad));
	animation:
		oct2-right-nostril-smoke-burst-opacity 3s linear infinite,
		oct2-right-nostril-smoke-burst-translate 3s linear infinite,
		oct2-right-nostril-smoke-burst-scale 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct2-right-nostril-smoke-burst-opacity {
	0% { opacity: 0; }
	0.667% { animation-timing-function: ease-out; opacity: 0; }
	4% { animation-timing-function: ease-out; opacity: 0.95; }
	12.667% { animation-timing-function: ease-out; opacity: 0.85; }
	30.667% { opacity: 0; }
	35.667% { animation-timing-function: ease-out; opacity: 0; }
	39% { animation-timing-function: ease-out; opacity: 0.95; }
	47.333% { animation-timing-function: ease-out; opacity: 0.8; }
	66.667% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct2-right-nostril-smoke-burst-translate {
	0% { translate: 0% 0%; }
	7.333% { animation-timing-function: ease-out; translate: 0% 0%; }
	30.667% { animation-timing-function: ease-out; translate: 0.033% -0.028%; }
	35.667% { translate: 0% 0%; }
	44% { animation-timing-function: ease-out; translate: 0% 0%; }
	66.667% { translate: 0.033% -0.028%; }
	100% { translate: 0.033% -0.028%; }
}
@keyframes oct2-right-nostril-smoke-burst-scale {
	0% { scale: 0.08 0.08; }
	0.667% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	7.333% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	22.333% { animation-timing-function: ease-out; scale: 1 1; }
	30.667% { animation-timing-function: ease-out; scale: 1.13 1.13; }
	35.667% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	44% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	57.333% { animation-timing-function: ease-out; scale: 1 1; }
	66.667% { scale: 1.13 1.13; }
	100% { scale: 1.13 1.13; }
}

#oct2-promo .oct2-stage .oct2-anim-paused .oct2-anim,
#oct2-promo .oct2-stage.oct2-anim-paused .oct2-anim { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	#oct2-promo .oct2-stage .oct2-anim { animation: none; }
}


/* Mobile stage: Figma frame 390x796, stage 390×637 (top 159px is the NAV mock) */
#oct2-promo .oct2-stage-m {
	aspect-ratio: 390 / 637;
	max-width: 585px;  /* mobile art stops growing at 1.5× its frame (the page background continues around it) */
	background-image: url(../images/hero/back-m.jpg);
	background-image: -webkit-image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
	background-image: image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
}
#oct2-promo .oct2-stage-m .oct2-cta-coupon { left: 28.59%; top: 87.912%; min-width: max(144px, 42.308cqw); height: max(35px, 10.256cqw); padding: 0 max(7px, 1.923cqw); box-sizing: border-box; border-radius: max(44px, 12.821cqw); background-color: #000000; color: #ffffff; font-size: max(14px, 4.103cqw); }  /* design button 71:1372: 165×40 at (29, 540), Avenir:Black 16px */
#oct2-promo .oct2-stage-m .oct2-cta-bundles { left: 48.333%; top: 87.912%; min-width: max(135px, 39.487cqw); height: max(35px, 10.256cqw); padding: 0 max(7px, 1.923cqw); box-sizing: border-box; border-radius: max(44px, 12.821cqw); background-color: #000000; color: #ffffff; font-size: max(14px, 4.103cqw); }  /* design button 190:66442: 154×40 at (209, 540), Avenir:Black 16px */
#oct2-promo .oct2-stage-m .oct2-190-66439 { left: 11.026%; top: 62.009%; width: 41.026%; }
#oct2-promo .oct2-stage-m .oct2-copy-2 { left: 10.513%; top: 62.794%; width: 78.718%; }
#oct2-promo .oct2-stage-m .oct2-bs-logo { left: 5.385%; top: 5.495%; width: 89.231%; }
/* Mobile motion (Figma get_motion_context) */
@property --oct2-r { syntax: '<angle>'; initial-value: 0rad; inherits: false; }
/* headline (Figma 231:5686): image 231.09×146 at (79.77, 216.51) in the stage, pivot = node centre */
#oct2-promo .oct2-stage-m .oct2-anim-headline {
	left: 20.454%;
	top: 33.989%;
	width: 59.254%;
	height: 22.92%;
	transform-origin: 49.994% 50.007%;
	transform: rotate(var(--oct2-r, 0rad));
	animation:
		oct2-headline-m-translate 2.76s linear infinite,
		oct2-headline-m-scale 2.76s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct2-headline-m-translate {
	0% { animation-timing-function: ease-out; translate: 0% 0%; }
	4.71% { animation-timing-function: ease-in-out; translate: -1.719% -1.701%; }
	11.594% { translate: 0% 0%; }
	100% { translate: 0% 0%; }
}
@keyframes oct2-headline-m-scale {
	0% { animation-timing-function: ease-out; scale: 1 1; }
	4.71% { animation-timing-function: ease-in-out; scale: 1.035 1.035; }
	11.594% { scale: 1 1; }
	100% { scale: 1 1; }
}

/* Left nostril — smoke burst (Figma 231:7307): image 21043.99×10336.5 at (-20658.9, 193.18) in the stage, pivot = node centre */
#oct2-promo .oct2-stage-m .oct2-anim-left-nostril-smoke-burst {
	left: 29.177%;
	top: 30.327%;
	width: 14.872%;
	height: auto;  /* box from the design context (0.97px node + inset); stage-hero multiplied the inset (wowie fix) */
	transform-origin: 99.491% 0.873%;
	transform: rotate(var(--oct2-r, 0rad));
	animation:
		oct2-left-nostril-smoke-burst-m-opacity 2.76s linear infinite,
		oct2-left-nostril-smoke-burst-m-translate 2.76s linear infinite,
		oct2-left-nostril-smoke-burst-m-scale 2.76s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct2-left-nostril-smoke-burst-m-opacity {
	0% { animation-timing-function: ease-out; opacity: 0; }
	3.623% { animation-timing-function: ease-out; opacity: 0.95; }
	13.043% { animation-timing-function: ease-out; opacity: 0.85; }
	32.609% { opacity: 0; }
	38.043% { animation-timing-function: ease-out; opacity: 0; }
	41.667% { animation-timing-function: ease-out; opacity: 0.95; }
	50.725% { animation-timing-function: ease-out; opacity: 0.8; }
	71.739% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct2-left-nostril-smoke-burst-m-translate {
	0% { translate: 0% 0%; }
	7.246% { animation-timing-function: ease-out; translate: 0% 0%; }
	32.609% { animation-timing-function: ease-out; translate: -0.033% -0.028%; }
	38.043% { translate: 0% 0%; }
	47.101% { animation-timing-function: ease-out; translate: 0% 0%; }
	71.739% { translate: -0.033% -0.028%; }
	100% { translate: -0.033% -0.028%; }
}
@keyframes oct2-left-nostril-smoke-burst-m-scale {
	0% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	7.246% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	23.551% { animation-timing-function: ease-out; scale: 1 1; }
	32.609% { animation-timing-function: ease-out; scale: 1.13 1.13; }
	38.043% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	47.101% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	61.594% { animation-timing-function: ease-out; scale: 1 1; }
	71.739% { scale: 1.13 1.13; }
	100% { scale: 1.13 1.13; }
}

/* Right nostril — smoke burst (Figma 231:7336): image 21002.17×10444.74 at (-444.89, 84.94) in the stage, pivot = node centre */
#oct2-promo .oct2-stage-m .oct2-anim-right-nostril-smoke-burst {
	left: 50.354%;
	top: 30.272%;
	width: 14.872%;
	height: auto;  /* box from the design context (0.97px node + inset); stage-hero multiplied the inset (wowie fix) */
	transform-origin: 3.572% 1.9%;
	transform: rotate(var(--oct2-r, 0rad));
	animation:
		oct2-right-nostril-smoke-burst-m-opacity 2.76s linear infinite,
		oct2-right-nostril-smoke-burst-m-translate 2.76s linear infinite,
		oct2-right-nostril-smoke-burst-m-scale 2.76s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct2-right-nostril-smoke-burst-m-opacity {
	0% { opacity: 0; }
	0.725% { animation-timing-function: ease-out; opacity: 0; }
	4.348% { animation-timing-function: ease-out; opacity: 0.95; }
	13.768% { animation-timing-function: ease-out; opacity: 0.85; }
	33.333% { opacity: 0; }
	38.768% { animation-timing-function: ease-out; opacity: 0; }
	42.391% { animation-timing-function: ease-out; opacity: 0.95; }
	51.449% { animation-timing-function: ease-out; opacity: 0.8; }
	72.464% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct2-right-nostril-smoke-burst-m-translate {
	0% { translate: 0% 0%; }
	7.971% { animation-timing-function: ease-out; translate: 0% 0%; }
	33.333% { animation-timing-function: ease-out; translate: 0.033% -0.028%; }
	38.768% { translate: 0% 0%; }
	47.826% { animation-timing-function: ease-out; translate: 0% 0%; }
	72.464% { translate: 0.033% -0.028%; }
	100% { translate: 0.033% -0.028%; }
}
@keyframes oct2-right-nostril-smoke-burst-m-scale {
	0% { scale: 0.08 0.08; }
	0.725% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	7.971% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	24.275% { animation-timing-function: ease-out; scale: 1 1; }
	33.333% { animation-timing-function: ease-out; scale: 1.13 1.13; }
	38.768% { animation-timing-function: ease-out; scale: 0.08 0.08; }
	47.826% { animation-timing-function: ease-out; scale: 0.6 0.6; }
	62.319% { animation-timing-function: ease-out; scale: 1 1; }
	72.464% { scale: 1.13 1.13; }
	100% { scale: 1.13 1.13; }
}

#oct2-promo .oct2-stage-m .oct2-anim-paused .oct2-anim,
#oct2-promo .oct2-stage-m.oct2-anim-paused .oct2-anim { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	#oct2-promo .oct2-stage-m .oct2-anim { animation: none; }
}