/*
	The look around the films: a dark, quiet frame of frosted glass and warm brass, so the films carry the color.
	- Every text sits light on dark glass, never dark over a dark film.
*/


/* #region Foundations */
:root
{
	--night: #08080c;
	--glass: rgba(14, 13, 20, 0.62);
	--glass-edge: rgba(226, 190, 120, 0.22);
	--brass: #d9b26a;
	--brass-bright: #f3d595;
	--ink: #f1ece2;
	--ink-soft: rgba(241, 236, 226, 0.72);
	--ink-faint: rgba(241, 236, 226, 0.48);
	--title-face: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
	--body-face: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after
{
	box-sizing: border-box;
}

html,
body
{
	margin: 0;
	height: 100%;
	background: var(--night);
	color: var(--ink);
	font-family: var(--body-face);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

#stage
{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

#overlay
{
	position: fixed;
	inset: 0;
	pointer-events: none;
}

#overlay > *
{
	pointer-events: auto;
}

.glass
{
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: 18px;
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.notice
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 28px 36px;
	text-align: center;
}

h1,
h2
{
	font-family: var(--title-face);
	font-weight: 400;
	color: var(--brass-bright);
	margin: 0 0 8px;
}
/* #endregion */




/* #region The Instrument Lab */
.lab-panel
{
	position: absolute;
	left: 20px;
	top: 20px;
	width: min(600px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 20px 22px;
}

.lab-panel h2
{
	font-size: 18px;
	margin-top: 16px;
}

.lab-panel p
{
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.lab-row
{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lab-button
{
	font: 500 14px var(--body-face);
	color: var(--night);
	background: var(--brass);
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.2s ease;
}

.lab-button:hover
{
	background: var(--brass-bright);
}

.lab-button:active
{
	transform: scale(0.95);
}

.lab-readout
{
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	font-size: 14px;
}
/* #endregion */




/* #region The voice bench */
.lab-voice
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0;
	border-top: 1px solid rgba(226, 190, 120, 0.1);
}

.lab-voice-title
{
	flex: 0 0 104px;
	font-size: 14px;
	color: var(--ink);
}

.lab-voice .lab-button
{
	padding: 5px 11px;
	font-size: 12px;
}

.lab-keys
{
	display: flex;
	gap: 1px;
}

.lab-key
{
	width: 12px;
	height: 34px;
	border: none;
	border-radius: 0 0 4px 4px;
	background: var(--ink);
	cursor: pointer;
	transition: transform 0.08s ease, background 0.15s ease;
}

.lab-key.dark
{
	background: #2a2622;
	height: 26px;
}

.lab-key:active
{
	transform: translateY(2px);
	background: var(--brass-bright);
}

.lab-key:disabled
{
	opacity: 0.2;
	cursor: default;
}
/* #endregion */




/* #region The stage and shared controls */
#stage
{
	opacity: 0;
	transition: opacity 1.4s ease;
}

#stage.is-ready
{
	opacity: 1;
}

body.is-idle,
body.is-idle #stage
{
	cursor: none;
}

.glass-deep
{
	background: linear-gradient(160deg, rgba(20, 17, 24, 0.78), rgba(9, 8, 12, 0.82));
	border: 1px solid rgba(226, 190, 120, 0.2);
	border-radius: 22px;
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 236, 200, 0.06);
}

.icon
{
	width: 22px;
	height: 22px;
	flex: none;
}

button
{
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.timeline:focus-visible,
.brass-slider:focus-visible
{
	outline: 2px solid var(--brass-bright);
	outline-offset: 3px;
}

.primary-button,
.secondary-button
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.primary-button
{
	border: none;
	color: #1a1208;
	background: linear-gradient(180deg, #f6dc9c, #d4a24c 60%, #b8862f);
	box-shadow: 0 6px 22px rgba(217, 178, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.primary-button:hover
{
	filter: brightness(1.08);
	box-shadow: 0 8px 30px rgba(217, 178, 106, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.secondary-button
{
	border: 1px solid rgba(226, 190, 120, 0.35);
	background: rgba(255, 240, 210, 0.04);
	color: var(--ink);
}

.secondary-button:hover
{
	background: rgba(255, 240, 210, 0.1);
}

.primary-button:active,
.secondary-button:active
{
	transform: scale(0.95);
}
/* #endregion */




/* #region The album screen */
.album
{
	position: absolute;
	left: 28px;
	top: 28px;
	bottom: 28px;
	width: min(470px, calc(100vw - 56px));
	padding: 34px 30px 26px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.album.is-shown
{
	opacity: 1;
	transform: none;
}

.album-head
{
	text-align: center;
	margin-bottom: 22px;
}

.mark
{
	width: 58px;
	height: 58px;
	animation: mark-turn 40s linear infinite;
	filter: drop-shadow(0 0 14px rgba(217, 178, 106, 0.35));
}

@keyframes mark-turn
{
	to
	{
		transform: rotate(360deg);
	}
}

.album-title
{
	font-family: var(--title-face);
	font-size: 40px;
	letter-spacing: 0.08em;
	margin: 10px 0 4px;
	background: linear-gradient(180deg, #fbe8bb, #d9a956 70%, #a8762a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.album-tagline
{
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
	letter-spacing: 0.04em;
}

.tracks
{
	list-style: none;
	margin: 0 -12px;
	padding: 0 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(217, 178, 106, 0.35) transparent;
}

.track
{
	width: 100%;
	display: grid;
	grid-template-columns: 34px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: baseline;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 14px;
	padding: 12px 14px;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.track:hover,
.track.is-focused
{
	background: linear-gradient(90deg, rgba(217, 178, 106, 0.14), rgba(217, 178, 106, 0.03));
	border-color: rgba(226, 190, 120, 0.25);
	transform: translateX(4px);
}

.track:active
{
	transform: translateX(4px) scale(0.98);
}

.track-number
{
	grid-row: span 2;
	font-family: var(--title-face);
	font-size: 22px;
	color: var(--brass);
	text-align: center;
}

.track-title
{
	font-family: var(--title-face);
	font-size: 20px;
	color: var(--ink);
}

.track-length
{
	font-variant-numeric: tabular-nums;
	color: var(--ink-faint);
	font-size: 13px;
}

.track-liner
{
	grid-column: 2 / span 2;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.45;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, margin-top 0.35s ease;
}

.track.is-focused .track-liner
{
	max-height: 5.5em;
	opacity: 1;
	margin-top: 4px;
}

.album-actions
{
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
}

.play-all-length
{
	font-weight: 500;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.album-foot
{
	margin-top: auto;
	padding-top: 16px;
	text-align: center;
	color: var(--ink-faint);
	font-size: 12px;
	letter-spacing: 0.06em;
}
/* #endregion */




/* #region The player's bar */
.player-bar
{
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	padding: 8px 16px 12px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.player-bar.is-shown
{
	opacity: 1;
	transform: none;
}

.timeline
{
	position: relative;
	height: 22px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}

.timeline-track
{
	position: relative;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 240, 210, 0.14);
	transition: height 0.2s ease;
}

.timeline:hover .timeline-track,
.timeline.is-dragging .timeline-track
{
	height: 6px;
}

.timeline-fill
{
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #b8862f, #f3d595);
	transform-origin: left center;
	transform: scaleX(0);
	box-shadow: 0 0 12px rgba(243, 213, 149, 0.45);
}

.timeline-marks
{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.timeline-mark
{
	position: absolute;
	top: -3px;
	width: 2px;
	height: calc(100% + 6px);
	border-radius: 2px;
	background: rgba(255, 240, 210, 0.42);
	transform: translateX(-1px);
}

.timeline-knob
{
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff4d6, #d9b26a 60%, #a8762a);
	box-shadow: 0 0 14px rgba(243, 213, 149, 0.7);
	transform: translate(-50%, -50%) scale(0.6);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.timeline:hover .timeline-knob,
.timeline.is-dragging .timeline-knob,
.timeline:focus-visible .timeline-knob
{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.timeline-tip
{
	position: absolute;
	bottom: 26px;
	transform: translateX(-50%);
	padding: 5px 10px;
	border-radius: 8px;
	background: rgba(10, 9, 14, 0.9);
	border: 1px solid rgba(226, 190, 120, 0.25);
	font-size: 12px;
	white-space: nowrap;
	color: var(--ink);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.timeline:hover .timeline-tip,
.timeline.is-dragging .timeline-tip
{
	opacity: 1;
}

.player-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}

.player-group
{
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.player-middle
{
	flex: 1;
	justify-content: center;
	text-align: center;
}

.player-label
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.player-piece
{
	font-family: var(--title-face);
	font-size: 17px;
	color: var(--brass-bright);
	white-space: nowrap;
}

.player-section
{
	font-size: 12px;
	color: var(--ink-soft);
	letter-spacing: 0.06em;
}

.player-clock
{
	margin-left: 8px;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--ink-soft);
	white-space: nowrap;
}

.control
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 42px;
	height: 42px;
	padding: 0 9px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.control:hover
{
	background: rgba(255, 240, 210, 0.09);
	color: var(--brass-bright);
}

.control:active
{
	transform: scale(0.9);
}

.control:disabled
{
	opacity: 0.3;
	cursor: default;
}

.control-play
{
	width: 50px;
	height: 50px;
	color: #1a1208;
	background: linear-gradient(180deg, #f6dc9c, #d4a24c 60%, #b8862f);
	box-shadow: 0 4px 18px rgba(217, 178, 106, 0.32);
}

.control-play:hover
{
	color: #1a1208;
	background: linear-gradient(180deg, #fbe6b4, #e0b05a 60%, #c49238);
}

.control-wide span
{
	font-size: 13px;
	font-weight: 500;
}

.brass-slider
{
	--share: 0.8;
	height: 22px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.brass-slider::-webkit-slider-runnable-track
{
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, #d9b26a calc(var(--share) * 100%), rgba(255, 240, 210, 0.16) calc(var(--share) * 100%));
}

.brass-slider::-moz-range-track
{
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, #d9b26a calc(var(--share) * 100%), rgba(255, 240, 210, 0.16) calc(var(--share) * 100%));
}

.brass-slider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff4d6, #d9b26a 60%, #a8762a);
	transition: transform 0.15s ease;
}

.brass-slider::-moz-range-thumb
{
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff4d6, #d9b26a 60%, #a8762a);
}

.brass-slider:active::-webkit-slider-thumb
{
	transform: scale(1.25);
}

.volume-slider
{
	width: 92px;
	margin-right: 6px;
}

.picture-panel
{
	position: absolute;
	right: 16px;
	bottom: calc(100% + 10px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 16px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.picture-panel.is-open
{
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.picture-row
{
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
}

.picture-row span
{
	width: 44px;
}

.picture-row .brass-slider
{
	width: 150px;
}
/* #endregion */




/* #region Cards */
.title-card
{
	position: absolute;
	left: clamp(24px, 6vw, 90px);
	bottom: clamp(110px, 16vh, 180px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#overlay > .title-card
{
	pointer-events: none;
}

.title-card.is-shown
{
	opacity: 1;
	transform: none;
}

.title-card-number
{
	font-family: var(--title-face);
	font-size: 18px;
	letter-spacing: 0.4em;
	color: var(--brass-bright);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.title-card-title
{
	font-family: var(--title-face);
	font-size: clamp(44px, 8vw, 92px);
	line-height: 1;
	color: #fff6e6;
	letter-spacing: 0.03em;
	text-shadow: 0 4px 40px rgba(0, 0, 0, 0.75), 0 0 60px rgba(217, 178, 106, 0.25);
}

.button-card
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(520px, calc(100vw - 40px));
	padding: 34px 32px 30px;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -46%);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.button-card.is-shown
{
	opacity: 1;
	transform: translate(-50%, -50%);
}

.button-card-eyebrow
{
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brass);
}

.button-card-heading
{
	font-family: var(--title-face);
	font-size: 38px;
	margin: 0 0 10px;
	color: #fff6e6;
}

.button-card-line
{
	margin: 0 auto 24px;
	max-width: 400px;
	color: var(--ink-soft);
	line-height: 1.5;
}

.button-card-row
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.loader
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

#overlay > .loader,
#overlay > .curtain
{
	pointer-events: none;
}

.loader.is-shown
{
	opacity: 1;
}

.loader-ring
{
	width: 76px;
	height: 76px;
	transform: rotate(-90deg);
}

.loader-track
{
	fill: none;
	stroke: rgba(255, 240, 210, 0.12);
	stroke-width: 3;
}

.loader-fill
{
	fill: none;
	stroke: #e2bd78;
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.35s ease;
	filter: drop-shadow(0 0 6px rgba(243, 213, 149, 0.6));
}

.loader-line
{
	margin: 0;
	font-family: var(--title-face);
	font-size: 17px;
	color: var(--ink-soft);
	letter-spacing: 0.04em;
}

.curtain
{
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.curtain.is-closed
{
	opacity: 1;
}
/* #endregion */




/* #region Reduced motion */
/* - When the device asks for reduced motion, the interface's movement settles to quick fades, and the mark stops turning. */
@media (prefers-reduced-motion: reduce)
{
	*,
	*::before,
	*::after
	{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.15s !important;
	}

	.album,
	.track:hover,
	.track.is-focused
	{
		transform: none;
	}
}
/* #endregion */




/* #region Phones */
@media (max-width: 760px)
{
	.album
	{
		left: 10px;
		right: 10px;
		top: auto;
		bottom: 10px;
		width: auto;
		max-height: 64vh;
		padding: 22px 16px 16px;
		transform: translateY(18px);
	}

	.album-head
	{
		margin-bottom: 12px;
	}

	.mark
	{
		width: 40px;
		height: 40px;
	}

	.album-title
	{
		font-size: 30px;
	}

	.player-bar
	{
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 6px 10px 10px;
	}

	.player-middle,
	.volume-slider,
	.control-wide span,
	.player-clock
	{
		display: none;
	}

	.player-group
	{
		gap: 0;
	}
	
	.picture-panel
	{
		right: 8px;
	}
	
	.control
	{
		min-width: 40px;
		height: 44px;
		padding: 0 6px;
	}
}
/* #endregion */