/**
 * Grinner — Animated background engine: the player stylesheet (1.8.1). Inlined only on pages with an
 * imported background (engine.php); the editor canvas gets it too. The background tool's preview and its
 * plain-CSS export use this same file (BACKGROUND-TOOL-SPEC.md).
 *
 * Markup (engine.php): the section gets .ilm-abgx and, as its last child,
 *   <span class="ilm-abgx-l [--screen|--multiply] [--still] [--d|t|p-still|off]" aria-hidden="true">
 *     <i class="ilm-abgx-<shape> [ilm-abgx-mv|ilm-abgx-spin] [ilm-abgx-quiet]" style="--w:…;--c1:…"></i> …
 *   </span>
 * Each <i> is one layer: placed and moved here (transform and opacity only), painted on its own
 * ::before (and ::after for the flame). The span is a size container, so layers are sized in % of the
 * section (cqw / cqh). Softness is drawn into the gradients: no blur filter anywhere.
 *
 * Layer properties: --w (% of the width), --h (% of the height) or --ra (width ÷ height); --l | --r |
 * --cx and --t | --b | --cy (% from an edge, or from the centre); --bl (bleed, px); --c1…--c3 colours;
 * --s softness (px); --bg / --mk (spots, ring); --sa --sl --sp --pp stripes; --qm quiet
 * zone; motion --x0 --y0 --s0 --r0 --o0 → --x1 --y1 --s1 --r1 --o1, --d (s), --ph (0–1), --sn, --pu;
 * --fk flicker; --fa / --fb flame mirror. --spd on the span (speed). 1.8.1 shapes: --dg cell, --dr dot radius,
 * --gl grid line, --dx / --dy slide direction (.ilm-abgx-slide), --df dither fade angle, --hr halftone turn
 * (.ilm-abgx-qt for 90 / 270), --sd spotlight edge. prism: --pn bars, --bg / --bm the bars and their outline,
 * --pk lean, --al alpha, --mc mask composite with a quiet zone; form: --la light angle (.ilm-abgx-f-<form>);
 * silhouette: --sp its blur room.
 * Grain, halftone, pattern and silhouette draw an inline <svg class="ilm-abgx-svg"> inside the <i> (written by
 * the render, never a data: image: PageSpeed counts each data: image as a request before the largest paint).
 *
 * @package grinner-blocks
 * @since   1.8.1
 */

:where(.ilm-abgx) {
	position: relative; /* zero specificity: a sticky or fixed section keeps its own position */
}

.ilm-abgx {
	isolation: isolate;
	overflow: clip;
}

.ilm-abgx-l {
	--spd: 1;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	container: ilm-abgx / size;
}

/* Cover: its image and overlay first, then the layers, then the content. */
.wp-block-cover > .ilm-abgx-l {
	z-index: 2;
}

.wp-block-cover.ilm-abgx > .wp-block-cover__inner-container {
	z-index: 3;
}

.ilm-abgx-l--screen {
	mix-blend-mode: screen;
}

.ilm-abgx-l--multiply {
	mix-blend-mode: multiply;
}

/* ── A layer: where it sits, and how it moves ─────────────────────────────────────────────────── */
.ilm-abgx-l > i {
	--W: calc(var(--w) * 1cqw);
	--hh: calc(var(--h) * 1cqh);
	--H: var(--hh, calc(var(--W) / var(--ra, 1)));
	--lc: calc(50cqw + var(--cx) * 1cqw - var(--W) / 2);
	--tc: calc(50cqh + var(--cy) * 1cqh - var(--H) / 2);
	--tf0: translate(calc(var(--x0, 0) * 1%), calc(var(--y0, 0) * 1%)) rotate(calc(var(--r0, 0) * 1deg)) scale(var(--s0, 1));
	--tf1: translate(calc(var(--x1, 0) * 1%), calc(var(--y1, 0) * 1%)) rotate(calc(var(--r1, 0) * 1deg)) scale(var(--s1, 1));
	position: absolute;
	left: var(--lc, calc(var(--l) * 1cqw));
	right: calc(var(--r) * 1cqw);
	top: var(--tc, calc(var(--t) * 1cqh));
	bottom: calc(var(--b) * 1cqh);
	width: calc(var(--W) + var(--bl, 0) * 2px);
	height: calc(var(--H) + var(--bl, 0) * 2px);
	margin: calc(var(--bl, 0) * -1px);
	transform: var(--tf0);
	opacity: var(--o0, 1);
}

