/*
Theme Name: Pristine Motors
Theme URI: https://pristinemotors.co.ke
Author: Pristine Motors
Description: Custom obsidian-dark theme for Pristine Motors, Mombasa. Hand-written CSS, self-hosted fonts, no framework and no build step — the client publishes and it is live.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pristine-motors
*/

/* ==========================================================================
   Fonts — self-hosted, latin subset, no request to Google
   --------------------------------------------------------------------------
   DM Sans v17 ships as a variable font: one file covers 400-700, so all three
   weights the design uses come from a single 37 KB download. Barlow Condensed
   is static per weight; browsers fetch only the weights a page actually uses.
   ========================================================================== */

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('assets/fonts/dm-sans-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-800.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-900.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Design tokens — lifted verbatim from the approved design
   ========================================================================== */

:root {
	--bg-base: #0a0a0b;
	--bg-card: #111114;
	--bg-elevated: #16161a;
	--border: #1e1e24;
	/* Cards/panels/checkboxes/sliders — real UI-component boundaries — use
	   this instead of --border. Identical to --border here (pass-through,
	   same as --accent-text below); light mode splits the two apart. See
	   the comment on the light override for why. */
	--border-strong: var(--border);
	--accent: #00d4ff;
	--accent-glow: rgba(0, 212, 255, 0.15);
	--text-primary: #f5f5f7;
	--text-secondary: #a0a0b0;
	--text-muted: #8a8a9a;

	--whatsapp: #25d366;

	/*
	 * Text on a bright accent/amber fill (buttons, badges, selection
	 * highlight, the skip link). Always dark — the accent and amber are
	 * both bright, saturated colours in both themes, so this never needs
	 * its own light-mode override the way --bg-base does when it's used
	 * as a real background.
	 */
	--text-on-accent: #0a0a0b;

	/*
	 * Brand hues (amber, purple, green, and the accent cyan itself) used as
	 * running TEXT — labels, links, status words — rather than as a
	 * background fill or a decorative border. Identical to the plain brand
	 * hex in dark mode (these are pure pass-throughs here), but each gets
	 * a darkened light-mode value below: the literal brand hex reads
	 * beautifully on the near-black dark background but drops to roughly
	 * 2:1–4:1 contrast on white, which fails WCAG AA for text. Background
	 * fills, borders and glows keep using the plain colour/token directly —
	 * this pass-through is only for text and small icon fills.
	 */
	--accent-text: var(--accent);
	--amber-text: #f59e0b;
	--purple-text: #a855f7;
	--green-text: #10b981;

	--font-display: 'Barlow Condensed', system-ui, -apple-system, sans-serif;
	--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

	/* Matches max-w-7xl plus the horizontal padding used across the design. */
	--wrap: 80rem;
	--gutter: 1.25rem;

	--radius-sm: 0.5rem;
	--radius: 0.75rem;
	--radius-lg: 1rem;

	--shadow-glow: 0 0 20px rgba(0, 212, 255, 0.25);

	/* Fixed header height — pages offset their top padding by this. */
	--header-h: 60px;

	--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (min-width: 1024px) {
	:root {
		--gutter: 2rem;
		--header-h: 72px;
	}
}

/* ==========================================================================
   Light theme — opt-in via the header toggle (assets/js/site.js sets
   data-theme="light" on <html> and remembers it in localStorage; see
   header.php for the inline early-paint script that applies a saved
   choice before first paint). Dark stays the unconditional default.

   The accent cyan, the WhatsApp green and --text-on-accent are NOT
   redefined here — they are the locked brand colours (CLAUDE.md) and
   read fine as fills/borders/icons on white exactly as they do on black.
   What actually breaks on a light background is any of those same
   colours used as small TEXT, which is what --accent-text, --amber-text,
   --purple-text and --green-text (defined in the dark tokens above) exist
   to fix — see the comment there.

   Deliberately NOT reworked for light mode: the full-bleed hero photo,
   the vehicle photo gallery and its lightbox, and the mobile drawer/
   filter-panel backdrops. All of those already sit on a permanently dark
   scrim or a black backdrop for photo legibility — a choice most sites
   with a photo-heavy hero make regardless of overall site theme — so
   they are unaffected by this attribute on purpose, not missed.
   ========================================================================== */

:root[data-theme='light'] {
	--bg-base: #f4f5f7;
	--bg-card: #ffffff;
	--bg-elevated: #f8f9fb;
	/* --border stays the original faint value — it's what every plain
	   section-line divider (header, footer, between-section rules) uses,
	   and those were fine as they were; darkening them along with the
	   cards read as a mistake, not a fix. --border-strong is the split:
	   only actual UI-component boundaries — cards, panels, filter
	   checkboxes, slider tracks — use it. The original --border
	   (#e2e4e9) measured 1.17–1.27:1 against every light surface on
	   those, an actual WCAG 1.4.11 non-text-contrast failure (needs
	   3:1). #8a8a9a clears 3:1 against all three light backgrounds with
	   margin — it's the same grey as dark mode's --text-muted, not a new
	   colour. See PROJECT-STATE.md for the full measurements. */
	--border: #e2e4e9;
	--border-strong: #8a8a9a;
	--accent-glow: rgba(0, 212, 255, 0.25);
	--text-primary: #0e0e10;
	/* One step darker than a first pass landed on (zinc-600/500 → 700/600) —
	   both cleared WCAG AA already, but read thin against white on a real
	   screen. See PROJECT-STATE.md for the measured ratios, before and
	   after. */
	--text-secondary: #3f3f46;
	--text-muted: #52525b;

	--shadow-glow: 0 0 20px rgba(0, 212, 255, 0.35);

	/* Same hue family, darkened until each reads at 4.5:1+ against white —
	   see PROJECT-STATE.md for the measured ratios. One notch darker than
	   the first pass for the same "reads thin" reason as text-secondary
	   above. */
	--accent-text: #0c5c74;
	--amber-text: #92400e;
	--purple-text: #6b21a8;
	--green-text: #065f46;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--border);
}

* {
	margin: 0;
}

html {
	scroll-behavior: smooth;
	/* Anchor targets clear the fixed header rather than hiding under it. */
	scroll-padding-top: calc(var(--header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Nothing in this design scrolls sideways; a stray wide child should be
	   clipped rather than dragging the whole page off-centre on a phone. */
	overflow-x: hidden;
}

body.pm-no-scroll {
	overflow: hidden;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

::selection {
	background-color: var(--accent);
	color: var(--text-on-accent);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.pm-display,
.pm-h1,
.pm-h2,
.pm-h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.1;
}

.pm-h1 {
	font-size: clamp(2rem, 8vw, 2.75rem);
	font-weight: 800;
}

.pm-h2 {
	font-size: clamp(1.75rem, 6vw, 3rem);
	font-weight: 800;
	letter-spacing: 0.04em;
}

.pm-h3 {
	font-size: 1.125rem;
	font-weight: 700;
}

/* Faint shadow on the two big display sizes only — page-hero and section
   titles, not h3 (card titles, small subheadings), which are dense enough
   on the page that a shadow would read as noise rather than depth.
   Dark mode gets the same soft cyan glow as buttons/focus rings elsewhere
   (--shadow-glow, --accent-glow); light mode swaps to a neutral shadow —
   a cyan glow on dark text over a white card looks like a colour fringe,
   not depth. */
.pm-h1,
.pm-h2 {
	text-shadow: 0 0 24px rgba(0, 212, 255, 0.12);
}

[data-theme='light'] .pm-h1,
[data-theme='light'] .pm-h2 {
	text-shadow: 0 1px 3px rgba(14, 14, 16, 0.08);
}

.pm-eyebrow {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.pm-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.pm-section {
	padding-block: 3.5rem;
}

@media (min-width: 1024px) {
	.pm-section {
		padding-block: 5rem;
	}
}

.pm-icon {
	flex-shrink: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--accent);
	color: var(--text-on-accent);
	font-weight: 700;
}

.pm-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 44px minimum — every control on this site gets tapped with a thumb. */
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-sm);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
		border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pm-btn--accent {
	background-color: var(--accent);
	color: var(--text-on-accent);
}

.pm-btn--accent:hover {
	box-shadow: var(--shadow-glow);
}

.pm-btn--outline {
	border: 1px solid var(--border-strong);
	color: var(--text-primary);
}

.pm-btn--outline:hover {
	border-color: var(--accent);
	color: var(--accent-text);
}

.pm-btn--accent-outline {
	border: 1px solid var(--accent);
	color: var(--accent-text);
}

.pm-btn--accent-outline:hover {
	background-color: var(--accent);
	color: var(--text-on-accent);
}

/* Near-black, not white, on WhatsApp green: white measures 1.98:1 there
   (Lighthouse-flagged, needs 4.5:1); --bg-base measures 9.98:1. */
.pm-btn--whatsapp {
	background-color: var(--whatsapp);
	color: #0a0a0b;
}

/* Amber — the hot deals brand colour, same #F59E0B as the in-transit status
   token. Only used on the "Today's Hot Deals" teaser CTA today, which is a
   deliberately dark-in-both-themes section (see home.css) — so this stays
   the literal dark-mode amber rather than following --amber-text. */
.pm-btn--amber-outline {
	border: 1px solid #f59e0b;
	color: #f59e0b;
}

.pm-btn--amber-outline:hover {
	background-color: #f59e0b;
	color: var(--text-on-accent);
}

.pm-btn--ghost-light {
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
}

.pm-btn--ghost-light:hover {
	border-color: #fff;
}

.pm-btn--block {
	width: 100%;
}

/* ==========================================================================
   Cards, panels and badges
   ========================================================================== */

.pm-panel {
	background-color: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Prose — client-written body copy (the About and vehicle/hot-deal
   descriptions) and our own instructional copy (the Guide page). Global
   rather than page-specific: it was single.css-only until the Guide page
   needed it too and About turned out to have been relying on it without
   ever actually loading it.
   -------------------------------------------------------------------------- */

.pm-prose {
	margin-top: 0.75rem;
	color: rgba(245, 245, 247, 0.8);
}

[data-theme='light'] .pm-prose {
	color: rgba(14, 14, 16, 0.8);
}

.pm-prose > * + * {
	margin-top: 1rem;
}

.pm-prose a {
	color: var(--accent-text);
	text-decoration: underline;
}

.pm-prose img {
	border-radius: var(--radius-sm);
}

.pm-prose ol,
.pm-prose ul {
	padding-left: 1.25rem;
}

.pm-prose li + li {
	margin-top: 0.5rem;
}

.pm-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: 999px;
	color: var(--badge-color);
	background-color: var(--badge-bg);
	border: 1px solid var(--badge-border);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.pm-badge__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--badge-color);
	flex-shrink: 0;
}

/*
 * Sold keeps its #4A4A5A identity in the dot, the fill and the border — the
 * design wants a sold car to read as quiet. The label alone is lifted to
 * --text-secondary because #4A4A5A on a dark photo measures about 2.2:1, so
 * "Sold" was effectively invisible over a card image. Quiet is the intent;
 * unreadable is not, and whether a car is still for sale is the single most
 * important thing a badge says. Flagged for confirmation.
 */
.pm-badge--sold {
	color: var(--text-secondary);
}

/*
 * pm_status_badge() (inc/template-tags.php) computes --badge-color inline
 * per post, server-side, from the fixed hex in pm_status_config() — it has
 * no way to know a visitor's theme choice, which only exists client-side
 * in localStorage. Same problem the Sold badge above already had, same
 * fix: override the custom property the label (and the dot, which reads
 * the same property) actually renders with, scoped to light mode. The
 * background tint and border stay at their original inline values — low-
 * alpha fills and a thin border don't carry the same contrast requirement
 * running text does, and they already read fine on white.
 */
[data-theme='light'] .pm-badge--available {
	--badge-color: #047857;
}

[data-theme='light'] .pm-badge--reserved {
	--badge-color: #7e22ce;
}

[data-theme='light'] .pm-badge--in-transit {
	--badge-color: #b45309;
}

[data-theme='light'] .pm-badge--clearing {
	--badge-color: #0e7490;
}

.pm-badge--in-transit .pm-badge__dot {
	animation: pm-dot-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Media wells — used by cards, the gallery and the hero
   ========================================================================== */

.pm-media {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-elevated);
}

.pm-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-media__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	color: var(--text-muted);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba(255, 255, 255, 0.015) 10px,
		rgba(255, 255, 255, 0.015) 20px
	);
}

[data-theme='light'] .pm-media__placeholder {
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba(0, 0, 0, 0.02) 10px,
		rgba(0, 0, 0, 0.02) 20px
	);
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.pm-section-head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pm-section-head__text {
	border-left: 4px solid var(--accent);
	padding-left: 1rem;
}

.pm-section-head__sub {
	margin-top: 0.5rem;
	color: var(--text-secondary);
	font-size: 0.9375rem;
}

.pm-section-head__action {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	min-height: 44px;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent-text);
}

