/**
 * Atmosphere — the "night garage editorial" layer.
 *
 * Operator brief (2026-06-06): the site reads sterile — flat black/yellow/
 * white with no depth. This component adds the missing atmosphere WITHOUT
 * changing the brand language: film grain, masked product photography,
 * kerb-stripe + speed-line motifs, and a condensed motorsport display face
 * for headings. Everything degrades gracefully and respects
 * prefers-reduced-motion.
 *
 * @package cool-bear
 */

/* === Display face ====================================================== */
/* Saira SemiCondensed — geometric, motorsport-adjacent. Self-hosted (no
   third-party font CDN at runtime). The family ships no italic; the racing
   lean is synthesised with oblique so we control the exact angle. */

@font-face {
	font-family: 'Saira SemiCondensed';
	src: url('../../fonts/saira-semicondensed-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Saira SemiCondensed';
	src: url('../../fonts/saira-semicondensed-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--cb-display-font: 'Saira SemiCondensed', 'DM Sans', sans-serif;
	--cb-accent: var(--wp--preset--color--accent, #e8ff00);
}

/* Display treatment for the big moments: hero H1, section headings,
   archive titles. Uppercase condensed with a subtle forward lean. */
.cb-display,
.cb-hero h1,
.cb-home-section__heading,
.cb-plp__title,
h1.wp-block-post-title {
	font-family: var(--cb-display-font);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	font-style: oblique 6deg;
}

/* Kerb stripe — the yellow/black chequer detail under display headings. */
.cb-kerb,
.cb-home-section__heading::after {
	content: '';
	display: block;
	width: 64px;
	height: 6px;
	margin-top: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--cb-accent) 0 8px,
		transparent 8px 16px
	);
}

/* === Film grain ======================================================== */
/* Whole-page micro noise at 2.5% — the single cheapest "not a flat PNG of
   black" signal. Pure SVG data URI, zero requests, GPU-composited. */

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.025;
	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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === Speed lines ======================================================= */
/* Thin diagonal accent slashes used as section punctuation. Apply the
   class to any section that needs the motif. */

.cb-speedlines {
	position: relative;
	overflow: hidden;
}
.cb-speedlines::before {
	content: '';
	position: absolute;
	top: -20%;
	right: -5%;
	width: 50%;
	height: 140%;
	pointer-events: none;
	background: repeating-linear-gradient(
		115deg,
		transparent 0 90px,
		color-mix(in srgb, var(--cb-accent) 7%, transparent) 90px 92px,
		transparent 92px 240px
	);
	-webkit-mask-image: linear-gradient(to left, black 30%, transparent);
	mask-image: linear-gradient(to left, black 30%, transparent);
}

/* === Carbon weave ====================================================== */
/* Very low-contrast diagonal weave for raised surfaces (tiles, trust band).
   Reads as texture, not pattern, at arm's length. */

.cb-carbon {
	background-image:
		repeating-linear-gradient(45deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 6px),
		repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 6px);
}

/* === Product ghost ===================================================== */
/* A product photograph bled into a dark section background. The element
   carries the image; the mask fades it into the page so it reads as
   atmosphere, not content. Used by the hero and archive headers. */

.cb-ghost {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.cb-ghost img {
	position: absolute;
	right: -4%;
	top: 50%;
	transform: translateY(-50%) rotate(-4deg);
	width: min(52vw, 760px);
	height: auto;
	opacity: 0.55;
	filter: saturate(0.85) contrast(1.05);
	-webkit-mask-image: radial-gradient(70% 70% at 60% 50%, black 35%, transparent 78%);
	mask-image: radial-gradient(70% 70% at 60% 50%, black 35%, transparent 78%);
}
@media (max-width: 781px) {
	.cb-ghost img {
		width: 120vw;
		right: -35%;
		opacity: 0.28;
	}
}

/* Slow drift on the ghost — barely perceptible life. */
@media (prefers-reduced-motion: no-preference) {
	.cb-ghost img {
		animation: cb-ghost-drift 14s ease-in-out infinite alternate;
	}
	@keyframes cb-ghost-drift {
		from { transform: translateY(-50%) rotate(-4deg); }
		to   { transform: translateY(-52%) rotate(-3.2deg); }
	}
}

/* Sections that host a ghost need stacking context + clipped overflow. */
.cb-has-ghost {
	position: relative;
	overflow: hidden;
}
.cb-has-ghost > :not(.cb-ghost) {
	position: relative;
	z-index: 1;
}

/* === Section washes ==================================================== */
/* Alternating section background treatments so long pages don't read as
   one continuous black slab. */

.cb-wash-accent {
	background:
		radial-gradient(60% 90% at 85% 10%, color-mix(in srgb, var(--cb-accent) 6%, transparent), transparent 70%),
		radial-gradient(50% 80% at 10% 100%, rgb(255 255 255 / 0.02), transparent 70%);
}
.cb-wash-steel {
	background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 35%);
}

