/* ==========================================================================
   The Doggos — Cinematic Experience (homepage section)
   --------------------------------------------------------------------------
   Mirrors the design tokens of doggos-cinematic-pdp so the homepage closing
   crescendo feels like the same film as the PDP. All selectors are scoped
   under .dcx-shell to keep blast radius zero. Section colour rhythm:
     dark sage  → cream  → lavender  → dark sage  → peach  → cream  → chartreuse
       cold       manifesto  process     crunch      pack     wall      promise
   ========================================================================== */

.dcx-shell {
	/* surfaces — full pastel palette: blush, sky, mint, lavender, peach, cream */
	--dcx-blush:         #fde0e7;
	--dcx-blush-deep:    #fac4d2;
	--dcx-sky:           #dde9f5;
	--dcx-sky-deep:      #b9d2e8;
	--dcx-mint:          #dcefdf;
	--dcx-mint-deep:     #b9e0c0;
	--dcx-lavender:      #ede4f5;
	--dcx-lavender-deep: #d8c5e8;
	--dcx-peach:         #fde0c8;
	--dcx-peach-deep:    #f9c89f;
	--dcx-cream:         #fdfaf3;
	--dcx-cream-deep:    #f5e8c8;
	--dcx-bone:          #fbf6ec;
	--dcx-ivory:         #f8f0e3;
	--dcx-butter:        #fef6d3;

	/* accents — kept saturated so they pop against the pastels */
	--dcx-lime:        #9bbe2a;
	--dcx-lime-soft:   #d8e57a;
	--dcx-lime-glow:   #c4d94e;
	--dcx-rust:        #d8966a;
	--dcx-turmeric:    #e2bc55;
	--dcx-rose:        #e58aa0;

	/* type — cool charcoal, neutral so it pairs with every pastel */
	--dcx-ink:         #3a3a48;
	--dcx-ink-deep:    #20202a;
	--dcx-ink-soft:    #5a5a6e;
	--dcx-ink-mute:    #8a8a9e;
	--dcx-on-dark:     #faf3e6;
	--dcx-on-dark-soft: rgba(250, 243, 230, 0.78);
	--dcx-on-dark-mute: rgba(250, 243, 230, 0.55);

	/* legacy aliases — keep so any prior selectors don't break */
	--dcx-sage-dark:   var(--dcx-ink);
	--dcx-sage:        var(--dcx-ink-soft);

	--dcx-shadow-ink:  rgba(31, 42, 20, 0.22);
	--dcx-rule:        rgba(31, 42, 20, 0.14);
	--dcx-rule-soft:   rgba(31, 42, 20, 0.08);

	--dcx-radius:      14px;
	--dcx-radius-lg:   22px;

	--dcx-font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
	--dcx-font-body:    'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--dcx-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--dcx-ease:     cubic-bezier(0.22, 1, 0.36, 1);
	--dcx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	display: block;
	font-family: var(--dcx-font-body);
	color: var(--dcx-ink);
	-webkit-font-smoothing: antialiased;
	position: relative;
	width: 100%;
	max-width: 100vw;
	overflow: clip;
}
.dcx-shell, .dcx-shell *, .dcx-shell *::before, .dcx-shell *::after { box-sizing: border-box; }

.dcx-shell h1, .dcx-shell h2, .dcx-shell h3 {
	font-family: var(--dcx-font-display);
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--dcx-ink);
}
.dcx-shell p { margin: 0; }

.dcx-mono {
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-ink-soft);
}
.dcx-mono.dcx-on-dark { color: var(--dcx-on-dark-mute); }

/* {curly} accent — italic + chartreuse colour + turmeric squiggle */
.dcx-em {
	position: relative;
	font-style: italic;
	color: var(--dcx-lime);
	display: inline-block;
}
.dcx-em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 10 Q 50 2 100 8 T 198 6' stroke='%23d4a83a' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat;
	background-size: 100% 100%;
	z-index: -1;
}
.dcx-on-dark .dcx-em { color: var(--dcx-lime-soft); }

