/* ============================================================
   THE ATLAS — Ambient audio control
   A recessive corner control: a quiet glyph that expands to a track
   grid + volume. Lives bottom-right, stacked above .back-to-top so the
   two never overlap. Matches the .read-mode / .back-to-top language.
   ============================================================ */

.amb{
  position:fixed; right:20px; bottom:82px;   /* 24 (.back-to-top) + 46 + 12 gap */
  z-index:41; font-family:var(--font-mono);
}

/* ---- collapsed trigger (a small disc, like .back-to-top) ---- */
.amb-fab{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:var(--parchment-3); background:rgba(8,8,10,.82);
  border:1px solid var(--ink-600); box-shadow:var(--shadow-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .35s var(--ease-rise), border-color .35s var(--ease-rise);
}
.amb-fab:hover{ color:var(--gold); border-color:var(--gold-600); }
.amb.open .amb-fab{ color:var(--parchment); border-color:var(--ink-600); }
/* playing: lamp-lit, with a slow breath */
.amb.playing .amb-fab{ color:var(--gold); border-color:var(--gold-600); box-shadow:var(--shadow-2), var(--glow-gold); }
@media (prefers-reduced-motion: no-preference){
  .amb.playing .amb-fab{ animation:amb-breath var(--dur-breath) var(--ease-ambient) infinite; }
}
@keyframes amb-breath{ 0%,100%{ box-shadow:var(--shadow-2), 0 0 14px var(--gold-glow); } 50%{ box-shadow:var(--shadow-2), 0 0 26px var(--gold-glow); } }

/* ---- expanding panel (opens upward from the disc) ---- */
.amb-panel{
  position:absolute; right:0; bottom:56px; width:248px;
  padding:16px; border-radius:var(--r-lg);
  background:rgba(11,11,14,.92); border:1px solid var(--ink-700);
  box-shadow:var(--shadow-3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transform:translateY(8px) scale(.98); transform-origin:bottom right;
  pointer-events:none;
}
.amb.open .amb-panel{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: no-preference){
  .amb-panel{ transition:opacity .3s var(--ease-rise), transform .3s var(--ease-rise); }
}
/* reduced motion: no slide/scale, just appear (hidden attr gates display) */
.amb-reduced .amb-panel{ transition:none; transform:none; }

/* ---- panel header: label + play/pause ---- */
.amb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.amb-eyebrow{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-3);
}
.amb-play{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:var(--parchment-2); background:transparent; border:1px solid var(--ink-600);
  transition:color .25s var(--ease-rise), border-color .25s var(--ease-rise), background .25s var(--ease-rise);
}
.amb-play:hover{ color:var(--gold); border-color:var(--gold-600); }
.amb.playing .amb-play{ color:var(--gold); border-color:var(--gold-600); background:var(--gold-glow); }

/* ---- track grid (one-word labels, 3 columns) ---- */
.amb-tracks{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.amb-track{
  position:relative; cursor:pointer;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--parchment-3); background:transparent;
  border:1px solid var(--ink-700); border-radius:var(--r-md); padding:9px 4px;
  transition:color .25s var(--ease-rise), border-color .25s var(--ease-rise), box-shadow .25s var(--ease-rise);
}
.amb-track:hover{ color:var(--parchment); border-color:var(--ink-600); }
.amb-track.selected{
  color:var(--gold); border-color:var(--gold-600);
  box-shadow:inset 0 0 0 1px var(--gold-600), 0 0 14px var(--gold-glow);
}
.amb-track:focus-visible{ outline:none; box-shadow:var(--ring-focus); }

/* loading: dim the label, float a tiny pulsing dot */
.amb-track.loading .amb-track-label{ opacity:.45; }
.amb-track.loading::after{
  content:""; position:absolute; top:6px; right:6px; width:4px; height:4px; border-radius:50%;
  background:var(--gold);
}
@media (prefers-reduced-motion: no-preference){
  .amb-track.loading::after{ animation:amb-pulse 1s var(--ease-ambient) infinite; }
}
@keyframes amb-pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ---- volume ---- */
.amb-vol{ display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--parchment-3); }
.amb-slider{
  flex:1; -webkit-appearance:none; appearance:none; height:3px; border-radius:var(--r-pill);
  background:var(--ink-600); cursor:pointer; outline:none;
}
.amb-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--gold); border:none; box-shadow:0 0 8px var(--gold-glow);
  transition:transform .2s var(--ease-rise);
}
.amb-slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.amb-slider::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--gold); border:none; box-shadow:0 0 8px var(--gold-glow);
}
.amb-slider:focus-visible{ box-shadow:var(--ring-focus); }

/* ---- small screens: keep it tucked, slightly narrower ---- */
@media (max-width:520px){
  .amb{ right:14px; bottom:78px; }
  .amb-panel{ width:218px; }
}