/* ============================================================================
   Maktune v5 — chapter atmospheres
   ----------------------------------------------------------------------------
   COLOUR ONLY. This file adds no layout, no components and no content. Every
   rule here changes a ground, a tint, a border or a text colour on structure
   that already exists, so the pass can be reviewed — or reverted — on its own.

   THE PROBLEM IT SOLVES
   ---------------------
   v5 shipped with two grounds, warm white and graphite, alternating. That reads
   as "a theme" rather than as a journey: nothing about the ninth section felt
   different from the third. Each chapter now has its own atmosphere, drawn from
   the materials the product is actually made of — mesh, steel, chrome, foam,
   packing board — while staying recognisably one palette.

   RULES THIS FILE OBEYS
   ---------------------
   1. Contrast is never traded for mood. Every body-text pairing below clears
      4.5:1 and every large heading clears 3:1; the values are noted where they
      are close. axe is run over the result, not assumed.
   2. Blue is strategic. It marks actions, mechanisms and measurements. Exactly
      one chapter — the creator programme — lets blue become the ground, and
      that is the point of it.
   3. Orange means a real offer. It appears on sale flags and nowhere else.
   4. Dark is never flat. Each dark chapter carries a low-amplitude tonal
      gradient so the surface has depth, at an opacity that reads as light
      falling on a material rather than as a graphic effect.
   5. No gradient exists because a space felt empty.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   THE PALETTE ITSELF NOW LIVES IN v5-system.css.

   It was declared here, which was correct while the atmosphere pass covered
   only the homepage — this file is gated to the front page. The commerce pass
   continues the same colour system onto the product and shop pages, where this
   file does not load, so every --v5-ivory / --v5-charcoal / --v5-cobalt would
   have resolved to nothing and each ground would have fallen back to its
   unstyled value.

   Duplicating the block was the other option and is worse: two copies of
   fourteen colours drift the moment anyone edits one. The values are unchanged
   and v5-system.css loads before this file on the homepage, so the rendered
   page is identical — verified by pixel diff.
   -------------------------------------------------------------------------- */

/* The header, drawer and footer are styled in v5-chrome.css, not here. They
   appear on EVERY route including the ones still running v3 templates, and this
   file is gated to v5 pages — so an atmosphere rule for the chrome would make
   the header change colour as a customer moved between pages. */

/* ============================================================================
   1. Hero — deep graphite, soft black, warm photographic tones
   ----------------------------------------------------------------------------
   Cinematic rather than black. The ground is lifted at the top-left, where the
   lead photograph's own warm light falls, so the frame and the page appear lit
   by the same source instead of the image sitting in a void.
   ========================================================================== */

.v5-atmos-hero {
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(120, 96, 72, .16) 0%, rgba(120, 96, 72, 0) 58%),
		radial-gradient(90% 70% at 92% 8%, rgba(78, 107, 245, .09) 0%, rgba(78, 107, 245, 0) 60%),
		var(--v5-hero-ink);
}

/* The scrim behind the headline carries the same warmth, so the copy sits IN
   the photograph rather than under a neutral grey wash. Slightly deeper than
   before at the text end — measured 14.8:1 for the headline, 7.9:1 for the
   supporting line. */
.v5-atmos-hero .v5-hero-tile--lead .v5-media::after {
	background: linear-gradient(
		100deg,
		rgba(10, 11, 14, .93) 0%,
		rgba(13, 15, 19, .80) 32%,
		rgba(16, 14, 12, .30) 62%,
		rgba(16, 14, 12, .04) 100%
	);
}

/* Each supporting tile gets its own light, per the brief, so the two future
   clips are graded to different atmospheres rather than one look twice. */

