/* ═══════════════════════════════════════════════════════════════
   ONYX UNIVERS — global + front-page chapters
   Palette anchors (pulled from real packaging):
   base #060606 · gold #d4af37 / #c9a227
   aftercare teal #2e8b7f / #7fd6c2 on near-black teal #081b19
   ghost ember #c96a1e / #e8912d / bone #efe4d4 on #1a0b03
   pop glide toxic #a4d926 / #3fae2a + purple #8b3fd9 on #0c2010
   full wayz emerald #2e7d5b / #7fe0b0 on #06130d
   ═══════════════════════════════════════════════════════════════ */

:root {
	--black: #060606;
	--ink: #0e0e0e;
	--white: #f4f1ea;
	--grey: #9a978f;
	--gold: #d4af37;
	--gold-deep: #a07f1e;
	--teal: #2e8b7f;
	--teal-hi: #7fd6c2;
	--ember: #c96a1e;
	--ember-hi: #e8912d;
	--bone: #efe4d4;
	--toxic: #a4d926;
	--toxic-deep: #3fae2a;
	--pop-purple: #8b3fd9;
	--emerald: #2e7d5b;
	--emerald-hi: #7fe0b0;
	--font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;
	--font-black: 'Pirata One', serif;
	--font-comic: 'Bangers', cursive;
	--head-h: 64px;
	--card-accent: var(--gold);
}

@property --ring-ang {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--gold); color: #000; padding: .6rem 1rem; z-index: 999;
}
.skip-link:focus { left: 0; }

/* ── header ─────────────────────────────────────────────────── */
.site-head {
	position: fixed; inset: 0 0 auto 0; height: var(--head-h);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 clamp(1rem, 4vw, 3rem);
	z-index: 100;
	background: linear-gradient(to bottom, rgba(6,6,6,.85), rgba(6,6,6,0));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.onyx-inner-page .site-head { background: rgba(6,6,6,.95); border-bottom: 1px solid #1c1c1c; }
.brand { display: flex; align-items: baseline; gap: .1em; text-decoration: none; }
.brand-o { width: 1.35em; height: 1.35em; fill: var(--white); transform: translateY(.22em); }
.brand-word {
	font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .14em; color: var(--white);
}
.brand-sub {
	font-size: .55rem; letter-spacing: .34em; text-transform: uppercase; color: var(--grey);
	margin-left: .9em;
}
.site-nav { display: flex; gap: clamp(1rem, 3vw, 2.2rem); align-items: center; }
.site-nav a {
	font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
	text-decoration: none; color: var(--white); opacity: .85; transition: opacity .2s, color .2s;
}
.site-nav a:hover { opacity: 1; color: var(--gold); }
.cart-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.4em; height: 1.4em; padding: 0 .3em; margin-left: .35em;
	border-radius: 999px; background: var(--gold); color: #000;
	font-size: .7rem; font-weight: 800;
}

/* ── shared chapter scaffolding ─────────────────────────────── */
.univers { overflow-x: clip; }
.chapter {
	position: relative;
	min-height: 100vh;
	display: flex; align-items: center;
	padding: calc(var(--head-h) + 4rem) clamp(1.25rem, 5vw, 4rem) 5rem;
}
.chapter__inner { position: relative; z-index: 3; width: min(1200px, 100%); margin: 0 auto; }
.chapter__inner--wide { width: min(1360px, 100%); }
.chapter__inner--split {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.chapter__inner--flip { grid-template-columns: 1fr 1.1fr; }
.chapter__inner--flip .chapter__copy { order: 2; }
.chapter__inner--flip .chapter__stage { order: 1; }

.kicker {
	display: flex; align-items: center; gap: .8em;
	font-size: .72rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold);
	margin: 0 0 1.2rem;
}
.kicker__rule { display: inline-block; width: 3.2em; height: 1px; background: currentColor; opacity: .7; }
.kicker--ember { color: var(--ember-hi); }
.kicker--toxic { color: var(--toxic); }
.kicker--emerald { color: var(--emerald-hi); }

.chapter__title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 9vw, 7.5rem);
	line-height: .92; letter-spacing: .02em;
	margin: 0 0 1.4rem; color: var(--white);
	text-wrap: balance;
}
.chapter__lede { max-width: 34em; color: var(--grey); font-size: clamp(.95rem, 1.4vw, 1.1rem); margin: 0 0 2rem; }
.chapter__scriptline {
	font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ember-hi);
	margin: -0.6rem 0 1.2rem;
}
.chapter__scriptline--pop { color: var(--toxic); }
.chapter__blackletter {
	font-family: var(--font-black);
	font-size: clamp(1.8rem, 4vw, 3rem);
	color: var(--emerald-hi);
	margin: -0.8rem 0 1.2rem;
	text-shadow: 0 0 24px rgba(127, 224, 176, .35);
}

