/*
 * The Craft Stage — orbital 3D gallery (front page).
 *
 * showcase-3d.js revolves the cards and writes their transform, opacity,
 * filter and shadow variables every frame: depth of field, float, bank,
 * drag inertia and the per-layer tilt all live there. This sheet owns the
 * set, the lighting, the card material, the entrance choreography and the
 * flat fallback.
 *
 * Layer tilt arrives as --tilt on each layer (mark, floor, planes) so heavy
 * far layers can lag light near ones. Everything ambient is transform or
 * opacity only — no background-position loops.
 */

.hhm-stage3d {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	contain: paint;
	content-visibility: auto;
	/* Must match the real rendered height, or a skip-then-restore shifts the
	   page by the difference. Measured: 1000px desktop, 712px mobile. */
	contain-intrinsic-size: auto 1000px;
	padding: clamp(60px, 8vw, 110px) 0;
	background:
		radial-gradient(1150px 560px at 76% 40%, rgba(216, 179, 108, .11), transparent 62%),
		linear-gradient(200deg, rgba(122, 158, 204, .16) 0%, rgba(122, 158, 204, .04) 24%, transparent 44%),
		radial-gradient(760px 400px at 14% 92%, rgba(216, 179, 108, .05), transparent 60%),
		linear-gradient(180deg, #0a0a0c 0%, #12100f 48%, #0a0a0c 100%);
	color: var(--hg-text, #f2efe7);
}

.hhm-stage3d__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(58% 46% at 72% 48%, rgba(216, 179, 108, .085), transparent 70%);
	animation: hhm-stage-breathe 8s ease-in-out infinite;
}

@keyframes hhm-stage-breathe {
	0%, 100% { opacity: .6; }
	50%      { opacity: 1; }
}

.hhm-stage3d__layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(300px, 4.6fr) 7.4fr;
	align-items: center;
	gap: clamp(24px, 3.5vw, 48px);
}

/* ===================== Copy column ===================== */

.hhm-stage3d__eyebrow,
.hhm-stage3d__title,
.hhm-stage3d__lede,
.hhm-stage3d__actions,
.hhm-stage3d__note {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2, .9, .25, 1);
}

.hhm-stage3d.is-live .hhm-stage3d__eyebrow  { opacity: 1; transform: none; transition-delay: .05s; }
.hhm-stage3d.is-live .hhm-stage3d__title    { opacity: 1; transform: none; transition-delay: .16s; }
.hhm-stage3d.is-live .hhm-stage3d__lede     { opacity: 1; transform: none; transition-delay: .3s; }
.hhm-stage3d.is-live .hhm-stage3d__actions  { opacity: 1; transform: none; transition-delay: .44s; }
.hhm-stage3d.is-live .hhm-stage3d__note     { opacity: 1; transform: none; transition-delay: .6s; }

.hhm-stage3d__eyebrow {
	margin: 0 0 14px;
	font: 600 12px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hg-gold, #d8b36c);
}

