/*
 * Athletic Army hero effects (1.9): the sitewide part that CSS draws. The glitch copies on brand text and the
 * wordmark, and the ink-bleed titles. The film side (the HUD over the hero film, the night-vision fallback and the Hero
 * lab panel) is fx-hero.css, loaded only on pages with a video hero; the shader effects are assets/js/fx/aa-fx.js; the
 * glitch timing is aa-glitch.js. Loaded only while the effects are on (inc/fx.php); 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.
 */

/* 1. Glitch (aa-glitch.js). Text targets carry data-text; two copies of it, red and bone, sit exactly over the real
   words (same box, same padding, so the same line breaks), invisible except during a burst, when the script sets
   slices (--aa-gs*, clip-path polygons) and offsets (--aa-gx*, --aa-gy*). The real text never moves. The copies have
   empty alternative text, so screen readers do not read them twice. */
html.aa-fx.aa-fx--glitch [data-aa-glitch][data-text] { position: relative; }
html.aa-fx.aa-fx--glitch [data-aa-glitch][data-text]::before,
html.aa-fx.aa-fx--glitch [data-aa-glitch][data-text]::after {
	content: attr(data-text); content: attr(data-text) / "";
	position: absolute; inset: 0; z-index: 1; margin: 0; padding: inherit; border: 0;
	color: var(--aa-accent); text-shadow: none; opacity: 0; visibility: hidden; pointer-events: none; mix-blend-mode: screen;
	clip-path: var(--aa-gs1, inset(0 0 100% 0)); transform: translate3d(var(--aa-gx1, 0), var(--aa-gy1, 0), 0);
}
html.aa-fx.aa-fx--glitch [data-aa-glitch][data-text]::after { color: rgba(229, 225, 214, .9); clip-path: var(--aa-gs2, inset(0 0 100% 0)); transform: translate3d(var(--aa-gx2, 0), var(--aa-gy2, 0), 0); }
html.aa-fx.aa-fx--glitch .is-glitching[data-aa-glitch][data-text]::before,
html.aa-fx.aa-fx--glitch .is-glitching[data-aa-glitch][data-text]::after { opacity: .7; visibility: visible; }
/* The readouts only lightly. */
html.aa-fx.aa-fx--glitch .aa-fx__readout.is-glitching[data-aa-glitch][data-text]::before,
html.aa-fx.aa-fx--glitch .aa-fx__readout.is-glitching[data-aa-glitch][data-text]::after { opacity: .45; }

/* The wordmark is a mask, so its copies are two clones of the mask (aria-hidden) laid over it. */
.aa-logo__mark.aa-glitch__ghost { display: none; }
html.aa-fx.aa-fx--glitch .aa-glitch-host { position: relative; }
html.aa-fx.aa-fx--glitch .aa-logo__mark.aa-glitch__ghost { display: block; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; pointer-events: none; mix-blend-mode: screen; background: var(--aa-accent); clip-path: var(--aa-gs1, inset(0 0 100% 0)); transform: translate3d(var(--aa-gx1, 0), var(--aa-gy1, 0), 0); }
html.aa-fx.aa-fx--glitch .aa-logo__mark.aa-glitch__ghost--b { background: rgba(229, 225, 214, .9); clip-path: var(--aa-gs2, inset(0 0 100% 0)); transform: translate3d(var(--aa-gx2, 0), var(--aa-gy2, 0), 0); }
html.aa-fx.aa-fx--glitch .aa-glitch-host.is-glitching .aa-logo__mark.aa-glitch__ghost { opacity: .7; visibility: visible; }

/* 2. Ink bleed: page titles soak in once on load, like screen-print ink into cotton. Blurred and faint, a beat of
   high contrast in the middle (the soak), then crisp. The spread is a slight horizontal scale from the title's left
   edge rather than letter-spacing, which would reflow the title and shift the page. It starts at a trace of opacity,
   not none, so the title still counts as painted at once (Largest Contentful Paint). Not on the homepage. */
html.aa-fx.aa-fx--ink :is(.aa-page-hero__title, .aa-fxlab__title) { transform-origin: 0 100%; animation: aa-fx-ink 1.1s var(--aa-ease) backwards; }
@keyframes aa-fx-ink {
	0% { opacity: .01; filter: blur(7px) contrast(1.6); transform: scaleX(1.035); }
	48% { opacity: .92; filter: blur(1.4px) contrast(2.4); transform: scaleX(1.012); }
	58% { filter: blur(.8px) contrast(2.4); }
	100% { opacity: 1; filter: none; transform: none; }
}

/* 3. 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-logo__mark.aa-glitch__ghost { display: none !important; }
	html.aa-fx [data-aa-glitch][data-text]::before, html.aa-fx [data-aa-glitch][data-text]::after { content: none !important; }
	html.aa-fx :is(.aa-page-hero__title, .aa-fxlab__title) { animation: none !important; }
}
@media print { .aa-logo__mark.aa-glitch__ghost { display: none !important; } }

/* Decode (aa-glitch.js): while the campaign line or the Hero lab title settles, the real words are held back (still in
   place for screen readers) and an aria-hidden copy in the same monospaced face shows the scramble over them. */
html.aa-fx .is-decoding { position: relative; color: transparent !important; }
html.aa-fx .is-decoding > .aa-decode { position: absolute; inset: 0; pointer-events: none; }