/* The record player. Colours come from the page (--mu-a, --mu-b, --mu-gold) with the site's night purple and gold
   as defaults, so it sits on the home page and inside a circle's world alike. */
.mu { --mu-a: #4f5bf0; --mu-b: #e58cff; --mu-gold: #ffc861; --mu-bg: #0b0a26; --p: 0;
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 9vw, 120px) 0; color: #fff;
  background: radial-gradient(70vmax 50vmax at 80% 20%, color-mix(in srgb, var(--mu-a) 30%, transparent), transparent 70%),
              radial-gradient(60vmax 50vmax at 10% 90%, color-mix(in srgb, var(--mu-b) 22%, transparent), transparent 70%), var(--mu-bg); }
.mu-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--mu-gold) 18%, transparent), transparent 40%); opacity: 0; transition: opacity 1s; }
.mu.playing .mu-glow { opacity: 1; }
.mu-in { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; }

/* ---------- the turntable ---------- */
.mu-deck { display: grid; place-items: center; }
.mu-table { position: relative; width: min(100%, 460px); aspect-ratio: 1; }
.mu-ring { position: absolute; inset: -4%; width: 108%; height: 108%; transform: rotate(-90deg); }
.mu-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1.2; }
.mu-ring .mu-ring-p { stroke: var(--mu-gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); filter: drop-shadow(0 0 3px var(--mu-gold)); transition: stroke-dashoffset 0.3s linear; }
.mu-disc { position: absolute; inset: 0; border-radius: 50%; background: #0c0b12; box-shadow: 0 30px 70px -20px #000, 0 0 0 2px rgba(255, 255, 255, 0.05), 0 0 80px -20px var(--mu-a); animation: mu-spin 3.2s linear infinite; animation-play-state: paused; }
.mu.playing .mu-disc { animation-play-state: running; }
@keyframes mu-spin { to { rotate: 360deg; } }
.mu-grooves { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px),
              conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, 0.14) 12%, transparent 18% 55%, rgba(255, 255, 255, 0.1) 60%, transparent 66%); }