/* scaleX, not width — width would animate layout every frame. */
.hhm-stage3d__eyebrow::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	margin-inline-end: 10px;
	vertical-align: 3px;
	background: var(--hg-gold-grad, linear-gradient(140deg, #e6c885, #b98f47));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s cubic-bezier(.2, .9, .25, 1) .5s;
}

[dir="rtl"] .hhm-stage3d__eyebrow::before {
	transform-origin: right center;
}

.hhm-stage3d.is-live .hhm-stage3d__eyebrow::before {
	transform: scaleX(1);
}

.hhm-stage3d__title {
	margin: 0 0 18px;
	font: 700 clamp(38px, 5vw, 72px)/1.03 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: -.028em;
	color: var(--hg-text, #f2efe7);
}

/* A near-vertical foil reads as a raking key light on metal. Static: an
   endlessly looping gradient on a headline is a dated tell. */
.hhm-stage3d__title em {
	display: block;
	font: italic 500 clamp(44px, 6.2vw, 88px)/.96 Newsreader, Georgia, serif;
	margin-inline-start: -.04em;
	background: linear-gradient(176deg,
		#fff8e6 0%, #e9cf95 22%, #b58f4c 46%, #f4e3b4 62%, #9a7738 84%, #d8b36c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hhm-stage3d__lede {
	margin: 0 0 26px;
	max-width: 46ch;
	font: 400 15.5px/1.7 Inter, "Segoe UI", Arial, sans-serif;
	color: var(--hg-text-2, rgba(242, 239, 231, .64));
}

.hhm-stage3d__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hhm-stage3d__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font: 600 14.5px/1 Manrope, "Segoe UI", Arial, sans-serif;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.hhm-stage3d__cta--gold {
	background: var(--hg-gold-grad, linear-gradient(140deg, #e6c885 0%, #d8b36c 55%, #b98f47 100%));
	color: #14100a;
	box-shadow: 0 10px 28px rgba(216, 179, 108, .28);
}

.hhm-stage3d__cta--gold:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 18px 40px rgba(216, 179, 108, .4);
}

.hhm-stage3d__cta--ghost {
	border: 1px solid rgba(242, 239, 231, .34);
	color: #f2efe7;
	background: rgba(242, 239, 231, .03);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.hhm-stage3d__cta--ghost:hover {
	border-color: var(--hg-gold, #d8b36c);
	color: #eed49b;
	transform: translateY(-2px);
}

.hhm-stage3d__cta:focus-visible {
	outline: 3px solid #f7e7bd;
	outline-offset: 3px;
}

/* This one line teaches the whole interaction — it must not be the faintest
   thing on the stage. 13px at --hg-text-2 measures 7.3:1 on ink. */
.hhm-stage3d__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	font: 400 13px/1.5 Inter, "Segoe UI", Arial, sans-serif;
	color: var(--hg-text-2, rgba(242, 239, 231, .64));
}

/* A thumb sliding in a track: shows the gesture instead of naming it. */
.hhm-stage3d__pulse {
	position: relative;
	width: 24px;
	height: 11px;
	border-radius: 999px;
	border: 1px solid rgba(216, 179, 108, .45);
	flex: none;
}

.hhm-stage3d__pulse::after {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: 5px;
	border-radius: 999px;
	background: var(--hg-gold, #d8b36c);
	box-shadow: 0 0 8px rgba(216, 179, 108, .6);
	animation: hhm-drag-hint 3s ease-in-out infinite;
}

@keyframes hhm-drag-hint {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(12px); }
}

/* ===================== The stage ===================== */

.hhm-stage3d__stage {
	position: relative;
	height: clamp(480px, 53vw, 690px);
	perspective: 1600px;
	perspective-origin: 56% 42%;
}

[dir="rtl"] .hhm-stage3d__stage {
	perspective-origin: 44% 42%;
}

.hhm-stage3d__world {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

/* Engraved on the back wall of the room. A pointer-driven mask reveal was
   tried here and cut: it hid the brand more than it revealed it, which is
   the opposite of the job. The light sweep below lifts it instead. */
.hhm-stage3d__mark {
	position: absolute;
	left: 50%;
	top: 17%;
	transform: translate(-50%, -50%) var(--tilt, ) translateZ(-820px) scale(1.51);
	font: 700 clamp(26px, 3vw, 40px)/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .3em;
	white-space: nowrap;
	color: transparent;
	background: linear-gradient(180deg, rgba(247, 231, 189, .92), rgba(216, 179, 108, .5));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 1.4px rgba(238, 212, 155, .85);
	text-shadow: 0 0 34px rgba(216, 179, 108, .45);
	opacity: 0;
	transition: opacity 1.6s ease .9s;
}

.hhm-stage3d.is-live .hhm-stage3d__mark {
	opacity: 1;
}

/* ---------- brand medallion: the crest the catalog performs under ----------
 *
 * It began at the orbit hub, which reads well on paper and is invisible in
 * practice: the hub projects to the same screen point as the front card, so
 * a card sat on it permanently. Lifted above the ring instead, with the
 * wordmark directly beneath it as a lockup, and it never rotates far enough
 * in Y to turn edge-on — a logo you cannot read is not a logo.
 */

/* Screen space, not the 3D world. Inside the world the perspective divide
   drags a far element toward the vanishing point — at z=-560 the crest fell
   63px and landed back behind the cards, twice. Out here its position is
   exactly what the rule says, and the sway still ties it to the orbit. The
   highest card sits 95px below the stage top, so 88px clears it. */
.hhm-stage3d__medallion {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 2;
	width: 88px;
	height: 88px;
	margin-left: -44px;
	pointer-events: none;
	transform: translateY(2px) rotateY(var(--brand-spin, 0deg));
	opacity: 0;
	transition: opacity 1.4s ease 1.1s;
}

.hhm-stage3d.is-live .hhm-stage3d__medallion { opacity: 1; }

.hhm-stage3d__medallion-halo {
	position: absolute;
	inset: -34%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216, 179, 108, .3) 0%, rgba(216, 179, 108, .08) 46%, transparent 68%);
	filter: blur(10px);
	animation: hhm-halo-breathe 6.5s ease-in-out infinite;
}

@keyframes hhm-halo-breathe {
	0%, 100% { opacity: .7;  transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.07); }
}

/* A struck brass disc: the logo sits in it, not on it. */
.hhm-stage3d__medallion-disc {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 26%, #2a2620 0%, #161513 58%, #0c0c0d 100%);
	border: 1px solid rgba(230, 200, 133, .42);
	box-shadow:
		inset 0 2px 0 rgba(255, 250, 238, .12),
		inset 0 -10px 22px -10px rgba(0, 0, 0, .9),
		0 0 40px rgba(216, 179, 108, .16),
		0 22px 44px -14px rgba(0, 0, 0, .7);
	overflow: hidden;
}

/* The rim highlight that says "turned metal", sweeping as the disc rotates. */
.hhm-stage3d__medallion-disc::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
		transparent 0 12%, rgba(247, 231, 189, .34) 22%, transparent 34%,
		transparent 62%, rgba(247, 231, 189, .2) 72%, transparent 84%);
	mix-blend-mode: screen;
	animation: hhm-medallion-rim 9s linear infinite;
}

@keyframes hhm-medallion-rim {
	to { transform: rotate(360deg); }
}

.hhm-stage3d__medallion-img {
	position: relative;
	z-index: 1;
	width: 72%;
	height: auto;
	max-height: 72%;
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)) brightness(1.12);
}

