/* oct 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. */
#oct-promo { background-color: #ffffff; }
#oct-promo .oct-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; }
#oct-promo .oct-stage picture img { position: absolute; display: block; height: auto; max-width: none; }
#oct-promo .oct-cta { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; text-decoration: none; border: none; }
#oct-promo .oct-cta:hover, #oct-promo .oct-cta:focus-visible { filter: brightness(1.15); }
#oct-promo.oct-anim-paused .oct-anim { animation-play-state: paused; }

/* Desktop stage: Figma frame 1920x855, stage 1920×704 (top 151px is the NAV mock) */
#oct-promo .oct-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);
}
#oct-promo .oct-stage .oct-pogo-logo { left: 26.615%; top: 18.466%; width: 30.417%; }
#oct-promo .oct-stage .oct-cta { left: 41.901%; top: 78.906%; padding: max(5px, 0.469cqw) max(18px, 1.563cqw); border-radius: max(32px, 2.813cqw); background-color: #000000; color: #ffffff; font-size: max(12px, 1.042cqw); }  /* Figma CTA 1:1768: 175×45, Avenir:Black 20px */
#oct-promo .oct-stage .oct-copy { left: 28.542%; top: 60.938%; width: 26.771%; }
#oct-promo .oct-stage .oct-static-acorns { left: 27.813%; top: 84.517%; width: 8.802%; }
/* Desktop motion (Figma get_motion_context) */
@property --oct-r { syntax: '<angle>'; initial-value: 0rad; inherits: false; }
/* squirrel (Figma 1:1623): image 426.96×537.95 at (1095.02, 170.02) in the stage, pivot = node centre */
#oct-promo .oct-stage .oct-anim-squirrel {
	left: 57.032%;
	top: 24.151%;
	width: 22.238%;
	height: 76.413%;
	transform-origin: 50% 50.001%;
	transform: rotate(var(--oct-r, 0rad));
	animation:
		oct-squirrel-rotate 3s linear infinite,
		oct-squirrel-translate 3s linear infinite,
		oct-squirrel-scale 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-squirrel-rotate {
	0% { animation-timing-function: ease-in; --oct-r: 0rad; }
	4.667% { animation-timing-function: cubic-bezier(0, 0, 0.18, 1); --oct-r: 0.044rad; }
	16.667% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); --oct-r: -0.035rad; }
	27.333% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); --oct-r: 0.026rad; }
	33.333% { animation-timing-function: ease-out; --oct-r: -0.01rad; }
	39.333% { --oct-r: 0rad; }
	100% { --oct-r: 0rad; }
}
@keyframes oct-squirrel-translate {
	0% { animation-timing-function: ease-in; translate: 0% 0%; }
	4.667% { animation-timing-function: cubic-bezier(0, 0, 0.18, 1); translate: -1.631% 3.279%; }
	16.667% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0.699% -14.983%; }
	27.333% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); translate: -2.097% 4.216%; }
	33.333% { animation-timing-function: ease-out; translate: 0.373% -3.355%; }
	39.333% { translate: 0% 0%; }
	100% { translate: 0% 0%; }
}
@keyframes oct-squirrel-scale {
	0% { animation-timing-function: ease-in; scale: 1 1; }
	4.667% { animation-timing-function: cubic-bezier(0, 0, 0.18, 1); scale: 1.035 0.965; }
	16.667% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.985 1.025; }
	27.333% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); scale: 1.045 0.955; }
	33.333% { animation-timing-function: ease-out; scale: 0.992 1.012; }
	39.333% { scale: 1 1; }
	100% { scale: 1 1; }
}

/* falling-4 (Figma 1:2257): image 126.51×106.51 at (1624, -15) in the stage, pivot = node centre */
#oct-promo .oct-stage .oct-anim-falling-4 {
	left: 84.583%;
	top: -2.131%;
	width: 6.589%;
	height: 15.129%;
	transform-origin: 50.004% 50.005%;
	transform: rotate(var(--oct-r, 0rad));
	animation:
		oct-falling-4-opacity 3s linear infinite,
		oct-falling-4-rotate 3s linear infinite,
		oct-falling-4-translate 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-falling-4-opacity {
	0% { opacity: 1; }
	42.667% { animation-timing-function: ease-in; opacity: 1; }
	47.333% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct-falling-4-rotate {
	0% { --oct-r: 0rad; }
	47.333% { --oct-r: -5.236rad; }
	100% { --oct-r: -5.236rad; }
}
@keyframes oct-falling-4-translate {
	0% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 0% -253.976%; }
	27.453% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 14.781% 275.01%; }
	47.333% { translate: 26.875% 808.854%; }
	100% { translate: 26.875% 808.854%; }
}

