:root {
  --motion-fast: 140ms;
  --motion-panel: 200ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

button, input, select, summary, .layer-row, .panel-divider, .panel-divider::before {
  transition: background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease, opacity var(--motion-fast) ease,
    filter var(--motion-fast) ease, scale var(--motion-fast) var(--motion-ease);
}

/* Keep transforms under Sortable's control on draggable layer rows. */
button:not(.layer-select):not(.layer-grip):enabled:active { scale: .97; }
input:not([type=range]):not([type=color]):focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #fa8d5418;
}
.shape-tile img, .gallery-tile img {
  transition: scale var(--motion-panel) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .shape-tile:enabled:hover img, .gallery-tile:enabled:hover img { scale: 1.045; }
}
.artboard { transition: background-color var(--motion-panel) ease; }

/* Native keyboard selection and form values remain intact. Touch devices
   and browsers without base-select retain their platform picker. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
    select:not([multiple]):not([size]) {
      align-items: center;
      gap: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    select::picker-icon {
      color: var(--muted);
      flex-shrink: 0;
      transition: rotate var(--motion-panel) var(--motion-ease);
    }
    select:open::picker-icon { rotate: 180deg; }
    select::picker(select) {
      background: var(--panel);
      color: var(--text);
      border: 1px solid #536879;
      border-radius: 8px;
      padding: 4px;
      margin-block: 4px;
      box-shadow: 0 12px 32px #0006;
      max-block-size: min(340px, 60dvh);
      overflow-y: auto;
      scrollbar-width: thin;
      opacity: 0;
      translate: 0 -4px;
      transition: opacity var(--motion-fast) ease,
        translate var(--motion-fast) var(--motion-ease),
        display var(--motion-fast) allow-discrete,
        overlay var(--motion-fast) allow-discrete;
    }
    select:open::picker(select) { opacity: 1; translate: 0 0; }
    select option {
      padding: 8px 10px;
      min-block-size: 34px;
      border-radius: 4px;
      white-space: normal;
      overflow-wrap: anywhere;
      transition: background-color 100ms ease, color 100ms ease;
    }
    select option:checked { background: #29413f; color: #dcf5eb; }
    select option:hover, select option:focus-visible { background: #344554; }
    select option:disabled { color: var(--muted); opacity: .6; }
    select option::checkmark { color: var(--mint); }
    @starting-style {
      select:open::picker(select) { opacity: 0; translate: 0 -4px; }
    }
  }
}

/* Discrete transitions keep dialogs in the top layer through their exit. */
@supports (transition-behavior: allow-discrete) {
  dialog {
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity var(--motion-panel) ease,
      transform var(--motion-panel) var(--motion-ease),
      display var(--motion-panel) allow-discrete,
      overlay var(--motion-panel) allow-discrete;
  }
  dialog[open] { opacity: 1; transform: none; }
  dialog::backdrop {
    opacity: 0;
    transition: opacity var(--motion-panel) ease,
      display var(--motion-panel) allow-discrete,
      overlay var(--motion-panel) allow-discrete;
  }
  dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    dialog[open] { opacity: 0; transform: translateY(8px) scale(.985); }
    dialog[open]::backdrop { opacity: 0; }
  }
}

details > summary {
  display: flex;
  align-items: baseline;
  gap: 9px;
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: -45deg;
  transition: rotate var(--motion-panel) var(--motion-ease);
}
details[open] > summary::before { rotate: 45deg; }
details > summary:hover { color: var(--text); }
details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  details { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition: block-size var(--motion-panel) var(--motion-ease),
      opacity var(--motion-panel) ease,
      content-visibility var(--motion-panel) allow-discrete;
  }
  details[open]::details-content { block-size: auto; opacity: 1; }
}

#shape-library, #text-library, #inspector, .save-loading {
  transition: opacity var(--motion-panel) ease;
}
@starting-style {
  #shape-library:not([hidden]), #text-library:not([hidden]),
  #inspector:not([hidden]), .save-loading:not([hidden]) { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop {
    transition: none !important;
    animation: none !important;
  }
  select::picker(select), select::picker-icon { transition: none !important; }
  details::details-content { transition: none !important; }
  button:enabled:active, .shape-tile:enabled:hover img, .gallery-tile:enabled:hover img {
    scale: 1;
  }
}