/* Zero specificity, so each shape's own box (grown for a soft edge, extended for a slide) wins. */
:where(.ilm-abgx-l > i)::before {
	content: "";
	position: absolute;
	inset: 0;
}

/* An inline SVG layer fills its <i> the same way. */
:where(.ilm-abgx-svg) {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* There and back, eased (Moodkit's mirrored keyframes): alternate, half the trip each way; phase = a
   negative delay. */
.ilm-abgx-mv {
	animation: ilm-abgx-mv calc(var(--d) * 0.5s / var(--spd)) ease-in-out calc(var(--ph, 0) * var(--d) * -1s / var(--spd)) infinite alternate both;
}

@keyframes ilm-abgx-mv {
	from { transform: var(--tf0); opacity: var(--o0, 1); }
	to { transform: var(--tf1); opacity: var(--o1, 1); }
}

/* A full turn (--sn 1 or -1), growing to --pu half way. */
.ilm-abgx-spin {
	animation: ilm-abgx-spin calc(var(--d) * 1s / var(--spd)) linear calc(var(--ph, 0) * var(--d) * -1s / var(--spd)) infinite;
}

@keyframes ilm-abgx-spin {
	0% { transform: rotate(0) scale(1); }
	50% { transform: rotate(calc(180deg * var(--sn, 1))) scale(var(--pu, 1)); }
	100% { transform: rotate(calc(360deg * var(--sn, 1))) scale(1); }
}

/* A quiet zone: the layer fades out inside an ellipse (keeps the copy calm). */
.ilm-abgx-quiet {
	-webkit-mask: var(--qm);
	mask: var(--qm);
}

/* ── Shapes ────────────────────────────────────────────────────────────────────────────────── */
.ilm-abgx-glow::before {
	background: radial-gradient(closest-side, var(--c1), transparent);
}

.ilm-abgx-spots::before {
	background: var(--bg);
}

.ilm-abgx-ring::before {
	background: var(--bg);
	-webkit-mask: var(--mk);
	mask: var(--mk);
}

/* disc and band: a Gaussian edge (sigma = --s px) on an ellipse W × H, drawn as the stops of one radial
   gradient on a box grown by 2.5 sigma (q = b/(b+e), p = sigma/(b+e), via tan(atan2())). */
.ilm-abgx-disc::before,
.ilm-abgx-band::before {
	--sg: min(calc(var(--s, 60) * 1px), 160px);
	--e: calc(var(--sg) * 2.5);
	--by: calc(var(--H) / 2 + var(--e));
	--q: tan(atan2(var(--H) / 2, var(--by)));
	--p: tan(atan2(var(--sg), var(--by)));
	--rg: calc(var(--W) / 2 / var(--q)) var(--by) at 50% 50%;
	--pf: var(--pc) calc((var(--q) - 3 * var(--p)) * 100%), color-mix(in srgb, var(--pc) 97.7%, #0000) calc((var(--q) - 2 * var(--p)) * 100%), color-mix(in srgb, var(--pc) 93.3%, #0000) calc((var(--q) - 1.5 * var(--p)) * 100%), color-mix(in srgb, var(--pc) 84.1%, #0000) calc((var(--q) - var(--p)) * 100%), color-mix(in srgb, var(--pc) 69.1%, #0000) calc((var(--q) - 0.5 * var(--p)) * 100%), color-mix(in srgb, var(--pc) 50%, #0000) calc(var(--q) * 100%), color-mix(in srgb, var(--pc) 30.9%, #0000) calc((var(--q) + 0.5 * var(--p)) * 100%), color-mix(in srgb, var(--pc) 15.9%, #0000) calc((var(--q) + var(--p)) * 100%), color-mix(in srgb, var(--pc) 6.7%, #0000) calc((var(--q) + 1.5 * var(--p)) * 100%), color-mix(in srgb, var(--pc) 2.3%, #0000) calc((var(--q) + 2 * var(--p)) * 100%), #0000 calc((var(--q) + 2.5 * var(--p)) * 100%);
	inset: calc(var(--e) * -1);
}

.ilm-abgx-disc::before {
	--pc: var(--c1);
	background: radial-gradient(var(--rg), var(--pf));
}

.ilm-abgx-band::before {
	--pc: #000;
	background: linear-gradient(90deg, var(--c1) var(--e), var(--c2), var(--c3) calc(100% - var(--e)));
	-webkit-mask: radial-gradient(var(--rg), var(--pf)), linear-gradient(90deg, #0000, #000 var(--sg) calc(100% - var(--sg)), #0000);
	mask: radial-gradient(var(--rg), var(--pf)), linear-gradient(90deg, #0000, #000 var(--sg) calc(100% - var(--sg)), #0000);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Flicker: small fast changes of size and brightness on top of the drift. */
.ilm-abgx-l > i:not(.ilm-abgx-flame)[style*="--fk:"]::before {
	animation: ilm-abgx-fk calc(1.6s / var(--spd)) ease-in-out infinite alternate;
}

@keyframes ilm-abgx-fk {
	to { scale: calc(1 + var(--fk) * 0.0006); opacity: calc(1 - var(--fk) * 0.004); }
}

/* grain: a noise tile, drawn in the palette colour by the layer's SVG; jumps every 1/8 of --d. */
.ilm-abgx-grain::before {
	content: none;
}

.ilm-abgx-grain > .ilm-abgx-svg {
	animation: ilm-abgx-grain calc(var(--d, 0.8) * 1s / var(--spd)) steps(1, end) infinite;
}

@keyframes ilm-abgx-grain {
	0% { transform: translate(0, 0); }
	12.5% { transform: translate(-41px, 23px); }
	25% { transform: translate(29px, -57px); }
	37.5% { transform: translate(-67px, -13px); }
	50% { transform: translate(53px, 41px); }
	62.5% { transform: translate(-17px, 71px); }
	75% { transform: translate(71px, -29px); }
	87.5% { transform: translate(-53px, -61px); }
	100% { transform: translate(0, 0); }
}

/* pattern: a fixed set of soft shapes (format.json → svg), drawn in --c1 by the layer's SVG. */
.ilm-abgx-pattern::before {
	content: none;
}

.ilm-abgx-pattern > .ilm-abgx-svg {
	color: var(--c1);
	fill: currentColor;
}

/* stripes: hairlines sliding sideways by exactly one period (--pp px), so the loop never jumps. */
.ilm-abgx-stripes::before {
	left: calc(var(--pp, 0) * -1px);
	background: repeating-linear-gradient(calc(var(--sa, -45) * 1deg), var(--c1) 0 calc(var(--sl, 1.5) * 1px), transparent calc(var(--sl, 1.5) * 1px) calc(var(--sp, 26) * 1px));
	animation: ilm-abgx-slide calc(var(--d, 3.6) * 1s / var(--spd)) linear infinite;
}

@keyframes ilm-abgx-slide {
	to { transform: translateX(calc(var(--pp, 0) * 1px)); }
}

/* flame: the Aurora card glow, coloured by --c1 core, --c2 body, --c3 glow; --fa / --fb = 1 or -1
   mirror it for a right / top anchor; --k = flicker ÷ 40. */
.ilm-abgx-flame {
	--fa: 1;
	--fb: 1;
	--k: calc(var(--fk, 40) / 40);
	translate: calc(-15.1% * var(--fa)) calc(13% * var(--fb));
}

.ilm-abgx-flame::before,
.ilm-abgx-flame::after {
	content: "";
	position: absolute;
	inset: 0;
	transform-origin: calc(50% - 26.7% * var(--fa)) calc(50% + 37% * var(--fb));
}

.ilm-abgx-flame::before {
	background: radial-gradient(27.4% 18.5% at calc(50% - 26.7% * var(--fa)) calc(50% - 17.4% * var(--fb)), color-mix(in srgb, var(--c3) 90%, #0000) 0 25%, #0000 72%), radial-gradient(35.6% 26.1% at calc(50% - 21.2% * var(--fa)) calc(50% - 6.5% * var(--fb)), var(--c2) 0 40%, #0000 72%), radial-gradient(46.6% 28.3% at calc(50% - 13% * var(--fa)) calc(50% + 13% * var(--fb)), color-mix(in srgb, var(--c2) 60%, var(--c1)) 0 45%, #0000 72%), radial-gradient(41.1% 19.6% at calc(50% - 17.1% * var(--fa)) calc(50% + 33.2% * var(--fb)), var(--c1) 0 45%, #0000 74%), radial-gradient(27.4% 10.9% at calc(50% + 14.4% * var(--fa)) calc(50% + 39.1% * var(--fb)), color-mix(in srgb, var(--c1) 85%, #0000) 0 30%, #0000 74%);
	animation: ilm-abgx-fl-sway calc(3.1s / var(--spd)) ease-in-out infinite alternate, ilm-abgx-fl-lick calc(1.9s / var(--spd)) ease-in-out infinite alternate, ilm-abgx-fl-flk calc(2.3s / var(--spd)) linear infinite;
}

.ilm-abgx-flame::after {
	background: radial-gradient(11% 13% at calc(50% - 29.5% * var(--fa)) calc(50% - 19.6% * var(--fb)), color-mix(in srgb, var(--c3) 85%, #0000), #0000 72%), radial-gradient(15.1% 16.3% at calc(50% - 18.5% * var(--fa)) calc(50% - 4.3% * var(--fb)), color-mix(in srgb, var(--c3) 90%, #0000) 0 15%, #0000 72%), radial-gradient(13.7% 14.1% at calc(50% - 4.8% * var(--fa)) calc(50% + 10.9% * var(--fb)), color-mix(in srgb, var(--c3) 75%, #0000) 0 10%, #0000 72%), radial-gradient(12.3% 13% at calc(50% - 30.8% * var(--fa)) calc(50% + 15.2% * var(--fb)), color-mix(in srgb, var(--c3) 55%, #0000), #0000 72%);
	animation: ilm-abgx-fl-rise calc(2.1s / var(--spd)) cubic-bezier(0.3, 0, 0.6, 1) infinite, ilm-abgx-fl-sway calc(4.3s / var(--spd)) ease-in-out infinite alternate-reverse;
}

@keyframes ilm-abgx-fl-sway {
	from { rotate: calc(-3deg * var(--fa) * var(--fb)); }
	to { rotate: calc(3.5deg * var(--fa) * var(--fb)); }
}

@keyframes ilm-abgx-fl-lick {
	from { scale: calc(1 + 0.03 * var(--k)) calc(1 - 0.1 * var(--k)); }
	to { scale: calc(1 - 0.04 * var(--k)) calc(1 + 0.1 * var(--k)); }
}

@keyframes ilm-abgx-fl-flk {
	0%, 100% { opacity: calc(1 - 0.1 * var(--k)); }
	18%, 80% { opacity: 1; }
	31% { opacity: calc(1 - 0.16 * var(--k)); }
	47% { opacity: calc(1 - 0.03 * var(--k)); }
	63% { opacity: calc(1 - 0.12 * var(--k)); }
}

@keyframes ilm-abgx-fl-rise {
	0% { translate: 0 calc(7.4% * var(--fb)); scale: 0.92 0.9; opacity: 0; }
	30% { opacity: 1; }
	65% { opacity: 0.75; }
	100% { translate: 0 calc(-12% * var(--fb)); scale: 1.04 1.12; opacity: 0; }
}

/* ── Added in 1.8.1 (ruled 2026-10-19): dots, grid, dither, halftone, conic, wash, spotlight ── */

/* conic and wash: one gradient the render builds from the layer's colours (--bg), like spots. */
.ilm-abgx-conic::before,
.ilm-abgx-wash::before {
	background: var(--bg);
}

/* dots: a dot grid, cell --dg px, dot radius --dr px. grid: hairlines --gl px, every --dg px. */
.ilm-abgx-dots::before,
.ilm-abgx-dither::before {
	background: radial-gradient(circle, var(--c1) calc(var(--dr) * 1px), #0000 calc(var(--dr) * 1px + 0.75px)) 0 0 / calc(var(--dg) * 1px) calc(var(--dg) * 1px);
}

.ilm-abgx-grid::before {
	background: linear-gradient(var(--c1) calc(var(--gl) * 1px), #0000 0) 0 0 / 100% calc(var(--dg) * 1px), linear-gradient(90deg, var(--c1) calc(var(--gl) * 1px), #0000 0) 0 0 / calc(var(--dg) * 1px) 100%;
}

/* Slide (dots, grid): the grid grows one cell on every side and moves exactly one cell per --d along
   --dx / --dy (-1, 0 or 1), so the loop never jumps. */
:is(.ilm-abgx-dots, .ilm-abgx-grid).ilm-abgx-slide::before {
	inset: calc(var(--dg) * -1px);
	animation: ilm-abgx-cell calc(var(--d) * 1s / var(--spd)) linear infinite;
}

@keyframes ilm-abgx-cell {
	to { translate: calc(var(--dx) * var(--dg) * 1px) calc(var(--dy) * var(--dg) * 1px); }
}

/* dither: the dot grid fading out toward --df (a linear-gradient angle). */
.ilm-abgx-dither::before {
	-webkit-mask: linear-gradient(calc(var(--df) * 1deg), #000, #0000);
	mask: linear-gradient(calc(var(--df) * 1deg), #000, #0000);
}

/* halftone: dots shrinking over 16 rows of --dg px from one edge (an SVG pattern, drawn once). The box
   is the layer turned by --hr (0, 90, 180 or 270): the layer is a size container, and a quarter turn
   (.ilm-abgx-qt) swaps its width and height. */
.ilm-abgx-halftone {
	container-type: size;
}

.ilm-abgx-halftone::before {
	content: none;
}

.ilm-abgx-halftone > .ilm-abgx-svg {
	left: 50%;
	top: 50%;
	width: 100cqw;
	height: 100cqh;
	translate: -50% -50%;
	rotate: calc(var(--hr, 0) * 1deg);
}

.ilm-abgx-halftone.ilm-abgx-qt > .ilm-abgx-svg {
	width: 100cqh;
	height: 100cqw;
}

/* spotlight: a soft cone from the box's top centre to its bottom corners (half-angle atan2(W/2, H)),
   edges softened by --sd degrees, fading with the distance. It turns about its tip. */
.ilm-abgx-spotlight {
	transform-origin: 50% 0;
}

.ilm-abgx-spotlight::before {
	--sh: atan2(calc(var(--W) / 2), var(--H));
	background: conic-gradient(from calc(180deg - var(--sh)) at 50% 0, #0000, var(--c1) calc(var(--sd) * 1deg) calc(var(--sh) * 2 - var(--sd) * 1deg), #0000 calc(var(--sh) * 2));
	-webkit-mask: radial-gradient(farthest-corner at 50% 0, #000 15%, #0000);
	mask: radial-gradient(farthest-corner at 50% 0, #000 15%, #0000);
}

/* ── Added before 1.8.1 shipped (ruled 2026-10-20): prism, form ── */

/* prism: bars of light, built by the render (--bg; --bm is their outline). The <i> is masked to the bars,
   so the glass edges on ::before and the glint on ::after stay inside them. It leans --pk degrees about
   the middle of its base. */
.ilm-abgx-prism {
	-webkit-mask: var(--bm);
	mask: var(--bm);
	transform-origin: 50% 100%;
	rotate: calc(var(--pk, 0) * 1deg);
}

/* With a quiet zone: the zone (top layer) cut from all the bars (--mc = intersect, then add per bar). */
.ilm-abgx-prism.ilm-abgx-quiet {
	-webkit-mask: var(--bm);
	mask: var(--qm), var(--bm);
	mask-composite: var(--mc);
}

/* Each bar: a lit left edge, a soft sheen and a darker right edge, over its colour. */
.ilm-abgx-prism::before {
	background: linear-gradient(90deg, color-mix(in srgb, #fff calc(55% * var(--al, 1)), #0000) 0 1px, #0000 1px calc(100% - 8px), color-mix(in srgb, #000 calc(12% * var(--al, 1)), #0000)) 0 0 / calc(100% / var(--pn)) 100%, linear-gradient(90deg, color-mix(in srgb, #fff calc(14% * var(--al, 1)), #0000), #0000 40%) 0 0 / calc(100% / var(--pn)) 100%, var(--bg);
}

/* The glint (slide): a soft light sweeping across the bars and back once per --d. */
.ilm-abgx-prism.ilm-abgx-slide::after {
	content: "";
	position: absolute;
	inset: 0 -50%;
	background: linear-gradient(100deg, #0000 38%, color-mix(in srgb, #fff calc(30% * var(--al, 1)), #0000) 50%, #0000 62%);
	animation: ilm-abgx-glint calc(var(--d) * 0.5s / var(--spd)) ease-in-out calc(var(--ph, 0) * var(--d) * -1s / var(--spd)) infinite alternate both;
}

@keyframes ilm-abgx-glint {
	from { translate: -30% 0; }
	to { translate: 30% 0; }
}

/* form: one solid-looking form, --c1 light, --c2 body, --c3 shade, lit from --la (0 = from the top, 90 =
   from the right). The shading is drawn into gradients; the outline is a radius, a mask or a clip-path. */
.ilm-abgx-form {
	--lx: sin(calc(var(--la, -45) * 1deg));
	--ly: calc(cos(calc(var(--la, -45) * 1deg)) * -1);
}

.ilm-abgx-f-sphere::before,
.ilm-abgx-f-sphere::after {
	border-radius: 50%;
}

.ilm-abgx-f-sphere::before {
	background: radial-gradient(circle at calc(50% + var(--lx) * 30%) calc(50% + var(--ly) * 30%), color-mix(in srgb, var(--c1) 80%, #fff) 0, var(--c1) 12%, var(--c2) 42%, var(--c3) 78%, color-mix(in srgb, var(--c3) 70%, #000) 100%);
}

/* Light bouncing back on the shaded side. */
.ilm-abgx-f-sphere::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at calc(50% - var(--lx) * 40%) calc(50% - var(--ly) * 40%), color-mix(in srgb, var(--c1) 45%, #0000), #0000 45%);
}

/* ring: a tube round a hole of 56% of the radius, lit on the light's side; arc: its top half. */
.ilm-abgx-f-ring::before,
.ilm-abgx-f-arc::before {
	--fm: radial-gradient(closest-side, #0000 calc(56% - 0.6px), #000 calc(56% + 0.6px) calc(100% - 1.2px), #0000);
	background: radial-gradient(closest-side, #0000 56%, color-mix(in srgb, var(--c3) 70%, #000) 56%, #0000 78%, color-mix(in srgb, var(--c3) 80%, #000)), conic-gradient(from calc(var(--la, -45) * 1deg - 180deg), var(--c3), var(--c2) 25%, var(--c1) 50%, var(--c2) 75%, var(--c3));
	-webkit-mask: var(--fm);
	mask: var(--fm);
}

.ilm-abgx-f-arc::before {
	-webkit-mask: var(--fm), linear-gradient(#000 50%, #0000 0);
	-webkit-mask-composite: source-in;
	mask: var(--fm), linear-gradient(#000 50%, #0000 0);
	mask-composite: intersect;
}

/* block: a cube seen from above, the top face light; the side facing the light is the body colour, the
   other the shade (both the body when the light is straight above). */
.ilm-abgx-f-block::before {
	clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
	background: linear-gradient(calc(var(--la, -45) * 1deg + 180deg), color-mix(in srgb, #fff 8%, #0000), color-mix(in srgb, #000 14%, #0000)), conic-gradient(from -60deg, var(--c1) 0 120deg, color-mix(in srgb, var(--c3) calc(max(0, var(--lx) * -1) * 100%), var(--c2)) 0 240deg, color-mix(in srgb, var(--c3) calc(max(0, var(--lx)) * 100%), var(--c2)) 0);
}

/* silhouette (ruled 2026-10-20): one figure from format.json's set, drawn by the layer's SVG: the gradient,
   the figure's edge blurred inside the SVG (drawn once: nothing that moves is blurred) and an optional static
   grain cut to the figure. The SVG grows by --sp % on every side so the blur is never cut off. */
.ilm-abgx-silhouette::before {
	content: none;
}

.ilm-abgx-silhouette > .ilm-abgx-svg {
	left: calc(var(--sp, 0) * -1%);
	top: calc(var(--sp, 0) * -1%);
	width: calc(100% + var(--sp, 0) * 2%);
	height: calc(100% + var(--sp, 0) * 2%);
	overflow: visible;
}

/* ── Still, off, paused ───────────────────────────────────────────────────────────────────── */
/* Still (speed 0, a device set to Still, reduced motion): each layer rests on its first frame; the
   flame holds its glow. */
.ilm-abgx-l--still > i,
.ilm-abgx-l--still > i::before,
.ilm-abgx-l--still > i::after,
.ilm-abgx-l--still > i > .ilm-abgx-svg {
	animation: none !important;
}

.ilm-abgx-l--still > .ilm-abgx-flame::after {
	translate: 0 calc(-3% * var(--fb));
	opacity: 0.85;
}

@media (min-width: 1025px) {
	.ilm-abgx-l--d-off {
		display: none;
	}

	.ilm-abgx-l--d-still > i,
	.ilm-abgx-l--d-still > i::before,
	.ilm-abgx-l--d-still > i::after,
	.ilm-abgx-l--d-still > i > .ilm-abgx-svg {
		animation: none !important;
	}

	.ilm-abgx-l--d-still > .ilm-abgx-flame::after {
		translate: 0 calc(-3% * var(--fb));
		opacity: 0.85;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ilm-abgx-l--t-off {
		display: none;
	}

	.ilm-abgx-l--t-still > i,
	.ilm-abgx-l--t-still > i::before,
	.ilm-abgx-l--t-still > i::after,
	.ilm-abgx-l--t-still > i > .ilm-abgx-svg {
		animation: none !important;
	}

	.ilm-abgx-l--t-still > .ilm-abgx-flame::after {
		translate: 0 calc(-3% * var(--fb));
		opacity: 0.85;
	}
}

@media (max-width: 767px) {
	.ilm-abgx-l--p-off {
		display: none;
	}

	.ilm-abgx-l--p-still > i,
	.ilm-abgx-l--p-still > i::before,
	.ilm-abgx-l--p-still > i::after,
	.ilm-abgx-l--p-still > i > .ilm-abgx-svg {
		animation: none !important;
	}

	.ilm-abgx-l--p-still > .ilm-abgx-flame::after {
		translate: 0 calc(-3% * var(--fb));
		opacity: 0.85;
	}
}

/* Off-screen (the shared observer's class on the section): paused. */
.ilm-abgx.ilm-offscreen > .ilm-abgx-l > i,
.ilm-abgx.ilm-offscreen > .ilm-abgx-l > i::before,
.ilm-abgx.ilm-offscreen > .ilm-abgx-l > i::after,
.ilm-abgx.ilm-offscreen > .ilm-abgx-l > i > .ilm-abgx-svg {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.ilm-abgx-l > i,
	.ilm-abgx-l > i::before,
	.ilm-abgx-l > i::after,
	.ilm-abgx-l > i > .ilm-abgx-svg {
		animation: none !important;
	}

	.ilm-abgx-flame::after {
		translate: 0 calc(-3% * var(--fb));
		opacity: 0.85;
	}
}