/* Reveal on scroll */
.dcx-shell [data-dcx-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 0.85s var(--dcx-ease), transform 0.85s var(--dcx-ease);
}
.dcx-shell [data-dcx-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.dcx-shell [data-dcx-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Paper-grain overlay for warmth */
.dcx-shell::before {
	content: '';
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 50;
	opacity: 0.10;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- corner numbers (editorial frame markers) ---- */
.dcx-corner-num {
	position: absolute;
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
	z-index: 4;
	pointer-events: none;
}
.dcx-corner-num.dcx-on-dark { color: var(--dcx-on-dark-mute); }
.dcx-corner-num--tl { top: 22px; left: 24px; }
.dcx-corner-num--tr { top: 22px; right: 24px; }
.dcx-corner-num--bl { bottom: 22px; left: 24px; }
.dcx-corner-num--br { bottom: 22px; right: 24px; }

/* ---- placeholders (replace with real video/photo later) ---- */
[data-dcx-placeholder] {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(135deg, rgba(170, 197, 39, 0.12), rgba(212, 168, 58, 0.10)),
		repeating-linear-gradient(45deg, rgba(31, 42, 20, 0.04) 0 12px, transparent 12px 24px);
	color: var(--dcx-ink-soft);
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	padding: 24px;
}
[data-dcx-placeholder] small {
	display: block;
	margin-top: 6px;
	font-size: 9px;
	opacity: 0.7;
	letter-spacing: 0.12em;
}

/* ---- floating decorative bones ---- */
.dcx-shell .dcx-float {
	position: absolute;
	pointer-events: none;
	opacity: 0.10;
	color: var(--dcx-on-dark);
	z-index: 1;
}
.dcx-cold .dcx-float-1 { top: 14%; left: 5%; width: 86px; animation: dcx-float 9s ease-in-out infinite; }
.dcx-cold .dcx-float-2 { top: 64%; left: 4%; width: 60px; animation: dcx-float 11s ease-in-out infinite reverse; }
.dcx-cold .dcx-float-3 { top: 30%; right: 4%; width: 70px; animation: dcx-float 10s ease-in-out infinite -3s; }
@keyframes dcx-float {
	0%, 100% { transform: translate(0,0) rotate(-8deg); }
	50%      { transform: translate(18px,-28px) rotate(6deg); }
}

/* ==========================================================================
   GENERIC SCENE
   ========================================================================== */
.dcx-scene {
	position: relative;
	padding: clamp(64px, 10vw, 128px) clamp(20px, 5vw, 64px);
	overflow: hidden;
}

/* H2 */
.dcx-h2 {
	font-size: clamp(36px, 5.6vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

/* ==========================================================================
   SCENE 1 — COLD OPEN (v3 redesign · "Editorial Magazine Opening")
   ──────────────────────────────────────────────────────────────────────────
   Warm ivory canvas, massive Fraunces in chocolate ink with a chartreuse
   accent italic, hand-drawn floating ornaments (paw prints, leaves, stars,
   sparkles) softly drifting around the type. Issue / Chapter mono frame
   markers in the corners. NO dark green. NO film-leader bars.
   ========================================================================== */
.dcx-cold {
	/* Clean white canvas — minimal luxe, dark text, gold accents */
	background: #ffffff;
	color: var(--dcx-ink);
	min-height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(56px, 7vw, 96px);
}
.dcx-cold-inner {
	max-width: 1180px;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 4;
}
.dcx-cold-pre {
	font-family: var(--dcx-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(32px, 5.4vw, 76px);
	line-height: 1;
	color: var(--dcx-turmeric);   /* gold italic — pops on white */
	margin-bottom: 4px;
	position: relative;
	display: inline-block;
}
.dcx-cold-pre::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 18px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 10 Q 50 2 100 8 T 198 6' stroke='%23d4a83a' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat;
	background-size: 100% 100%;
	z-index: -1;
}
.dcx-cold-main {
	font-family: var(--dcx-font-display);
	font-weight: 900;
	font-size: clamp(48px, 9.5vw, 132px);
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--dcx-ink);   /* dark charcoal on white — fully readable */
}
.dcx-cold-cap {
	margin-top: clamp(22px, 3vw, 36px);
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
}

/* Scene 1 corner markers ride on a light surface — back to ink colours */
.dcx-cold .dcx-corner-num,
.dcx-cold .dcx-corner-num.dcx-on-dark { color: var(--dcx-ink-mute) !important; }

/* All decorative ornaments hidden in v3.3 — Cold Open is now bare-essentials
   editorial: kicker + headline + caption. Cleaner, fully readable on mobile. */
.dcx-cold-orn { display: none !important; }

@keyframes dcx-orn-drift {
	0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
	50%      { transform: translate(8px, -14px) rotate(calc(var(--r, 0deg) + 6deg)); }
}
@keyframes dcx-orn-twinkle {
	0%, 100% { transform: scale(1); opacity: 0.4; }
	50%      { transform: scale(1.25); opacity: 0.95; }
}
@keyframes dcx-orn-spin {
	from { transform: rotate(0); } to { transform: rotate(360deg); }
}

/* Issue / Chapter editorial markers — gold-bordered for luxe contrast */
.dcx-cold-issue {
	position: absolute;
	top: 24px;
	right: clamp(20px, 5vw, 64px);
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dcx-ink);
	padding: 6px 12px;
	border: 1px solid var(--dcx-ink);
	border-radius: 999px;
	z-index: 5;
	background: transparent;
}
.dcx-cold-chapter {
	display: inline-block;
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
	margin-bottom: 18px;
	padding: 4px 24px;
	border-top: 1px solid var(--dcx-ink-mute);
	border-bottom: 1px solid var(--dcx-ink-mute);
}

/* Decorative ampersand / drop-cap separator over the caption */
.dcx-cold-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 18px auto;
	max-width: 360px;
	color: var(--dcx-ink-mute);
}
.dcx-cold-rule::before, .dcx-cold-rule::after {
	content: '';
	flex: 1;
	height: 1px;
	background: currentColor;
}
.dcx-cold-rule-mark {
	font-family: var(--dcx-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	color: var(--dcx-turmeric);
	transform: translateY(-2px);
}

/* stagger */
[data-dcx-stagger="0"] { transition-delay: 0ms; }
[data-dcx-stagger="1"] { transition-delay: 220ms; }
[data-dcx-stagger="2"] { transition-delay: 440ms; }

/* scroll cue */
.dcx-scroll-cue {
	position: absolute;
	bottom: 36px; left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 3;
}
.dcx-scroll-cue span {
	width: 18px; height: 2px;
	background: var(--dcx-on-dark-mute);
	animation: dcx-cue 1.6s ease-in-out infinite;
}
.dcx-scroll-cue span:nth-child(2) { animation-delay: 0.2s; }
.dcx-scroll-cue span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dcx-cue {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50%      { opacity: 1;   transform: translateY(4px); }
}

/* ==========================================================================
   SCENE 2 — MANIFESTO
   ========================================================================== */
.dcx-manifesto {
	background: var(--dcx-cream);
}
.dcx-manifesto-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
@media (min-width: 900px) {
	.dcx-manifesto-grid { grid-template-columns: 1.2fr 1fr; }
}
.dcx-manifesto-copy .dcx-mono { margin-bottom: 16px; }
.dcx-manifesto-copy .dcx-h2   { margin-bottom: 24px; }
.dcx-body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--dcx-ink-soft);
	max-width: 56ch;
}

/* Multi-paragraph manifesto rhythm */
.dcx-manifesto-copy .dcx-body + .dcx-body { margin-top: 1.15em; }
/* Lead paragraph: slightly larger, ink (not soft), draws the eye in. */
.dcx-manifesto-copy .dcx-body--lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--dcx-ink);
	font-weight: 500;
}
/* Short "punchline" paragraph (e.g. "The desi dog is a carnivore at a
   vegetarian table.") — quote-like, italic, acts as a section turn. */
