/* On-screen controls for the 3D musical sculpture (play/stop, mute, track arrows, title, upload). */

/* The sculpture box is 16:9. The old fixed 500px stage clipped its bottom edge (and the old mute button with it). */
.interactive-stage.rwmp-stage {
  height: auto;
}

/* The original corner mute icon is replaced by the labelled Mute button below. */
#rwmp #sound-toggle {
  display: none;
}

.rwmp-ui {
  position: absolute;
  inset: 0;
  z-index: 256;
  pointer-events: none;
  font-family: 'Michroma', sans-serif;
  color: #ffffff;
}

.rwmp-ui .rwmp-top {
  position: absolute;
  top: 0.5em;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 7em);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 0.5em;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  pointer-events: auto;
}

.rwmp-ui .rwmp-title {
  font-size: 0.8rem;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 8em;
  text-align: center;
}

.rwmp-ui .rwmp-bottom {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  pointer-events: auto;
}

.rwmp-ui .rwmp-btn {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 0.55em 1em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.rwmp-ui .rwmp-prev,
.rwmp-ui .rwmp-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35em 0.5em;
  border-radius: 999px;
}

.rwmp-ui .rwmp-btn:hover:not(:disabled),
.rwmp-ui .rwmp-btn:focus-visible {
  background: #ffffff;
  color: #000000;
  outline: none;
}

.rwmp-ui .rwmp-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.rwmp-ui .rwmp-status {
  position: absolute;
  left: 50%;
  bottom: 3.6em;
  transform: translateX(-50%);
  max-width: 90%;
  font-size: 0.7rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 8px;
  padding: 0;
  pointer-events: none;
}

.rwmp-ui .rwmp-status:not(:empty) {
  padding: 0.5em 0.9em;
}

/* Invitation: the Play button pulses green until the visitor presses it for the first time (and again after the Lab is left). */
@keyframes rwmp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(60, 220, 110, 0.75); }
  70%  { box-shadow: 0 0 0 14px rgba(60, 220, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 220, 110, 0); }
}

.rwmp-ui .rwmp-play.rwmp-invite {
  background: rgba(30, 170, 80, 0.85);
  border-color: #5dff9a;
  color: #ffffff;
  animation: rwmp-pulse 1.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rwmp-ui .rwmp-play.rwmp-invite {
    animation: none;
    box-shadow: 0 0 0 4px rgba(60, 220, 110, 0.6);
  }
}

/* Volume: a small vertical fader that appears above the "Vol" button on hover or keyboard focus (tap on touch screens). */
.rwmp-ui .rwmp-vol {
  position: relative;
  display: inline-flex;
}

.rwmp-ui .rwmp-fader {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding-bottom: 0.4em; /* keeps the hover area continuous with the button */
  opacity: 0;
  visibility: hidden;
  /* hiding fades out (visibility flips after the fade); showing is immediate */
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  outline: none;
}

.rwmp-ui .rwmp-vol:hover .rwmp-fader,
.rwmp-ui .rwmp-vol.open .rwmp-fader,
.rwmp-ui .rwmp-fader.dragging {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* keyboard users: shown while the fader or Vol button has keyboard focus (not after a mouse click).
   Kept in its own rule so browsers without :has() simply ignore it. */
.rwmp-ui .rwmp-vol:has(:focus-visible) .rwmp-fader {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.rwmp-ui .rwmp-fader-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 0.9em 0.6em;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

.rwmp-ui .rwmp-fader:focus-visible .rwmp-fader-body {
  border-color: #ffffff;
}

.rwmp-ui .rwmp-fader-track {
  position: relative;
  width: 6px;
  height: 7em;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  touch-action: none;
}

/* wider invisible hit area so the thin track is easy to grab */
.rwmp-ui .rwmp-fader-track::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -12px;
  right: -12px;
}

.rwmp-ui .rwmp-fader-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: #ffffff;
  pointer-events: none;
}

.rwmp-ui .rwmp-fader-knob {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: 0 0 -7px -7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.rwmp-ui .rwmp-fader-value {
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: #ffffff;
}

/* Safari: the 3D picture (a WebGL canvas) could be drawn over the controls after the page changed (e.g. when the
   score appeared under the sculpture), so the track selector and buttons seemed to vanish when the mouse moved.
   Giving the sculpture box its own stacking context and the controls their own drawing layer keeps them on top.
   (8 Nov 2026; to undo, delete these two rules.) */
#rwmp { isolation: isolate; }
.rwmp-ui, #rwmp #expand-toggle { transform: translateZ(0); will-change: transform; }

/* Particles page: the background music's Play/Stop and Mute buttons sit over the bottom-left of the animation */
.particles-stage { position: relative; isolation: isolate; }
.particles-stage .rwmp-ui { font-size: 1rem; }