/* Shared final motion layer. Never animate geometry of scroll containers:
   transforming ancestors changes fixed positioning and moves touch targets. */
:root {
  --pv-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* The outer studio screen owns scrolling. A centered, fixed-height inner
   scroller puts the first heading above its scroll origin on short windows,
   where it is clipped even at scrollTop=0. Do not compensate with Air padding. */
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"]
  .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-start-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  padding-top: 12px !important;
}

@keyframes pv-motion-reveal {
  from { opacity: .35; }
  to { opacity: 1; }
}

.pv3-reference .pv2-screen.is-active {
  animation: pv-motion-reveal 280ms var(--pv-motion-ease) backwards !important;
  transform: none !important;
  will-change: auto !important;
}

/* Avoid compounded screen + step fades when both open together. */
.pv3-reference .studio-stage-transition {
  animation: pv-motion-reveal 220ms var(--pv-motion-ease) backwards !important;
  transform: none !important;
  will-change: auto !important;
}

.pv3-reference .pv2-screen.pv2-studio.is-active {
  animation: none !important;
}

.pv3-reference .pv2-screen-transition {
  transform: none !important;
  will-change: auto !important;
}

.pv3-reference :is(.advanced-panel, .pv3-sound-tuning)[open] > :not(summary) {
  animation: pv-motion-reveal 200ms var(--pv-motion-ease) backwards;
}

.pv3-reference .pv2-drawer {
  transition: transform 300ms var(--pv-motion-ease) !important;
}

.pv3-reference.is-menu-open .pv2-drawer-shade {
  animation: pv-motion-reveal 220ms ease-out backwards;
}

.pv3-reference :is(button, summary) {
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 220ms ease !important;
}

/* Stable controls while tapping; feedback is light and color, not movement. */
.pv3-reference :is(button, summary):active {
  transform: none !important;
  filter: brightness(1.12);
}

.pv3-reference :is(input, textarea, select) {
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

/* Web App performance: the advanced panel is taller than the viewport and
   moves inside .pv2-screen. Re-blurring the aurora behind that whole surface
   on every wheel/touch frame makes desktop/mobile browsers visibly stutter.
   Keep the same translucent fill and border, but avoid the expensive live
   backdrop pass. Mini App has its own host shell and is deliberately intact. */
.pv2-exact-shell--web.pv3-reference .pv2-screen.pv2-studio.is-active .advanced-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* No perpetual shine on the primary action while reading or listening. */
:is(.primary-button, .studio-wizard-next, .studio-next, [data-studio-next])::after {
  animation: none !important;
  opacity: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .pv3-reference button:hover {
    border-color: rgba(104, 218, 247, .65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference .pv2-screen.is-active,
  .pv3-reference .studio-stage-transition,
  .pv3-reference :is(.advanced-panel, .pv3-sound-tuning)[open] > :not(summary),
  .pv3-reference.is-menu-open .pv2-drawer-shade {
    animation: none !important;
  }
  .pv3-reference .pv2-drawer,
  .pv3-reference :is(button, summary, input, textarea, select) {
    transition: none !important;
  }
}