/*
 * Athletic Army hero effects (1.9 to 1.12): the hero side, loaded only on pages with a video hero (the homepage and the
 * Hero lab; inc/fx.php). The HUD over the hero (brackets, tick rulers, scanlines, corner readouts, random codes, the
 * scope's tag with its mode and grid readout), the night-vision fallback and the Hero lab panel. The glitch and the ink-bleed titles, which run sitewide, are fx.css; the shader
 * effects are assets/js/fx/aa-fx.js. Every rule that changes an existing element waits for html.aa-fx, which the head
 * script never adds with reduced motion or data saver.
 * Tokens come from theme.css. A display frame over the film, crisp and restrained: never a game menu.
 */

/* 1. Hero layers. aa-fx.js adds the canvas and the HUD as the last children of each .aa-hero--video. The canvas sits
   at z-index 0, after the video in the DOM, so it covers the film but stays under the cover overlay and the header
   wash (z-index 1), which keep the header readable just as in 1.8. The HUD sits over the inner container (z-index 2,
   later in the DOM) and under the pause button (3). Neither takes pointer events or space. */
.aa-fx__canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.aa-fx__hud {
	--aa-fx-line: rgba(229, 225, 214, .55);
	/* The top bar sits above the hero in the page flow, so only the transparent header overlaps it. */
	--aa-fx-top: calc(var(--aa-header-h, 56px) + .75rem);
	--aa-fx-x: var(--aa-gutter);
	/* The right-hand side: the Hero lab moves it in, clear of its card. */
	--aa-fx-xr: var(--aa-fx-x);
	/* Clear of the pause button (bottom left) and the floating star (bottom right), and lifted with the star when a
	   cookie bar pushes it up (--aa-desk-lift, set on html by inc/desk.php). */
	--aa-fx-bottom: calc(4.75rem + var(--aa-desk-lift, 0px));
	position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; color: var(--aa-bone);
}
html:not(.aa-fx--hud) .aa-fx__hud { display: none; }

/* Thin L-shaped corner brackets: the frame of the display. */
.aa-fx__bracket { position: absolute; width: 28px; height: 28px; border: 0 solid var(--aa-fx-line); }
.aa-fx__bracket--tl { top: var(--aa-fx-top); left: var(--aa-fx-x); border-width: 1px 0 0 1px; }
.aa-fx__bracket--tr { top: var(--aa-fx-top); right: var(--aa-fx-xr); border-width: 1px 1px 0 0; }
.aa-fx__bracket--bl { bottom: var(--aa-fx-bottom); left: var(--aa-fx-x); border-width: 0 0 1px 1px; }
.aa-fx__bracket--br { bottom: var(--aa-fx-bottom); right: var(--aa-fx-xr); border-width: 0 1px 1px 0; }

/* Tick rulers down the left and right inner edges, like the scale on a display: a short hairline every 8px and a
   longer one every 40px, bone at .25, between the top and bottom corner blocks. The right one is the left one turned. */
.aa-fx__ruler {
	--aa-fx-tick: rgba(229, 225, 214, .25);
	position: absolute; top: calc(var(--aa-fx-top) + 5.25rem); bottom: calc(var(--aa-fx-bottom) + 5.25rem); width: 10px;
	background:
		repeating-linear-gradient(180deg, var(--aa-fx-tick) 0 1px, transparent 1px 40px) 0 0 / 10px 100% no-repeat,
		repeating-linear-gradient(180deg, var(--aa-fx-tick) 0 1px, transparent 1px 8px) 0 0 / 5px 100% no-repeat;
}
.aa-fx__ruler--l { left: var(--aa-fx-x); }
.aa-fx__ruler--r { right: var(--aa-fx-xr); transform: scaleX(-1); }

/* Scanlines: one dark line every 3px, at 5%. CSS, so they show in overlay mode too. */
.aa-fx__scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(11, 18, 13, .05) 2px 3px); }

/* The scope's tag (aa-fx.js keeps it beside the ring, clear of the corners and the header): MODE FILM, MODE WIRE or
   MODE THERMAL, and on wide screens the scope's place as a grid reference, on a dark card like the corner readouts.
   It sits beside the HUD rather than in it, so it goes with the scope switch. A click or tap on the hero changes the
   mode, so the hero shows a crosshair pointer while the scope runs. */