.pm-section-head__action .pm-icon {
	transition: transform 0.2s var(--ease);
}

.pm-section-head__action:hover .pm-icon {
	transform: translateX(4px);
}

.pm-section-head--center {
	text-align: center;
	align-items: center;
}

.pm-section-head--center .pm-section-head__text {
	border-left: 0;
	padding-left: 0;
}

.pm-section-head--center .pm-section-head__sub {
	max-width: 42rem;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.pm-section-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.pm-section-head--center {
		flex-direction: column;
	}
}

/* ==========================================================================
   Flourishes — ported verbatim from the approved app/globals.css
   ========================================================================== */

/* Hero eyebrow shimmer — muted base with a bright sweep. */
@keyframes pm-hero-shimmer {
	0% {
		background-position: 200% center;
	}
	100% {
		background-position: -200% center;
	}
}

.pm-shimmer {
	background-image: linear-gradient(
		90deg,
		#8a8a9a 0%,
		#8a8a9a 35%,
		#f5f5f7 50%,
		#8a8a9a 65%,
		#8a8a9a 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: pm-hero-shimmer 3s ease-in-out 1.5s infinite;
}

/* Hero typing cursor — 3px accent bar, blinks after the last character. */
@keyframes pm-cursor-blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

.pm-cursor {
	display: inline-block;
	width: 3px;
	height: 0.9em;
	margin-left: 0.06em;
	background-color: var(--accent);
	animation: pm-cursor-blink 0.5s ease-in-out infinite;
}

/* Pulsing dot — signals live inventory movement. */
@keyframes pm-dot-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.4);
		opacity: 0.4;
	}
}