.dcx-manifesto-copy .dcx-body--punch {
	font-family: var(--dcx-font-display);
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.35;
	color: var(--dcx-ink);
	max-width: 36ch;
	font-weight: 500;
}
/* Closer paragraph ("Just the ingredient — louder.") gets a tiny accent
   strip on the left. */
.dcx-manifesto-copy .dcx-body--closer {
	border-left: 3px solid var(--dcx-lime);
	padding-left: 14px;
	color: var(--dcx-ink);
}

.dcx-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: var(--dcx-bone);
	border: 2px solid var(--dcx-ink);
	border-radius: var(--dcx-radius-lg);
	box-shadow: 8px 8px 0 var(--dcx-ink);
	transform: rotate(-1.5deg);
	transition: transform .4s var(--dcx-ease);
	padding: 0;
	overflow: hidden;
}
.dcx-stats:hover { transform: rotate(0deg); }
.dcx-stat {
	padding: clamp(22px, 3vw, 40px);
	border-right: 1px solid var(--dcx-rule);
	border-bottom: 1px solid var(--dcx-rule);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dcx-stat:nth-child(2n) { border-right: 0; }
.dcx-stat:nth-child(n+3) { border-bottom: 0; }
.dcx-stat-num {
	font-family: var(--dcx-font-display);
	font-weight: 900;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	color: var(--dcx-ink);
}
.dcx-stat-lbl {
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
}

/* ==========================================================================
   SCENE 3 — PROCESS
   ========================================================================== */
.dcx-process {
	background: var(--dcx-lavender);
}
.dcx-process-head {
	max-width: 1280px;
	margin: 0 auto clamp(36px, 5vw, 64px);
	text-align: center;
}
.dcx-process-head .dcx-mono { margin-bottom: 12px; }

.dcx-process-rail {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 600px) { .dcx-process-rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .dcx-process-rail { grid-template-columns: repeat(5, 1fr); } }

.dcx-step {
	position: relative;
	background: var(--dcx-bone);
	border: 1.5px solid var(--dcx-ink);
	border-radius: var(--dcx-radius);
	padding: 18px;
	box-shadow: 4px 4px 0 var(--dcx-ink);
	transition: transform .35s var(--dcx-ease), box-shadow .35s var(--dcx-ease);
}
.dcx-step:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--dcx-ink);
}
.dcx-step:nth-child(2n) { transform: rotate(0.7deg); }
.dcx-step:nth-child(2n):hover { transform: translate(-2px,-2px) rotate(0deg); }