.aa-fx__scopetag { position: absolute; top: 0; left: 0; z-index: 2; display: grid; justify-items: start; row-gap: .125rem; margin: 0; padding: .3125rem .5625rem .4375rem; border-bottom: 1px solid rgba(229, 225, 214, .35); background: rgba(11, 18, 13, .62); pointer-events: none; opacity: 0; transition: opacity .25s var(--aa-ease); will-change: transform; }
.aa-fx__scopetag::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 1.5rem; height: 1px; background: var(--aa-accent); }
.aa-fx__scopetag.is-on { opacity: 1; }
.aa-hero .aa-fx__scopetag > p.aa-fx__readout:not(.aa-kicker) { max-width: none; margin: 0; color: var(--aa-bone); font: 400 var(--aa-t-label)/1.35 var(--aa-menu); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: none; }
@media (max-width: 1023px) { .aa-fx__scopetag > .aa-fx__readout--grid { display: none; } }
html.aa-fx.aa-fx--scope .aa-hero--video { cursor: crosshair; }
html.aa-fx.aa-fx--scope .aa-hero--video :is(a, button) { cursor: pointer; }

/* Random codes (aa-fx.js): one of Alexio's HUD codes or a machine string, flashed up for under a second in the outer
   bands of the hero, decoding, typing or flickering once. Low opacity (set by the script, .55 to .85), bone or now and
   then red, never smaller than the label size. */
.aa-fx__code { position: absolute; top: 0; left: 0; margin: 0; color: var(--aa-bone); font: 400 var(--aa-t-label)/1.2 var(--aa-menu); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgba(11, 18, 13, .7); }
.aa-fx__code.is-red { color: var(--aa-accent); text-shadow: none; }
html:not(.aa-fx--rtext) .aa-fx__code { display: none; }

/* Corner readouts, like a Call of Duty tag: condensed mono capitals in bone over a hairline, a short red tick at the
   outer end. From 1.12 no card behind them (Alexio): a soft dark halo round the letters and the photo's corners
   darkened a little by the shader keep them legible over the white tees. Each block sits just inside its bracket.
   Lines stay left-aligned inside each block (the right-hand blocks are anchored right), so typing never moves
   anything. */
.aa-fx__corner { position: absolute; display: grid; justify-items: start; row-gap: .125rem; margin: 0; padding: .375rem .625rem .5rem; border-bottom: 1px solid rgba(229, 225, 214, .35); background: none; }
.aa-fx__corner::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 1.5rem; height: 1px; background: var(--aa-accent); }
.aa-fx__corner--tl { top: calc(var(--aa-fx-top) + .5rem); left: calc(var(--aa-fx-x) + .5rem); }
.aa-fx__corner--tr { top: calc(var(--aa-fx-top) + .5rem); right: calc(var(--aa-fx-xr) + .5rem); }
.aa-fx__corner--bl { bottom: calc(var(--aa-fx-bottom) + .5rem); left: calc(var(--aa-fx-x) + .5rem); }
.aa-fx__corner--br { bottom: calc(var(--aa-fx-bottom) + .5rem); right: calc(var(--aa-fx-xr) + .5rem); }
.aa-fx__corner--tr::after, .aa-fx__corner--br::after { left: auto; right: 0; }
/* The cover's own paragraph rule is (0,3,1); these beat it. The typed copy (span.aa-type) takes the same face. 1.20:
   Mono45, the menu face (Alexio), a step up from the label size so its narrow capitals read the same. The random codes
   and the scope's tag take it too. */
.aa-hero .aa-fx__corner > .aa-fx__readout,
.aa-hero .aa-fx__corner > p.aa-fx__readout:not(.aa-kicker) { max-width: none; margin: 0; color: var(--aa-bone); font: 400 var(--aa-t-ui)/1.35 var(--aa-menu); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px rgba(11, 18, 13, .95), 0 1px 3px rgba(11, 18, 13, .9), 0 0 10px rgba(11, 18, 13, .7); }
/* A message swapping (aa-fx.js): while the letters scramble they split a little, red to one side. */
.aa-hero .aa-fx__corner.is-swap > p.aa-fx__readout:not(.aa-kicker) { text-shadow: 2px 0 0 rgba(215, 25, 32, .85), 0 0 2px rgba(11, 18, 13, .95), 0 0 10px rgba(11, 18, 13, .7); }

/* Typing (theme.js typewriter, once mode): the engine lays its typed copy (span.aa-type, absolutely positioned) over
   each line in turn and hides the lines still to come. Here the copy is only taken out of the theme's grid cell, so it
   is placed against the block itself. Without the engine (an old cached theme.js) every line simply shows. */
.aa-fx__corner > .aa-type { grid-area: auto; }

/* Narrow screens. Under 720px the bottom blocks would run into the Scroll cue at the bottom centre: they go. Phones
   (under 600px) keep the top-left block and the brackets only, and the bottom brackets sit higher, clear of the
   floating star (and of it when a cookie bar lifts it). */
@media (max-width: 719px) {
	.aa-fx__corner--bl, .aa-fx__corner--br { display: none; }
}
@media (max-width: 599px) {
	.aa-fx__hud { --aa-fx-bottom: calc(6.5rem + var(--aa-desk-lift, 0px)); }
	.aa-fx__corner--tr, .aa-fx__scan, .aa-fx__ruler { display: none; }
}

