/* DV59 AETHER VIDEO · Stage 1 of 6: the film, the layout, the type and the CSS frosted glass (html.no-gl) the page draws until stage 4.
   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):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 */
@keyframes menuIn { from { opacity: 0; transform: scale(.92); } }

/* up next / closed cover */
@keyframes fadeIn { from { opacity: 0; } }

/* idle in fullscreen: everything fades, the cursor hides */
.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; }
}