/*
 Theme Name:   Arrow Tree Productions (GeneratePress Child)
 Theme URI:    https://arrowtreeproductions.com
 Description:  Child theme for GeneratePress — Arrow Tree Productions design system.
 Author:       Arrow Tree Productions
 Template:     generatepress
 Version:      1.0.8
 Text Domain:  atp-child
*/

/*
 * Global scope: design tokens, layout shell, header/nav/footer, scanlines/particles,
 * scroll-reveal utilities, episode grid/cards, shared footer tagline/social.
 *
 * Page-only CSS (hero, hacker terminal, Discord CTA/embed, series tabs, mission briefing,
 * Forminator skin, contact comms form, etc.) belongs in that page’s Gutenberg Custom HTML <style> block.
 */

/* Marathon (Bungie 2026) display + mono — fonts are enqueued in functions.php (atp_enqueue_assets). */

/* ----- Design tokens ----- */
:root {
	/* Marathon-inspired acid green — primary accent, replaces forest green for highlights/CTAs */
	--atp-acid: #d4fb3f;
	--atp-acid-dim: #9bbf2a;
	--atp-acid-glow: rgba(212, 251, 63, 0.45);

	/* Gold retained as secondary accent (alerts, tags, warning highlights) */
	--atp-gold: #ecd078;
	--atp-gold-glow: rgba(236, 208, 120, 0.5);

	/* Forest green kept as deep structural color (backgrounds, deep panels) */
	--atp-forest-green: #2a9371;
	--atp-forest-dark: #1a4d3d;

	--atp-black: #0a0a0a;
	--atp-void: #000000;
	--atp-panel: #0e1110;
	--atp-panel-2: #14181a;
	--atp-rule: #1f2624;
	--atp-off-white: #f8f4e3;
	--atp-mute: #7a8580;
	--atp-discord: #5865f2;
	--atp-discord-hover: #4752c4;
	--atp-alert-red: #ff3333;
	--atp-terminal-bg: #0c0c0c;
	--atp-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

	/* Type stack (Marathon-style) */
	--atp-font-display: "Big Shoulders Display", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	--atp-font-mono: "Space Mono", "Source Code Pro", ui-monospace, Menlo, Consolas, monospace;
}

/* Legacy aliases — use tokens above in new markup; these match prior HTML class expectations */
:root {
	--acid: var(--atp-acid);
	--acid-dim: var(--atp-acid-dim);
	--acid-glow: var(--atp-acid-glow);
	--gold: var(--atp-gold);
	--gold-glow: var(--atp-gold-glow);
	--forest-green: var(--atp-forest-green);
	--forest-dark: var(--atp-forest-dark);
	--black: var(--atp-black);
	--void: var(--atp-void);
	--panel: var(--atp-panel);
	--panel-2: var(--atp-panel-2);
	--rule: var(--atp-rule);
	--off-white: var(--atp-off-white);
	--mute: var(--atp-mute);
	--discord: var(--atp-discord);
	--discord-hover: var(--atp-discord-hover);
	--alert-red: var(--atp-alert-red);
	--terminal-bg: var(--atp-terminal-bg);
	--ease-out-quart: var(--atp-ease-out-quart);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Base body — contact page can override layout in its block (e.g. flex column) */
body {
	margin: 0;
	font-family: var(--atp-font-mono);
	font-size: 14px;
	line-height: 1.55;
	background-color: var(--atp-void) !important;
	background-image:
		radial-gradient(circle at 12% 12%, rgba(212, 251, 63, 0.08) 0%, transparent 38%),
		radial-gradient(circle at 88% 78%, rgba(236, 208, 120, 0.05) 0%, transparent 40%) !important;
	color: var(--atp-off-white);
	overflow-x: hidden;
	min-height: 100vh;
}

/* Particle layer (home + machinimas blocks include #particle-canvas) */
#particle-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.tactical-grid {
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(212, 251, 63, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 251, 63, 0.035) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
	z-index: 0;
}

/* Skip the full-viewport decorative layers on mobile to save paint. */
@media (max-width: 768px) {
	#particle-canvas,
	.tactical-grid {
		display: none;
	}

	.crt-wrapper {
		animation: none;
	}

	body::before,
	body::after {
		display: none;
	}
}

