/* Release motion: quick, interruptible feedback for frequently used controls. */
:root {
  --ui-motion-duration: 150ms;
  --ui-motion-ease: cubic-bezier(.2, 0, 0, 1);
}

.workout-companion .progress span { transform-origin: left center; }

button:not(.pet-touch):not(.mascot-hello):not(.drag-handle):not(.set-number-handle) {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: var(--ui-motion-duration);
  transition-timing-function: var(--ui-motion-ease);
}

input,
select,
textarea {
  transition-property: background-color, border-color, box-shadow;
  transition-duration: var(--ui-motion-duration);
  transition-timing-function: var(--ui-motion-ease);
}

button:active:not(:disabled):not(.pet-touch):not(.mascot-hello):not(.drag-handle):not(.set-number-handle) {
  transform: scale(.96);
}

@media (prefers-reduced-motion: reduce) {
  button:not(.pet-touch):not(.mascot-hello):not(.drag-handle):not(.set-number-handle),
  input,
  select,
  textarea {
    transition: none;
  }

  button:active:not(:disabled):not(.pet-touch):not(.mascot-hello):not(.drag-handle):not(.set-number-handle) {
    transform: none;
  }
}

/* OriginKit Arrow Reveal reference: keep the label visible and the hit area stable.
   Original CSS adaptation; no third-party runtime or component source. */
.session-launch .primary .launch-action-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: transform var(--ui-motion-duration) var(--ui-motion-ease);
}
.launch-action-icon > span {
  display: block;
  transition: transform var(--ui-motion-duration) var(--ui-motion-ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .session-launch .primary:hover:not(:disabled):not(:focus-visible) .launch-action-icon { transform: scale(1.08); }
  .session-launch .primary:hover:not(:disabled):not(:focus-visible) .launch-action-icon > span { transform: translate(2px, -2px); }
  .session-launch .primary[data-go="workout"]:hover:not(:disabled):not(:focus-visible) .launch-action-icon > span { transform: translateX(2px); }
  .session-launch .primary:focus-visible:not(:disabled) .launch-action-icon,
  .session-launch .primary:focus-visible:not(:disabled) .launch-action-icon > span { transform: none; transition: none; }
}
/* Display transitions preserve the existing toast timeout and live-region text.
   Unsupported browsers retain the existing immediate show/hide behavior. */
@supports (transition-behavior: allow-discrete) {
  #toast {
    opacity: 1;
    pointer-events: none;
    transition: opacity var(--ui-motion-duration) var(--ui-motion-ease),
                display var(--ui-motion-duration) allow-discrete;
  }
  #toast[style*="display: none"], #toast[style*="display:none"] { opacity: 0; }
  @starting-style { #toast { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .session-launch .primary .launch-action-icon,
  .launch-action-icon > span, #toast { transition: none; }
}
/* Overlay entrance keeps the published toast transition intact. */
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: ui-dialog-enter 160ms var(--ui-motion-ease); }
}
@keyframes ui-dialog-enter {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}