/* The film reveal where the canvas cannot draw the hero (overlay mode): the film itself, shown to the right of the
   edge (--aa-rev, set by aa-fx.js) with a plain clip; the canvas draws the red hairline on the edge. */
html.aa-fx .aa-hero--video.is-reveal .aa-hero__video[data-aa-underlay] { opacity: 1 !important; clip-path: inset(0 0 0 var(--aa-rev, 100%)); transition: none; }

/* 2. Night vision without the shader (overlay mode: the film not yet playing, or from another origin): a green filter
   on the film and the poster, ramping in over .2s and out over .6s. Never a hard cut, green only. The poster keeps its
   duotone filter (theme.css) as the start of the list, so the two lists interpolate smoothly. */
html.aa-fx.aa-fx--nv .aa-hero--video .aa-hero__video { transition: opacity .9s var(--aa-ease), filter .6s var(--aa-ease); }
html.aa-fx.aa-fx--nv .aa-hero--video :is(.wp-block-cover__image-background, .aa-hero__top, .aa-hero__slide) { transition: filter .6s var(--aa-ease); }
html.aa-fx.aa-fx--nv .aa-hero--video.is-nv .aa-hero__video { filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(2.4) brightness(.95) contrast(1.05); transition-duration: .9s, .2s; }
html.aa-fx.aa-fx--nv .aa-hero--video.is-nv .wp-block-cover__image-background { filter: grayscale(1) brightness(1.75) contrast(.9) sepia(1) hue-rotate(55deg) saturate(2.4) brightness(.6); transition-duration: .2s; }
/* 1.20: the photo video and the slide the page shows itself (overlay mode) go green with the rest. */
html.aa-fx.aa-fx--nv .aa-hero--video.is-nv :is(.aa-hero__top, .aa-hero__slide) { filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(2.4) brightness(.95) contrast(1.05); transition-duration: .2s; }

/* 3. Hero lab (templates/hero-lab.php): the night section below the hero and the control panel. On wide screens,
   while the effects run, the panel is a compact card over the bottom right of the lab's hero, so it can be used with
   the film on screen; it scrolls away with the hero, so it never covers the page below it. Otherwise (narrow
   screens, reduced motion or data saver, where its switches are disabled) it sits in the flow below the hero. Square
   corners, hairline frame, outlined tags, as on the Call of Duty site. */
.aa-fxlab { position: relative; background: var(--aa-night); color: var(--aa-on-dark); }
.aa-fxlab__title { margin-top: 0; margin-bottom: 1rem; color: #fff; font: 300 var(--aa-t-h1)/.92 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; }
.aa-fxlab__lede { margin-top: 0; color: var(--aa-on-dark); font-size: var(--aa-t-body); }
.aa-fxlab__panel { width: 100%; max-width: 30rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid rgba(229, 225, 214, .35); border-radius: 0; background: var(--aa-night); color: var(--aa-on-dark); }
/* In the flow it lines up with the title (the constrained layout would centre it, and its !important needs one here). */
.aa-fxlab .aa-fxlab__panel { margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 720px))) / 2) !important; }
.aa-fxlab__panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.aa-fxlab__panel legend { width: 100%; margin: 0 0 .25rem; padding: 0 0 .75rem; border-bottom: 1px solid rgba(229, 225, 214, .2); color: #fff; font: 300 var(--aa-t-lead)/1.1 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; }
.aa-fxlab__row { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .25rem 0; border-bottom: 1px solid rgba(229, 225, 214, .1); color: var(--aa-on-dark); font: 400 var(--aa-t-ui)/1.3 var(--aa-body); cursor: pointer; }
.aa-fxlab__row input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid rgba(229, 225, 214, .7); border-radius: 0; background: transparent; cursor: pointer; }
.aa-fxlab__row input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: var(--aa-accent); transform: scale(0); transition: transform .12s var(--aa-ease); }
.aa-fxlab__row input[type="checkbox"]:checked { border-color: var(--aa-bone); }
.aa-fxlab__row input[type="checkbox"]:checked::before { transform: none; }
.aa-fxlab__row input[type="checkbox"]:focus-visible { outline: 2px solid var(--aa-accent); outline-offset: 2px; }
/* Windows High Contrast and other forced colours drop the drawn tick: the browser's own checkbox comes back. */
@media (forced-colors: active) {
	.aa-fxlab__row input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; }
	.aa-fxlab__row input[type="checkbox"]::before { content: none; }
}
.aa-fxlab__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.aa-fxlab__actions .aa-btn { min-height: 44px; padding: .5em .75em; border: 1px solid rgba(229, 225, 214, .5); border-radius: 0; background: transparent; color: var(--aa-on-dark); }
.aa-fxlab__actions .aa-btn:hover { border-color: var(--aa-bone); background: var(--aa-bone); color: var(--aa-ink); }
/* In the flow: All on and All off side by side, Recommended, Night vision now, Next scope mode and Pixel field now
   full width below. */