/* "Made to be repaired" — black, steel, a cobalt rim from the left. */
.v5-atmos-tile-repair .v5-media {
	background: linear-gradient(140deg, #0B0D11 0%, #1A1F27 100%);
	box-shadow: inset 1px 0 0 var(--v5-cobalt-dim), inset 0 0 60px rgba(78, 107, 245, .10);
}
/* "Built in our own factory" — charcoal under warm industrial light. */
.v5-atmos-tile-factory .v5-media {
	background: linear-gradient(140deg, #14120F 0%, #262019 100%);
	box-shadow: inset 1px 0 0 rgba(201, 122, 34, .30), inset 0 0 60px rgba(201, 122, 34, .10);
}

/* The temporary posters approximate the intended grade of the future footage,
   so the section already reads the way it eventually will. Removed by deleting
   these two rules once real video lands. */
.v5-atmos-tile-repair .v5-media img {
	filter: saturate(.80) contrast(1.08) brightness(.95) hue-rotate(-6deg);
}
/*
 * grayscale FIRST, then rebuild the colour. The stand-in photograph
 * (parts-dark) is lit strongly cobalt, and a partial sepia leaves a proportion
 * of the original hue untouched — sepia(.62) kept 38% of a very saturated blue
 * and the saturate() after it then amplified exactly that. Measured: the tile
 * still read blue, which is the atmosphere the tile BESIDE it owns and the
 * opposite of the warm working light this clip will be shot in.
 *
 * Collapsing to grayscale first makes the result independent of the source's
 * hue, so this grade will hold when the real footage replaces the placeholder.
 */
.v5-atmos-tile-factory .v5-media img {
	filter: grayscale(1) sepia(.9) saturate(1.7) hue-rotate(-14deg) brightness(1.04) contrast(1.03);
}

/*
 * The lighting sits ABOVE the photograph, not behind it.
 *
 * It was originally an inset box-shadow on the frame — which the opaque image
 * covered completely, so neither tile had any of the light the brief asks for.
 * ::before rather than ::after because ::after is already the production
 * label, which stays on top at z-index 2.
 */
.v5-atmos-tile-repair .v5-media::before,
.v5-atmos-tile-factory .v5-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
}
/* Cobalt raking in from the left — steel lit cold. */
.v5-atmos-tile-repair .v5-media::before {
	background: linear-gradient(105deg, rgba(78, 107, 245, .30) 0%, rgba(78, 107, 245, .06) 46%, rgba(78, 107, 245, 0) 72%);
}
/* Warm industrial light from the right — a workshop lamp, not a sunset. */
.v5-atmos-tile-factory .v5-media::before {
	background: linear-gradient(255deg, rgba(224, 152, 62, .34) 0%, rgba(224, 152, 62, .08) 48%, rgba(224, 152, 62, 0) 74%);
}

/* Production labels stay visible — they are the shot list. Tinted to their
   tile so they read as part of the design rather than as a defect. */
.v5-atmos-tile-repair .v5-pending::after { border-color: var(--v5-cobalt-dim); }
.v5-atmos-tile-factory .v5-pending::after { border-color: rgba(201, 122, 34, .34); }

/* ============================================================================
   2. The Maktune System — warm ivory and soft stone
   ----------------------------------------------------------------------------
   Orientation and shopping. Open and calm; the drama belongs to the chapters
   either side of it.
   ========================================================================== */

.v5-atmos-system { background: var(--v5-ivory); }

/* Chairs and Parts are distinguished by TEMPERATURE, not by a border or a
   badge — chairs sit on warm stone, parts on a cooler technical grey. Enough
   to separate two worlds, not enough to read as two different components. */
.v5-atmos-system .v5-world { background: #FDFCF9; border-color: #E7E2D8; }
.v5-atmos-system .v5-world:nth-child(1) .v5-world-media { background: var(--v5-stone); }
.v5-atmos-system .v5-world:nth-child(2) .v5-world-media { background: #E9ECEF; }
.v5-atmos-system .v5-world:hover { border-color: var(--v5-blue); }

.v5-atmos-system .v5-partnav { background: #FDFCF9; border-color: #E7E2D8; }
.v5-atmos-system .v5-partnav li + li { border-left-color: #E7E2D8; }
.v5-atmos-system .v5-partnav a:hover { background: var(--v5-stone); }

/* ============================================================================
   3. The Maktune Difference — charcoal and gunmetal, engineered
   ----------------------------------------------------------------------------
   The most "made" surface on the page: a fine mesh texture at the threshold of
   visibility, a cobalt wash from one edge, and hairlines the colour of steel.
   ========================================================================== */

.v5-atmos-difference {
	background:
		/* Mesh. 3px pitch, ~2% contrast — felt rather than seen, and it is the
		   material the chair back is actually made of. */
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
		radial-gradient(80% 60% at 100% 0%, rgba(78, 107, 245, .13) 0%, rgba(78, 107, 245, 0) 62%),
		linear-gradient(180deg, var(--v5-charcoal) 0%, #14171C 100%);
}
.v5-atmos-difference .v5-diff-list { border-top-color: var(--v5-steel); }
.v5-atmos-difference .v5-diff-media { background: var(--v5-gunmetal); }
/* One cobalt hairline down the left of each statement — the "fine dividing
   lines" the brief asks for, doing the job four cards would have done. */
.v5-atmos-difference .v5-diff-list li {
	padding-left: 16px;
	border-left: 1px solid var(--v5-steel);
	transition: border-color var(--mk-dur) var(--v5-ease);
}
.v5-atmos-difference .v5-diff-list li:hover { border-left-color: var(--v5-cobalt); }
/* 7.1:1 on this ground. */
.v5-atmos-difference .v5-diff-list p { color: #A7AEBC; }

/* ============================================================================
   4. Engineering — pale technical grey, blue annotation
   ----------------------------------------------------------------------------
   Deliberately LIGHT, so the engineering story is not a third dark chapter in
   a row. The close-ups carry the drama; blue does nothing but point at
   mechanisms and measurements.
   ========================================================================== */

.v5-atmos-engineering {
	background: linear-gradient(180deg, var(--v5-mist-warm) 0%, var(--v5-mist) 100%);
}
.v5-atmos-engineering .v5-feature .v5-media { background: #E4E7EA; }
/* The spec line is the measurement, so it is the one thing here that is blue —
   and it is bracketed by a blue rule rather than set in blue text, which would
   drop it to 4.0:1. The text stays graphite. */
.v5-atmos-engineering .v5-spec {
	border-top-color: transparent;
	border-left: 2px solid var(--v5-blue);
	padding: 2px 0 2px 12px;
	margin-top: 18px !important;
}
.v5-atmos-engineering .v5-eyebrow { color: var(--v5-blue); }

/* ============================================================================
   5. Featured products — quiet mist
   ----------------------------------------------------------------------------
   No decorative gradient anywhere near a product. The ground is flat on purpose
   so price, rating and stock are the highest-contrast things in the chapter.
   ========================================================================== */

.v5-atmos-featured { background: #EFEDE8; }
.v5-atmos-featured .v5-card { background: #FDFCFA; border-color: #E3DED4; }
.v5-atmos-featured .v5-card-media { background: #FFFFFF; }
.v5-atmos-featured .v5-card:hover { border-color: var(--v5-blue); }

/* ============================================================================
   6. One chair. Every part replaceable. — the strongest dark
   ----------------------------------------------------------------------------
   Near-black with a cobalt floor-wash, so the six components read as one lit
   assembly rather than six tiles. The outline responds to hover AND to keyboard
   focus, because a customer navigating by keyboard is exactly the one who
   needs to see where they are.
   ========================================================================== */

.v5-atmos-anatomy {
	background:
		radial-gradient(90% 55% at 50% 108%, rgba(78, 107, 245, .18) 0%, rgba(78, 107, 245, 0) 70%),
		linear-gradient(180deg, #0A0B0E 0%, #101319 62%, #0C0E12 100%);
}
.v5-atmos-anatomy .v5-anatomy-grid a {
	background: linear-gradient(180deg, rgba(35, 40, 49, .92) 0%, rgba(22, 26, 33, .92) 100%);
	border-color: var(--v5-steel);
}
/* Restrained: a one-pixel cobalt edge and a soft bloom, no neon. */
.v5-atmos-anatomy .v5-anatomy-grid a:hover,
.v5-atmos-anatomy .v5-anatomy-grid a:focus-visible {
	border-color: var(--v5-cobalt);
	box-shadow: 0 0 0 1px var(--v5-cobalt-dim), 0 12px 34px -12px var(--v5-cobalt-glow);
	outline: none;
}
.v5-atmos-anatomy .v5-anatomy-media { background: #F4F2ED; }
.v5-atmos-anatomy .v5-anatomy-s { color: #7E8798; }   /* 4.6:1 on the tile */
.v5-atmos-anatomy .v5-anatomy-p { color: #C4CBDA; }

/* ============================================================================
   7. Factory — industrial neutrals, warm amber
   ----------------------------------------------------------------------------
   Kraft and unfinished board, not steel-blue. The empty frames are graded to
   the warm working light the real footage will be shot in, so the photographs
   drop into a section already the right temperature.
   ========================================================================== */

.v5-atmos-factory { background: linear-gradient(180deg, #F3EFE7 0%, var(--v5-industrial) 100%); }
/* Kraft and machine grey — the factory floor, not a sunlit room. Cooler and
   more mineral than the workspace gallery below it, so the two empty-state
   chapters do not read as the same beige twice. */
.v5-atmos-factory .v5-slot-empty {
	border-color: #D3CCBE;
	background:
		repeating-linear-gradient(-45deg, transparent 0 9px, rgba(120, 106, 82, .07) 9px 18px),
		linear-gradient(160deg, #EDE8DD 0%, #DFD8C9 100%);
}
.v5-atmos-factory .v5-slot-empty span { color: #7D7059; }
.v5-atmos-factory .v5-factory figcaption { color: #6B5F4C; }

/* ============================================================================
   8. Made for real workdays — warm and natural
   ----------------------------------------------------------------------------
   Real workspaces contain wood, daylight and plants. A dark ground would make
   every one of those photographs look wrong, so this is the warmest surface on
   the page and the frames are neutral enough to disappear behind them.
   ========================================================================== */

.v5-atmos-inspire { background: linear-gradient(180deg, var(--v5-natural) 0%, #F2EADD 100%); }
.v5-atmos-inspire .v5-slot-empty {
	border-color: #DED3C0;
	background:
		repeating-linear-gradient(-45deg, transparent 0 10px, rgba(120, 96, 60, .05) 10px 20px),
		#F6F0E5;
}
.v5-atmos-inspire .v5-slot-empty span { color: #8C7E68; }

/* ============================================================================
   9. Creator & affiliate — blue becomes the ground
   ----------------------------------------------------------------------------
   The one chapter where the brand colour leads. Deep blue into indigo, which
   keeps it professional rather than saturated — and because it happens exactly
   once, it lands.
   ========================================================================== */

.v5-atmos-creator {
	background:
		radial-gradient(90% 70% at 12% 0%, rgba(78, 107, 245, .26) 0%, rgba(78, 107, 245, 0) 62%),
		linear-gradient(150deg, var(--v5-indigo) 0%, var(--v5-indigo-2) 62%, #0B1030 100%);
}
/* On indigo the default muted grey drops to 3.9:1, so the supporting text is
   re-mixed toward the ground rather than left grey. Measured 8.2:1. */
.v5-atmos-creator .v5-lede { color: #C3CCEC; }
.v5-atmos-creator .v5-eyebrow { color: #94A4E0; }
.v5-atmos-creator .v5-creator-media { background: rgba(255, 255, 255, .05); }
/* White outline, not cobalt: a blue button on a blue ground disappears. */
.v5-atmos-creator .v5-btn--primary { background: #FFFFFF; color: var(--v5-indigo-2); }
.v5-atmos-creator .v5-btn--primary:hover { background: #E8EDFF; color: var(--v5-indigo-2); }

/* ============================================================================
   10. Reviews and 11. Support — settling back to calm ivory
   ========================================================================== */

.v5-atmos-reviews { background: var(--v5-mist-warm); }
.v5-atmos-reviews .v5-review { background: #FDFCFA; border-color: #E5E1D7; }

.v5-atmos-support { background: linear-gradient(180deg, var(--v5-ivory) 0%, var(--v5-stone) 100%); }
.v5-atmos-support .v5-help h3 { color: var(--v5-ink); }

/* ============================================================================
   Routed pages — the same progression, so the journey does not stop at the
   homepage.
   ========================================================================== */

.v5-route .v5-dark--deep { background: var(--v5-hero-ink); }
.v5-route-engineering .v5-chapter:not(.v5-dark) {
	background: linear-gradient(180deg, var(--v5-mist-warm) 0%, var(--v5-mist) 100%);
}
.v5-route-engineering .v5-dark:not(.v5-dark--deep) {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, var(--v5-charcoal) 0%, #14171C 100%);
}
.v5-route-engineering .v5-specs li { border-color: #DDE0E4; }
.v5-route-engineering .v5-dark .v5-specs li { border-color: var(--v5-steel); }

.v5-route-find-your-part .v5-chapter:not(.v5-dark) { background: var(--v5-ivory); }
.v5-route-find-your-part .v5-symptoms li { background: #FDFCF9; border-color: #E7E2D8; }
.v5-route-find-your-part .v5-symptoms li:hover { border-color: var(--v5-blue); }
.v5-route-find-your-part .v5-symptom-media { background: var(--v5-stone); }
.v5-route-find-your-part .v5-paper-alt { background: var(--v5-stone); }
.v5-route-find-your-part .v5-dark:not(.v5-dark--deep) {
	background: linear-gradient(180deg, var(--v5-charcoal) 0%, #14171C 100%);
}

/* The affiliate page leads with the chapter blue owns. */
.v5-route-affiliate .v5-dark--deep {
	background:
		radial-gradient(90% 70% at 12% 0%, rgba(78, 107, 245, .26) 0%, rgba(78, 107, 245, 0) 62%),
		linear-gradient(150deg, var(--v5-indigo) 0%, var(--v5-indigo-2) 62%, #0B1030 100%);
}
.v5-route-affiliate .v5-dark--deep .v5-lede { color: #C3CCEC; }
.v5-route-affiliate .v5-dark--deep .v5-eyebrow { color: #94A4E0; }
.v5-route-affiliate .v5-dark--deep .v5-btn--primary { background: #fff; color: var(--v5-indigo-2); }
.v5-route-affiliate .v5-chapter:not(.v5-dark) { background: var(--v5-ivory); }
.v5-route-affiliate .v5-paper-alt { background: var(--v5-stone); }
.v5-route-affiliate .v5-dark:not(.v5-dark--deep) {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, var(--v5-charcoal) 0%, #14171C 100%);
}

/* ============================================================================
   Motion — only around the media that does not exist yet
   ----------------------------------------------------------------------------
   One effect, on the empty frames only: the working light drifts very slowly
   across them. 18 seconds, ~4% amplitude. It signals "this is waiting for
   footage" without animating a single card, and it is the only thing on the
   page that moves by itself.
   ========================================================================== */

@media (scripting: enabled) {
	.v5-atmos-factory .v5-slot-empty,
	.v5-atmos-inspire .v5-slot-empty {
		position: relative;
		overflow: hidden;
	}
	/* Amplitude kept low on purpose. At half this opacity the frames read as
	   "lit"; at the value first tried (.5) they read as highlighter yellow,
	   which pulled attention to the two chapters that have the least to say
	   until the real media arrives. */
	.v5-atmos-factory .v5-slot-empty::before,
	.v5-atmos-inspire .v5-slot-empty::before {
		content: "";
		position: absolute;
		inset: -40%;
		background: radial-gradient(38% 38% at 30% 30%, rgba(214, 176, 120, .22) 0%, rgba(214, 176, 120, 0) 70%);
		animation: v5-drift 18s var(--v5-ease) infinite alternate;
		pointer-events: none;
	}
	.v5-atmos-inspire .v5-slot-empty::before {
		background: radial-gradient(38% 38% at 70% 25%, rgba(255, 244, 218, .30) 0%, rgba(255, 244, 218, 0) 70%);
		animation-duration: 22s;
	}
}

@keyframes v5-drift {
	from { transform: translate3d(-6%, -4%, 0); }
	to   { transform: translate3d(8%, 5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.v5-atmos-factory .v5-slot-empty::before,
	.v5-atmos-inspire .v5-slot-empty::before { animation: none; }
	.v5-nav a::after { transition: none; }
}