/* Rankrix: background music control (inc/music.php, assets/rkx-music.js).
   A square glass bar in a bottom corner, drawn like the loader's cards (1px
   corners on the bar, its button, the previous / next buttons and the volume
   knob): the sound button with a five-bar meter, and a panel (track name,
   previous / next, volume) that opens on hover or focus, and briefly when the
   music starts. It sits in the margin beside the page, just above the footer
   pill: the sections and the pills are --rkx-w-def wide (75-95% depending on
   the screen and the Header settings) and centred, so the control is centred
   in the strip left over beside them and never sits over the content. Where
   that strip is too thin for it (phones, a 95% pill) it stays at the edge of
   the screen instead. The panel still opens over the page while it is hovered
   or focused. While the loader is up it sits in the loader's bottom-left
   bracket (see below). */

.rkx-music {
	--rkxm-gutter: calc((100% - var(--rkx-w-def, 95%)) / 2);          /* the margin beside the content column */
	--rkxm-edge: max(10px, calc(var(--rkxm-gutter) / 2 - 24px));      /* centred in it (the control is 48px wide) */
	position: fixed; z-index: 56;
	left: var(--rkxm-edge);
	bottom: calc(var(--rkxf-bot, 10px) + var(--rkxf-h, 50px) + 12px);
	display: flex; align-items: center;
	height: 46px; padding: 4px;
	border-radius: 1px;
	background: rgba(10, 11, 16, 0.72);
	-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid rgba(243, 239, 230, 0.16);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	color: #F3EFE6; font-family: Inter, system-ui, sans-serif;
	transition: border-color 0.3s ease, box-shadow 0.3s ease,
		left 0.85s cubic-bezier(0.76, 0, 0.24, 1), bottom 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.rkx-music[hidden] { display: none; }
.rkx-music--right { left: auto; right: var(--rkxm-edge); }
.rkx-music[data-state="playing"] { border-color: rgba(123, 139, 255, 0.38); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(31, 57, 194, 0.35); }

/* ---- the sound button ---- */
.rkx-music__btn {
	flex: 0 0 auto; position: relative;
	width: 38px; height: 38px; padding: 0; border: 0; border-radius: 1px;
	display: grid; place-items: center; cursor: pointer; color: #F3EFE6;
	background: rgba(31, 57, 194, 0.28);
	box-shadow: inset 0 0 0 1px rgba(123, 139, 255, 0.45);
	transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.rkx-music__btn::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }   /* 46px hit area */
.rkx-music__btn:hover { background: rgba(31, 57, 194, 0.5); }
.rkx-music__btn:active { transform: translateY(1px); }
.rkx-music__btn:focus-visible { outline: 2px solid #7B8BFF; outline-offset: 3px; }
.rkx-music[data-state="playing"] .rkx-music__btn {
	background: rgba(31, 57, 194, 0.55);
	box-shadow: inset 0 0 0 1px #4453FF, 0 0 14px rgba(68, 83, 255, 0.65), 0 0 30px rgba(31, 57, 194, 0.45);
}

/* five-bar meter: low and quiet when off, live (real levels, or a gentle loop) when playing */
.rkx-music__eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.rkx-music__eq i {
	display: block; width: 2px; height: 14px; border-radius: 1px;
	background: rgba(243, 239, 230, 0.78);
	transform-origin: 50% 100%; transform: scaleY(0.22);
	transition: transform 0.3s ease, background 0.3s ease;
}
.rkx-music__eq i:nth-child(2), .rkx-music__eq i:nth-child(4) { transform: scaleY(0.4); }
.rkx-music__eq i:nth-child(3) { transform: scaleY(0.62); }
.rkx-music[data-state="playing"] .rkx-music__eq i { background: #AEB8FF; box-shadow: 0 0 6px rgba(68, 83, 255, 0.95); transition: background 0.3s ease; }
.rkx-music.is-css[data-state="playing"] .rkx-music__eq i { animation: rkxMusicEq 1.15s ease-in-out infinite; }
.rkx-music.is-css[data-state="playing"] .rkx-music__eq i:nth-child(2) { animation-delay: -0.42s; animation-duration: 0.95s; }
.rkx-music.is-css[data-state="playing"] .rkx-music__eq i:nth-child(3) { animation-delay: -0.2s; animation-duration: 1.3s; }
.rkx-music.is-css[data-state="playing"] .rkx-music__eq i:nth-child(4) { animation-delay: -0.66s; animation-duration: 1.05s; }
.rkx-music.is-css[data-state="playing"] .rkx-music__eq i:nth-child(5) { animation-delay: -0.31s; animation-duration: 0.88s; }
@keyframes rkxMusicEq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

/* ---- panel: track and volume ---- */
.rkx-music__panel {
	display: flex; align-items: center; gap: 12px;
	max-width: 0; overflow: hidden; opacity: 0; padding: 0;
	white-space: nowrap;
	transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rkx-music:hover .rkx-music__panel,
.rkx-music:focus-within .rkx-music__panel,
.rkx-music.is-peek .rkx-music__panel { max-width: 380px; opacity: 1; padding: 0 14px 0 10px; }
.rkx-music--right { flex-direction: row-reverse; }
.rkx-music--right:hover .rkx-music__panel,
.rkx-music--right:focus-within .rkx-music__panel,
.rkx-music--right.is-peek .rkx-music__panel { padding: 0 10px 0 14px; }
/* Escape folds it away while focus stays on the control (declared after the open rules so it wins) */
.rkx-music.is-collapsed .rkx-music__panel { max-width: 0; opacity: 0; padding: 0; }
.rkx-music__meta { display: flex; flex-direction: column; min-width: 0; max-width: 160px; line-height: 1.25; }
.rkx-music__title { font-size: 12.5px; font-weight: 600; color: #F3EFE6; overflow: hidden; text-overflow: ellipsis; }
.rkx-music__artist { font-size: 11px; color: rgba(243, 239, 230, 0.55); overflow: hidden; text-overflow: ellipsis; }
.rkx-music__artist:empty { display: none; }
/* previous / next, when there is more than one track */
.rkx-music__skip { display: flex; align-items: center; gap: 2px; }
.rkx-music__ib {
	width: 26px; height: 26px; padding: 0; border: 0; border-radius: 1px; background: none; cursor: pointer;
	display: grid; place-items: center; color: #AEB8FF;
	transition: color 0.2s ease, background 0.2s ease;
}
.rkx-music__ib svg { fill: currentColor; filter: drop-shadow(0 0 4px rgba(68, 83, 255, 0.8)); }
.rkx-music__ib:hover { color: #F3EFE6; background: rgba(68, 83, 255, 0.18); }
.rkx-music__ib:focus-visible { outline: 2px solid #7B8BFF; outline-offset: 1px; }
.rkx-music__vol { display: flex; align-items: center; }
.rkx-music.no-vol .rkx-music__vol { display: none; }
.rkx-music__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rkx-music__vol input[type="range"] { -webkit-appearance: none; appearance: none; width: 86px; height: 24px; margin: 0; background: transparent; cursor: pointer; --v: 35%; }
.rkx-music__vol input[type="range"]:focus-visible { outline: 2px solid #7B8BFF; outline-offset: 2px; border-radius: 2px; }
.rkx-music__vol input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(90deg, #4453FF 0 var(--v), rgba(243, 239, 230, 0.2) var(--v) 100%); }
.rkx-music__vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 1px; background: #F3EFE6; box-shadow: 0 0 0 3px rgba(68, 83, 255, 0.35), 0 0 10px rgba(68, 83, 255, 0.85); }
.rkx-music__vol input[type="range"]::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(243, 239, 230, 0.2); }
.rkx-music__vol input[type="range"]::-moz-range-progress { height: 2px; border-radius: 1px; background: #4453FF; }
.rkx-music__vol input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 1px; background: #F3EFE6; box-shadow: 0 0 0 3px rgba(68, 83, 255, 0.35), 0 0 10px rgba(68, 83, 255, 0.85); }

/* ---- on the loader (it moves the player into its bottom-left bracket, see rkx-loader-classic.js):
   flat (no drop shadow), its entrance, scaled with the loader on large screens, and the panel no wider
   than the room before the copyright. On Enter it is put back into the page and glides to its place
   here, above the fading loader, still playing. ---- */
.rkx-music.on-loader {
	left: var(--ld-x, 48px); right: auto; bottom: var(--ld-y, 48px);
	box-shadow: none;
	scale: var(--ld-z, 1); transform-origin: 0 100%;
	animation: rkxMusicIn 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms both;
}
.rkx-music.on-loader[data-state="playing"] { box-shadow: 0 0 22px rgba(31, 57, 194, 0.35); }
.rkx-music.on-loader:hover .rkx-music__panel,
.rkx-music.on-loader:focus-within .rkx-music__panel,
.rkx-music.on-loader.is-peek .rkx-music__panel { max-width: min(380px, calc(var(--ld-room, 380px) - 46px)); }
.rkx-music.on-loader.is-collapsed .rkx-music__panel { max-width: 0; }
.rkx-music.ld-no-vol .rkx-music__vol, .rkx-music.ld-no-skip .rkx-music__skip { display: none; }
.rkx-music.leaving-loader { z-index: 10001; }
@keyframes rkxMusicIn { from { opacity: 0; translate: 0 16px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
	.rkx-music.on-loader { animation: none; }
	.rkx-music, .rkx-music__btn, .rkx-music__panel, .rkx-music__eq i { transition: none !important; }
	.rkx-music.is-css[data-state="playing"] .rkx-music__eq i { animation: none; transform: scaleY(0.7); }
}
@media print { .rkx-music { display: none !important; } }