.aa-fxlab__actions .aa-btn:is([data-aa-fx-preset="recommended"], [data-aa-fx-nv], [data-aa-fx-mode], [data-aa-fx-logo]) { grid-column: 1 / -1; }
.aa-fxlab__actions .aa-btn:is([data-aa-fx-nv], [data-aa-fx-mode], [data-aa-fx-logo]) { border-color: var(--aa-accent-dark); background: var(--aa-accent-dark); color: #fff; }
.aa-fxlab__actions .aa-btn:is([data-aa-fx-nv], [data-aa-fx-mode], [data-aa-fx-logo]):hover { border-color: var(--aa-accent-darker); background: var(--aa-accent-darker); color: #fff; }
.aa-fxlab__panel :disabled { opacity: .45; cursor: not-allowed; }
.aa-fxlab__note { margin: 1rem 0 0; color: var(--aa-on-dark-muted); font: 400 var(--aa-t-small)/1.45 var(--aa-small); }
/* The card. .aa-fxlab follows the hero straight on (no gap), so the card is placed from its top: its bottom edge
   5.5rem above the end of the hero (clear of the floating star), its height capped so its top stays at least 1.5rem
   under the header and the top bar (it fits whole from about 650px high; shorter, it scrolls inside). The right-hand
   readouts and brackets move in to the left of it. */
@media (min-width: 1100px) {
	html.aa-fx .aa-fxlab__panel { position: absolute; z-index: 90; top: auto; right: var(--aa-gutter); bottom: calc(100% + 5.5rem); width: 280px; max-width: none; max-height: calc(100svh - var(--aa-topbar-h, 0px) - var(--aa-header-h) - 7rem); margin: 0; padding: .875rem 1rem 1rem; overflow: auto; box-shadow: 0 18px 40px rgba(11, 18, 13, .5); }
	html.aa-fx .aa-fxlab__panel legend { padding-bottom: .5rem; font-size: var(--aa-t-ui); }
	html.aa-fx .aa-fxlab__row { min-height: 28px; padding: .0625rem 0; }
	html.aa-fx .aa-fxlab__actions { margin-top: .75rem; }
	html.aa-fx .aa-fxlab__actions .aa-btn { min-height: 40px; padding-inline: .5em; }
	html.aa-fx .aa-fxlab__actions .aa-btn:is([data-aa-fx-nv], [data-aa-fx-preset="recommended"], [data-aa-fx-mode], [data-aa-fx-logo]) { grid-column: auto; }
	html.aa-fx .aa-fxlab__note { margin-top: .75rem; }
	html.aa-fx .aa-fxlab__hero .aa-fx__hud { --aa-fx-xr: calc(var(--aa-gutter) + 280px + .875rem); }
}

/* 4. Safety nets: reduced motion switched on while the page is open (the scripts take everything out too), and print. */
@media (prefers-reduced-motion: reduce) {
	.aa-fx__canvas, .aa-fx__hud, .aa-fx__scopetag { display: none !important; }
	html.aa-fx .aa-hero--video.is-nv :is(.aa-hero__video, .wp-block-cover__image-background, .aa-hero__top, .aa-hero__slide) { filter: none !important; }
}
@media print { .aa-fx__canvas, .aa-fx__hud, .aa-fx__scopetag { display: none !important; } }

/* Lines draw themselves in when the display comes up (after the After Effects template Alexio sent, where every line
   and box traces in): each bracket grows out of its corner, then each readout card wipes in from its outer edge, soft
   to sharp, before its words type. Switching the readouts back on in the Hero lab plays it again. */
.aa-fx__bracket { animation: aa-fx-draw .7s var(--aa-ease) .15s both; }
.aa-fx__bracket--tl { --aa-fx-from: inset(0 100% 100% 0); }
.aa-fx__bracket--tr { --aa-fx-from: inset(0 0 100% 100%); }
.aa-fx__bracket--bl { --aa-fx-from: inset(100% 100% 0 0); }
.aa-fx__bracket--br { --aa-fx-from: inset(100% 0 0 100%); }
.aa-fx__corner { --aa-fx-from: inset(0 100% 0 0); animation: aa-fx-wipe .6s var(--aa-ease) .45s both; }
.aa-fx__corner--tr, .aa-fx__corner--br { --aa-fx-from: inset(0 0 0 100%); }
@keyframes aa-fx-draw { from { clip-path: var(--aa-fx-from); } to { clip-path: inset(0); } }
@keyframes aa-fx-wipe { from { clip-path: var(--aa-fx-from); filter: blur(3px); } to { clip-path: inset(-2px); filter: blur(0); } }