.btn {
	display: inline-block; padding: .95em 2.2em;
	font-size: .8rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
	text-decoration: none; border: 1px solid currentColor; border-radius: 2px;
	transition: background .25s, color .25s, box-shadow .25s, transform .15s;
	background: transparent;
}
.btn:active { transform: scale(.97); }
.btn--gold { color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: #000; box-shadow: 0 0 32px rgba(212,175,55,.35); }
.btn--ember { color: var(--ember-hi); }
.btn--ember:hover { background: var(--ember-hi); color: #1a0b03; box-shadow: 0 0 32px rgba(232,145,45,.4); }
.btn--toxic { color: var(--toxic); }
.btn--toxic:hover { background: var(--toxic); color: #0c2010; box-shadow: 0 0 32px rgba(164,217,38,.4); }
.btn--emerald { color: var(--emerald-hi); }
.btn--emerald:hover { background: var(--emerald-hi); color: #06130d; box-shadow: 0 0 32px rgba(127,224,176,.4); }

.chapter__stage { position: relative; display: grid; place-items: center; min-height: 380px; }

/* ── chapter 0 · opening ────────────────────────────────────── */
.chapter--opening { text-align: center; overflow: hidden; }
.opening__center { position: relative; z-index: 4; width: min(900px, 100%); margin: 0 auto; }
.diamond--hero { width: 56px; color: var(--gold); margin-bottom: 1.6rem; filter: drop-shadow(0 0 18px rgba(212,175,55,.5)); }
.opening__title {
	font-family: var(--font-display);
	font-size: clamp(5rem, 22vw, 15rem);
	line-height: .85; letter-spacing: .08em; margin: 0;
	color: var(--white);
}
.opening__title .char { display: inline-block; }
.opening__sub {
	font-size: clamp(.7rem, 1.6vw, 1rem); letter-spacing: .58em; text-transform: uppercase;
	color: var(--gold); margin: 1.1rem 0 1.6rem;
}
.opening__sub .char { display: inline-block; }
.opening__lede { max-width: 36em; margin: 0 auto 2.4rem; color: var(--grey); }
.scroll-cue {
	position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
	z-index: 4; font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: var(--grey);
}
.scroll-cue span {
	display: block; width: 1px; height: 44px; margin: 0 auto .7rem;
	background: linear-gradient(to bottom, transparent, var(--gold));
	animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* ── chapter 1 · aftercare ──────────────────────────────────── */
.chapter--aftercare { flex-direction: column; justify-content: center; }
.chapter__title--teal {
	background: linear-gradient(100deg, var(--white) 30%, var(--teal-hi) 70%, var(--gold) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.aftercare__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 2vw, 1.6rem);
	margin-top: 2.5rem;
}
.shield-card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem;
	padding: 2rem 1.2rem 1.6rem; text-decoration: none; text-align: center;
	background: linear-gradient(165deg, rgba(46,139,127,.14), rgba(6,6,6,.6));
	border: 1px solid rgba(127,214,194,.22);
	border-radius: 6px 6px 40% 40% / 6px 6px 12% 12%;
	transition: transform .3s, border-color .3s, box-shadow .3s;
}
.shield-card:hover {
	border-color: var(--gold);
	box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 24px rgba(212,175,55,.18);
}
.shield-card__frame {
	position: absolute; inset: 7px;
	border: 1px solid rgba(212,175,55,.25);
	border-radius: inherit; pointer-events: none;
}
.shield-card__img { width: 88%; }
.shield-card__img img { max-height: 190px; object-fit: contain; }
.shield-card__name { font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: var(--white); }
.shield-card__price { font-size: .8rem; color: var(--teal-hi); }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 1; }
.glow--teal { width: 44vw; height: 44vw; background: rgba(46,139,127,.28); left: -12vw; top: 10%; }
.glow--gold { width: 26vw; height: 26vw; background: rgba(212,175,55,.14); right: -6vw; bottom: 6%; }

/* ── chapter 2 · ghost ──────────────────────────────────────── */
.chapter--ghost { overflow: hidden; }
.chapter__title--ghost {
	font-size: clamp(4rem, 13vw, 11rem);
	color: var(--bone);
	text-shadow:
		0 0 12px rgba(239,228,212,.35),
		0 0 60px rgba(201,106,30,.45),
		0 8px 40px rgba(0,0,0,.8);
}
.fog { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fog__layer {
	position: absolute; width: 160%; height: 55%; left: -30%;
	background: radial-gradient(ellipse at center, rgba(239,228,212,.10), transparent 65%);
	filter: blur(30px);
}
.fog__layer--1 { top: 6%; }
.fog__layer--2 { top: 38%; background: radial-gradient(ellipse at center, rgba(232,145,45,.09), transparent 65%); }
.fog__layer--3 { bottom: 0; }

/* ── chapter 3 · pop glide ──────────────────────────────────── */
.chapter--pop { overflow: hidden; padding-top: calc(var(--head-h) + 9rem); }
.slime { position: absolute; top: -2px; left: 0; width: 100%; height: clamp(90px, 14vw, 220px); z-index: 2; }
.chapter__title--pop {
	font-family: var(--font-comic);
	letter-spacing: .04em;
	color: var(--toxic);
	-webkit-text-stroke: 2px #0c2010;
	text-shadow: 5px 6px 0 var(--pop-purple), 8px 10px 24px rgba(0,0,0,.6);
	transform: rotate(-2deg);
}
.burst {
	position: absolute; z-index: 3; top: 4%; right: 6%;
	font-family: var(--font-comic); font-size: clamp(1.4rem, 3vw, 2.4rem);
	color: #ffd93d; -webkit-text-stroke: 1.5px #0c2010;
	background: var(--pop-purple);
	padding: .35em .8em; border-radius: 50%;
	transform: rotate(12deg);
	box-shadow: 0 0 0 4px #0c2010, 0 0 0 6px var(--toxic);
}

/* ── chapter 4 · full wayz ──────────────────────────────────── */
.chapter--wayz { overflow: hidden; }
.chapter__title--wayz {
	background: linear-gradient(100deg, var(--white) 20%, var(--emerald-hi) 65%, var(--emerald) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.leaf { position: absolute; z-index: 1; width: clamp(120px, 16vw, 240px); height: auto; opacity: .5; pointer-events: none; }
.leaf path { fill: #123527; stroke: #1e5a41; }
.leaf--l { left: -3%; top: 8%; transform: rotate(18deg); }
.leaf--r { right: -3%; bottom: 6%; transform: rotate(-14deg) scaleY(-1); }

/* ── chapter 5 · catalog ────────────────────────────────────── */
.chapter--catalog { display: block; }
.catalog-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.2rem; margin-top: 2.6rem;
	perspective: 1000px;
}
.p-card {
	position: relative;
	background: linear-gradient(170deg, #121212, #0a0a0a);
	border: 1px solid #1e1e1e; border-radius: 8px;
	padding: 1.1rem 1.1rem 1rem;
	transition: border-color .3s, box-shadow .3s;
	transform-style: preserve-3d; will-change: transform;
}
.p-card:hover { border-color: rgba(212,175,55,.55); box-shadow: 0 22px 44px rgba(0,0,0,.55), 0 0 26px rgba(212,175,55,.16); }
.p-card__link { text-decoration: none; display: block; }
.p-card__media { display: grid; place-items: center; height: 190px; margin-bottom: .9rem; }
.p-card__media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.p-card__title { font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--white); margin: 0; min-height: 2.6em; }
.p-card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: .7rem; }
.p-card__price { font-size: .85rem; color: var(--gold); }
.p-card__price del { color: var(--grey); margin-right: .4em; }
.p-card__price ins { text-decoration: none; }
.p-card__add {
	font: 700 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
	color: var(--gold); background: none; border: 1px solid rgba(212,175,55,.45); border-radius: 2px;
	padding: .55em 1em; cursor: pointer; text-decoration: none;
	transition: background .2s, color .2s;
}
.p-card__add:hover { background: var(--gold); color: #000; }
.p-card__add.is-loading { opacity: .5; pointer-events: none; }
.p-card__add.is-added { background: var(--emerald-hi); border-color: var(--emerald-hi); color: #06130d; }
.catalog-more { text-align: center; margin: 3rem 0 0; }

/* ── chapter 6 · trust ──────────────────────────────────────── */
.chapter--trust { min-height: 60vh; display: block; padding-bottom: 3rem; }
.trust-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
	text-align: center; margin-bottom: 4rem;
}
.trust-num {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1;
	color: var(--gold); margin: 0 0 .3rem;
}
.trust-label { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin: 0; }
.trust-strip {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem;
	padding: 1.4rem 0; border-top: 1px solid #1c1c1c; border-bottom: 1px solid #1c1c1c;
	font-size: .66rem; letter-spacing: .3em; color: var(--grey);
}
.trust-strip i { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

/* ── footer ─────────────────────────────────────────────────── */
.site-foot { background: #050505; border-top: 1px solid #161616; padding: 3.5rem clamp(1.25rem, 5vw, 4rem) 2rem; }
.site-foot__inner {
	width: min(1200px, 100%); margin: 0 auto 2.5rem;
	display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap;
}
.brand-o--foot { width: 34px; height: 34px; fill: var(--gold); }
.site-foot__word { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .12em; margin: .8rem 0 .2rem; }
.site-foot__word span { display: block; font-family: var(--font-body); font-size: .58rem; letter-spacing: .4em; text-transform: uppercase; color: var(--grey); }
.site-foot__tag { color: var(--grey); font-size: .85rem; max-width: 30em; }
.site-foot__nav { display: flex; flex-direction: column; gap: .8rem; }
.site-foot__nav a { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--grey); }
.site-foot__nav a:hover { color: var(--gold); }
.site-foot__legal { width: min(1200px, 100%); margin: 0 auto; color: #555; font-size: .72rem; letter-spacing: .08em; }

/* ── inner pages ────────────────────────────────────────────── */
.inner-wrap { padding: calc(var(--head-h) + 3rem) clamp(1.25rem, 5vw, 4rem) 4rem; width: min(1280px, 100%); margin: 0 auto; min-height: 60vh; }
.inner-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: .04em; }
.inner-content a { color: var(--gold); }

/* ── reveal / motion base states (JS enhances) ──────────────── */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .js-chapter-title { opacity: 0; transform: translateY(40px); }
@media (prefers-reduced-motion: reduce) {
	.js .reveal, .js .js-chapter-title { opacity: 1; transform: none; transition: opacity .4s; }
	.scroll-cue span { animation: none; }
	* { scroll-behavior: auto !important; }
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
	.chapter__inner--split, .chapter__inner--flip { grid-template-columns: 1fr; }
	.chapter__inner--flip .chapter__copy { order: 1; }
	.chapter__inner--flip .chapter__stage { order: 2; }
	.chapter__stage { min-height: 300px; margin-top: 1.5rem; }
	.aftercare__grid { grid-template-columns: repeat(2, 1fr); }
	.trust-grid { grid-template-columns: repeat(2, 1fr); }
	.brand-sub { display: none; }
	.fog__layer { filter: blur(18px); }
	.interstitial { min-height: 46vh; }
	.blob { display: none; }
	.cursor-dot, .cursor-ring { display: none; }
}
@media (max-width: 560px) {
	.chapter { padding-left: 1.1rem; padding-right: 1.1rem; }
	.aftercare__grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
	.shield-card { padding: 1.2rem .7rem 1rem; }
	.shield-card__img { max-height: 130px; }
	.catalog-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
	.p-card { padding: .8rem .8rem .7rem; }
	.p-card__media { height: 130px; }
	.p-card__title { font-size: .76rem; }
	.site-nav a { font-size: .7rem; letter-spacing: .14em; }
	.burst { top: 0; right: 2%; font-size: 1.2rem; }
	.stage__card--side { width: 42%; right: 0; }
	.interstitial__line { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v2 — cinematic imagery, atmosphere layers, animated cards
   ═══════════════════════════════════════════════════════════════ */

/* ── scroll progress bar ────────────────────────────────────── */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
	background: rgba(212,175,55,.08); pointer-events: none;
}
.scroll-progress span {
	display: block; height: 100%; width: 100%;
	background: linear-gradient(90deg, var(--gold-deep), var(--gold));
	box-shadow: 0 0 12px rgba(212,175,55,.6);
	transform: scaleX(0); transform-origin: 0 50%;
}

/* ── film grain overlay ─────────────────────────────────────── */
.grain {
	position: fixed; inset: -100px; z-index: 150; pointer-events: none;
	opacity: .055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain-shift 1.2s steps(6) infinite;
}
@keyframes grain-shift {
	0% { transform: translate(0,0); } 20% { transform: translate(-30px,20px); }
	40% { transform: translate(20px,-35px); } 60% { transform: translate(-25px,-20px); }
	80% { transform: translate(30px,25px); } 100% { transform: translate(0,0); }
}

/* ── custom cursor (desktop) ────────────────────────────────── */
.cursor-dot, .cursor-ring {
	position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none;
	border-radius: 50%; will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--gold); margin: -3px 0 0 -3px; }
.cursor-ring {
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border: 1px solid rgba(212,175,55,.55);
	transition: width .25s, height .25s, margin .25s, border-color .25s;
}
.cursor-ring.is-hover {
	width: 52px; height: 52px; margin: -26px 0 0 -26px;
	border-color: rgba(212,175,55,.9);
}
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* ── hero cinematic background ──────────────────────────────── */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg__img {
	width: 100%; height: 100%; object-fit: cover;
	animation: kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes kenburns {
	from { transform: scale(1) translateY(0); }
	to   { transform: scale(1.1) translateY(-2%); }
}
.hero-bg__shade {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 50% 42%, rgba(6,6,6,.32) 0%, rgba(6,6,6,.78) 62%, rgba(6,6,6,.96) 100%),
		linear-gradient(to bottom, rgba(6,6,6,.55), rgba(6,6,6,.15) 40%, rgba(6,6,6,.92) 96%);
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.chapter--opening .opening__center { z-index: 4; }
.opening__title .char {
	background: linear-gradient(115deg, var(--white) 38%, #fff8e1 46%, var(--gold) 50%, #fff8e1 54%, var(--white) 62%);
	background-size: 320% 100%; background-position: 100% 0;
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.opening__title, .opening__sub { text-shadow: 0 6px 40px rgba(0,0,0,.7); }
.opening__sub .char { text-shadow: 0 4px 24px rgba(0,0,0,.8); }
.opening__lede { color: #c9c5ba; }

/* ── lightframe: white packshots as deliberate display cases ── */
.lightframe {
	margin: 0; display: grid; place-items: center;
	background: radial-gradient(120% 100% at 50% 28%, #f7f2e7 0%, #e9e2d1 58%, #cfc6b0 100%);
	border: 1px solid rgba(212,175,55,.45);
	border-radius: 10px;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.35),
		inset 0 -26px 46px rgba(60,45,10,.28),
		inset 0 18px 30px rgba(255,255,255,.32),
		0 24px 48px rgba(0,0,0,.55);
	overflow: hidden;
	padding: 8%;
}
.lightframe img { display: block; mix-blend-mode: multiply; filter: contrast(1.04) saturate(1.05); }

/* stage cards (chapter hero packshots) */
.stage__card { position: relative; z-index: 2; }
.stage__card--main { width: min(360px, 68%); }
.stage__card--main img { max-height: 340px; object-fit: contain; }
.stage__card--side {
	position: absolute; z-index: 3; width: min(200px, 40%);
	right: -2%; bottom: -6%;
	transform: rotate(7deg);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.35),
		inset 0 -18px 30px rgba(60,45,10,.28),
		0 30px 50px rgba(0,0,0,.7);
}
.stage__card--side img { max-height: 180px; object-fit: contain; }
.stage__card--pop { width: min(400px, 76%); }
.chapter__stage--ghost .stage__card--main { transform: rotate(-2deg); }

/* ── chapter background imagery (desaturated + tinted) ─────── */
.chapter-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.chapter-bg img {
	width: 100%; height: 112%; object-fit: cover;
	filter: grayscale(.35) brightness(.5);
	will-change: transform;
}
.chapter-bg--ghost { opacity: .5; }
.chapter-bg--ghost::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to right, #1a0b03 12%, rgba(26,11,3,.55) 55%, rgba(26,11,3,.85) 100%);
}
.chapter-bg--trust { opacity: .32; }
.chapter-bg--trust::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, rgba(10,10,10,.35), #0a0a0a 82%);
}
.chapter--ghost .chapter__inner, .chapter--trust .chapter__inner { z-index: 4; }

/* ── interstitial bands ─────────────────────────────────────── */
.interstitial {
	position: relative; min-height: 62vh; overflow: hidden;
	display: grid; place-items: center;
}
.interstitial__media { position: absolute; inset: 0; }
.interstitial__media img {
	width: 100%; height: 126%; object-fit: cover;
	filter: grayscale(.45) brightness(.62) contrast(1.05);
	will-change: transform;
}
.interstitial__tint { position: absolute; inset: 0; mix-blend-mode: color; opacity: .55; }
.interstitial--ember .interstitial__tint { background: #c96a1e; }
.interstitial--emerald .interstitial__tint { background: #2e7d5b; }
.interstitial--gold .interstitial__tint { background: #d4af37; }
.interstitial::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(6,6,6,.9), rgba(6,6,6,.25) 30%, rgba(6,6,6,.25) 70%, rgba(6,6,6,.9));
}
.interstitial__line {
	position: relative; z-index: 3;
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 4.6rem);
	letter-spacing: .06em; color: var(--white); margin: 0;
	text-shadow: 0 8px 44px rgba(0,0,0,.9);
	padding: 0 1.2rem; text-align: center;
}
.interstitial__line .char { display: inline-block; }

/* ── aftercare aurora ───────────────────────────────────────── */
.aurora {
	position: absolute; left: 50%; top: 52%; z-index: 1;
	width: 90vw; height: 60vh; transform: translate(-50%, -50%);
	background:
		radial-gradient(40% 55% at 30% 55%, rgba(46,139,127,.30), transparent 70%),
		radial-gradient(35% 50% at 68% 40%, rgba(127,214,194,.16), transparent 70%),
		radial-gradient(30% 45% at 52% 68%, rgba(212,175,55,.08), transparent 70%);
	filter: blur(46px); pointer-events: none;
	will-change: transform, opacity;
}

/* ── pop glide slime blobs ──────────────────────────────────── */
.blob {
	position: absolute; z-index: 1; pointer-events: none;
	background: radial-gradient(circle at 32% 30%, #c7f04f, var(--toxic) 45%, var(--toxic-deep) 100%);
	opacity: .8; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5));
	animation: blob-morph 9s ease-in-out infinite;
	will-change: transform, border-radius;
}
.blob--1 { width: 90px; height: 90px; left: 7%; top: 30%; }
.blob--2 { width: 55px; height: 55px; right: 10%; top: 46%; animation-duration: 7s; animation-delay: -3s; }
.blob--3 { width: 38px; height: 38px; left: 40%; bottom: 12%; animation-duration: 11s; animation-delay: -6s; }
@keyframes blob-morph {
	0%, 100% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
	33% { border-radius: 45% 55% 40% 60% / 60% 42% 58% 40%; }
	66% { border-radius: 60% 40% 62% 38% / 40% 58% 42% 60%; }
}
.btn--toxic:hover { animation: jitter .32s steps(2) infinite; }
@keyframes jitter {
	0% { transform: translate(0,0) rotate(0); }
	25% { transform: translate(1.5px,-1.5px) rotate(.4deg); }
	50% { transform: translate(-1.5px,1px) rotate(-.4deg); }
	75% { transform: translate(1px,1.5px) rotate(.3deg); }
	100% { transform: translate(0,0) rotate(0); }
}

/* ── full wayz: light sweep + back leaf layer ───────────────── */
.lightray { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lightray::before {
	content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%;
	background: linear-gradient(100deg, transparent, rgba(127,224,176,.10) 40%, rgba(244,241,234,.15) 50%, rgba(127,224,176,.10) 60%, transparent);
	transform: skewX(-14deg);
	filter: blur(6px);
	animation: light-sweep 11s ease-in-out infinite;
	will-change: left, opacity;
}
@keyframes light-sweep {
	0%, 52% { left: -40%; opacity: 0; }
	60% { opacity: 1; }
	82%, 100% { left: 130%; opacity: 0; }
}
.leaf--back { opacity: .26; filter: blur(3px); }
.leaf--back path { fill: #0d2a1e; stroke: #163a2c; }
.leaf--bl { left: 5%; bottom: -5%; width: clamp(90px, 11vw, 170px); transform: rotate(32deg); }
.leaf--br { right: 7%; top: -3%; width: clamp(90px, 11vw, 170px); transform: rotate(-158deg); }

/* ── animated product cards: accent ring sweep + lift ───────── */
.chapter--aftercare { --card-accent: var(--teal-hi); }
.chapter--ghost { --card-accent: var(--ember-hi); }
.chapter--pop { --card-accent: var(--toxic); }
.chapter--wayz { --card-accent: var(--emerald-hi); }

.p-card__ring {
	position: absolute; inset: -1px; z-index: 1;
	border-radius: inherit; padding: 1px;
	background: conic-gradient(from var(--ring-ang, 0deg),
		transparent 0deg, var(--card-accent) 55deg, transparent 130deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0; pointer-events: none;
	transition: opacity .35s;
}
.p-card, .shield-card { border-radius: 8px; }
.shield-card { border-radius: 6px 6px 40% 40% / 6px 6px 12% 12%; }
.p-card:hover .p-card__ring,
.p-card.is-open .p-card__ring,
.shield-card:hover .p-card__ring,
.shield-card.is-open .p-card__ring,
.woocommerce ul.products li.product:hover .p-card__ring,
.woocommerce ul.products li.product.is-open .p-card__ring {
	opacity: 1;
	animation: ring-rotate 2.8s linear infinite;
}
@keyframes ring-rotate { to { --ring-ang: 360deg; } }

/* packshot: scale + lift + deeper shadow on hover */
.p-card__media img, .shield-card__img img, .loop-frame img {
	transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s;
}
.p-card:hover .p-card__media img,
.shield-card:hover .shield-card__img img {
	transform: scale(1.06) translateY(-6px);
	filter: drop-shadow(0 22px 30px rgba(0,0,0,.7));
}
.p-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.65), 0 0 30px rgba(212,175,55,.18); }

/* ADD / VIEW button slides up (JS-gated so no-JS keeps buttons visible) */
html.onyx-cards .p-card__add {
	opacity: 0; transform: translateY(12px); pointer-events: none;
	transition: opacity .3s, transform .3s;
}
html.onyx-cards .p-card:hover .p-card__add,
html.onyx-cards .p-card.is-open .p-card__add,
html.onyx-cards .p-card__add:focus-visible {
	opacity: 1; transform: none; pointer-events: auto;
}

/* tilt targets */
[data-tilt], .js-woo-card { transform-style: preserve-3d; will-change: transform; }

/* ── reduced motion: everything static ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.grain, .dust, .blob, .lightray, .cursor-dot, .cursor-ring { display: none !important; }
	.hero-bg__img { animation: none; }
	.btn--toxic:hover { animation: none; }
	.p-card__ring { animation: none !important; opacity: 0 !important; }
	.p-card__media img, .shield-card__img img { transition: none; }
	.p-card:hover .p-card__media img, .shield-card:hover .shield-card__img img { transform: none; }
	html.onyx-cards .p-card__add { opacity: 1; transform: none; pointer-events: auto; }
	.scroll-progress span { transition: none; }
}

/* ── mobile: lighter atmosphere ─────────────────────────────── */
@media (max-width: 960px) {
	.grain { opacity: .035; }
	.lightray::before { display: none; }
	.leaf--back { display: none; }
	.interstitial__media img { height: 112%; }
}