/* Sacred Constellars — ambient music player.
   Fixed top-right, collapsed to a single orb until hovered or focused. */

.sc-player {
  --sc-accent: #e5cf88;
  --sc-accent-alt: #8fb8f6;   /* starlight blue, for the glyph colour cycle */
  --sc-glass: rgba(10, 12, 24, 0.72);
  --sc-fg: #f2f0fa;
  --sc-muted: #b9b3d0;
  --sc-orb: 46px;

  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* ---------- the orb ---------- */

.sc-orb {
  position: relative;
  flex: none;
  width: var(--sc-orb);
  height: var(--sc-orb);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sc-glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(229, 207, 136, 0.22), 0 4px 18px rgba(0, 0, 0, 0.45);
  color: var(--sc-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: box-shadow 0.35s ease, transform 0.2s ease;
}

.sc-orb:hover { transform: scale(1.05); }
.sc-orb:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* Playing: the orb picks up a faint corona. */
.sc-player[data-state="playing"] .sc-orb {
  box-shadow:
    0 0 0 1px rgba(229, 207, 136, 0.5),
    0 0 24px rgba(229, 207, 136, 0.26),
    0 4px 18px rgba(0, 0, 0, 0.45);
}

.sc-orb svg { display: block; overflow: visible; }

.sc-ring-track { stroke: rgba(229, 207, 136, 0.18); }
.sc-ring-fill {
  stroke: var(--sc-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}

/* Constellation glyph — the resting state.
   Placement (translate/scale) lives on the parent <g> as an attribute; only
   rotation is animated here. Animating transform on the placed group would
   override that matrix and interpolate its scale from 0.2 up to 1, which
   makes the glyph swell out of the orb over each cycle. */
.sc-glyph {
  transition: opacity 0.25s ease;
  transform-origin: 50px 44px;   /* centroid, in the glyph's own coordinates */
}
.sc-glyph-line { stroke: currentColor; opacity: 0.45; }
.sc-glyph-star { fill: currentColor; }

.sc-player[data-state="playing"] .sc-glyph {
  animation:
    sc-drift 28s linear infinite,
    sc-hue 14s ease-in-out infinite;
}
.sc-player[data-state="playing"] .sc-glyph-star {
  animation: sc-twinkle 3.4s ease-in-out infinite;
}
.sc-glyph-star:nth-child(3) { animation-delay: 0.5s; }
.sc-glyph-star:nth-child(4) { animation-delay: 1.1s; }
.sc-glyph-star:nth-child(5) { animation-delay: 1.7s; }
.sc-glyph-star:nth-child(6) { animation-delay: 2.3s; }

@keyframes sc-drift   { to { transform: rotate(360deg); } }
@keyframes sc-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Children paint with currentColor, so animating colour here carries to the
   whole constellation. The progress ring is set from --sc-accent directly and
   deliberately stays gold. */
@keyframes sc-hue {
  0%, 100% { color: var(--sc-accent); }
  50%      { color: var(--sc-accent-alt); }
}

/* Transport icon fades in over the glyph on hover, so the orb reads as a
   control rather than decoration. */
.sc-transport { opacity: 0; transition: opacity 0.25s ease; fill: currentColor; }
.sc-orb:hover .sc-transport,
.sc-orb:focus-visible .sc-transport { opacity: 1; }
.sc-orb:hover .sc-glyph,
.sc-orb:focus-visible .sc-glyph { opacity: 0.18; }

.sc-icon-pause { display: none; }
.sc-player[data-state="playing"] .sc-icon-play  { display: none; }
.sc-player[data-state="playing"] .sc-icon-pause { display: block; }

/* ---------- the panel ---------- */

.sc-panel {
  position: absolute;
  right: calc(var(--sc-orb) + 10px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--sc-glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(229, 207, 136, 0.16), 0 4px 18px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.sc-player:hover .sc-panel,
.sc-player:focus-within .sc-panel,
.sc-player.is-open .sc-panel {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.sc-title {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-fg);
  margin-right: 6px;
}

.sc-btn {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sc-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.2s ease, background 0.2s ease;
}
.sc-btn:hover { color: var(--sc-accent); background: rgba(229, 207, 136, 0.1); }
.sc-btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.sc-btn svg { display: block; fill: currentColor; }

/* ---------- volume ---------- */

.sc-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 54px;
  height: 14px;          /* hit area, not the visible track */
  margin: 0 4px 0 2px;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.sc-vol:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* WebKit needs the fill painted as a gradient; --sc-vol is set from JS. */
.sc-vol::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--sc-accent) 0 var(--sc-vol, 55%),
    rgba(229, 207, 136, 0.2) var(--sc-vol, 55%) 100%);
}
.sc-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 6px rgba(229, 207, 136, 0.55);
}

/* Firefox fills the track natively. */
.sc-vol::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(229, 207, 136, 0.2);
}
.sc-vol::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--sc-accent);
}
.sc-vol::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 6px rgba(229, 207, 136, 0.55);
}

.sc-player[data-muted="true"] .sc-vol { opacity: 0.35; }

/* Scoped through .sc-btn so these beat `.sc-btn svg { display: block }`,
   which would otherwise re-show whichever icon is meant to be hidden. */
.sc-btn .sc-icon-vol-off { display: none; }
.sc-player[data-muted="true"] .sc-btn .sc-icon-vol-on  { display: none; }
.sc-player[data-muted="true"] .sc-btn .sc-icon-vol-off { display: block; }

/* ---------- responsive ---------- */

@media (max-width: 600px) {
  .sc-player { --sc-orb: 40px; top: 12px; right: 12px; }
  .sc-title { max-width: 96px; }
}

/* Anyone who has asked for less motion gets a static orb. */
@media (prefers-reduced-motion: reduce) {
  .sc-player *,
  .sc-player *::before,
  .sc-player *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}