/* Motion belongs to the workshop controls, never to the student's website. */
:root {
  --studio-ease: cubic-bezier(.2,.8,.2,1);
  --studio-press: 110ms;
  --studio-reveal: 180ms;
  --studio-expand: 240ms;
}

.builder-workspace :is(.builder-toolbar,.site-pages,.block-palette,.block-inspector,.builder-code-tools,.builder-preview-tools) button,
.rocodeHeader button, dialog button {
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, scale var(--studio-press) var(--studio-ease);
}
:is(.rocodeHeader,.builder-toolbar,.site-pages,.block-palette,.block-inspector,.builder-code-tools,.builder-preview-tools,dialog) button:not(:disabled):not([aria-disabled=true]):active {
  scale: .975;
}
.builder-workspace .palette-block:not(:disabled):active { scale:.96; }
.builder-workspace .toolbox-symbol,
.builder-workspace .canvas-media-friend .canvas-media-thumbnail img {
  scale:1; translate:none; transform-origin:center;
  transition:scale var(--studio-reveal) var(--studio-ease);
}
@media(hover:hover) and (pointer:fine) {
  .builder-workspace:not(.is-dragging) .palette-block:not(:disabled):hover .toolbox-symbol { scale:1.08; }
  .builder-workspace:not(.is-dragging) .canvas-media-friend:not(:disabled):hover .canvas-media-thumbnail img { scale:1.06; }
}
.builder-workspace.is-dragging .block-palette button:not(:disabled):active { scale:1; }
.builder-workspace.is-dragging .toolbox-symbol,
.builder-workspace.is-dragging .canvas-media-friend .canvas-media-thumbnail img { scale:1; translate:none; transition:none; }

/* Native open/closed semantics stay immediate; only the content's presentation
   interpolates. Unsupported browsers keep their ordinary disclosure behavior. */
@supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  .builder-workspace :is(.block-inspector details,.more-blocks)[data-studio-disclosure] { interpolate-size:allow-keywords; }
  .builder-workspace :is(.block-inspector details,.more-blocks)[data-studio-disclosure]::details-content {
    block-size:0;
    opacity:0;
    overflow:clip;
    overflow-clip-margin:4px;
    transition:block-size var(--studio-expand) var(--studio-ease), opacity var(--studio-reveal) ease, content-visibility var(--studio-expand) allow-discrete;
  }
  .builder-workspace :is(.block-inspector details,.more-blocks)[data-studio-disclosure][open]::details-content { block-size:auto; opacity:1; }
}

.builder-workspace .canvas-media-tray:not([hidden]),
.rocodeHeaderMenu:not([hidden]),
.toast:not([hidden]) { animation:studio-surface-in var(--studio-reveal) var(--studio-ease); }
dialog[open] { animation:studio-dialog-in 200ms var(--studio-ease); }
dialog[open]::backdrop { animation:studio-backdrop-in 180ms ease; }
@keyframes studio-surface-in { from { opacity:0; translate:0 -4px; } to { opacity:1; translate:0 0; } }
@keyframes studio-dialog-in { from { opacity:0; translate:0 8px; scale:.985; } to { opacity:1; translate:0 0; scale:1; } }
@keyframes studio-backdrop-in { from { opacity:0; } to { opacity:1; } }

@media(prefers-reduced-motion:reduce) {
  :root { --studio-press:0ms; --studio-reveal:0ms; --studio-expand:0ms; }
  .builder-workspace :is(.builder-toolbar,.site-pages,.block-palette,.block-inspector,.builder-code-tools,.builder-preview-tools) button,
  .rocodeHeader button, dialog button { transition:none; }
  :is(.rocodeHeader,.builder-toolbar,.site-pages,.block-palette,.block-inspector,.builder-code-tools,.builder-preview-tools,dialog) button:not(:disabled):not([aria-disabled=true]):active { scale:1; }
  .builder-workspace .palette-block .toolbox-symbol,
  .builder-workspace .canvas-media-friend .canvas-media-thumbnail img { scale:1!important; translate:none!important; transition:none; }
  .builder-workspace .canvas-media-tray:not([hidden]),.rocodeHeaderMenu:not([hidden]),.toast:not([hidden]),dialog[open],dialog[open]::backdrop { animation:none; }
}