/* ---------- floor ---------- */

.hhm-stage3d__floor {
	position: absolute;
	left: 50%;
	bottom: -10%;
	width: 170%;
	height: 140%;
	overflow: hidden;
	transform: translateX(-50%) var(--tilt, ) rotateX(90deg) translateZ(-130px);
	transform-origin: 50% 100%;
	background:
		radial-gradient(46% 8% at 50% 3%, rgba(230, 200, 133, .22), transparent 70%),
		linear-gradient(0deg, transparent 0 97%, rgba(216, 179, 108, .42) 97%),
		repeating-linear-gradient(0deg,  rgba(216, 179, 108, .12) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(216, 179, 108, .12) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(242, 239, 231, .035) 0 1px, transparent 1px 11px);
	-webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000 26%, transparent 76%);
	mask-image: radial-gradient(70% 90% at 50% 100%, #000 26%, transparent 76%);
	opacity: 0;
	transition: opacity 1.4s ease .15s;
}

.hhm-stage3d.is-live .hhm-stage3d__floor { opacity: 1; }

.hhm-stage3d__floor::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgba(216, 179, 108, .075) 0%, rgba(216, 179, 108, .02) 26%, transparent 58%),
		linear-gradient(180deg, #16131a 0%, #0d0c10 62%, #0a0a0c 100%);
}

/* Transform, not background-position — a composited band instead of a
   full-surface repaint every frame. */
.hhm-stage3d__floor::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: 300%;
	background: linear-gradient(90deg, transparent 45%, rgba(216, 179, 108, .1) 50%, transparent 55%);
	animation: hhm-floor-scan 9s ease-in-out infinite;
}

@keyframes hhm-floor-scan {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(46%); }
}

.hhm-stage3d__floorspot {
	position: absolute;
	left: 50%;
	top: 66%;
	width: 460px;
	height: 130px;
	transform: translate(-50%, -50%) rotateX(90deg) translateZ(-40px);
	background: radial-gradient(50% 50% at 50% 50%, rgba(216, 179, 108, .22), transparent 72%);
	filter: blur(6px);
	opacity: 0;
	transition: opacity 1.6s ease .5s;
}

.hhm-stage3d.is-live .hhm-stage3d__floorspot { opacity: 1; }

/* Screen-space, outside the 3D world: WebKit flattens blended layers inside
   a preserve-3d context, and inside the world the "pointer light" was also
   rotated away from the pointer. Plain alpha over near-black is within a
   rounding error of screen blending. */
.hhm-stage3d__light {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient(240px 190px at var(--lx, 50%) var(--ly, 45%), rgba(230, 200, 133, .17), transparent 70%);
	opacity: 0;
	transition: opacity .5s ease;
}

.hhm-stage3d.is-lit .hhm-stage3d__light { opacity: 1; }

/* ---------- gyroscopic rings ---------- */

.hhm-stage3d__plane {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}