.dcx-step-no {
	position: absolute;
	top: -14px; left: 14px;
	background: var(--dcx-lime);
	color: var(--dcx-ink);
	border: 1.5px solid var(--dcx-ink);
	border-radius: 999px;
	padding: 4px 12px;
	font-family: var(--dcx-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: 18px;
	box-shadow: 2px 2px 0 var(--dcx-ink);
}
.dcx-step-art {
	aspect-ratio: 4 / 5;
	border-radius: var(--dcx-radius);
	margin-bottom: 14px;
	overflow: hidden;
	background: var(--dcx-cream-deep);
}
.dcx-step-art--has-photo { padding: 0; }
.dcx-step-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--dcx-ease);
}
.dcx-step:hover .dcx-step-art--has-photo img { transform: scale(1.04); }
.dcx-step-title {
	font-family: var(--dcx-font-display);
	font-weight: 800;
	font-size: 22px;
	margin: 0 0 4px;
}
.dcx-step-note {
	font-family: var(--dcx-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
}

/* ==========================================================================
   SCENE 4 — CRUNCH (the showstopper)
   ========================================================================== */
.dcx-crunch {
	/* pastel backdrop with a soft pink + sky wash, no more dark sage */
	background:
		radial-gradient(ellipse at 80% 20%, var(--dcx-blush) 0%, transparent 50%),
		radial-gradient(ellipse at 15% 85%, var(--dcx-sky) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 50%, var(--dcx-cream) 0%, transparent 70%),
		var(--dcx-bone);
	color: var(--dcx-ink);
	padding-top: clamp(80px, 12vw, 160px);
	padding-bottom: clamp(80px, 12vw, 160px);
}
/* Scene 4 corner markers also ride on light surface — override on-dark */
.dcx-crunch .dcx-corner-num,
.dcx-crunch .dcx-corner-num.dcx-on-dark { color: var(--dcx-ink-mute) !important; }
.dcx-crunch .dcx-mono.dcx-on-dark { color: var(--dcx-ink-soft) !important; }
.dcx-crunch .dcx-cold-pre.dcx-on-dark { color: var(--dcx-lime) !important; }
.dcx-crunch .dcx-cold-main.dcx-on-dark { color: var(--dcx-ink) !important; }
.dcx-crunch-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
@media (min-width: 900px) {
	.dcx-crunch-inner { grid-template-columns: 1fr 1fr; }
}
.dcx-crunch-copy .dcx-mono { margin-bottom: 16px; }
.dcx-crunch-copy .dcx-cold-pre  { color: var(--dcx-lime-soft); margin-bottom: 4px; font-size: clamp(28px,5vw,64px); }
.dcx-crunch-copy .dcx-cold-main { color: var(--dcx-on-dark);   font-size: clamp(40px,7.5vw,108px); }

/* tilted frame */
.dcx-crunch-frame {
	position: relative;
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	transform: rotate(-2.5deg);
}
.dcx-frame-body {
	position: relative;
	aspect-ratio: 9/16;
	border-radius: var(--dcx-radius-lg);
	overflow: hidden;
	border: 2px solid var(--dcx-on-dark);
	box-shadow:
		0 0 0 1px var(--dcx-sage-dark),
		18px 18px 0 var(--dcx-lime);
	color: var(--dcx-on-dark);
	background: var(--dcx-sage);
}
.dcx-frame-body--has-media { padding: 0; }
.dcx-crunch-video,
.dcx-crunch-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dcx-stamp {
	position: absolute;
	z-index: 5;
	width: 130px; height: 130px;
	top: -32px; right: -32px;
	animation: dcx-spin 12s linear infinite;
	filter: drop-shadow(2px 4px 0 var(--dcx-ink));
}
@keyframes dcx-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.dcx-wave {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.dcx-wave circle {
	fill: none;
	stroke: var(--dcx-lime-soft);
	stroke-width: 2;
	opacity: 0;
	transform-origin: 200px 380px;
	animation: dcx-wave 2.6s ease-out infinite;
}
.dcx-wave circle:nth-child(2) { animation-delay: 0.85s; }
.dcx-wave circle:nth-child(3) { animation-delay: 1.7s; }
@keyframes dcx-wave {
	0%   { transform: scale(0.6); opacity: 0.9; }
	70%  { opacity: 0.25; }
	100% { transform: scale(2.6); opacity: 0; }
}

.dcx-frame-live, .dcx-frame-tc {
	position: absolute;
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-on-dark);
	background: rgba(31,42,20,0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 6px 10px;
	border-radius: 999px;
}
.dcx-frame-live { top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; }
.dcx-dot {
	width: 6px; height: 6px;
	background: var(--dcx-lime);
	border-radius: 50%;
	animation: dcx-pulse 1.4s ease-in-out infinite;
}
@keyframes dcx-pulse {
	0%,100% { transform: scale(1); opacity: 1; }
	50%     { transform: scale(1.6); opacity: 0.4; }
}
.dcx-frame-tc { bottom: 14px; left: 14px; }

.dcx-frame-sound {
	position: absolute;
	bottom: 14px; right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dcx-on-dark);
	background: var(--dcx-lime);
	border: 1.5px solid var(--dcx-ink);
	border-radius: 999px;
	padding: 7px 12px 7px 8px;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--dcx-ink);
	transition: transform .25s var(--dcx-ease);
}
.dcx-frame-sound:hover { transform: translate(-1px,-1px); }
.dcx-frame-sound svg { width: 14px; height: 14px; color: var(--dcx-ink); }
.dcx-frame-sound span { color: var(--dcx-ink); }