/* falling-3 (Figma 1:2682): image 59.77×76.71 at (1430.47, 77.36) in the stage, pivot = node centre */
#oct-promo .oct-stage .oct-anim-falling-3 {
	left: 74.504%;
	top: 10.989%;
	width: 3.113%;
	height: 10.896%;
	transform-origin: 50.008% 49.993%;
	transform: rotate(var(--oct-r, 1.01rad));
	animation:
		oct-falling-3-opacity 3s linear infinite,
		oct-falling-3-rotate 3s linear infinite,
		oct-falling-3-translate 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-falling-3-opacity {
	0% { opacity: 1; }
	57% { animation-timing-function: ease-in; opacity: 1; }
	61.667% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct-falling-3-rotate {
	0% { --oct-r: 1.01rad; }
	10% { --oct-r: 1.01rad; }
	61.667% { --oct-r: 7.642rad; }
	100% { --oct-r: 7.642rad; }
}
@keyframes oct-falling-3-translate {
	0% { translate: 0% -424.625%; }
	10% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 0% -424.625%; }
	39.967% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: -23.925% 330.971%; }
	61.667% { translate: -43.5% 973.445%; }
	100% { translate: -43.5% 973.445%; }
}

/* falling-2 (Figma 1:3136): image 126.51×106.51 at (346.4, 240.83) in the stage, pivot = node centre */
#oct-promo .oct-stage .oct-anim-falling-2 {
	left: 18.042%;
	top: 34.209%;
	width: 6.589%;
	height: 15.129%;
	transform-origin: 50.004% 50.005%;
	transform: rotate(var(--oct-r, -0.674rad));
	animation:
		oct-falling-2-opacity 3s linear infinite,
		oct-falling-2-rotate 3s linear infinite,
		oct-falling-2-translate 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-falling-2-opacity {
	0% { opacity: 1; }
	66% { animation-timing-function: ease-in; opacity: 1; }
	70.667% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct-falling-2-rotate {
	0% { --oct-r: -0.674rad; }
	21.333% { --oct-r: -0.674rad; }
	70.667% { --oct-r: -5.386rad; }
	100% { --oct-r: -5.386rad; }
}
@keyframes oct-falling-2-translate {
	0% { translate: 0% -542.131%; }
	21.333% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 0% -542.131%; }
	49.947% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 13.042% 177.038%; }
	70.667% { translate: 23.714% 520.699%; }
	100% { translate: 23.714% 520.699%; }
}

/* falling-1 (Figma 1:3167): image 59.9×76.69 at (235.97, 30) in the stage, pivot = node centre */
#oct-promo .oct-stage .oct-anim-falling-1 {
	left: 12.29%;
	top: 4.261%;
	width: 3.12%;
	height: 10.893%;
	transform-origin: 50% 50.007%;
	transform: rotate(var(--oct-r, 0rad));
	animation:
		oct-falling-1-opacity 3s linear infinite,
		oct-falling-1-rotate 3s linear infinite,
		oct-falling-1-translate 3s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-falling-1-opacity {
	0% { opacity: 1; }
	80% { animation-timing-function: ease-in; opacity: 1; }
	84.667% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct-falling-1-rotate {
	0% { --oct-r: 0rad; }
	32.667% { --oct-r: 0rad; }
	84.667% { --oct-r: 5.934rad; }
	100% { --oct-r: 5.934rad; }
}
@keyframes oct-falling-1-translate {
	0% { translate: 0% -372.578%; }
	32.667% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 0% -372.578%; }
	62.827% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: -29.382% 348.791%; }
	84.667% { translate: -53.422% 1025.857%; }
	100% { translate: -53.422% 1025.857%; }
}

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