/* Reusable Marathon-style data-label strip: [STATUS] // 28 / 93 // CLASSIFIED */
.data-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--atp-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--atp-acid);
	line-height: 1;
}

.data-label::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--atp-acid);
	box-shadow: 0 0 8px var(--atp-acid-glow);
}

.data-label .sep {
	color: var(--atp-mute);
}

.data-label .num {
	color: var(--atp-off-white);
}

/* Scanlines + RGB tint + vignette */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	background-size: 100% 2px, 6px 100%;
	pointer-events: none;
	z-index: 9999;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	background: radial-gradient(circle, transparent 60%, black 100%);
	pointer-events: none;
	z-index: 9998;
}

@keyframes atp-turn-on {
	0% {
		transform: scale(1, 0.002);
		opacity: 0;
		filter: brightness(30);
	}
	30% {
		transform: scale(1, 0.002);
		opacity: 1;
	}
	55% {
		transform: scale(1, 1);
		filter: brightness(5);
	}
	100% {
		transform: scale(1, 1);
		filter: brightness(1);
	}
}

.crt-wrapper {
	animation: atp-turn-on 1.5s var(--atp-ease-out-quart) forwards;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}

/* Scroll reveal (all three pages) */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 0.8s var(--atp-ease-out-quart),
		transform 0.8s var(--atp-ease-out-quart);
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 768px) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.reveal-delay-1 {
	transition-delay: 0.1s;
}

.reveal-delay-2 {
	transition-delay: 0.2s;
}

.reveal-delay-3 {
	transition-delay: 0.3s;
}

h1,
h2,
h3,
.stencil-font {
	font-family: var(--atp-font-display);
	font-weight: 900;
	font-stretch: 75%;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 0.9;
}

.tech-font {
	font-family: var(--atp-font-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ----- Site header + logo + primary nav ----- */
header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 0 20px;
	position: relative;
	z-index: 10;
	gap: 30px;
}

.logo-container {
	position: relative;
	padding: 1.6rem 2.4rem 1.4rem;
	background: var(--atp-panel);
	border: 1px solid var(--atp-acid);
	box-shadow: 0 0 0 4px var(--atp-void), 0 0 24px rgba(212, 251, 63, 0.18);
}

/* Marathon-style corner ticks */
.logo-container::before,
.logo-container::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid var(--atp-gold);
	pointer-events: none;
}

.logo-container::before {
	top: -2px;
	left: -2px;
	border-right: 0;
	border-bottom: 0;
}

.logo-container::after {
	bottom: -2px;
	right: -2px;
	border-left: 0;
	border-top: 0;
}

.logo-title {
	font-family: var(--atp-font-display);
	font-weight: 900;
	font-stretch: 75%;
	font-size: clamp(1.6rem, 7.5vw, 3.6rem);
	color: var(--atp-acid);
	text-shadow: 0 0 24px rgba(212, 251, 63, 0.35);
	text-align: center;
	line-height: 0.92;
	letter-spacing: 0.02em;
	margin: 0;
	position: relative;
	white-space: nowrap;
}

.logo-title::before,
.logo-title::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.logo-title::before {
	color: #ff00ff;
	z-index: -1;
}

.logo-title::after {
	color: #00ffff;
	z-index: -1;
}

@keyframes atp-glitch {
	0%,
	90%,
	100% {
		opacity: 0;
		transform: none;
	}
	91% {
		opacity: 0.8;
		transform: translate(-2px, -1px);
		clip-path: inset(20% 0 60% 0);
	}
	92% {
		opacity: 0.8;
		transform: translate(2px, 1px);
		clip-path: inset(60% 0 10% 0);
	}
	93% {
		opacity: 0;
		transform: none;
	}
	95% {
		opacity: 0.6;
		transform: translate(-1px, 2px);
		clip-path: inset(40% 0 30% 0);
	}
	96% {
		opacity: 0;
		transform: none;
	}
}

.logo-title::before {
	animation: atp-glitch 8s infinite;
}

