/* ═══════════════════════════════════════════════════════════
   SPELER — balk onderin, uitklapscherm en afspeelknoppen.
   Zwart-wit zoals de rest van de site; kleur komt van de hoes.
   ═══════════════════════════════════════════════════════════ */

.lp-icon{ width: 22px; height: 22px; display: block; }

.lp-btn{
	display: inline-grid; place-items: center;
	width: 40px; height: 40px; padding: 0;
	background: none; border: 0; border-radius: 50%;
	color: inherit; cursor: pointer;
	transition: opacity .2s ease, background .2s ease;
}
.lp-btn:hover{ background: rgba(127,127,127,.12); }
.lp-btn:disabled{ opacity: .3; cursor: default; background: none; }
.lp-btn--main{ width: 48px; height: 48px; background: var(--ink, #141414); color: var(--wall, #f6f5f2); }
.lp-btn--main:hover{ background: var(--ink, #141414); opacity: .85; }
.lp-btn.is-busy{ animation: lp-breathe 1.2s ease-in-out infinite; }
@keyframes lp-breathe{ 50%{ opacity: .55; } }

/* ═══════════ RUIMTE VOOR DE SPELER ═══════════
   Zolang de speler zichtbaar is, ligt er nooit inhoud onder: rechts blijft
   een strook vrij voor de pil (in beide standen, zodat niets verspringt) en
   schermvullende delen worden korter met de hoogte van de balk. */
html.lp-has-bar{ --lp-bottom: 76px; }

/* desktop: rechts een vrije strook voor de pil, die meeschuift bij starten en stoppen */
@media (min-width: 901px){
	html.lp-has-bar{ --lp-right: 92px; }
	#lp-page{ padding-right: var(--lp-right, 0px); }
	/* wat toch uitsteekt (gedraaide foto's) wordt afgeknipt voor de strook */
	html.lp-has-bar #lp-page > :not(footer){ overflow-x: clip; }
	/* de footer loopt wel door tot de rand, met de inhoud binnen de strook */
	#lp-page > footer.sf{
		margin-right: calc(-1 * var(--lp-right, 0px));
		padding-right: calc(var(--gutter, 32px) + var(--lp-right, 0px));
		transition: margin-right .6s cubic-bezier(.2,.7,.2,1), padding-right .6s cubic-bezier(.2,.7,.2,1);
	}
}

/* mobiel: de balk staat altijd onderin; de footer krijgt de ruimte zelf,
   zodat er geen lege strook onder de pagina ontstaat */
@media (max-width: 900px){
	html.lp-has-bar footer.sf{ padding-bottom: calc(28px + var(--lp-bottom)); transition: padding-bottom .5s cubic-bezier(.2,.7,.2,1); }
	html.lp-has-bar body:not(:has(footer.sf)){ padding-bottom: var(--lp-bottom); }
}

/* ═══════════ BALK ═══════════ */

.lp-bar{
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
	height: 76px;
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem;
	padding: 0 var(--gutter, 32px);
	background: var(--wall, #f6f5f2);
	color: var(--ink, #141414);
	box-shadow: 0 -12px 32px -24px rgba(0,0,0,.35);
	font-family: var(--sans);
}

/* sleepbare voortgang langs de bovenrand */
.lp-bar__progress{
	position: absolute; left: 0; right: 0; top: -6px; height: 12px;
	cursor: pointer; touch-action: none;
}
.lp-bar__progress::before, .lp-bar__progress i{
	content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
}
.lp-bar__progress::before{ background: rgba(20,20,20,.1); }
.lp-bar__progress i{ background: var(--ink, #141414); transform-origin: left; transform: scaleX(var(--lp-p, 0)); }
.lp-bar__progress:hover::before, .lp-bar__progress:hover i{ top: 4px; height: 4px; }
.lp-bar__progress:focus-visible{ outline: 1px solid var(--ink); outline-offset: 0; }

.lp-bar__now{
	display: flex; align-items: center; gap: 14px; min-width: 0;
	background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer;
}
.lp-bar__now img{ width: 44px; height: 44px; object-fit: cover; flex: none; }
.lp-bar__text{ display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lp-bar__title{
	font-family: var(--serif); font-style: italic; font-size: var(--fs-base, 1rem);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-bar__sub{ font-size: var(--fs-s, .875rem); color: var(--muted, #66645f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lp-bar__controls{ display: flex; align-items: center; gap: .4rem; }
.lp-bar__time{ display: none; }
.lp-bar__end{ display: flex; align-items: center; justify-content: flex-end; gap: .2rem; min-width: 0; }

@media (min-width: 901px){
	.lp-bar__time{
		display: block; font-size: var(--fs-s); font-variant-numeric: tabular-nums;
		color: var(--ink); margin-right: 1rem; white-space: nowrap;
	}
	.lp-bar__time span{ color: var(--muted); }
}
@media (max-width: 600px){
	.lp-bar{ gap: .5rem; }
	.lp-bar__controls .lp-btn:not(.lp-btn--main){ display: none; }
	.lp-bar__end .lp-btn:first-child{ display: none; }
}

.lp-bar-enter-active, .lp-bar-leave-active{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.lp-bar-enter-from, .lp-bar-leave-to{ transform: translateY(110%); }

/* ═══════════ PIL (tijdens het scrollen) ═══════════ */
.lp-pill{
	position: fixed; right: clamp(12px, 2vw, 24px); top: 50%; z-index: 990;
	transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: center; gap: .3rem;
	padding: 8px 6px 14px;
	background: var(--wall, #f6f5f2); color: var(--ink, #141414);
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(20,20,20,.06), 0 16px 40px -16px rgba(0,0,0,.4);
	font-family: var(--sans);
}
.lp-pill__cover{
	width: 44px; height: 44px; padding: 0; margin-bottom: .2rem;
	border: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
}
.lp-pill__cover img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-pill__play{ position: relative; margin: 4px 0; }
.lp-pill__ring{
	position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
	background: conic-gradient(var(--ink, #141414) calc(var(--lp-p, 0) * 1turn), rgba(20,20,20,.12) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.lp-pill__title{
	writing-mode: vertical-rl; transform: rotate(180deg);
	max-height: 140px; margin-top: .5rem;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-family: var(--serif); font-style: italic; font-size: var(--fs-s, .875rem); line-height: 1;
}
.lp-pill-enter-active, .lp-pill-leave-active{ transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.lp-pill-enter-from, .lp-pill-leave-to{ transform: translate(calc(100% + 24px), -50%); opacity: 0; }



/* ═══════════ UITKLAPSCHERM ═══════════ */
html.lp-sheet-open{ overflow: hidden; }

.lp-sheet{
	position: fixed; inset: 0; z-index: 1100;
	display: flex; flex-direction: column;
	background: #121212; color: #f2f1ee;
	padding: 20px var(--gutter, 32px) 32px;
	overflow-y: auto;
	font-family: var(--sans);
}
.lp-sheet-enter-active, .lp-sheet-leave-active{ transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.lp-sheet-enter-from, .lp-sheet-leave-to{ transform: translateY(6%); opacity: 0; }

.lp-sheet__top{ display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.lp-sheet__album{ font-family: var(--serif); font-style: italic; font-size: var(--fs-m); color: inherit !important; text-decoration: none; }
.lp-sheet__album:hover{ opacity: .7; }

.lp-sheet__grid{
	flex: 1;
	display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 120px); align-items: center;
	max-width: 1280px; width: 100%; margin: 0 auto; padding: clamp(16px, 4vh, 48px) 0;
}
.lp-sheet__cover{ display: block; width: 100%; max-width: min(100%, 38vh); aspect-ratio: 1; object-fit: cover; margin-bottom: 1.6rem; }
body .lp-sheet__title{
	font-family: var(--serif) !important; font-weight: 300 !important; font-style: italic;
	font-size: var(--fs-xl) !important; line-height: 1.1 !important; margin: 0 0 .3rem;
	color: #fff;
}
.lp-sheet__artist{ color: rgba(242,241,238,.6); margin: 0 0 1.6rem; }

/* schuifregelaars */
.lp-sheet input[type="range"]{
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 20px; margin: 0; background: none; cursor: pointer;
}
.lp-sheet input[type="range"]::-webkit-slider-runnable-track{
	height: 2px; background: linear-gradient(to right, #fff var(--p), rgba(255,255,255,.2) var(--p));
}
.lp-sheet input[type="range"]::-moz-range-track{ height: 2px; background: rgba(255,255,255,.2); }
.lp-sheet input[type="range"]::-moz-range-progress{ height: 2px; background: #fff; }
.lp-sheet input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0;
}
.lp-sheet input[type="range"]::-moz-range-thumb{ width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.lp-sheet input[type="range"]:focus-visible{ outline: 1px solid #fff; outline-offset: 4px; }

.lp-sheet__times{
	display: flex; justify-content: space-between; margin-top: .3rem;
	font-size: var(--fs-s); color: rgba(242,241,238,.6); font-variant-numeric: tabular-nums;
}
.lp-sheet__controls{ display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin: 1.4rem 0; }
.lp-sheet__controls .lp-btn{ width: 48px; height: 48px; }
.lp-sheet__controls .lp-btn--main{ width: 68px; height: 68px; background: #fff; color: #121212; }
.lp-sheet__controls .lp-btn--main .lp-icon{ width: 28px; height: 28px; }
.lp-sheet .lp-btn:hover{ background: rgba(255,255,255,.1); }
.lp-sheet .lp-btn--main:hover{ background: #fff; opacity: .85; }
.lp-sheet__volume{ display: flex; align-items: center; gap: .6rem; max-width: 240px; margin: 0 auto; }
.lp-sheet__error{ margin-top: 1rem; text-align: center; color: rgba(242,241,238,.7); }

.lp-sheet__side{ align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; min-width: 0; }
.lp-sheet__text{
	font-family: var(--serif); font-weight: 300; font-size: var(--fs-m); line-height: 1.7;
	white-space: pre-line; color: rgba(242,241,238,.85);
	max-width: 52ch; margin: 0;
}
.lp-sheet__list{ list-style: none; margin: 0; padding: 0; }
.lp-sheet__list button{
	display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .8rem;
	width: 100%; padding: .55rem .6rem; margin: 0 -.6rem;
	background: none; border: 0; color: rgba(242,241,238,.7); text-align: left; cursor: pointer;
	font: inherit; font-size: var(--fs-base);
	transition: background .2s ease, color .2s ease;
}
.lp-sheet__list button:hover{ background: rgba(255,255,255,.06); color: #fff; }
.lp-sheet__list button.is-current{ color: #fff; }
.lp-sheet__list .lp-sheet__t{ font-family: var(--serif); font-style: italic; }
.lp-sheet__n, .lp-sheet__d{ font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: rgba(242,241,238,.45); }
.lp-sheet__list .lp-eq{ display: none; }
.lp-sheet__list .is-playing .lp-sheet__n{ display: none; }
.lp-sheet__list .is-playing .lp-eq{ display: inline-flex; }
.lp-sheet__total{ font-size: var(--fs-s); color: rgba(242,241,238,.45); margin: 0; }

@media (max-width: 900px){
	.lp-sheet__grid{ grid-template-columns: 1fr; align-items: start; }
	.lp-sheet__cover{ max-width: 320px; margin: 0 auto 1.6rem; }
	.lp-sheet__title, .lp-sheet__artist{ text-align: center; }
}

/* ═══════════ AFSPEELKNOPPEN OP DE PAGINA ═══════════ */
.lp-play{
	display: inline-flex; align-items: center; gap: .9rem;
	padding: .8rem 1.5rem .8rem .9rem;
	background: var(--ink); color: var(--wall);
	border: 0; border-radius: 999px;
	font: inherit; font-size: var(--fs-s); font-weight: 500;
	cursor: pointer; transition: opacity .2s ease;
}
.lp-play:hover{ opacity: .85; }
.lp-play__icon{
	width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	background: var(--wall); color: var(--ink);
}
.lp-play__icon::before{
	content: ''; width: 0; height: 0; margin-left: 3px;
	border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.lp-play[aria-pressed="true"] .lp-play__icon::before{
	width: 10px; height: 12px; margin: 0; border: 0;
	border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}

/* equalizer bij het nummer dat speelt */
.lp-eq{ display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; }
.lp-eq i{ display: block; width: 2px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.3); }
.is-playing .lp-eq i{ animation: lp-eq .9s ease-in-out infinite; }
.is-playing .lp-eq i:nth-child(2){ animation-delay: -.3s; }
.is-playing .lp-eq i:nth-child(3){ animation-delay: -.6s; }
@keyframes lp-eq{ 0%, 100%{ transform: scaleY(.3); } 50%{ transform: scaleY(1); } }

/* paginawissel: kort en rustig */
#lp-page{ transition: padding-right .6s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
html.lp-loading #lp-page{ opacity: .35; }
html.lp-loading{ cursor: progress; }

@media (prefers-reduced-motion: reduce){
	.is-playing .lp-eq i, .lp-btn.is-busy{ animation: none; }
	#lp-page, footer.sf, .lp-bar-enter-active, .lp-bar-leave-active, .lp-pill-enter-active, .lp-pill-leave-active, .lp-sheet-enter-active, .lp-sheet-leave-active{ transition: none; }
}
.lp-sheet__note{ margin: -1.2rem 0 0; font-size: var(--fs-s); color: rgba(242,241,238,.5); font-style: italic; }

/* ═══════════ PAGINA-OVERGANGEN (View Transitions) ═══════════
   De pagina vervaagt kort; het aangeklikte werk vloeit naar zijn nieuwe
   plek. Navigatie en speler staan stil tijdens de overgang. */
.sn{ view-transition-name: lp-nav; }
.lp-bar{ view-transition-name: lp-bar; }
.lp-pill{ view-transition-name: lp-pill; }
::view-transition-group(lp-nav), ::view-transition-group(lp-bar), ::view-transition-group(lp-pill){ animation: none; }
::view-transition-old(lp-nav), ::view-transition-old(lp-bar), ::view-transition-old(lp-pill){ display: none; }
::view-transition-new(lp-nav), ::view-transition-new(lp-bar), ::view-transition-new(lp-pill){ animation: none; }

::view-transition-old(root){ animation: lp-vt-out .22s ease both; }
::view-transition-new(root){ animation: lp-vt-in .5s cubic-bezier(.2,.7,.2,1) .06s both; }
@keyframes lp-vt-out{ to{ opacity: 0; } }
@keyframes lp-vt-in{ from{ opacity: 0; transform: translateY(10px); } }

::view-transition-group(lp-art){ animation-duration: .65s; animation-timing-function: cubic-bezier(.3,.7,.15,1); }
::view-transition-old(lp-art), ::view-transition-new(lp-art){
	height: 100%; width: 100%; object-fit: contain;
	animation-duration: .65s;
}

/* op mobiel alleen een zachte overvloeiing, zonder verschuiving */
@media (max-width: 900px){
	::view-transition-old(root){ animation: lp-vt-out .18s ease both; }
	::view-transition-new(root){ animation: lp-vt-fade .28s ease .04s both; }
}
@keyframes lp-vt-fade{ from{ opacity: 0; } }

@media (prefers-reduced-motion: reduce){
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; }
}