/* ===========================================================================
   Fine Arts — the walk-through 3D gallery.

   Everything here is the flat interface layered ON TOP of the WebGL canvas:
   crosshair, prompts, buttons, the artwork panel, and the flat list view for
   anyone who would rather not walk. The gallery itself is drawn by
   site/_code/js/museum.js from site/4-fine-arts/museum-rooms.json.

   Colours and sizes come from fine-arts.json's "layout" block.
   =========================================================================== */

* { box-sizing: border-box; }
body { background: var(--page-background, #0d1730); margin: 0; }

.museum-section {
	position: relative;
	height: var(--gallery-height, 100vh);
	background: var(--page-background, #0d1730);
	overflow: hidden;
}
#museum-canvas-wrap { position: absolute; inset: 0; }
#museum-canvas-wrap canvas { display: block; touch-action: none; }

/* ── Aim ───────────────────────────────────────────────────────────────────
   A dot in the middle of the screen; the prompt below it appears only when
   something within reach is being looked at. */

.museum-crosshair {
	position: absolute; top: 50%; left: 50%;
	width: 7px; height: 7px; margin: -3.5px;
	border-radius: 50%;
	background: rgba(255,255,255,0.55);
	pointer-events: none;
	z-index: 20;
}

#museum-hint {
	position: absolute; top: calc(50% + 22px); left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: #fff; color: var(--page-background, #0d1730);
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.68em; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	padding: 0.55em 1.2em; border-radius: 999px;
	opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none; z-index: 20; white-space: nowrap;
}
#museum-hint.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#museum-hint::before { content: '↗ '; }

/* ── Corner controls ───────────────────────────────────────────────────── */

#museum-hud {
	position: absolute; top: calc(3.5em + 1.2rem); right: 1.5rem;
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.66em; font-weight: 600;
	letter-spacing: 0.13em; text-transform: uppercase;
	color: rgba(255,255,255,0.72);
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	padding: 0.7em 1.2em; border-radius: 999px;
	z-index: 25; pointer-events: none;
}

.museum-home-btn {
	position: absolute;
	top: calc(3.5em + 1.2rem);
	left: 1.5rem;
	height: 2.75rem;
	background: rgba(255,255,255,0.12);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-radius: 999px;
	display: flex; align-items: center; gap: 0.55em;
	padding: 0 1.1em 0 0.8em;
	z-index: 26; text-decoration: none; border-bottom: none !important;
	transition: background 0.2s, transform 0.15s;
}
.museum-home-btn:hover { background: rgba(255,255,255,0.24); transform: scale(1.04); }
.museum-home-btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.museum-home-btn span {
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.66em; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}

#museum-listview-btn {
	position: absolute;
	top: calc(3.5em + 1.2rem);
	right: calc(1.5rem + 8.4em);
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.64em; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: #fff; background: rgba(255,255,255,0.1);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border: none; border-radius: 999px; padding: 0.85em 1.3em;
	cursor: pointer; z-index: 26; transition: background 0.2s;
}
#museum-listview-btn:hover { background: rgba(255,255,255,0.22); }

/* ── While the 3D scene loads ──────────────────────────────────────────── */

#museum-loading {
	position: absolute; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	background: var(--page-background, #0d1730);
	font-family: var(--font-primary, 'Inter', sans-serif); color: rgba(255,255,255,0.55);
	font-size: 0.75em; letter-spacing: 0.14em; text-transform: uppercase;
	transition: opacity 0.4s ease;
}
#museum-loading.is-hidden { opacity: 0; pointer-events: none; }

/* ── How-to-move prompt ────────────────────────────────────────────────────
   Appears on its own when you arrive, sits at the bottom, never covers the
   view. */

#museum-overlay {
	position: absolute; left: 50%; bottom: 2.4rem; z-index: 50;
	transform: translateX(-50%) translateY(14px);
	opacity: 0; pointer-events: none;
	transition: opacity 0.45s ease, transform 0.45s ease;
	max-width: 92vw;
}
#museum-overlay.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.museum-overlay-card {
	display: flex;
	align-items: center;
	gap: 0.9em;
	text-align: left;
	font-family: var(--font-primary, 'Inter', sans-serif);
	color: #fff;
	background: rgba(14,15,24,0.72);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px;
	padding: 0.85em 1.6em;
	white-space: nowrap;
}
.museum-move-icon {
	flex-shrink: 0;
	width: 34px; height: 23px;
	display: flex; align-items: center; justify-content: center;
}
.museum-move-icon svg { width: 100%; height: 100%; display: block; }
#museum-controls-hint {
	font-size: 0.7em; letter-spacing: 0.05em;
	color: rgba(255,255,255,0.85);
}
#museum-controls-hint strong { color: #fff; font-weight: 700; }
.museum-hint-sep { margin: 0 0.65em; opacity: 0.35; }
@media (max-width: 640px) {
	.museum-overlay-card { white-space: normal; }
}

/* ── Touch controls, phones and tablets only ───────────────────────────── */