.pm-dot-pulse {
	animation: pm-dot-pulse 2s ease-in-out infinite;
}

/* Grain / noise texture overlay — a pure SVG data URI, same technique as
   the reference's .noise-overlay (app/globals.css): a feTurbulence filter,
   no image request. Usage: an absolutely-positioned, aria-hidden child at
   low opacity, set by whichever section uses it. */
.pm-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Glitch text — two offset copies that slice on load, then settle. Three
   passes, then the pseudo-copies end fully clipped so the heading reads clean.
   Usage: <span class="pm-glitch" data-text="Word">Word</span> */
.pm-glitch {
	position: relative;
	display: inline-block;
	color: var(--text-primary);
}

.pm-glitch::before,
.pm-glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	clip-path: inset(0 0 100% 0);
}

.pm-glitch::before {
	color: #00d4ff;
	animation: pm-glitch-top 0.4s steps(2, end) 3 forwards;
}

.pm-glitch::after {
	color: var(--purple-text);
	animation: pm-glitch-bottom 0.4s steps(2, end) 3 forwards;
}

@keyframes pm-glitch-top {
	0% {
		clip-path: inset(0 0 80% 0);
		transform: translateX(-4px);
	}
	20% {
		clip-path: inset(20% 0 50% 0);
		transform: translateX(4px);
	}
	40% {
		clip-path: inset(45% 0 35% 0);
		transform: translateX(-4px);
	}
	60% {
		clip-path: inset(30% 0 55% 0);
		transform: translateX(4px);
	}
	80% {
		clip-path: inset(10% 0 75% 0);
		transform: translateX(-2px);
	}
	100% {
		clip-path: inset(0 0 100% 0);
		transform: translateX(0);
	}
}