.hhm-stage3d__plane--1 { transform: var(--tilt, ) rotateX(80deg); }
.hhm-stage3d__plane--2 { transform: var(--tilt, ) rotate3d(1, .35, .12, 74deg); }
.hhm-stage3d__plane--3 { transform: var(--tilt, ) rotate3d(1, -.45, .18, 78deg); }

/* Against near-black the old .3 alpha was effectively invisible; these read
   as a set without competing with the cards. */
.hhm-stage3d__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(230, 200, 133, .6);
	transform: scale(0);
	opacity: 0;
}

/* Ring 1 is the literal orbit track: same diameter as the desktop radius. */
.hhm-stage3d__plane--1 .hhm-stage3d__ring {
	width: 592px; height: 592px; margin: -296px 0 0 -296px;
	box-shadow: 0 0 34px rgba(216, 179, 108, .16), inset 0 0 34px rgba(216, 179, 108, .1);
}

.hhm-stage3d__plane--2 .hhm-stage3d__ring {
	width: 660px; height: 660px; margin: -330px 0 0 -330px;
	border-color: rgba(216, 179, 108, .3);
}

.hhm-stage3d__plane--3 .hhm-stage3d__ring--dashed {
	width: 620px; height: 620px; margin: -310px 0 0 -310px;
	border: 1px dashed rgba(178, 200, 226, .34);
}

/* A bead travelling the orbit track. */
.hhm-stage3d__plane--1 .hhm-stage3d__ring::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: #f2dfae;
	box-shadow: 0 0 14px 4px rgba(230, 200, 133, .5);
}

/* The bloom is a transition on transform; the spin rides the independent
   `rotate` longhand (written by JS) so the two compose instead of the
   animation silently outranking the transition. */
.hhm-stage3d.is-live .hhm-stage3d__ring {
	transform: scale(1);
	opacity: 1;
	transition: transform 1.25s cubic-bezier(.18, 1.26, .3, 1), opacity .9s ease;
}

.hhm-stage3d.is-live .hhm-stage3d__plane--1 .hhm-stage3d__ring { transition-delay: .30s; }
.hhm-stage3d.is-live .hhm-stage3d__plane--2 .hhm-stage3d__ring { transition-delay: .58s; }
.hhm-stage3d.is-live .hhm-stage3d__plane--3 .hhm-stage3d__ring { transition-delay: .88s; }

/* ===================== Orbit + cards ===================== */

.hhm-stage3d__orbit {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	cursor: grab;
	touch-action: pan-y;
}

.hhm-stage3d.is-grab .hhm-stage3d__orbit,
.hhm-stage3d.is-grab .hhm-stage3d__card { cursor: grabbing; }

/* JS owns transform / opacity / filter / pointer-events here. `perspective`
   applies to children regardless of this element's own flattening, which is
   what gives the entrance rotateX real depth. */
.hhm-stage3d__card {
	position: absolute;
	left: 50%;
	top: 46%;
	width: var(--hhm-card-w, clamp(228px, 17.5vw, 276px));
	text-decoration: none;
	cursor: pointer;
	perspective: 760px;
	perspective-origin: 50% 62%;
	will-change: transform;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Spring entrance: hinges up off the floor with overshoot, staggered. */
.hhm-stage3d__enter {
	display: block;
	position: relative;
	opacity: 0;
	transform: translateY(90px) scale(.6) rotateX(24deg);
	transition:
		opacity .7s ease calc(.55s + var(--i, 0) * .13s),
		transform 1s cubic-bezier(.2, 1.45, .32, 1) calc(.55s + var(--i, 0) * .13s);
}

.hhm-stage3d.is-live .hhm-stage3d__enter {
	opacity: 1;
	transform: none;
}

/* Machined metal: a lit edge catches light on two sides and goes dark on the
   opposing two — a uniform hairline cannot describe that. */
.hhm-stage3d__card-inner {
	position: relative;
	display: block;
	isolation: isolate;
	padding: 14px 14px 16px;
	border: 1px solid transparent;
	border-radius: 20px;
	background:
		linear-gradient(168deg, #26231e 0%, #171614 52%, #101011 100%) padding-box,
		linear-gradient(150deg, rgba(250, 238, 208, .72) 0%, rgba(216, 179, 108, .26) 22%,
			rgba(255, 255, 255, .05) 48%, rgba(140, 106, 54, .5) 78%, rgba(247, 231, 189, .38) 100%) border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 250, 238, .15),
		inset 0 -1px 0 rgba(0, 0, 0, .7),
		0 2px 6px rgba(0, 0, 0, .5),
		0 26px 50px -14px rgba(0, 0, 0, .78),
		0 52px 96px -34px rgba(216, 179, 108, .12);
	overflow: hidden;
	transition: box-shadow .3s ease;
}

/* The product sits in a lit niche, not on a flat plate. */
.hhm-stage3d__card-media {
	position: relative;
	display: block;
	border-radius: 15px;
	background: radial-gradient(76% 60% at 50% 20%, #fffdf7 0%, #f6f2e8 48%, #e5ddcd 100%);
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, .95),
		inset 0 -16px 28px -14px rgba(116, 100, 70, .42),
		inset 0 0 0 1px rgba(120, 104, 74, .1);
	padding: 13px;
	margin-bottom: 12px;
	overflow: hidden;
}

.hhm-stage3d__card-media::after {
	content: "";
	position: absolute;
	inset: auto 12% 6px;
	height: 14px;
	pointer-events: none;
	background: radial-gradient(50% 100% at 50% 100%, rgba(88, 74, 50, .34), transparent 72%);
	filter: blur(3px);
}

.hhm-stage3d__card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .45s cubic-bezier(.2, .9, .25, 1);
}