/* ==========================================================================
   SCENE 5 — THE PACK
   ========================================================================== */
.dcx-pack { background: var(--dcx-peach); }
.dcx-pack-head {
	max-width: 1280px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center;
}
.dcx-pack-head .dcx-mono { margin-bottom: 12px; }

.dcx-pack-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 760px)  { .dcx-pack-grid { grid-template-columns: repeat(3, 1fr); } }

.dcx-polaroid {
	display: block;
	background: var(--dcx-bone);
	border: 1.5px solid var(--dcx-ink);
	border-radius: var(--dcx-radius);
	padding: 12px 12px 18px;
	box-shadow: 6px 6px 0 var(--dcx-ink);
	text-decoration: none;
	color: var(--dcx-ink);
	transition: transform .35s var(--dcx-ease), box-shadow .35s var(--dcx-ease);
}
.dcx-polaroid--left  { transform: rotate(-2deg); }
.dcx-polaroid--right { transform: rotate(1.6deg); }
.dcx-polaroid:hover {
	transform: rotate(0) translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--dcx-ink);
}
.dcx-polaroid-img {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--dcx-cream-deep);
	margin-bottom: 14px;
}
.dcx-polaroid-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dcx-polaroid-cap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dcx-polaroid-num {
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
}
.dcx-polaroid-name {
	font-family: var(--dcx-font-display);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.2;
}
.dcx-polaroid-price {
	font-family: var(--dcx-font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--dcx-sage-dark);
}
.dcx-polaroid-price del { opacity: 0.5; margin-right: 6px; font-weight: 500; }
.dcx-polaroid-price ins { text-decoration: none; }

/* ==========================================================================
   SCENE 6 — COMMUNITY WALL
   ========================================================================== */