/* Mobile stage: Figma frame 390x796, stage 390×637 (top 159px is the NAV mock) */
#oct-promo .oct-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);
}
#oct-promo .oct-stage-m .oct-pogo-logo { left: 7.179%; top: 9.262%; width: 85.128%; }
#oct-promo .oct-stage-m .oct-copy { left: 5.897%; top: 35.95%; width: 87.949%; }
#oct-promo .oct-stage-m .oct-static-acorns { left: 24.103%; top: 90.267%; width: 24.615%; }
#oct-promo .oct-stage-m .oct-cta { left: 50.128%; top: 51.884%; padding: max(6px, 2.308cqw) max(21px, 7.692cqw); border-radius: max(35px, 12.821cqw); background-color: #000000; color: #ffffff; font-size: max(14px, 5.128cqw); }  /* Figma CTA 71:1372: 175×45, Avenir:Black 20px */
/* Mobile motion (Figma get_motion_context) */
@property --oct-r { syntax: '<angle>'; initial-value: 0rad; inherits: false; }
/* squirrel (Figma 14:8457): image 205.38×255.36 at (118.3, 386.34) in the stage, pivot = node centre */
#oct-promo .oct-stage-m .oct-anim-squirrel {
	left: 30.333%;
	top: 60.65%;
	width: 52.662%;
	height: 40.088%;
	transform-origin: 50% 50%;
	transform: rotate(var(--oct-r, 0rad));
	animation:
		oct-squirrel-m-rotate 2.76s linear infinite,
		oct-squirrel-m-translate 2.76s linear infinite,
		oct-squirrel-m-scale 2.76s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-squirrel-m-rotate {
	0% { animation-timing-function: ease-in; --oct-r: 0rad; }
	5.072% { animation-timing-function: cubic-bezier(0, 0, 0.18, 1); --oct-r: 0.044rad; }
	18.116% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); --oct-r: -0.035rad; }
	29.71% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); --oct-r: 0.026rad; }
	36.232% { animation-timing-function: ease-out; --oct-r: -0.01rad; }
	42.754% { --oct-r: 0rad; }
	100% { --oct-r: 0rad; }
}
@keyframes oct-squirrel-m-translate {
	0% { translate: 0% 0%; }
	3.623% { translate: -2.036% 4.767%; }
	5.072% { translate: -3.986% 8.12%; }
	7.246% { translate: -1.159% -4.809%; }
	10.87% { translate: 0.794% -14.76%; }
	14.493% { translate: 1.58% -19.187%; }
	18.116% { translate: 1.709% -20.405%; }
	21.739% { translate: 1.153% -17.245%; }
	25.362% { translate: -0.751% -8.214%; }
	28.986% { translate: -4.085% 6.609%; }
	29.71% { translate: -5.125% 10.44%; }
	32.609% { translate: 0.683% -3.596%; }
	36.232% { translate: 0.911% -4.569%; }
	39.855% { translate: 0.452% -1.086%; }
	42.754% { translate: 0% 0%; }
	100% { translate: 0% 0%; }
}
@keyframes oct-squirrel-m-scale {
	0% { animation-timing-function: ease-in; scale: 1 1; }
	5.072% { animation-timing-function: cubic-bezier(0, 0, 0.18, 1); scale: 1.035 0.965; }
	18.116% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.985 1.025; }
	29.71% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); scale: 1.045 0.955; }
	36.232% { animation-timing-function: ease-out; scale: 0.992 1.012; }
	42.754% { scale: 1 1; }
	100% { scale: 1 1; }
}

/* falling-2 (Figma 18:8648): image 126.51×106.51 at (266.4, 232.83) in the stage, pivot = node centre */
#oct-promo .oct-stage-m .oct-anim-falling-2 {
	left: 68.308%;
	top: 36.551%;
	width: 32.438%;
	height: 16.721%;
	transform-origin: 50.004% 50.005%;
	transform: rotate(var(--oct-r, -0.674rad));
	animation:
		oct-falling-2-m-opacity 2.76s linear infinite,
		oct-falling-2-m-rotate 2.76s linear infinite,
		oct-falling-2-m-translate 2.76s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-falling-2-m-opacity {
	0% { opacity: 1; }
	71.739% { animation-timing-function: ease-in; opacity: 1; }
	76.812% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct-falling-2-m-rotate {
	0% { --oct-r: -0.674rad; }
	23.188% { --oct-r: -0.674rad; }
	76.812% { --oct-r: -5.386rad; }
	100% { --oct-r: -5.386rad; }
}
@keyframes oct-falling-2-m-translate {
	0% { translate: 0% -542.131%; }
	23.188% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 0% -542.131%; }
	54.29% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 13.042% 177.038%; }
	76.812% { translate: 23.714% 520.699%; }
	100% { translate: 23.714% 520.699%; }
}

/* falling-1 (Figma 18:8692): image 59.79×76.73 at (36, 22.01) in the stage, pivot = node centre */
#oct-promo .oct-stage-m .oct-anim-falling-1 {
	left: 9.231%;
	top: 3.455%;
	width: 15.331%;
	height: 12.046%;
	transform-origin: 49.992% 50.007%;
	transform: rotate(var(--oct-r, 0rad));
	animation:
		oct-falling-1-m-opacity 2.76s linear infinite,
		oct-falling-1-m-rotate 2.76s linear infinite,
		oct-falling-1-m-translate 2.76s linear infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
@keyframes oct-falling-1-m-opacity {
	0% { opacity: 1; }
	86.957% { animation-timing-function: ease-in; opacity: 1; }
	92.029% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes oct-falling-1-m-rotate {
	0% { --oct-r: 0rad; }
	35.507% { --oct-r: 0rad; }
	92.029% { --oct-r: 5.934rad; }
	100% { --oct-r: 5.934rad; }
}
@keyframes oct-falling-1-m-translate {
	0% { translate: 0% -372.384%; }
	35.507% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: 0% -372.384%; }
	68.29% { animation-timing-function: cubic-bezier(0.38, 0, 0.9, 1); translate: -29.436% 348.609%; }
	92.029% { translate: -53.521% 1025.323%; }
	100% { translate: -53.521% 1025.323%; }
}

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