/* The listening room at /vinyl/ — the room photo covers the window and the
   records sit in its wall frames; boxes are in photo pixels (3840x2160). */

:root {
	--room-wood: #2b170b;
	--room-text: #f1e7d8;
	--room-muted: rgba(241, 231, 216, 0.7);
	--room-glow: rgba(214, 40, 40, 0.55);
	--room-title-font: "Arya", Georgia, serif;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.room {
	min-height: 100vh;
	overflow: hidden;
	background: var(--room-wood);
	color: var(--room-text);
	font: 15px/1.5 "Source Sans 3", system-ui, sans-serif;
}

.room-home {
	position: fixed;
	top: 16px;
	left: 20px;
	z-index: 10;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.45);
	color: var(--room-muted);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-decoration: none;
}
.room-home:hover { color: var(--room-text); }

.room-scene {
	position: fixed;
	left: 50%;
	top: 50%;
	width: max(100vw, 177.78vh);
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
}
.room-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.room-record, .room-turntable {
	position: absolute;
	left: calc(var(--l) / 3840 * 100%);
	top: calc(var(--t) / 2160 * 100%);
	width: calc(var(--w) / 3840 * 100%);
	height: calc(var(--h) / 2160 * 100%);
}
.room-record {
	display: block;
	padding: 0;
	border: 0;
	background: #141210;
	color: inherit;
	font: inherit;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
}
.room-record img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.room-record:focus-visible, .room-turntable:focus-visible { outline: 2px solid var(--room-text); outline-offset: 3px; }

/* The one record you can take down glows faintly and lifts off the wall. */
.room-record.is-open { z-index: 2; }
body.room .room-record.is-open:hover, body.room .room-record.is-open:focus-visible { transform: translateY(-4%) scale(1.06); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 32px var(--room-glow); animation: none; }
.room-record.is-soon { cursor: default; }

.room-tag {
	position: absolute;
	left: 50%;
	top: calc(100% + 0.6em);
	z-index: 3;
	transform: translateX(-50%);
	padding: 3px 9px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.75);
	color: var(--room-text);
	font-size: clamp(11px, 0.75vw, 14px);
	letter-spacing: 0.08em;
	width: max-content;
	max-width: min(44vw, 340px);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.room-record.is-left .room-tag { left: 0; transform: none; text-align: left; }
.room-record.is-right .room-tag { left: auto; right: 0; transform: none; text-align: right; }
.room-record:hover .room-tag, .room-record:focus-visible .room-tag, .room-record.is-told .room-tag, .room-turntable:hover::after { opacity: 1; }