.dcx-wall { background: var(--dcx-cream); }
.dcx-wall-head { max-width: 1280px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.dcx-wall-head .dcx-mono { margin-bottom: 12px; }
.dcx-wall-counter {
	margin-top: 24px;
	font-family: var(--dcx-font-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dcx-ink-soft);
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.dcx-counter {
	font-family: var(--dcx-font-display);
	font-weight: 900;
	font-style: italic;
	font-size: 22px;
	color: var(--dcx-lime);
	text-transform: none;
}

.dcx-wall-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 700px)  { .dcx-wall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .dcx-wall-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.dcx-tile {
	border: 1.5px solid var(--dcx-ink);
	border-radius: var(--dcx-radius);
	padding: 10px;
	box-shadow: 4px 4px 0 var(--dcx-ink);
	background: var(--dcx-bone);
	transition: transform .35s var(--dcx-ease);
	margin: 0;
}
.dcx-tile:nth-child(3n)   { transform: rotate(-1.5deg); }
.dcx-tile:nth-child(3n+1) { transform: rotate(1deg); }
.dcx-tile:hover { transform: rotate(0); }
.dcx-tile--lavender { background: var(--dcx-lavender); }
.dcx-tile--mint     { background: var(--dcx-mint); }
.dcx-tile--peach    { background: var(--dcx-peach); }
.dcx-tile--cream    { background: var(--dcx-cream); }
.dcx-tile--lime     { background: var(--dcx-lime-soft); }
.dcx-tile-art {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
}
.dcx-tile-art--has-photo { padding: 0; }
.dcx-tile-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--dcx-ease);
}
.dcx-tile:hover .dcx-tile-art--has-photo img { transform: scale(1.05); }
.dcx-tile figcaption { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px; }
.dcx-tile-name {
	font-family: var(--dcx-font-display);
	font-weight: 800;
	font-style: italic;
	font-size: 17px;
	color: var(--dcx-ink);
}
.dcx-tile-note {
	font-family: var(--dcx-font-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
}

/* ==========================================================================
   SCENE 7 — THE PROMISE
   ========================================================================== */
.dcx-promise {
	background: #ffffff;
	color: var(--dcx-ink);
	min-height: auto;
	padding-top: clamp(64px, 8vw, 112px);
	padding-bottom: clamp(64px, 8vw, 112px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dcx-promise-inner {
	max-width: 1100px;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 2;
}
.dcx-promise-inner .dcx-mono { color: var(--dcx-ink-soft); margin-bottom: 12px; }
.dcx-promise-h {
	font-family: var(--dcx-font-display);
	font-weight: 900;
	font-size: clamp(56px, 11vw, 156px);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--dcx-ink);
	margin-bottom: clamp(28px, 4vw, 48px);
}
.dcx-promise-h .dcx-em { color: var(--dcx-turmeric); }
.dcx-promise-h .dcx-em::after {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 10 Q 50 2 100 8 T 198 6' stroke='%23d4a83a' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat;
	background-size: 100% 100%;
}

.dcx-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--dcx-ink);
	color: var(--dcx-on-dark);
	border: 2px solid var(--dcx-ink);
	border-radius: 999px;
	padding: 18px 32px;
	font-family: var(--dcx-font-mono);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 6px 6px 0 var(--dcx-turmeric);   /* gold offset, luxe on white */
	transition: transform .25s var(--dcx-ease), box-shadow .25s var(--dcx-ease), background .25s ease, color .25s ease;
}
.dcx-cta-btn:hover {
	transform: translate(-2px,-2px);
	box-shadow: 9px 9px 0 var(--dcx-turmeric);
	background: var(--dcx-turmeric);
	color: var(--dcx-ink);
	border-color: var(--dcx-turmeric);
}
.dcx-cta-btn svg { width: 16px; height: 16px; }
.dcx-promise-microline {
	margin-top: clamp(24px, 3vw, 36px);
	color: var(--dcx-sage-dark);
}

/* ==========================================================================
   v3.8 — SCENE: ANATOMY OF A MEAL (meat · bone · organ + chewing story)
   ========================================================================== */
.dcx-anatomy {
	background: var(--dcx-bone);
}
.dcx-anatomy-head {
	max-width: 1180px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}
.dcx-anatomy-head .dcx-mono { margin-bottom: 14px; }
.dcx-anatomy-head .dcx-h2 { margin: 0; }

