/* The existing stage is a quiet recess. Labels remain on its stationary rim. */
.studio-page .studio-wave {
  perspective: var(--sd-perspective);
  perspective-origin: 50% 50%;
  background:
    radial-gradient(ellipse at calc(50% + var(--sd-x) * var(--sd-light-pan-x)) calc(var(--sd-light-center-y) + var(--sd-y) * var(--sd-light-pan-y)), var(--sd-light-color), var(--sd-light-clear) var(--sd-light-stop)),
    linear-gradient(180deg, var(--sd-upper-tone), var(--st-wave-ground) var(--sd-ground-start), var(--st-wave-ground) var(--sd-ground-end), var(--sd-lower-tone));
}
.studio-page .studio-wave::before,
.studio-page .studio-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--sd-rim-layer);
  pointer-events: none;
}
.studio-page .studio-wave::before { box-shadow: var(--sd-rim-shadow); }
.studio-page .studio-wave::after { box-shadow: var(--sd-rim-line); }
.studio-page .studio-wave .liquid-art {
  z-index: var(--sd-recess-layer);
  transform:
    translate3d(calc(var(--sd-x) * var(--sd-pointer-pan) * -1), calc((var(--st-wave-progress) - .5) * var(--st-wave-rise) - var(--sd-y) * var(--sd-pointer-pan)), var(--sd-recess))
    rotateX(calc(var(--sd-y) * var(--sd-pointer-turn) + var(--sd-scroll) * var(--sd-scroll-turn)))
    rotateY(calc(var(--sd-x) * var(--sd-pointer-turn) * -1))
    scale(var(--st-wave-scale));
  filter: drop-shadow(calc(var(--sd-cast-x) - var(--sd-x) * var(--sd-cast-pan)) calc(var(--sd-cast-y) - var(--sd-y) * var(--sd-cast-pan)) var(--sd-cast-softness) var(--sd-cast-color));
}
.studio-page .studio-wave[data-depth-state="active"] .liquid-art {
  transition: transform var(--sd-response) var(--sd-ease);
}
.studio-page .studio-wave-note { z-index: var(--sd-caption-layer); }
.studio-page.is-motion-paused .studio-wave .liquid-art,
.studio-page .studio-wave[data-depth-state="paused"] .liquid-art,
.studio-page .studio-wave[data-depth-state="static"] .liquid-art,
.studio-page .studio-wave[data-depth-state="hidden"] .liquid-art {
  transform: translateZ(var(--sd-recess));
  transition: none;
}
@media(prefers-reduced-motion:reduce) {
  .studio-page .studio-wave .liquid-art { transform: translateZ(var(--sd-recess)); transition: none; }
}