.logo-title::after {
	animation: atp-glitch 8s 0.05s infinite;
}

@keyframes atp-border-glow {
	0%,
	100% {
		box-shadow: 0 0 0 1px var(--atp-rule), 0 0 18px rgba(212, 251, 63, 0.10);
	}
	50% {
		box-shadow: 0 0 0 1px var(--atp-acid-dim), 0 0 28px rgba(212, 251, 63, 0.22);
	}
}

.main-nav {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 820px;
	background: var(--atp-panel);
	border: 1px solid var(--atp-acid);
	padding: 4px;
	animation: atp-border-glow 4s ease-in-out infinite;
}

/* `is-collapsible` is set by mobile-menu.js on all viewports; row layout stays until max-width breakpoint. */
.main-nav.is-collapsible {
	position: relative;
}

.nav-btn {
	flex: 1;
	text-align: center;
	padding: 14px 6px;
	color: var(--atp-acid);
	text-decoration: none;
	font-family: var(--atp-font-display);
	font-weight: 800;
	font-stretch: 75%;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: relative;
	transition: background 0.2s ease, color 0.2s ease;
	overflow: hidden;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.nav-btn:not(:last-child) {
	border-right: 1px solid var(--atp-rule);
}

.nav-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(212, 251, 63, 0.12), transparent);
	transform: translateX(-100%);
	transition: transform 0.5s ease;
}

.nav-btn:hover::before,
.nav-btn:focus-visible::before {
	transform: translateX(100%);
}

.nav-btn:hover,
.nav-btn:focus-visible,
.nav-btn.active {
	background: var(--atp-acid);
	color: var(--atp-black);
	text-shadow: none;
}

.nav-btn:focus-visible {
	outline: 2px solid var(--atp-gold);
	outline-offset: 2px;
}

/* Mobile menu toggle (injected by mobile-menu.js) */
.atp-nav-toggle {
	display: none;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 12px 16px;
	font-family: var(--atp-font-mono);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--atp-acid);
	background: var(--atp-panel);
	border: 1px solid var(--atp-acid);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.atp-nav-toggle:hover,
.atp-nav-toggle:focus-visible {
	background: var(--atp-acid);
	color: var(--atp-black);
}

.atp-nav-toggle:focus-visible {
	outline: 2px solid var(--atp-off-white);
	outline-offset: 3px;
}

/* Nav visibility when enhanced by mobile-menu.js uses the `hidden` attribute (no-JS: full nav stays visible). */
.main-nav.is-collapsible[hidden] {
	display: none !important;
}

@media (max-width: 768px) {
	.atp-nav-toggle {
		display: block;
	}

	.main-nav.is-collapsible {
		flex-direction: column;
		align-items: stretch;
	}

	.main-nav.is-collapsible .nav-btn:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid rgba(236, 208, 120, 0.25);
	}

	.main-nav.is-collapsible:not([hidden]) {
		margin-top: 8px;
		width: 100%;
		max-width: 600px;
	}
}

/* ----- Section headers + episode grid (home + machinimas) ----- */
.grid-section {
	scroll-margin-top: 150px;
}

.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--atp-acid);
	padding-bottom: 12px;
	margin-bottom: 30px;
	position: relative;
}

.section-header::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 120px;
	height: 3px;
	background: var(--atp-acid);
	box-shadow: 0 0 10px var(--atp-acid-glow);
	animation: atp-header-line 5s ease-in-out infinite;
}

@keyframes atp-header-line {
	0%, 100% { left: 0; }
	50% { left: calc(100% - 120px); }
}

.section-title {
	font-family: var(--atp-font-display);
	font-weight: 900;
	font-stretch: 75%;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	color: var(--atp-acid);
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	gap: 14px;
	line-height: 0.9;
}

.section-title::before {
	content: "//";
	color: var(--atp-gold);
	font-family: var(--atp-font-mono);
	font-size: 0.6em;
	letter-spacing: 0;
}