/* Header-strip variant — calmer than the hero ghost. */
.cb-ghost--header img {
	width: min(34vw, 420px);
	opacity: 0.32;
	right: 2%;
	transform: translateY(-50%) rotate(-3deg);
}

/* === Clean catalogue (2026-06-11) ====================================== */
/* The BC-Racing-grade consistency pass: every product image sits in a
   white "well" so renders read like a printed catalogue, and every
   coilover range carries a colour-coded badge — the series system. */

.cb-img-well {
	position: relative;
	display: block;
	/* Graphite well — matches the PDP media treatment (pdp.css §brake/coilover/wheel).
	   Product renders are transparent PNGs (audit 2026-06-17), so a dark well + normal
	   blend reads as a clean cut-out on the dark theme instead of a stark white box.
	   (The old #f4f4f6 + multiply was built for baked-white JPEGs that no longer exist.) */
	background: radial-gradient(125% 110% at 50% 28%, #2a2a31 0%, #1c1c21 62%, #141417 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	border-radius: 0; /* DESIGN.md §4 — sharp corners on imagery */
	overflow: hidden;
	aspect-ratio: 1 / 1; /* true square wells — print-catalogue grid */
}
.cb-img-well img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: normal; /* transparent PNG renders sit directly on the graphite */
	box-sizing: border-box;
}
/* wpautop turns renderer newlines into in-flow <br>s that shove the image
   out of the well — neutralise any that sneak through. */
.cb-img-well br {
	display: none;
}

/* Range badge — top-left colour chip, initials of the range. */
.cb-range-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	min-width: 34px;
	padding: 4px 8px;
	border-radius: 6px;
	font-family: var(--cb-display-font);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-align: center;
	color: #0d0d0f;
	background: var(--cb-range-colour, var(--cb-accent));
}

/* The series palette — one colour per range, used by badges (and anywhere
   else a range needs identity). */
.cb-range-badge--super-sport     { --cb-range-colour: #e8ff00; }
.cb-range-badge--top-sport       { --cb-range-colour: #ff8a00; }
.cb-range-badge--racing-spec     { --cb-range-colour: #ef233c; color: #fff; }
.cb-range-badge--tarmac-rally    { --cb-range-colour: #2ec4b6; }
.cb-range-badge--gravel-rally    { --cb-range-colour: #d4a373; }
.cb-range-badge--pro-rally       { --cb-range-colour: #8338ec; color: #fff; }
.cb-range-badge--drift-spec      { --cb-range-colour: #ff2e92; color: #fff; }
.cb-range-badge--street-advanced { --cb-range-colour: #38b000; color: #fff; }
.cb-range-badge--circuit-master  { --cb-range-colour: #c8c8ce; }

/* Hero photography — full-bleed real-car shot behind the homepage hero,
   replacing the abstract glow as the primary backdrop. Dark gradient keeps
   the left-side copy at full contrast. */
/* Child-combinator + !important-free specificity bump: front-page.css ships
   `.cb-hero > * { position:relative; z-index:1 }` which loads later and was
   flattening the photo layer to an invisible 0-height block (defect D1). */
.cb-hero > .cb-hero-photo,
.cb-hero-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* WP constrained layout clamps even absolute children to content-size —
	   un-clamp so the photograph bleeds the full hero width. */
	max-width: none;
	pointer-events: none;
	background-size: cover;
	background-position: center right;
}
/* Hero video loop — fills the photo layer; the background-image doubles as
   poster/fallback. Hidden for reduced-motion users (poster shows instead). */
.cb-hero-photo .cb-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
	.cb-hero-photo .cb-hero-video {
		display: none;
	}
}

.cb-hero-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgb(13 13 15 / 0.96) 0%,
		rgb(13 13 15 / 0.88) 38%,
		rgb(13 13 15 / 0.45) 70%,
		rgb(13 13 15 / 0.25) 100%
	);
}