/*
 * Emitrix applications film (block emitrix/applications-film).
 * Static by default (no JS, reduced motion, motion switch off): each scene is a normal block with
 * its day and dark stills and a radio switch that works without JS.
 * Film mode (.emx-af.is-film, set by apps-film.js): one sticky stage, scenes stacked inside it,
 * chapter tracks become scroll spacers. The film always renders dark (theme lock).
 */
.emx-af {
	--af-g: var(--emx-gutter, clamp(16px, 4vw, 40px));
	--af-tl: var(--emx-timeline-h, 64px);
	/* 1.4.5: plus the WordPress admin bar when it is shown (logged in), so the night-vision button and the other
	   top controls sit below the fixed header instead of half under it. */
	--af-head: calc(var(--emx-header-h, 72px) + var(--emx-adminbar, 0px));
	--emx-text: #EDEFEC; --emx-text-muted: #A3ABA5; --emx-accent: #5AFF00; --emx-accent-ink: #5AFF00; --emx-on-accent: #0B0D0C;
	--emx-line: #262B27; --emx-line-strong: #5C655E; --emx-focus: #5AFF00;
	position: relative;
	/* 1.3.0: auto, not 100%. As an alignfull block it spans the page through negative margins; width: 100% kept it
	   at the content width, so the film stopped 2 gutters short of the right edge (the black bar beside the compass scene). */
	width: auto;
	max-width: none;
	background: var(--film-black, #070807);
	color: var(--emx-text);
	overflow-x: clip;
	color-scheme: dark;
}
.emx-af *, .emx-af *::before, .emx-af *::after { box-sizing: border-box; }

/* Skip link: hidden until focused. */
.emx-af__skip { position: absolute; left: var(--af-g); top: calc(var(--af-head) + 8px); z-index: 20; padding: 10px 16px; border-radius: 999px; background: #EDEFEC; color: #0B0D0C; font-weight: 600; text-decoration: none; }
.emx-af__skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ======================= static layout (default) ======================= */
.emx-af__stage { display: none; }
.emx-af__intro { max-width: 1320px; margin: 0 auto; padding: clamp(3rem, 2rem + 4vw, 6rem) var(--af-g) 8px; }
.emx-af__heading { margin: 0; font-family: var(--emx-font-display, Outfit, system-ui, sans-serif); font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.01em; color: #EDEFEC; max-width: 18ch; }
.emx-af__track { max-width: 1320px; margin: 0 auto; padding: clamp(24px, 3vw, 40px) var(--af-g); }
.emx-af__scene { position: relative; display: grid; gap: 16px; margin: 0; }
.emx-af__frame { position: relative; order: -2; aspect-ratio: 16 / 9; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: var(--film-black, #070807); }
.emx-af__sw { order: -1; }
.emx-af__media { position: absolute; inset: 0; }
.emx-af__plate, .emx-af__video { position: absolute; inset: 0; }
.emx-af__plate picture, .emx-af__plate img, .emx-af__video, .emx-af__nvcss img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); }
.emx-af__plate--day { transition: opacity 350ms var(--emx-ease-state, ease); }
.emx-af__video { display: none; opacity: 0; }
.emx-af__scene:has(.emx-af__state[value="dark"]:checked) .emx-af__plate--day,
.emx-af__scene:has(.emx-af__state[value="nv"]:checked) .emx-af__plate--day { opacity: 0; }

/* Night vision (CSS version: no-JS, no-WebGL). Built from the day still (starlight structure)
   and the dark still (glow), monochrome green, round tube view, static grain. */
.emx-af__nvcss { position: absolute; inset: 0; display: none; background: #000; overflow: hidden; isolation: isolate;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--nvr, 47vmin) * 0.92), transparent var(--nvr, 47vmin));
	mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--nvr, 47vmin) * 0.92), transparent var(--nvr, 47vmin)); }
.emx-af__frame .emx-af__nvcss { --nvr: min(47cqmin, 60%); }
.emx-af__nvcss > div { position: absolute; inset: 0; }
.emx-af__nvcss-day img { filter: grayscale(1) brightness(.85) contrast(1.15); }
.emx-af__nvcss-tint { background: #9BFF85; mix-blend-mode: multiply; }
.emx-af__nvcss-dark { mix-blend-mode: screen; }
.emx-af__nvcss-dark img { filter: grayscale(1) brightness(1.6) blur(1px); }
.emx-af__nvcss-grain { opacity: .14; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 1 0 0 0 0 .7 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.emx-af__nvcss::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0, 0, 0, .45) 72%); }
.emx-af__frame { container-type: size; }
.emx-af__scene:has(.emx-af__state[value="nv"]:checked) .emx-af__nvcss { display: block; }