.hhm-stage3d__card-cat {
	display: block;
	font: 600 10.5px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #e7cf9c;
	margin-bottom: 6px;
}

.hhm-stage3d__card-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: 600 14.5px/1.4 Inter, "Segoe UI", Arial, sans-serif;
	color: #f7f4ec;
	margin-bottom: 8px;
	min-height: 2.8em;
}

.hhm-stage3d__card-price {
	font: 700 15.5px/1 Manrope, "Segoe UI", Arial, sans-serif;
	color: #eed49b;
}

.hhm-stage3d__card-price del {
	color: rgba(242, 239, 231, .62);
	font-weight: 400;
	margin-inline-end: 6px;
}

.hhm-stage3d__card-price--quote {
	color: var(--hg-text-2, rgba(242, 239, 231, .64));
	font-weight: 500;
}

/* Fires when a card ARRIVES (JS, Web Animations) — not on a blind timer. */
.hhm-stage3d__card-sheen {
	position: absolute;
	inset: 0 -60%;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(245, 241, 232, .12) 46%, transparent 60%);
	transform: translateX(-115%);
}

.hhm-stage3d__card-beam {
	position: absolute;
	inset: -40%;
	pointer-events: none;
	background: conic-gradient(from 0deg,
		transparent 0 74%, rgba(230, 200, 133, 0) 78%, rgba(247, 231, 189, .5) 86%, rgba(230, 200, 133, 0) 94%, transparent 100%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity .35s ease;
	animation: hhm-beam-spin 2.6s linear infinite paused;
}

@keyframes hhm-beam-spin {
	to { transform: rotate(360deg); }
}

/* Reflection on a gold floor, not a grey artefact. */
.hhm-stage3d__mirror {
	position: absolute;
	top: calc(100% + 6px);
	left: 14px;
	right: 14px;
	pointer-events: none;
	transform: scaleY(-1);
	opacity: .2;
	filter: blur(2px) saturate(.72) brightness(.82);
	-webkit-mask-image: linear-gradient(0deg, #000 8%, transparent 62%);
	mask-image: linear-gradient(0deg, #000 8%, transparent 62%);
}

.hhm-stage3d__mirror img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Contact shadow, laid in the floor's plane so it foreshortens for free.
   JS couples its spread and softness to the card's float and depth. */
.hhm-stage3d__shadow {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 150%;
	height: 64px;
	pointer-events: none;
	transform-origin: 50% 0;
	transform: translate(-50%, var(--gap, 54px)) rotateX(90deg) scaleX(var(--shs, 1));
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .66), transparent 70%);
	filter: blur(var(--shb, 10px));
	opacity: var(--shop, .5);
}

/* ---------- caliper spec callouts ---------- */

.hhm-spec {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hhm-spec__lead {
	fill: none;
	stroke: rgba(150, 124, 74, .9);
	stroke-width: .5;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset .45s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .08s);
}

.hhm-spec__row {
	position: absolute;
	left: var(--sx);
	top: var(--sy);
	transform: translate(-50%, -50%);
	font: 600 9px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7a6647;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease calc(var(--i) * .08s + .1s);
}

[dir="rtl"] .hhm-spec { transform: scaleX(-1); }

[dir="rtl"] .hhm-spec__row {
	left: auto;
	right: var(--sx);
	transform: translate(50%, -50%);
}

.hhm-stage3d__card:focus-visible .hhm-spec__lead { stroke-dashoffset: 0; }
.hhm-stage3d__card:focus-visible .hhm-spec__row  { opacity: 1; }

/* ---------- hover (fine pointers only — a tap must not latch it) ---------- */

@media (hover: hover) and (pointer: fine) {
	.hhm-stage3d__card:hover .hhm-stage3d__card-inner {
		box-shadow:
			inset 0 1px 0 rgba(255, 250, 238, .18),
			inset 0 -1px 0 rgba(0, 0, 0, .7),
			0 2px 6px rgba(0, 0, 0, .5),
			0 40px 80px -14px rgba(0, 0, 0, .82),
			0 12px 44px -20px rgba(216, 179, 108, .3);
	}

	.hhm-stage3d__card:hover .hhm-stage3d__card-media img {
		transform: scale(1.07) translateY(-2px);
	}

	.hhm-stage3d__card:hover .hhm-stage3d__card-beam {
		opacity: 1;
		animation-play-state: running;
	}

	.hhm-stage3d__card:hover .hhm-spec__lead { stroke-dashoffset: 0; }
	.hhm-stage3d__card:hover .hhm-spec__row  { opacity: 1; }
}

/* ---------- focus: beats the engine's inline writes ---------- */

.hhm-stage3d__card:focus-visible {
	opacity: 1 !important;
	filter: none !important;
	z-index: 400 !important;
	outline: none;
}

.hhm-stage3d__card:focus-visible .hhm-stage3d__card-inner {
	outline: 3px solid #f7e7bd;
	outline-offset: 4px;
	box-shadow:
		0 0 0 7px rgba(10, 10, 12, .92),
		inset 0 1px 0 rgba(245, 241, 232, .14),
		0 40px 80px rgba(0, 0, 0, .6),
		0 10px 44px rgba(216, 179, 108, .34);
}

@supports not selector(:focus-visible) {
	.hhm-stage3d__card:focus .hhm-stage3d__card-inner {
		outline: 3px solid #f7e7bd;
		outline-offset: 4px;
	}
}

/* ===================== Transport ===================== */

.hhm-stage3d__controls {
	position: absolute;
	left: 50%;
	bottom: 6px;
	z-index: 4;
	display: none;
	gap: 10px;
	transform: translateX(-50%);
}

.hhm-stage3d[data-hhm-ready] .hhm-stage3d__controls { display: flex; }

.hhm-stage3d__ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(216, 179, 108, .3);
	background: rgba(10, 10, 12, .5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: rgba(242, 239, 231, .86);
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.hhm-stage3d__ctrl:hover {
	border-color: rgba(230, 200, 133, .7);
	color: #f7e7bd;
	background: rgba(10, 10, 12, .72);
}

.hhm-stage3d__ctrl:focus-visible {
	outline: 3px solid #f7e7bd;
	outline-offset: 3px;
}

.hhm-stage3d__ctrl-ico { width: 20px; height: 20px; }

[dir="rtl"] .hhm-stage3d__ctrl-ico { transform: scaleX(-1); }

/* Pause bars → play triangle. The bars are a gradient, not a clip-path: a
   single polygon cannot describe two disjoint shapes and drew an X. */
.hhm-stage3d__ctrl-glyph {
	width: 13px;
	height: 14px;
	background: linear-gradient(90deg,
		currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}

.hhm-stage3d__ctrl--toggle[aria-pressed="true"] .hhm-stage3d__ctrl-glyph {
	background: currentColor;
	clip-path: polygon(14% 0, 100% 50%, 14% 100%);
}

/* ===================== Kitchen atmosphere ===================== */

/* A soft shaft of warm light, not a grey wedge: the hard clip-path edges
   read as an artefact, so the falloff does the shaping instead. */
.hhm-lamp {
	position: absolute;
	top: -10%;
	width: 260px;
	height: 72%;
	pointer-events: none;
	clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
	background: linear-gradient(180deg, rgba(255, 198, 126, .13) 0%, rgba(255, 198, 126, .05) 38%, transparent 78%);
	filter: blur(26px);
	animation: hhm-lamp-flicker 7.3s ease-in-out infinite;
}

.hhm-lamp--1 { left: 18%; }
.hhm-lamp--2 { left: 63%; animation-duration: 9.1s; }

@keyframes hhm-lamp-flicker {
	0%, 100% { opacity: .82; }
	43%      { opacity: 1; }
	71%      { opacity: .9; }
}

.hhm-steam {
	position: absolute;
	bottom: 22%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(245, 241, 232, .085), transparent 68%);
	filter: blur(16px);
	opacity: 0;
	animation: hhm-steam 11s ease-in-out var(--sd, 0s) infinite;
}

/* Non-harmonic periods, so the plumes never beat in phase. */
.hhm-steam--1 { left: 24%; --sd: 0s; }
.hhm-steam--2 { left: 49%; --sd: -4.4s; animation-duration: 12.7s; }
.hhm-steam--3 { left: 71%; --sd: -7.9s; animation-duration: 9.8s; }

@keyframes hhm-steam {
	0%   { opacity: 0;  transform: translate3d(0, 14px, 0) scale(.55); }
	38%  { opacity: .7; }
	100% { opacity: 0;  transform: translate3d(10px, -140px, 0) scale(1.5); }
}

/* Low-end devices: skip the expensive atmosphere, keep the composition. */
.hhm-stage3d.is-lite .hhm-steam,
.hhm-stage3d.is-lite .hhm-stage3d__floor::after { display: none; }

/* ===================== Responsive ===================== */

@media (max-width: 980px) {
	.hhm-stage3d {
		padding: clamp(46px, 9vw, 68px) 0;
		contain-intrinsic-size: auto 990px;
	}

	.hhm-stage3d__layout  { grid-template-columns: 1fr; }
	.hhm-stage3d__copy    { text-align: center; }
	.hhm-stage3d__actions { justify-content: center; }
	.hhm-stage3d__note    { justify-content: center; }

	/* The headline and the two CTAs carry the message; the lede repeats what
	   the sections below already say, and dropping it is what lets the
	   headline and the stage share one viewport on a phone. */
	.hhm-stage3d__lede { display: none; }

	/* Measured: at 330px the front card ran 7px past the stage top and sat on
	   the crest. The orbit needs room above it and clearance for the
	   transport below it. */
	.hhm-stage3d__stage {
		height: clamp(420px, 112vw, 470px);
		perspective: 900px;
	}

	.hhm-stage3d__card       { --hhm-card-w: 140px; top: 52%; }

	/* Below the stage box rather than inside it: the phone orbit fills the
	   full height, so anchoring the transport inside always collides. The
	   section's bottom padding absorbs the overhang. */
	.hhm-stage3d__controls   { bottom: -34px; }
	.hhm-stage3d__medallion  { width: 62px; height: 62px; margin-left: -31px; top: 0; }
	.hhm-stage3d__card-name  { font-size: 12.5px; }
	.hhm-stage3d__card-price { font-size: 13.5px; }
	.hhm-stage3d__mark       { font-size: clamp(20px, 5.4vw, 28px); top: 15%; transform: translate(-50%, -50%) var(--tilt, ) translateZ(-620px) scale(1.54); }

	.hhm-stage3d__plane--1 .hhm-stage3d__ring { width: 336px; height: 336px; margin: -168px 0 0 -168px; }
	.hhm-stage3d__plane--2 .hhm-stage3d__ring { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
	.hhm-stage3d__plane--3 .hhm-stage3d__ring--dashed { width: 370px; height: 370px; margin: -185px 0 0 -185px; }

	.hhm-spec { display: none; }
}

/* =====================================================================
 * Cascade defense (same pattern as home-gold.css §0).
 *
 * main.css paints every heading inside .hhm-site-shell with --hhm-ink
 * !important, and Electro forces `a { color: inherit }`. On this dark set
 * that made the headline near-black on near-black and the gold button's
 * label ivory-on-gold. !important is the only thing that outranks
 * !important — specificity alone does not, so do not "clean" these back to
 * plain declarations.
 * ================================================================== */

.hhm-stage3d .hhm-stage3d__copy .hhm-stage3d__title {
	color: #f7f4ec !important;
}

.hhm-stage3d .hhm-stage3d__copy .hhm-stage3d__title em {
	color: transparent !important;
}

.hhm-stage3d .hhm-stage3d__actions .hhm-stage3d__cta--gold,
.hhm-stage3d .hhm-stage3d__actions .hhm-stage3d__cta--gold:hover,
.hhm-stage3d .hhm-stage3d__actions .hhm-stage3d__cta--gold:focus {
	color: #14100a !important;
}

.hhm-stage3d .hhm-stage3d__actions .hhm-stage3d__cta--ghost {
	color: #f2efe7 !important;
}

.hhm-stage3d .hhm-stage3d__actions .hhm-stage3d__cta--ghost:hover,
.hhm-stage3d .hhm-stage3d__actions .hhm-stage3d__cta--ghost:focus {
	color: #eed49b !important;
}

.hhm-stage3d .hhm-stage3d__orbit .hhm-stage3d__card {
	color: #f7f4ec;
}

/* Electro's `.btn:not(…):not(…)` chain paints every button near-white with a
   matching border and slate text — on this set the transport rendered as
   three blank white discs. */
.hhm-stage3d .hhm-stage3d__controls .hhm-stage3d__ctrl {
	color: rgba(242, 239, 231, .86) !important;
	background: rgba(10, 10, 12, .55) !important;
	border-color: rgba(216, 179, 108, .34) !important;
}

.hhm-stage3d .hhm-stage3d__controls .hhm-stage3d__ctrl:hover,
.hhm-stage3d .hhm-stage3d__controls .hhm-stage3d__ctrl:focus {
	color: #f7e7bd !important;
	background: rgba(10, 10, 12, .78) !important;
	border-color: rgba(230, 200, 133, .72) !important;
}

/* =====================================================================
 * Flat path — reduced motion and forced colors.
 *
 * The engine hands over entirely (it clears its inline styles and returns),
 * so the orbit becomes an honest responsive grid rather than a frozen
 * mid-spin frame with three products stuck behind blur at 0.34 opacity.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hhm-stage3d__glow,
	.hhm-stage3d__floor::after,
	.hhm-stage3d__pulse::after,
	.hhm-stage3d__card-beam,
	.hhm-stage3d__medallion-halo,
	.hhm-stage3d__medallion-disc::after,
	.hhm-lamp,
	.hhm-steam {
		animation: none;
	}

	.hhm-stage3d__eyebrow,
	.hhm-stage3d__eyebrow::before,
	.hhm-stage3d__title,
	.hhm-stage3d__lede,
	.hhm-stage3d__actions,
	.hhm-stage3d__note,
	.hhm-stage3d__enter,
	.hhm-stage3d__floor,
	.hhm-stage3d__floorspot,
	.hhm-stage3d__mark,
	.hhm-stage3d__ring {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hhm-spec__lead { stroke-dashoffset: 0; }
	.hhm-spec__row  { opacity: 1; }
	.hhm-spec__lead,
	.hhm-spec__row  { transition: none; }
}

.hhm-stage3d.is-static .hhm-stage3d__stage {
	height: auto;
	perspective: none;
}

.hhm-stage3d.is-static .hhm-stage3d__world {
	position: static;
	transform: none;
	transform-style: flat;
}

.hhm-stage3d.is-static .hhm-stage3d__orbit {
	position: static;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	transform: none;
	transform-style: flat;
	cursor: default;
}

.hhm-stage3d.is-static .hhm-stage3d__card {
	position: static;
	width: auto;
	top: auto;
	left: auto;
	perspective: none;
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
	z-index: auto !important;
}

.hhm-stage3d.is-static .hhm-stage3d__enter {
	opacity: 1;
	transform: none;
}

.hhm-stage3d.is-static .hhm-stage3d__mark,
.hhm-stage3d.is-static .hhm-stage3d__medallion,
.hhm-stage3d.is-static .hhm-stage3d__floor,
.hhm-stage3d.is-static .hhm-stage3d__floorspot,
.hhm-stage3d.is-static .hhm-stage3d__light,
.hhm-stage3d.is-static .hhm-stage3d__plane,
.hhm-stage3d.is-static .hhm-stage3d__shadow,
.hhm-stage3d.is-static .hhm-stage3d__mirror,
.hhm-stage3d.is-static .hhm-stage3d__controls,
.hhm-stage3d.is-static .hhm-lamp,
.hhm-stage3d.is-static .hhm-steam {
	display: none !important;
}

/* Park the now-static headline foil on a bright stop instead of the muddy
   dark end of the gradient. */
.hhm-stage3d.is-static .hhm-stage3d__title em {
	background-position: 30% 0;
}

@media (forced-colors: active) {
	.hhm-stage3d__card-inner {
		border: 1px solid CanvasText;
	}

	.hhm-stage3d__card:focus-visible .hhm-stage3d__card-inner {
		outline: 3px solid Highlight;
	}
}