/* ==========================================================================
   LuxProp — The Gallery (phantom.land-style immersive sphere)
   ========================================================================== */

:root {
	--black: #050505;
	--panel: #0a0a0a;
	--white: #f5f5f5;
	--muted: #9a9a9a;
	--gold: #c9a961;
	--gold-light: #e8d08a;
	--border: #2a2a2a;
	--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--serif: 'Cormorant Garamond', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	height: 100%;
	overflow: hidden;
	background: var(--black);
	color: var(--white);
	font-family: var(--mono);
}

#stage {
	position: fixed;
	inset: 0;
	cursor: grab;
}
#stage.is-dragging { cursor: grabbing; }

/* ============ LOADER ============ */
#loader {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--black);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.loader-logo { width: 130px; height: auto; opacity: 0.9; }
.loader-pct {
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--muted);
}

/* ============ UI CHROME ============ */
.ui { position: fixed; z-index: 20; }

.ui-top {
	top: 0; left: 0; right: 0;
	display: flex;
	align-items: flex-start;
	padding: 26px 30px 0;
	pointer-events: none;
	gap: 24px;
}
.ui-top > * { pointer-events: auto; }
.ui-logo img { width: 54px; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)); }
.ui-sound {
	margin-left: 16vw;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--white);
	cursor: default;
	user-select: none;
}
.ui-blurb {
	margin-left: auto;
	text-align: left;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: 0.14em;
	color: var(--white);
}
.ui-blurb .ui-clockline { color: var(--muted); margin-top: 8px; }
.ui-dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--gold);
}
.ui-talk {
	background: var(--white);
	color: #0a0a0a;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	padding: 18px 30px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.25s ease, transform 0.25s ease;
}
.ui-talk:hover { background: var(--gold); transform: scale(1.04); }

.ui-bottom {
	bottom: 0; left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px 26px;
	pointer-events: none;
}
.ui-bottom > * { pointer-events: auto; }

.ui-toggles {
	display: flex;
	gap: 6px;
	background: rgba(20,20,20,0.85);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 7px;
}
.ui-toggle {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	opacity: 0.45;
}
.ui-toggle.is-active { background: rgba(255,255,255,0.12); opacity: 1; }
.ui-toggle svg rect { fill: var(--white); }

.ui-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 26px;
	display: flex;
	gap: 4px;
	background: rgba(245,245,245,0.96);
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 14px 50px rgba(0,0,0,0.55);
}
.ui-nav-btn {
	border: 0;
	background: transparent;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: #2c2c2c;
	padding: 13px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease;
	white-space: nowrap;
}
.ui-nav-btn:hover { background: rgba(0,0,0,0.07); }
.ui-nav-btn.is-active { background: #111; color: var(--white); }

.ui-filter {
	border: 1px solid var(--border);
	background: rgba(20,20,20,0.85);
	color: var(--white);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	padding: 16px 26px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.25s ease;
}
.ui-filter:hover { background: rgba(40,40,40,0.95); }

.ui-hint {
	bottom: 96px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: rgba(255,255,255,0.35);
	pointer-events: none;
	user-select: none;
}

/* ============ DETAIL OVERLAY ============ */
#detail {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--panel);
	transform: translateY(100%);
	visibility: hidden;
	overflow-y: auto;
}
#detail-back {
	position: fixed;
	top: 28px;
	left: 30px;
	z-index: 42;
	border: 1px solid var(--border);
	background: rgba(15,15,15,0.9);
	color: var(--white);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 14px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}
#detail-back:hover { border-color: var(--gold); color: var(--gold); }

.detail-grid {
	min-height: 100%;
	display: grid;
	grid-template-columns: minmax(380px, 44%) 1fr;
}
.detail-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 120px 64px 80px;
}
.d-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 22px;
}
.d-title {
	font-family: var(--serif);
	font-size: clamp(2.6rem, 4.6vw, 4.4rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}
.d-price {
	font-size: 17px;
	font-weight: 700;
	color: var(--gold-light);
	letter-spacing: 0.08em;
	margin-bottom: 26px;
}
.d-blurb {
	font-size: 14px;
	line-height: 1.8;
	color: #d9d5cd;
	max-width: 46ch;
	margin-bottom: 30px;
}
.d-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.d-chips span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e0e0e0;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 999px;
	padding: 9px 16px;
}
.d-cta {
	align-self: flex-start;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #0a0a0a;
	background: var(--gold);
	text-decoration: none;
	padding: 17px 30px;
	border-radius: 999px;
	transition: background 0.25s ease;
}
.d-cta:hover { background: var(--gold-light); }
.d-note {
	margin-top: 26px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.3);
}
.detail-media {
	position: relative;
	min-height: 100vh;
}
.detail-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.ui-sound, .ui-blurb { display: none; }
	.ui-nav-btn { font-size: 11px; padding: 11px 14px; }
	.ui-filter, .ui-toggles { display: none; }
	.detail-grid { grid-template-columns: 1fr; }
	.detail-media { min-height: 46vh; order: -1; }
	.detail-copy { padding: 46px 28px 70px; }
}