/* Labels on the picture. */
.emx-af__nvsim { position: absolute; left: 10px; bottom: 8px; z-index: 4; margin: 0; display: none; align-items: center; gap: 6px; padding: 2px 8px; font-size: .8125rem; line-height: 1.4; color: #C8F5BC; background: rgba(0, 0, 0, .72); border-radius: 4px; }
.emx-af__nvsim .emx-af__goggles { width: 16px; height: 16px; }
.emx-af__scene:has(.emx-af__state[value="nv"]:checked) .emx-af__nvsim { display: inline-flex; }
.emx-af__cos, .emx-af__card, .emx-af__nvbtn[hidden] { display: none; }

/* Real product inset. */
.emx-af__product { position: absolute; left: 10px; top: 10px; z-index: 5; margin: 0; width: clamp(88px, 15%, 140px); padding: 6px; background: rgba(11, 13, 12, .82); border: 1px solid #262B27; border-radius: 12px; }
.emx-af__pstack { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #0B0D0C; }
.emx-af__pstack > div { position: absolute; inset: 0; }
.emx-af__pstack img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emx-af__pday { transition: opacity 350ms var(--emx-ease-state, ease); }
.emx-af__scene:has(.emx-af__state[value="dark"]:checked) .emx-af__pday,
.emx-af__scene:has(.emx-af__state[value="nv"]:checked) .emx-af__pday { opacity: 0; }
.emx-af__product figcaption { margin-top: 6px; font-size: .75rem; line-height: 1.35; color: #C9CFCA; overflow-wrap: break-word; hyphens: auto; }
.emx-af__product a { color: #EDEFEC; }

/* Segmented switch (radios, keyboard: arrow keys). */
.emx-af__sw { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--emx-line-strong); border-radius: 999px; width: fit-content; max-width: 100%; }
.emx-af__sw label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--emx-text-muted); font-size: .9375rem; font-weight: 500; cursor: pointer; }
.emx-af__sw label:has(:checked) { background: #1A1E1B; color: #EDEFEC; box-shadow: inset 0 0 0 1px #5C655E; }
.emx-af__sw label:has(:focus-visible) { outline: 2px solid var(--emx-focus); outline-offset: 2px; }
.emx-af__state { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.emx-af__goggles { flex: none; }

/* Text. */
.emx-af__title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #C9CFCA; }
.emx-af__num { color: var(--emx-text-muted); letter-spacing: .12em; margin-right: 12px; }
.emx-af__title .emx-af__num { margin-right: 0; }
.emx-af__beat + .emx-af__beat { margin-top: 20px; }
.emx-af__h { margin: 0; font-family: var(--emx-font-display, Outfit, system-ui, sans-serif); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.005em; color: #EDEFEC; text-wrap: balance; max-width: 20ch; }
.emx-af__p { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.55; color: #C9CFCA; max-width: 44ch; }
.emx-af__meta { margin-top: 20px; }
.emx-af__note { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--emx-text-muted); max-width: 52ch; }
.emx-af__link { margin: 10px 0 0; }
.emx-af__coda { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--emx-line); }

@media (min-width: 900px) {
	.emx-af__scene { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
	.emx-af__frame { grid-column: 1; grid-row: 1; }
	.emx-af__sw { grid-column: 1; grid-row: 2; }
	.emx-af__copy { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
	.emx-af__coda { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.emx-af__frame { aspect-ratio: 4 / 5; }
	.emx-af__media--m .emx-af__plate img, .emx-af__media--m .emx-af__video, .emx-af__media--m .emx-af__nvcss img { object-position: 50% 50%; }
	.emx-af__nvsim { bottom: 38px; }
	.emx-af__product { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
	.emx-af__plate--day, .emx-af__pday, .emx-af__skip { transition: none; }
}

/* ======================= film mode ======================= */
.emx-af.is-film .emx-af__intro,
.emx-af.is-film .emx-af__track { max-width: none; margin: 0; padding: 0; }
.emx-af.is-film .emx-af__track { height: calc(var(--af-vh, 1vh) * var(--len, 400)); }
.emx-af.is-film .emx-af__track--last { height: calc(var(--af-vh, 1vh) * var(--len, 400) + 100svh); }
/* The stage spans the whole block; its view sticks inside it and releases exactly at the block's end. */
.emx-af.is-film .emx-af__stage { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.emx-af.is-film .emx-af__view { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--film-black, #070807); contain: strict; }

/* Overlays (stage level). z: media 1, dim 2, night vision 3, iris 4, callouts 5, text 6. */
.emx-af__dim, .emx-af__iris, .emx-af__nvgl, .emx-af__lines { position: absolute; inset: 0; pointer-events: none; }
.emx-af__dim { z-index: 2; background: var(--film-black, #070807); opacity: 0; }
.emx-af__nvgl { z-index: 3; width: 100%; height: 100%; opacity: 0; visibility: hidden; }
.emx-af__iris { z-index: 4; --cx: 50%; --cy: 50%; --r0: 0px; --r1: 0px;
	background: radial-gradient(circle at var(--cx) var(--cy), rgba(0, 0, 0, 0) var(--r0), var(--film-black, #070807) var(--r1)); }
.emx-af__lines { z-index: 5; overflow: visible; }
.emx-af__lines line { stroke: var(--emx-line-strong); stroke-width: 1; }

/* Scenes stacked in the stage. Sections and frames do not form stacking contexts, so their parts
   interleave with the overlays by z-index. */
.is-film .emx-af__scene { position: absolute; inset: 0; display: block; pointer-events: none; }
.is-film .emx-af__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; container-type: normal; }
.is-film .emx-af__media { z-index: 1; display: none; transform-origin: 0 0; backface-visibility: hidden; visibility: hidden; }
.is-film .emx-af__media.is-armed { display: block; }
.is-film .emx-af__video { display: block; }
.is-film .emx-af__plate--day { transition: none; will-change: opacity; } /* 1.3.0: day to dark fades on the compositor, without repainting the scene */
.is-film .emx-af__pday { will-change: opacity; }
.is-film .emx-af__sw { display: none; }
.is-film .emx-af__nvcss { --nvr: 47vmin; }
.emx-af__view > .emx-af__nvcss.emx-af__nvgl { display: block; }
@media (max-width: 767px) { .emx-af__nvcss--m img { object-position: 50% 50%; } }
.is-film .emx-af__copy, .is-film .emx-af__cos { z-index: 6; }
/* Content fades with opacity only (it stays readable for screen readers); decorative parts also hide. */
/* 1.3.0: restored (1.2.0 removed this line with the old AI label): without it the title card over the hero, the
   coda, the night-vision button and its label sat under the iris and the dim, so they never showed. */
.is-film .emx-af__nvsim, .is-film .emx-af__product, .is-film .emx-af__coda, .is-film .emx-af__nvbtn, .is-film .emx-af__intro { z-index: 6; opacity: 0; pointer-events: none; }
.is-film .emx-af__card { z-index: 6; opacity: 0; visibility: hidden; }
.is-film .emx-af__meta:focus-within, .is-film .emx-af__product:focus-within, .is-film .emx-af__nvbtn:focus-visible { opacity: 1 !important; }
.is-film .emx-af__nvsim { display: inline-flex; left: auto; right: var(--af-g); bottom: calc(var(--af-tl) + 44px); }

/* Intro title card (first scene entry), centred below the capsule. */
.is-film .emx-af__intro { position: absolute; left: 0; right: 0; top: calc(50% + 14vh); padding: 0 var(--af-g); text-align: center; pointer-events: none; }
.is-film .emx-af__kicker { justify-content: center; margin-bottom: 12px; }
.is-film .emx-af__heading { margin: 0 auto; max-width: 22ch; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); }

/* Chapter card under the iris disc (transitions). Position is set by JS. */
.is-film .emx-af__card { display: block; position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: #C9CFCA; will-change: transform, opacity; }

/* Copy column. */
.is-film .emx-af__copy { position: absolute; left: var(--af-g); bottom: calc(var(--af-tl) + 88px); width: min(30rem, 27vw); pointer-events: none; --scrim: 0; }
/* Scrim: a soft vignette from the stage's bottom-left corner (reads as light falloff, not as a patch). */
.is-film .emx-af__copy::before { content: ""; position: absolute; z-index: -1; left: calc(var(--af-g) * -1); bottom: calc((var(--af-tl) + 88px) * -1); width: calc(100% + var(--af-g) + 30vw); height: calc(100% + var(--af-tl) + 88px + 30vh); background: radial-gradient(ellipse 100% 100% at 0% 100%, color-mix(in srgb, var(--film-black, #070807) 62%, transparent) 0%, color-mix(in srgb, var(--film-black, #070807) 38%, transparent) 42%, transparent 72%); opacity: var(--scrim); pointer-events: none; }
.is-film .emx-af__copy a, .is-film .emx-af__product a, .is-film .emx-af__nvbtn { pointer-events: auto; }
.is-film .emx-af--off, .is-film .emx-af--off * { pointer-events: none !important; }
.is-film .emx-af__title { opacity: 0; }
.is-film .emx-af__beats { display: grid; }
.is-film .emx-af__beat { grid-area: 1 / 1; align-self: end; margin: 0; opacity: 0; }
.is-film .emx-af__h { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 1.08; max-width: none; }
.is-film .emx-af__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.is-film .emx-af__wi { display: inline-block; }
.is-film .emx-af__p { font-size: 1.125rem; max-width: 40ch; }
.is-film .emx-af__meta { opacity: 0; min-height: 5.5em; }
.is-film .emx-af__coda { position: absolute; left: 0; right: 0; top: var(--coda-y, 58%); margin: 0; padding: 0 var(--af-g); border: 0; text-align: center; pointer-events: none; }
.is-film .emx-af__coda .emx-af__h { margin: 0 auto; max-width: 20ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.is-film .emx-af__coda .emx-af__p { margin: 16px auto 0; }

/* Product inset: bottom right on desktop. */
.is-film .emx-af__product { left: auto; top: auto; right: var(--af-g); bottom: calc(var(--af-tl) + 88px); width: 148px; }

/* Callout labels (lines are drawn in the stage SVG). */
.is-film .emx-af__cos { display: block; position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.is-film .emx-af__co { position: absolute; left: 0; top: 0; max-width: none; padding: 2px 0; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #D5DAD6; white-space: nowrap; text-shadow: 0 0 6px rgba(0, 0, 0, .9); }

/* Night-vision badge (a button: the visitor can switch it at any time in the chapter). */
.is-film .emx-af__nvbtn { display: inline-flex; position: absolute; left: var(--af-g); top: calc(var(--af-head) + 16px); align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid #5C655E; background: rgba(7, 8, 7, .72); color: #C9CFCA; font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; }
.is-film .emx-af__nvbtn[aria-pressed="true"] { color: #B8F5A8; border-color: #6FD65E; box-shadow: 0 0 0 1px rgba(111, 214, 94, .35) inset; }
.is-film .emx-af__nvbtn:focus-visible { outline: 2px solid var(--emx-focus); outline-offset: 2px; }

@media (max-width: 767px) {
	.is-film .emx-af__intro { top: calc(50% + 18vh); }
	.is-film .emx-af__copy { left: var(--af-g); right: var(--af-g); width: auto; bottom: calc(var(--af-tl) + 72px); }
	.is-film .emx-af__copy::before { left: calc(var(--af-g) * -1); right: calc(var(--af-g) * -1); width: auto; bottom: calc((var(--af-tl) + 72px) * -1); height: calc(100% + var(--af-tl) + 72px + 12vh); background: linear-gradient(to top, color-mix(in srgb, var(--film-black, #070807) 78%, transparent) 0%, color-mix(in srgb, var(--film-black, #070807) 60%, transparent) 55%, transparent); }
	.is-film .emx-af__h { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
	.is-film .emx-af__p { font-size: 1rem; }
	.is-film .emx-af__meta { min-height: 0; margin-top: 12px; }
	.is-film .emx-af__product { right: var(--af-g); bottom: auto; top: calc(var(--af-head) + 12px); width: 104px; padding: 4px; }
	.is-film .emx-af__product figcaption { font-size: .6875rem; }
	.is-film .emx-af__nvbtn { left: 50%; transform: translateX(-50%); }
	.is-film .emx-af__nvsim { right: auto; left: var(--af-g); bottom: calc(var(--af-tl) + 14px); }
}
/* 1.1.1: landscape phones rest on each text now, so it must fit between the header and the timeline. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
	.is-film .emx-af__copy { width: min(34rem, 52vw); bottom: calc(var(--af-tl) + 16px); }
	.is-film .emx-af__h { font-size: clamp(1rem, 0.7rem + 2.2vh, 1.375rem); }
	.is-film .emx-af__p { font-size: .875rem; }
	.is-film .emx-af__nvbtn { left: auto; right: calc(var(--af-g) + 160px); }
}
/* 1.3.0: phones. The licence note is body copy (16 px); the simulated night-vision label sits under the
   night-vision button at the top, clear of the copy and of the scroll hint at the bottom. */
@media (max-width: 767px) {
	.is-film .emx-af__note { font-size: 1rem; }
	.is-film .emx-af__nvsim { left: var(--af-g); right: auto; top: calc(var(--af-head) + 66px); bottom: auto; }
	.is-film .emx-af__nvbtn { min-height: 44px; }
}
@media (max-width: 767px) { .emx-af__note { font-size: 1rem; } }