/* Inspired by Web Motion Showcase: reveal, lift, light and immediate feedback.
   Local assets only. Motion never substitutes for real task/resource state. */
:root {
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-enter: 360ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared controls: preserve sizes, semantics, native dialogs and media players. */
.studio-motion :where(button, .button, .btn) {
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast),
    opacity var(--motion-fast),
    scale var(--motion-fast) var(--motion-ease);
}
.studio-motion :where(button, .button, .btn):not(:disabled):active {
  scale: 0.98;
}
.studio-motion :where(input:not([type="range"]), textarea, select) {
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}
.studio-motion
  :where(input:not([type="range"]), textarea, select):focus-visible {
  outline: 2px solid #cbb476;
  outline-offset: 3px;
}
.studio-motion .app-back::before {
  transition: transform var(--motion-normal) var(--motion-ease);
}
.studio-motion .app-back:hover::before {
  transform: translateX(-3px);
}
.studio-motion :where(.sep-model, .sep-source) {
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast);
}
.studio-motion dialog[open] {
  animation: studio-dialog-in var(--motion-normal) var(--motion-ease);
  box-shadow: 0 24px 80px #0006;
}
.studio-motion dialog[open]::backdrop {
  animation: studio-backdrop-in var(--motion-fast) ease-out;
}
.studio-motion :where(#notice, #toast):not([hidden]) {
  animation: studio-notice-in var(--motion-normal) var(--motion-ease);
}
.studio-motion .asset-tabs button {
  position: relative;
}
.studio-motion .asset-tabs button::after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e9c56d;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-normal) var(--motion-ease);
}
.studio-motion .asset-tabs button[aria-selected="true"] {
  box-shadow: none;
}
.studio-motion .asset-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}
/* Dark dialogs remain dark even when launched from the light lobby. */
.portal-page dialog {
  color-scheme: dark;
}
@keyframes studio-dialog-in {
  from {
    opacity: 0;
    translate: 0 10px;
    scale: 0.985;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes studio-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes studio-notice-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-motion *,
  .studio-motion *::before,
  .studio-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .studio-motion :where(button, .button, .btn):active {
    scale: none;
  }
  .portal-card:hover,
  .portal-card:hover .portal-arrow,
  .portal-card:focus-visible .portal-arrow,
  .portal-shortcut:is(:hover, :focus-visible) strong span,
  .studio-motion .app-back:hover::before {
    transform: none;
  }
  .portal-art::after {
    display: none;
  }
}