/* Three pillars: Meat / Bone / Organ */
.dcx-anatomy-pillars {
	max-width: 1180px;
	margin: 0 auto clamp(40px, 6vw, 72px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 720px) {
	.dcx-anatomy-pillars { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
}
.dcx-pillar {
	position: relative;
	background: var(--dcx-cream);
	border: 1.5px solid var(--dcx-ink);
	border-radius: var(--dcx-radius-lg);
	padding: 28px 24px 24px;
	box-shadow: 4px 4px 0 var(--dcx-ink);
	transition: transform .35s var(--dcx-ease), box-shadow .35s var(--dcx-ease);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dcx-pillar:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--dcx-ink);
}
.dcx-pillar::before {
	content: '';
	position: absolute;
	top: 0; left: 18px; right: 18px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: currentColor;
}
.dcx-pillar--meat  { color: var(--dcx-rust); }
.dcx-pillar--bone  { color: var(--dcx-turmeric); }
.dcx-pillar--organ { color: var(--dcx-lime); }

.dcx-pillar-icon {
	font-size: 44px;
	line-height: 1;
	display: inline-block;
	margin-bottom: 4px;
	/* Apple emoji rendering tweaks for crispness */
	font-feature-settings: "liga" off;
	-webkit-font-smoothing: subpixel-antialiased;
}
.dcx-pillar-label {
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: currentColor;
	display: inline-block;
	border-top: 1px solid currentColor;
	padding-top: 10px;
	margin-top: 4px;
}
.dcx-pillar-note {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dcx-ink-soft);
	margin: 0;
}

/* Anatomy body — multi-paragraph, same role classes as manifesto.
   Centered to a comfortable measure. */
.dcx-anatomy-body {
	max-width: 64ch;
	margin: 0 auto;
	text-align: left;
}
.dcx-anatomy-body .dcx-body { margin: 0 0 1.15em; }
.dcx-anatomy-body .dcx-body--lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--dcx-ink);
	font-weight: 500;
}
.dcx-anatomy-body .dcx-body--punch {
	font-family: var(--dcx-font-display);
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.35;
	color: var(--dcx-ink);
	max-width: 36ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-weight: 500;
}
.dcx-anatomy-body .dcx-body--closer {
	border-left: 3px solid var(--dcx-lime);
	padding-left: 14px;
	color: var(--dcx-ink);
}

@media (prefers-reduced-motion: reduce) {
	.dcx-pillar, .dcx-pillar:hover { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   v2.0.0 — COLD OPEN: bg video, light leak, film leader, sprocket strip
   ========================================================================== */

.dcx-cold-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.dcx-cold-bg-video,
.dcx-cold-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.42;
	mix-blend-mode: luminosity;
	transform: scale(1.05);
}
.dcx-cold-bg-veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 35%, transparent 10%, rgba(42, 56, 24, 0.72) 80%),
		linear-gradient(180deg, rgba(42, 56, 24, 0.55) 0%, rgba(42, 56, 24, 0.85) 100%);
}
.dcx-cold--has-bg .dcx-cold-inner { z-index: 3; }

/* Drifting light leak — chartreuse blob that slowly orbits behind the headline */
.dcx-cold-flare {
	position: absolute;
	width: 60vw;
	height: 60vw;
	max-width: 900px;
	max-height: 900px;
	left: -10vw;
	top: -10vw;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(170,197,39,0.28), rgba(170,197,39,0.12) 40%, transparent 60%);
	filter: blur(40px);
	animation: dcx-flare-drift 22s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes dcx-flare-drift {
	0%, 100% { transform: translate(0, 0); opacity: 0.85; }
	33%      { transform: translate(40vw, 30vh); opacity: 1; }
	66%      { transform: translate(20vw, -10vh); opacity: 0.7; }
}

/* Film leader: 3·2·1 marks running down the left edge */
.dcx-cold-leader {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 22px;
	z-index: 2;
	pointer-events: none;
}
.dcx-cold-leader-mark {
	width: 32px; height: 32px;
	border: 1.5px solid var(--dcx-on-dark-mute);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--dcx-font-mono);
	font-size: 13px; font-weight: 600;
	color: var(--dcx-on-dark-soft);
	animation: dcx-leader-pulse 3s ease-in-out infinite;
}
.dcx-cold-leader-mark:nth-child(2) { animation-delay: 1s; }
.dcx-cold-leader-mark:nth-child(3) { animation-delay: 2s; }
@keyframes dcx-leader-pulse {
	0%, 100% { border-color: var(--dcx-on-dark-mute); color: var(--dcx-on-dark-mute); transform: scale(1); }
	50%      { border-color: var(--dcx-lime); color: var(--dcx-lime-soft); transform: scale(1.1); }
}
@media (max-width: 720px) {
	.dcx-cold-leader { display: none; }
}

