/* DV59 AETHER VIDEO · Stage 3 of 6 adds full screen (the rail, idle), the settings menu and the up-next cover.
   The glass itself is WebGL (js/glass.js); this file places the DOM that sits on it (icons,
   labels, hit areas), the menus, and the CSS frosted fallback used when WebGL2 is unavailable. Positions come from
   the layout in js/player.js (every .ui-el is translated there), so the DOM and the glass always agree. */
:root {
  --ink: rgba(255, 255, 255, 0.94);
  --ink-2: rgba(255, 255, 255, 0.64);
  --ink-3: rgba(255, 255, 255, 0.5);
  --glow: #fdc87e;
  --focus: #ffd6a0;
  --bg: #0b0909;
  --u: 1px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font: 400 15px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
main { height: 100%; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: 12px; z-index: 50; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 10px; background: #fff; color: #111;
  font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }

.player { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #000; isolation: isolate;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.player:fullscreen { width: 100vw; height: 100vh; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.stage video, .curtain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; display: block; }
.stage video { transform-origin: 50% 50%; opacity: 0; }
.no-gl .stage video { transition: opacity .35s ease; }   /* WebGL pages fade the outgoing frame in the canvas instead */
.stage video.on { opacity: 1; }
.curtain { opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.curtain.on { opacity: 1; transition-duration: .2s; }
.shade { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity .5s; }
.shade-top { top: 0; height: 24%; background: linear-gradient(rgba(14, 10, 18, .58), rgba(14, 10, 18, 0)); }
.shade-bottom { bottom: 0; height: 34%; background: linear-gradient(rgba(10, 6, 6, 0), rgba(10, 6, 6, .42)); }

.ui { position: absolute; inset: 0; pointer-events: none; transition: opacity .45s; }
.ui-el { position: absolute; left: 0; top: 0; margin: 0; pointer-events: auto; }
.ui-el[data-off] { visibility: hidden; opacity: 0; pointer-events: none; }
.controls { position: absolute; inset: 0; pointer-events: none; }
.controls > * { pointer-events: auto; }

/* brand */
.brand { display: flex; align-items: center; gap: calc(12 * var(--u)); pointer-events: none; color: var(--ink); }
.brand-mono .mono, .phone-mono .mono { display: block; width: calc(44 * var(--u)); height: auto; color: rgba(255, 255, 255, .9); }
.brand-name { display: flex; flex-direction: column; font-size: calc(13 * var(--u)); line-height: 1.05; letter-spacing: .08em; font-weight: 400; }
.brand-name b { font-weight: 600; }
.brand-right { font-size: calc(15 * var(--u)); letter-spacing: .08em; font-weight: 300; color: var(--ink-2); pointer-events: none; translate: -100% 0; white-space: nowrap; }
.brand-right b { font-weight: 600; color: var(--ink); }
.phone-mono { pointer-events: none; translate: -50% -50%; }
.phone-mono .mono { width: 38px; }
.brand, .brand-right, .phone-mono { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* glass buttons: the dome is drawn in WebGL; the button is its hit area, icon and focus ring */
.dome, .glyph { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .95); touch-action: manipulation; transition: color .18s, opacity .25s, visibility .25s; }
.dome .ic, .glyph .ic { width: var(--ic, 22px); height: var(--ic, 22px); fill: currentColor; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); transition: transform .18s; pointer-events: none; }
.dome:hover .ic { transform: scale(1.06); }
.dome:active .ic { transform: scale(.92); }
.dome[aria-pressed="true"] { color: #fff6e8; }
.glyph { width: 44px; height: 44px; translate: -50% -50%; color: rgba(255, 255, 255, .78); --ic: calc(20 * var(--u)); }
.glyph:hover { color: #fff; }
:is(.dome, .glyph, .scrub, .vol, .m-item, .cv-card button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:is(.dome, .glyph, .scrub, .vol):focus:not(:focus-visible) { outline: none; }

.scrub { border-radius: 999px; cursor: pointer; touch-action: none; }
.vol { border-radius: 999px; cursor: ns-resize; touch-action: none; }
.vol .liq { display: none; }

/* labels on the glass */
.lbl { pointer-events: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.time { font-size: calc(15 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; translate: 0 -50%; letter-spacing: .01em; }
.time .t-sep, .time .t-dur { font-weight: 400; color: var(--ink-2); }
.title { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; translate: -50% -50%; color: rgba(255, 255, 255, .9); }
.title.is-small { font-size: calc(12.5 * var(--u)); letter-spacing: .05em; }
.quality { font-size: calc(14 * var(--u)); color: var(--ink-3); translate: -100% -50%; }
.gear-lbl { font-size: calc(8.5 * var(--u)); line-height: 1.15; letter-spacing: .09em; text-align: center; translate: -50% 0; color: rgba(255, 255, 255, .7); }
.gear-lbl b { font-weight: 600; }
.t-left, .t-right { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); translate: 0 -50%; }
.t-right { translate: -100% -50%; }
[data-layout="rail"] .title { translate: 0 -50%; font-size: calc(18 * var(--u)); letter-spacing: .08em; }
[data-layout="rail"] .quality { translate: 0 -50%; }

/* the frame preview over the bead */
.preview { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.preview.on { opacity: 1; }
.pv-frame { position: relative; width: 100%; padding: calc(4 * var(--u)); border-radius: calc(16 * var(--u));
  background: linear-gradient(160deg, rgba(120, 104, 108, .55), rgba(40, 32, 36, .5) 45%, rgba(90, 76, 80, .5));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .18), 0 14px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); }
.pv-img { width: 100%; aspect-ratio: 16 / 9; border-radius: calc(12 * var(--u)); background: #222 no-repeat; background-size: 800% 400%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pv-time { position: absolute; left: 50%; bottom: calc(10 * var(--u)); translate: -50% 0; padding: 2px 8px; border-radius: 99px;
  font-size: calc(12 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(10, 8, 10, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pv-notch { position: absolute; left: calc(50% + var(--notch, 0px)); bottom: calc(-8 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); translate: -50% 0; rotate: 45deg;
  background: rgba(64, 52, 56, .55); border-right: 1px solid rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .55); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bead-css { display: none; }

/* settings menu */
.menu { position: absolute; left: 0; top: 0; z-index: 20; min-width: 248px; padding: 10px; border-radius: 20px; color: var(--ink);
  background: linear-gradient(170deg, rgba(48, 40, 44, .62), rgba(18, 14, 16, .7));
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 60px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  transform-origin: var(--mo, 100% 100%); animation: menuIn .22s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes menuIn { from { opacity: 0; transform: scale(.92); } }
.m-head { margin: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.m-group { display: flex; flex-direction: column; }
.m-row { flex-direction: row; gap: 4px; padding: 0 2px; }
.m-row .m-item { flex: 1; justify-content: center; padding: 0 6px; }
.m-row .m-check { display: none; }
.m-row .m-item[aria-checked="true"] { background: rgba(253, 200, 126, .2); box-shadow: inset 0 0 0 1px rgba(253, 200, 126, .55); }
.m-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 11px;
  background: transparent; text-align: left; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; }
.m-item:hover, .m-item:focus-visible { background: rgba(255, 255, 255, .1); }
.m-item kbd { margin-left: auto; font: 600 11px Inter, sans-serif; padding: 2px 6px; border-radius: 6px; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.m-check { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.m-check .ic { width: 16px; height: 16px; opacity: 0; color: var(--glow); }
.m-item[aria-checked="true"] .m-check .ic { opacity: 1; }
.m-sep { height: 1px; margin: 8px 6px; background: rgba(255, 255, 255, .12); }
.m-credit { margin: 8px 10px 2px; font-size: 11px; color: var(--ink-3); }
.is-touch .m-item { min-height: 44px; }
.is-touch .m-item kbd { display: none; }

/* up next / closed cover */
.cover { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 8, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn .3s; }
.cover[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.cv-card { width: min(380px, 100%); padding: 18px; border-radius: 26px; text-align: center;
  background: linear-gradient(170deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 30px 70px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.cv-kicker { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cv-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.cv-title { margin: 14px 0 14px; font-size: 18px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cv-actions { display: flex; gap: 10px; justify-content: center; }
.cv-actions button { position: relative; min-height: 46px; padding: 0 20px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer;
  background: rgba(255, 255, 255, .1); font-weight: 600; font-size: 14px; }
.cv-play { background: linear-gradient(180deg, rgba(253, 200, 126, .5), rgba(240, 140, 80, .35)) !important; border-color: rgba(253, 210, 150, .7) !important; }
.cv-ring { position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(var(--glow) calc(var(--cd, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 2px; }

/* idle in fullscreen: everything fades, the cursor hides */
.player.is-idle .ui, .player.is-idle .shade { opacity: 0; }
.player.is-idle { cursor: none; }
.player.is-idle .ui * { pointer-events: none; }
.player.is-loading .ui { opacity: 0; }

/* ------------------------------------------------ fallback: no WebGL2 → CSS frosted glass, same layout */
.no-gl .slab { border-radius: var(--r, 26px); background: linear-gradient(180deg, rgba(60, 52, 54, .42), rgba(24, 20, 22, .5));
  border: 1px solid rgba(255, 255, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(255, 255, 255, .15), 0 14px 32px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); pointer-events: none; }
.no-gl .dome:not([data-off]):not(.as-glyph) { background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 46%, rgba(20, 16, 18, .3) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 -3px 8px rgba(255, 220, 180, .18), 0 3px 8px rgba(0, 0, 0, .35); }
.no-gl .dome[aria-pressed="true"] { background: radial-gradient(circle at 50% 70%, rgba(253, 180, 110, .5), rgba(60, 40, 30, .3) 70%); }
.no-gl .scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--rodh, 16px); translate: 0 -50%; border-radius: 99px;
  background: linear-gradient(90deg, #ffb26a, #ffe2b8 var(--p, 0%), rgba(255, 255, 255, .16) var(--p, 0%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 2px rgba(0, 0, 0, .3); }
.no-gl .bead-css { display: block; position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: #333 no-repeat; background-size: 1800% 800%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), inset 0 8px 10px rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .5), 0 6px 12px rgba(0, 0, 0, .45); }
.no-gl .vol { background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .02) 70%, rgba(255, 255, 255, .2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 6px 14px rgba(0, 0, 0, .35); overflow: hidden; }
.no-gl .vol .liq { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lv, 60%); border-top: 2px solid rgba(255, 255, 255, .8);
  background: linear-gradient(180deg, rgba(150, 190, 230, .45), rgba(90, 130, 180, .35)); transition: height .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}