.section-deco {
	height: 16px;
	flex-grow: 1;
	margin-left: 20px;
	background:
		repeating-linear-gradient(90deg, var(--atp-acid) 0 2px, transparent 2px 8px);
	opacity: 0.55;
	align-self: center;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.card {
	background: var(--atp-panel);
	border: 1px solid var(--atp-rule);
	position: relative;
	transition: transform 0.35s var(--atp-ease-out-quart), border-color 0.25s ease, box-shadow 0.35s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.card::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: linear-gradient(135deg, var(--atp-acid), var(--atp-gold), var(--atp-acid));
	background-size: 300% 300%;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.4s ease;
	animation: atp-gradient-shift 4s ease infinite;
}

/* Marathon-style corner ticks on cards */
.card::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 10px;
	height: 10px;
	border-top: 1px solid var(--atp-acid);
	border-right: 1px solid var(--atp-acid);
	pointer-events: none;
	opacity: 0.7;
}

@keyframes atp-gradient-shift {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.card:hover::before,
.card:focus-within::before {
	opacity: 1;
}

.card:hover,
.card:focus-within {
	border-color: transparent;
	transform: translateY(-6px);
	box-shadow:
		0 18px 36px rgba(0, 0, 0, 0.9),
		0 0 24px rgba(212, 251, 63, 0.18);
	z-index: 5;
}

.card:focus-visible {
	outline: 2px solid var(--atp-acid);
	outline-offset: 4px;
}

.card-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	position: relative;
	overflow: hidden;
}

.card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.6s var(--atp-ease-out-quart),
		filter 0.6s ease;
	opacity: 0.8;
	filter: saturate(0.7);
}

.card:hover .card-thumb img,
.card:focus-within .card-thumb img {
	transform: scale(1.1);
	opacity: 1;
	filter: saturate(1);
}

.play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.play-icon {
	width: 56px;
	height: 56px;
	background: var(--atp-acid);
	color: var(--atp-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 0 24px var(--atp-acid-glow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.card:hover .play-overlay,
.card:focus-within .play-overlay {
	opacity: 1;
}

.card:hover .play-icon,
.card:focus-within .play-icon {
	transform: scale(1.15);
	box-shadow: 0 0 30px var(--atp-acid), 0 0 60px rgba(212, 251, 63, 0.4);
}

.card-meta {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--atp-acid);
	background: linear-gradient(180deg, var(--atp-panel), var(--atp-void));
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.card-title {
	font-family: var(--atp-font-display);
	font-weight: 800;
	font-stretch: 75%;
	font-size: 1.15rem;
	color: var(--atp-off-white);
	line-height: 1.05;
	letter-spacing: 0.01em;
	margin: 0;
	text-transform: uppercase;
}

.card-tag {
	font-family: var(--atp-font-mono);
	font-size: 0.7rem;
	color: var(--atp-acid);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.card-tag::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--atp-acid);
}

/* ----- Footer (all pages — variants add markup only) ----- */
footer {
	margin-top: 80px;
	padding: 50px 20px 40px;
	border-top: 1px solid var(--atp-acid);
	background: linear-gradient(180deg, transparent, rgba(212, 251, 63, 0.04));
	text-align: center;
	position: relative;
}

footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 160px;
	height: 3px;
	background: var(--atp-acid);
	box-shadow: 0 0 12px var(--atp-acid-glow);
}

.footer-logo {
	font-family: var(--atp-font-display);
	font-weight: 900;
	font-stretch: 75%;
	font-size: 4rem;
	color: var(--atp-acid);
	margin-bottom: 10px;
	opacity: 0.45;
	letter-spacing: 0.05em;
	transition: opacity 0.3s ease, text-shadow 0.3s ease;
	line-height: 1;
}

.footer-logo:hover {
	opacity: 0.85;
	text-shadow: 0 0 24px var(--atp-acid-glow);
}

.tagline-wrapper {
	height: 28px;
	overflow: hidden;
	margin: 18px auto;
	color: var(--atp-gold);
	font-family: var(--atp-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

#rotating-tagline {
	display: inline-block;
	border-right: 2px solid var(--atp-acid);
	padding-right: 4px;
	animation: atp-cursor-blink 0.8s step-end infinite;
}

@keyframes atp-cursor-blink {
	0%, 100% { border-color: var(--atp-acid); }
	50% { border-color: transparent; }
}

.social-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px;
}

.social-link {
	color: var(--atp-off-white);
	text-decoration: none;
	font-family: var(--atp-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	border: 1px solid var(--atp-rule);
	padding: 9px 18px;
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
}

.social-link::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--atp-acid);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.social-link:hover::before,
.social-link:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left;
}