/* Sprocket strip on the right — film roll edge */
.dcx-cold-sprocket {
	position: absolute;
	right: 14px;
	top: 0;
	bottom: 0;
	width: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 30px 0;
	z-index: 2;
	pointer-events: none;
}
.dcx-cold-sprocket span {
	width: 14px; height: 14px;
	background: rgba(245, 240, 227, 0.10);
	border: 1px solid rgba(245, 240, 227, 0.18);
	border-radius: 3px;
}
@media (max-width: 720px) {
	.dcx-cold-sprocket { display: none; }
}

/* Subtle horizontal grain drift overlay on the cold scene */
.dcx-cold::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 3px),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: dcx-grain-drift 6s steps(8) infinite;
}
@keyframes dcx-grain-drift {
	0%   { transform: translate(0,0); }
	25%  { transform: translate(-5px, 3px); }
	50%  { transform: translate(3px, -4px); }
	75%  { transform: translate(-3px, 4px); }
	100% { transform: translate(0,0); }
}

/* ==========================================================================
   v2.0.0 — COMMUNITY WALL: mixed tile sizes, paper texture, accent stickers
   ========================================================================== */

/* Allow tiles to span 2 columns or 2 rows for visual variety */
.dcx-wall-grid {
	grid-auto-rows: minmax(0, auto);
}
.dcx-wall-grid .dcx-tile:nth-child(1)  { grid-column: span 2; grid-row: span 1; transform: rotate(0); }
.dcx-wall-grid .dcx-tile:nth-child(5)  { grid-column: span 1; grid-row: span 2; transform: rotate(-1.2deg); }
.dcx-wall-grid .dcx-tile:nth-child(8)  { grid-column: span 2; transform: rotate(1.6deg); }
.dcx-wall-grid .dcx-tile:nth-child(1) .dcx-tile-art,
.dcx-wall-grid .dcx-tile:nth-child(8) .dcx-tile-art { aspect-ratio: 2 / 1; }
.dcx-wall-grid .dcx-tile:nth-child(5) .dcx-tile-art { aspect-ratio: 3 / 5; }

@media (max-width: 700px) {
	.dcx-wall-grid .dcx-tile,
	.dcx-wall-grid .dcx-tile:nth-child(1),
	.dcx-wall-grid .dcx-tile:nth-child(5),
	.dcx-wall-grid .dcx-tile:nth-child(8) { grid-column: span 1; grid-row: span 1; }
	.dcx-wall-grid .dcx-tile-art { aspect-ratio: 1 / 1 !important; }
}

/* Cork board paper texture behind the wall */
.dcx-wall {
	background:
		radial-gradient(ellipse at 20% 0%, rgba(212, 168, 58, 0.08), transparent 50%),
		radial-gradient(ellipse at 80% 100%, rgba(170, 197, 39, 0.08), transparent 50%),
		var(--dcx-cream);
	position: relative;
}
.dcx-wall::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='cork'><feTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.40  0 0 0 0 0.18  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23cork)'/></svg>");
}
.dcx-wall > * { position: relative; z-index: 1; }

/* "Verified" sticker on every 3rd tile */
.dcx-wall-grid .dcx-tile:nth-child(3n+1) .dcx-tile-art--has-photo::after,
.dcx-wall-grid .dcx-tile:nth-child(3n+2) .dcx-tile-art:not(.dcx-tile-art--has-photo)::after {
	content: '✓ verified';
	position: absolute;
	top: 8px; right: 8px;
	background: var(--dcx-lime);
	color: var(--dcx-ink);
	border: 1px solid var(--dcx-ink);
	border-radius: 999px;
	padding: 3px 8px;
	font-family: var(--dcx-font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: 1px 1px 0 var(--dcx-ink);
	z-index: 2;
	pointer-events: none;
}
.dcx-wall-grid .dcx-tile-art { position: relative; }

/* ==========================================================================
   MOTION LOWER-BOUND
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.dcx-shell .dcx-float,
	.dcx-shell .dcx-stamp,
	.dcx-shell .dcx-wave circle,
	.dcx-shell .dcx-dot,
	.dcx-shell .dcx-scroll-cue span,
	.dcx-cold-flare,
	.dcx-cold-leader-mark,
	.dcx-cold::after { animation: none !important; }
}