.mu-label { position: absolute; inset: 29%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #1a1826, 0 0 0 6px color-mix(in srgb, var(--mu-gold) 60%, transparent); }
.mu-label img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.18s, scale 0.18s; }
.mu.swap .mu-label img { opacity: 0; scale: 0.9; }
.mu-hole { position: absolute; left: 50%; top: 50%; width: 3.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #0c0b12; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }
.mu-arm { position: absolute; top: -6%; inset-inline-start: -4%; width: 44%; height: 70%; transform-origin: 12% 8%; rotate: 20deg; transition: rotate 0.9s cubic-bezier(.3, 1.2, .5, 1); pointer-events: none; }
.mu.playing .mu-arm { rotate: 0deg; }
.mu-arm::before { content: ''; position: absolute; top: 2%; left: 5%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #aab 45%, #555); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.mu-arm i { position: absolute; top: 10%; left: 12%; width: 5px; height: 84%; border-radius: 4px; background: linear-gradient(90deg, #eee, #999); transform-origin: top; rotate: -24deg; box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5); }
.mu-arm i::after { content: ''; position: absolute; bottom: -8px; left: -6px; width: 16px; height: 22px; border-radius: 3px; background: linear-gradient(#ddd, #777); }

/* ---------- the side ---------- */
.mu-k { margin: 0 0 10px; font: 800 0.95rem var(--font-hand, 'Playpen Sans Hebrew'); letter-spacing: 0.04em; color: var(--mu-gold); }
.mu-title { margin: 0; font: 900 clamp(2.4rem, 5.6vw, 4.4rem)/1 var(--font-hand, 'Playpen Sans Hebrew'); background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--mu-b) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mu-lead { margin: 12px 0 0; font-size: 1.1rem; color: rgba(255, 255, 255, 0.78); }
.mu-now { margin: 26px 0 16px; min-height: 3.4em; }
.mu-now small { display: block; font-weight: 700; font-size: 0.9rem; color: var(--mu-gold); }
.mu-now b { display: block; font: 800 clamp(1.5rem, 3vw, 2.1rem) var(--font-hand, 'Playpen Sans Hebrew'); }
.mu-ctl { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.mu-b { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s; }
.mu-b:hover { background: rgba(255, 255, 255, 0.18); }
.mu-play { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; background: var(--mu-gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mu-gold) 25%, transparent), 0 14px 34px -10px var(--mu-gold); -webkit-tap-highlight-color: transparent; transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.mu-play:hover { transform: scale(1.06); }
.mu-play span { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #1a1030; translate: 3px 0; }
.mu.playing .mu-play span { width: 20px; height: 24px; border: 0; translate: 0; background: linear-gradient(90deg, #1a1030 0 7px, transparent 7px 13px, #1a1030 13px); }
.mu-time { font: 700 0.95rem var(--font-body, 'Rubik'); color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.mu-b:focus-visible, .mu-play:focus-visible, .mu-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.mu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mu-card { width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 7px 14px 7px 7px; border: 0; border-radius: 16px; text-align: start; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); -webkit-tap-highlight-color: transparent; transition: background 0.25s, transform 0.25s, box-shadow 0.25s; }
.mu-card:hover { background: rgba(255, 255, 255, 0.11); transform: translateX(-4px); }
.mu-card img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.mu-card-t b { display: block; font: 800 1.05rem var(--font-hand, 'Playpen Sans Hebrew'); }
.mu-card-t small { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.mu-card time { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.mu-card.on { background: color-mix(in srgb, var(--mu-gold) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--mu-gold); }
.mu-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; opacity: 0; }
.mu-eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--mu-gold); }
.mu-card.on .mu-eq { opacity: 1; }
.mu.playing .mu-card.on .mu-eq i { animation: mu-eq 0.9s ease-in-out infinite alternate; }
.mu-eq i:nth-child(2) { animation-delay: -0.3s !important; } .mu-eq i:nth-child(3) { animation-delay: -0.6s !important; } .mu-eq i:nth-child(4) { animation-delay: -0.15s !important; }
@keyframes mu-eq { 0% { height: 20%; } 100% { height: 100%; } }
.mu-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.mu-link { font-weight: 700; color: var(--mu-gold); text-decoration: none; }
.mu-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .mu-in { grid-template-columns: 1fr; gap: 26px; }
  .mu-table { width: min(78vw, 340px); }
  .mu-side { text-align: center; }
  .mu-ctl { justify-content: center; }
  .mu-list { text-align: start; }
  .mu-links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mu-disc { animation: none; } .mu-arm { transition: none; } .mu.playing .mu-card.on .mu-eq i { animation: none; height: 70%; } }

/* ---------- a photo of the evening behind the section ---------- */
.mu-photo { position: absolute; inset: -4%; z-index: -2; background: var(--img) center / cover no-repeat; filter: blur(3px) saturate(1.2); opacity: 0.5; transform: scale(1.04); transition: opacity 1s, filter 1s; }
.mu.has-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 70% at 72% 50%, color-mix(in srgb, var(--mu-bg) 30%, transparent), color-mix(in srgb, var(--mu-bg) 88%, transparent) 75%),
  linear-gradient(180deg, var(--mu-bg) 0%, transparent 18%, transparent 82%, var(--mu-bg) 100%),
  linear-gradient(135deg, color-mix(in srgb, var(--mu-a) 35%, transparent), color-mix(in srgb, var(--mu-b) 25%, transparent)); }
.mu.has-photo.playing .mu-photo { opacity: 0.62; filter: blur(2px) saturate(1.35); }
@supports (animation-timeline: view()) { .mu-photo { animation: mu-drift linear both; animation-timeline: view(); } @keyframes mu-drift { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.04) translateY(3%); } } }

/* ---------- more controls ---------- */
.mu-seek { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.mu-t { flex: none; min-width: 3.2em; font: 700 0.9rem var(--font-body, 'Rubik'); color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; text-align: center; }
.mu-range { --v: 0; flex: 1; appearance: none; -webkit-appearance: none; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.mu-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to left, var(--mu-gold) calc(var(--v) * 100%), rgba(255, 255, 255, 0.16) calc(var(--v) * 100%)); }
.mu-range::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); }
.mu-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--mu-gold); }
.mu-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mu-gold) 40%, transparent), 0 2px 8px rgba(0, 0, 0, 0.5); transition: transform 0.15s; }
.mu-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mu-gold) 40%, transparent); }
.mu-range:hover::-webkit-slider-thumb, .mu-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.mu-range:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.mu-ctl { gap: 10px; flex-wrap: nowrap; }
.mu-b { display: grid; place-items: center; }
.mu-b svg { width: 22px; height: 22px; fill: currentColor; }
.mu-b svg.flip { transform: scaleX(-1); }
.mu-b svg text { fill: currentColor; stroke: none; }
.mu-b.sm { width: 40px; height: 40px; border-color: transparent; background: transparent; color: rgba(255, 255, 255, 0.6); position: relative; }
.mu-b.sm:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.mu-b.sm.on, [data-mu-repeat][data-mode="all"], [data-mu-repeat][data-mode="one"] { color: var(--mu-gold); }
.mu-b.sm.on::after, [data-mu-repeat][data-mode="all"]::after, [data-mu-repeat][data-mode="one"]::after { content: ''; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; translate: -50% 0; border-radius: 50%; background: var(--mu-gold); }
.mu-one { position: absolute; top: 6px; inset-inline-end: 6px; display: none; font: 900 0.62rem var(--font-body, 'Rubik'); font-style: normal; color: var(--mu-bg); background: var(--mu-gold); border-radius: 50%; width: 13px; height: 13px; line-height: 13px; text-align: center; }
[data-mu-repeat][data-mode="one"] .mu-one { display: block; }
.mu-extra { display: flex; align-items: center; gap: 10px; margin: -8px 0 24px; max-width: 320px; }
.mu-vol { max-width: 180px; }
.mu-b .x { display: none; } .mu.muted .mu-b .x { display: inline; } .mu.muted .mu-b .wave { display: none; }
.mu-speed { min-width: 52px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: rgba(255, 255, 255, 0.8); font: 800 0.9rem var(--font-body, 'Rubik'); cursor: pointer; }
.mu-speed.on { color: var(--mu-bg); background: var(--mu-gold); border-color: var(--mu-gold); }
.mu-grab { position: absolute; inset: 0; border-radius: 50%; cursor: grab; touch-action: none; z-index: 2; }
.mu-grab:active { cursor: grabbing; }
.mu.scratch .mu-disc { animation-play-state: paused; }
@media (max-width: 860px) {
  .mu-extra { margin-inline: auto; justify-content: center; }
  .mu-ctl { gap: 4px; }
  .mu-b { width: 42px; height: 42px; }
  .mu-b.sm { width: 36px; height: 36px; }
  .mu-play { width: 64px; height: 64px; }
}