@keyframes pm-glitch-bottom {
	0% {
		clip-path: inset(70% 0 5% 0);
		transform: translateX(4px);
	}
	20% {
		clip-path: inset(40% 0 30% 0);
		transform: translateX(-4px);
	}
	40% {
		clip-path: inset(55% 0 20% 0);
		transform: translateX(4px);
	}
	60% {
		clip-path: inset(35% 0 40% 0);
		transform: translateX(-4px);
	}
	80% {
		clip-path: inset(60% 0 15% 0);
		transform: translateX(2px);
	}
	100% {
		clip-path: inset(0 0 100% 0);
		transform: translateX(0);
	}
}

/* Scroll reveal — the CSS half. archive/nav scripts add .is-visible via an
   IntersectionObserver; with JS off the .pm-reveal class is never applied by
   the script, so content is visible by default and nothing can trap it. */
.pm-reveal.is-armed {
	opacity: 0;
	transform: translateY(16px);
}

.pm-reveal.is-armed.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* Custom dark scrollbar. */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
	background: #2a2a33;
}

[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
	/* Darker than the --border-strong resting state above (#8a8a9a) — a
	   lighter hover than rest would read as backwards. */
	background: #6b6b76;
}

/* Hide the scrollbar on horizontal carousels. */
.pm-no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.pm-no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Dark range slider. */
input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	/* content-box, deliberately: the reset makes everything border-box, which
	   made the 4px height the *outer* box. The 32px of tap padding below then
	   left zero content height and the track painted nothing at all. */
	box-sizing: content-box;
	height: 4px;
	border-radius: 999px;
	background: var(--border-strong);
	outline: none;
	/* The track is 4px, but a thumb needs a thumb-sized target. The padding
	   grows the hit area to 36px and the negative margin keeps the control
	   occupying its visual height in the layout. */
	padding-block: 1rem;
	margin-block: -1rem;
	background-clip: content-box;
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #00d4ff;
	border: 2px solid var(--bg-base);
	box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
	cursor: pointer;
}

input[type='range']::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #00d4ff;
	border: 2px solid var(--bg-base);
	box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
	cursor: pointer;
}

input[type='range']::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var(--border-strong);
}

/* ==========================================================================
   Reduced motion — honour the system setting everywhere
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.pm-glitch::before,
	.pm-glitch::after {
		display: none;
	}

	.pm-reveal.is-armed {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Plain pages (page.php) — Privacy Policy, Terms & Conditions
   ========================================================================== */

.pm-page-content {
	max-width: 46rem;
	margin-top: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.pm-page-content h2 {
	margin-top: 2.25rem;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.pm-page-content h2 + * {
	margin-top: 0.75rem;
}

.pm-page-content ul {
	list-style: disc;
}

.pm-page-content strong {
	color: var(--text-primary);
}