.social-link:hover,
.social-link:focus-visible {
	background: var(--atp-acid);
	color: var(--atp-black);
	border-color: var(--atp-acid);
}

.social-link:focus-visible {
	outline: 2px solid var(--atp-off-white);
	outline-offset: 2px;
}

.credit-link {
	display: block;
	margin-top: 14px;
	font-size: 9px;
	color: var(--atp-mute);
	text-decoration: none;
	letter-spacing: 0.22em;
	transition: color 0.25s ease, text-shadow 0.25s ease;
	font-family: var(--atp-font-mono);
	text-transform: uppercase;
}

.credit-link:hover,
.credit-link:focus-visible {
	color: var(--atp-acid);
	text-shadow: 0 0 6px var(--atp-acid-glow);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.logo-container {
		width: 100%;
		padding: 1.2rem 1rem;
	}

	.grid {
		grid-template-columns: 1fr;
	}

	.main-nav {
		width: 100%;
		max-width: none;
	}

	.nav-btn {
		font-size: 0.9rem;
		padding: 12px 0;
	}

	footer {
		margin-top: 40px;
		padding: 40px 16px;
	}
}

/* ----- ATP full-width page template (GeneratePress) ----- */
.page-template-page-full-width-php .inside-article {
	padding-left: 0;
	padding-right: 0;
}

/* GP Customizer often sets a white panel on .inside-article / content wrappers — strip it so body void + grid/particles show through */
.page-template-page-full-width-php #page,
.page-template-page-full-width-php .site,
.page-template-page-full-width-php .site-content,
.page-template-page-full-width-php .content-area,
.page-template-page-full-width-php #primary,
.page-template-page-full-width-php main,
.page-template-page-full-width-php .inside-article,
.page-template-page-full-width-php article.post,
.page-template-page-full-width-php .entry-content,
.page-template-page-full-width-php .entry-header {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Strip GP theme white background on all ATP pages, not just full-width template */
#page,
.site,
.site-content,
.content-area,
#primary,
main.site-main,
.inside-article,
article.post,
.entry-content,
.entry-header {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

@media (max-width: 768px) {
	/* Mobile browsers were washing out translucent panels against theme wrappers. */
	.logo-container,
	.card,
	.atp-home-page .hero-frame,
	.atp-home-page .terminal-box,
	.atp-home-page .discord-wrapper,
	.atp-contact-page .comms-panel,
	.atp-voice-page .mini-terminal,
	.atp-machinima-page .mission-briefing,
	.atp-machinima-page .coming-soon-box {
		background: rgba(0, 0, 0, 0.88);
	}

	.logo-container,
	.atp-contact-page .comms-panel {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.atp-machinima-page .series-selector .series-tab,
	.atp-machinima-page .stat-box,
	.atp-machinima-page .wiki-aside {
		background: rgba(6, 12, 10, 0.92);
	}
}

/* ----- Accessibility: respect reduced-motion preference ----- */
@media (prefers-reduced-motion: reduce) {
	/* Disable CRT boot animation */
	.crt-wrapper {
		animation: none;
	}

	/* Disable scanlines overlay */
	body::before {
		display: none;
	}

	/* Disable vignette overlay */
	body::after {
		display: none;
	}

	/* Disable glitch effect on logo */
	.logo-title::before,
	.logo-title::after {
		animation: none;
	}

	/* Disable animated section-header line */
	.section-header::after {
		animation: none;
	}

	/* Disable nav border glow pulse */
	.main-nav {
		animation: none;
	}

	/* Disable card gradient shift */
	.card::before {
		animation: none;
	}

	/* Disable tagline cursor blink */
	#rotating-tagline {
		animation: none;
	}

	/* Snap scroll-reveal elements into view immediately */
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Remove card hover motion */
	.card:hover,
	.card:focus-within {
		transform: none;
	}
}