/* The next record: wrapped in kraft paper and taped; the corner lifts on hover. */
.room-mystery { cursor: pointer; background: radial-gradient(circle at 80% 85%, #ff5a3c, #8c0f0f 45%, #1b0606 80%); }
.room-paper {
	position: absolute;
	inset: 0;
	background-color: #a98457;
	background-image:
		linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 40%, rgba(0, 0, 0, 0.12)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
	transition: clip-path 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.room-mystery:hover .room-paper, .room-mystery:focus-visible .room-paper { clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.room-tape { position: absolute; width: 42%; height: 11%; background: rgba(236, 226, 196, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.room-tape.is-a { left: -8%; top: 6%; transform: rotate(-32deg); }
.room-tape.is-b { right: -8%; top: 8%; transform: rotate(30deg); }
.room-stamp {
	position: absolute;
	left: 50%;
	top: 50%;
	padding: 0.25em 0.5em;
	border: 0.18em solid rgba(150, 18, 18, 0.85);
	color: rgba(150, 18, 18, 0.85);
	font: 700 clamp(9px, 1.05vw, 22px)/1 var(--room-title-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(-14deg);
	mix-blend-mode: multiply;
}
.room-mystery.is-shaking { animation: room-shake 0.5s; }
.room-tag .is-playing, .room-mystery.is-playing .room-tag .is-idle { display: none; }
.room-mystery.is-playing .room-tag .is-playing { display: inline; }
.room-mystery.is-playing .room-tag { opacity: 1; }
.room-mystery.is-playing .room-paper { clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); }
.room-mystery.is-playing { animation: room-beat 0.9s ease-in-out infinite; } /* the glow under the paper pulses with the music */
@keyframes room-beat { 50% { box-shadow: 0 0 30px rgba(255, 90, 60, 0.6); } }
@keyframes room-shake { 20%, 60% { transform: rotate(-2deg); } 40%, 80% { transform: rotate(2deg); } }

.room-turntable { --l: 1700; --t: 830; --w: 440; --h: 410; z-index: 1; }
.room-turntable::after { content: "Put Siren on"; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding: 3px 9px; border-radius: 3px; background: rgba(0, 0, 0, 0.75); font-size: clamp(11px, 0.75vw, 14px); letter-spacing: 0.08em; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }

.room-caption {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	padding: 60px 20px max(22px, env(safe-area-inset-bottom));
	background: linear-gradient(transparent, rgba(10, 5, 2, 0.78) 55%);
	text-align: center;
	pointer-events: none;
}
.room-caption h1 { margin: 0; font: 700 clamp(26px, 3vw, 44px)/1.1 var(--room-title-font); letter-spacing: 0.06em; }
.room-caption p { margin: 6px 0 0; color: var(--room-muted); letter-spacing: 0.06em; }

/* Before the system is on: dark room, one spot on the turntable with dust in
   it and the power button glowing. Switching on brings the lights and the
   amplifier tubes up; then Siren pulses so it reads as the thing to press. */
.room-dark {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient(ellipse 15% 30% at 50% 47%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.9) 100%);
	transition: opacity 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.room-beam, .room-dust { position: absolute; left: calc(1460 / 3840 * 100%); top: 0; width: calc(920 / 3840 * 100%); height: calc(1260 / 2160 * 100%); z-index: 4; pointer-events: none; transition: opacity 2.4s; }
/* The spot's cone, from the ceiling down onto the turntable. */
.room-beam {
	background: conic-gradient(from 180deg at 50% -2%, rgba(255, 226, 180, 0.17), rgba(255, 226, 180, 0.12) 5deg, rgba(255, 226, 180, 0.05) 10deg, rgba(255, 226, 180, 0) 16deg 344deg, rgba(255, 226, 180, 0.05) 350deg, rgba(255, 226, 180, 0.12) 355deg, rgba(255, 226, 180, 0.17));
	filter: blur(14px); /* a real spot has no edge */
	-webkit-mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent);
	mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent);
	mix-blend-mode: screen;
}
.room-power {
	--l: 1742; --t: 1138; --w: 40; --h: 40;
	position: absolute;
	left: calc(var(--l) / 3840 * 100%);
	top: calc(var(--t) / 2160 * 100%);
	width: calc(var(--w) / 3840 * 100%);
	aspect-ratio: 1;
	z-index: 5;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle, #ffd7a0 0 18%, #ff7a2a 38%, rgba(255, 90, 30, 0) 70%);
	cursor: pointer;
	animation: room-breathe 2.4s ease-in-out infinite;
}
.room-power::before { content: ""; position: absolute; inset: -220%; border-radius: 50%; } /* a bigger target than the light */
@keyframes room-breathe { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.04); filter: drop-shadow(0 0 2px #ff7a2a); } }
.room-tubes span {
	position: absolute;
	left: calc(var(--l) / 3840 * 100%);
	top: calc(var(--t) / 2160 * 100%);
	width: calc(var(--w) / 3840 * 100%);
	height: calc(var(--h) / 2160 * 100%);
	z-index: 2;
	border-radius: 40% 40% 12% 12%;
	background: radial-gradient(ellipse 45% 32% at 50% 72%, rgba(255, 170, 80, 0.95), rgba(255, 110, 30, 0.35) 60%, rgba(255, 90, 20, 0) 100%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity 3s 1.2s;
	pointer-events: none;
}
body.room.is-lit .room-tubes span { animation: room-valve 3.6s ease-in-out var(--d) infinite; }
@keyframes room-valve { 50% { filter: brightness(0.8); } }
.room-hint.is-lit, .is-lit .room-hint.is-dark { display: none; }
.is-lit .room-hint.is-lit { display: block; }

body.room.is-lit .room-dark { opacity: 0; }
body.room.is-switching .room-dark { animation: room-flicker 0.5s steps(1); } /* only at the switch, not when coming back */
body.room.is-lit .room-dust, body.room.is-lit .room-beam { opacity: 0; }
body.room.is-lit .room-tubes span { opacity: 1; }
body.room.is-lit .room-power { animation: none; opacity: 0.9; transform: none; background: radial-gradient(circle, #ff3b2a 0 22%, rgba(255, 40, 20, 0) 60%); }
@keyframes room-flicker { 0% { opacity: 0.6; } 20% { opacity: 0.95; } 40% { opacity: 0.5; } 60% { opacity: 0.8; } }
body.room.is-instant .room-dark, body.room.is-instant .room-tubes span { transition: none; animation: none; }
.room-record.is-open { animation: none; }
body.room.is-lit .room-record.is-open:not(:hover, :focus-visible) { animation: room-pulse 1.8s ease-in-out infinite; } /* the hover lift wins over the pulse */
@keyframes room-pulse { 50% { transform: scale(1.04); box-shadow: 0 0 34px var(--room-glow), 0 0 0 2px rgba(255, 90, 70, 0.5); } }

/* Taking a record down: it comes forward and the room goes dark. */
.room-record.is-chosen { z-index: 6; transform: scale(1.6); transition-duration: 0.6s; }
body.room::after { content: ""; position: fixed; inset: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s ease-in; }
body.room.is-leaving::after { opacity: 1; }

/* Phones: the wall fills the width, the room continues below it. */
@media (max-width: 767px) {
	/* Phones: the room fills the visible screen exactly (svh leaves out the
	   browser bars), the wall's six frames just fit across, and the caption
	   lies on the rug, so nothing needs scrolling. */
	html, body.room { overflow: hidden; }
	body.room { height: 100svh; }
	.room-scene { width: max(100vw, 177.78svh); }
	.room-caption { padding: 70px 16px max(18px, env(safe-area-inset-bottom)); }
	.room-caption h1 { font-size: 26px; }
	.room-caption p { margin-top: 2px; font-size: 14px; }
	.room-tag { font-size: 11px; }
	.room-stamp { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.room-record, .room-paper { transition: none; }
	body.room.is-lit .room-record.is-open, .room-mystery.is-shaking, .room-mystery.is-playing, .room-power, body.room.is-lit .room-dark { animation: none; }
}