#museum-joystick {
	position: absolute; left: 1.6rem; bottom: 1.8rem;
	width: 110px; height: 110px; border-radius: 50%;
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
	display: none; z-index: 30; touch-action: none;
}
#museum-joystick.is-visible { display: block; }
#museum-joystick-knob {
	position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
	margin: -23px; border-radius: 50%; background: rgba(255,255,255,0.55);
	transition: transform 0.05s linear;
}
#museum-interact-btn {
	position: absolute; right: 1.8rem; bottom: 2.1rem;
	width: 68px; height: 68px; border-radius: 50%;
	background: rgba(255,255,255,0.92); border: none;
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.62em; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--page-background, #0d1730);
	display: none; align-items: center; justify-content: center;
	z-index: 30; text-align: center; line-height: 1.1;
}
#museum-interact-btn.is-visible { display: flex; }

/* ── The artwork panel ─────────────────────────────────────────────────── */

#museum-modal {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(10,10,16,0.86);
	display: flex; align-items: center; justify-content: center;
	padding: 2rem; opacity: 0; pointer-events: none;
	transition: opacity 0.25s ease;
}
#museum-modal.is-open { opacity: 1; pointer-events: auto; }

.museum-modal-panel {
	background: #1a1c2e; border-radius: 16px; overflow: hidden;
	max-width: 900px; width: 100%; max-height: 86vh;
	display: grid; grid-template-columns: 1.1fr 1fr;
	box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.museum-modal-media {
	background: #0e0f18; min-height: 260px;
	display: flex; align-items: center; justify-content: center;
}
.museum-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.museum-modal-placeholder {
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.7em; letter-spacing: 0.12em;
	text-transform: uppercase; color: rgba(255,255,255,0.28);
}
.museum-modal-body { padding: 2.6em 2.4em; font-family: var(--font-primary, 'Inter', sans-serif); position: relative; overflow-y: auto; }
.museum-modal-title { font-size: 1.7em; font-weight: 700; color: #fff; margin: 0 0 0.4em; letter-spacing: -0.01em; }
.museum-modal-meta { font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 1.4em; }
.museum-modal-desc { font-size: 0.88em; line-height: 1.75; color: rgba(255,255,255,0.6); margin: 0 0 1.6em; }
.museum-modal-link {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-size: 0.7em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--page-background, #0d1730); background: #9bf1ff; padding: 0.75em 1.4em; border-radius: 999px;
	text-decoration: none; border-bottom: none !important;
}
#museum-modal-close {
	position: absolute; top: 1.1em; right: 1.1em;
	width: 2.2rem; height: 2.2rem; border-radius: 50%;
	background: rgba(255,255,255,0.08); border: none; color: #fff;
	font-size: 1.1em; cursor: pointer; z-index: 5;
}
@media (max-width: 760px) {
	.museum-modal-panel { grid-template-columns: 1fr; }
	.museum-modal-media { min-height: 200px; }
	.museum-modal-body { padding: 2em 1.6em; }
}

/* ── Flat list view ────────────────────────────────────────────────────────
   Every room and work as a plain grid, for anyone who would rather not walk
   the gallery. Built by museum.js from the same room data. */

#museum-listview {
	position: fixed; inset: 0; z-index: 150;
	background: var(--page-background, #0d1730); overflow-y: auto;
	opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#museum-listview.is-open { opacity: 1; pointer-events: auto; }
.museum-listview-inner { max-width: 1100px; margin: 0 auto; padding: 6em 6vw 5em; font-family: var(--font-primary, 'Inter', sans-serif); }
#museum-listview-close {
	position: fixed; top: calc(3.5em + 1.2rem); right: 1.5rem; z-index: 160;
	width: 2.75rem; height: 2.75rem; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.1); color: #fff; font-size: 1.1em; cursor: pointer;
}
.lv-room { margin-bottom: 3.2em; }
.lv-room h3 { font-size: 1.5em; color: #fff; font-weight: 700; margin: 0 0 0.15em; letter-spacing: -0.01em; }
.lv-sub { font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin: 0 0 1.4em; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; }
.lv-card {
	position: relative; height: 130px; border-radius: 10px; overflow: hidden;
	border: 1px solid rgba(255,255,255,0.08); background-size: cover; background-position: center;
	cursor: pointer; display: flex; align-items: flex-end; padding: 0; text-align: left;
}
.lv-card span {
	display: block; width: 100%; padding: 0.8em 0.9em;
	font-family: var(--font-primary, 'Inter', sans-serif); font-size: 0.68em; font-weight: 600;
	letter-spacing: 0.06em; color: #fff;
}

/* ── Phones ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	#museum-hud { font-size: 0.6em; padding: 0.55em 0.9em; }
	/* The joystick (bottom left) and VIEW (bottom right) share the bottom edge
	   on a phone, so List View sits small and centred between them instead of
	   stretching across the whole width over them. */
	#museum-listview-btn { top: auto; right: auto; left: 50%; bottom: 2.6rem; transform: translateX(-50%); }
}

/* ── Touch screens ─────────────────────────────────────────────────────────
   The how-to-move note moves up under the top buttons, clear of the touch
   controls. And a phone's "100vh" is measured with the browser's address bar
   hidden, which pushed the joystick and VIEW under the bar; "svh" is the
   height that is really visible. (Phone-sized screens too, since not every
   phone admits it cannot hover.) */
@media (hover: none), (max-width: 640px) {
	#museum-overlay { bottom: auto; top: calc(3.5em + 1.2rem + 3.6rem); }
	@supports (height: 100svh) {
		.museum-section { height: var(--gallery-height-mobile, 100svh); }
	}
}