:root {
  --motion-fast: 140ms;
  --motion-panel: 240ms;
  --motion-dialog: 360ms;
  --motion-content: 280ms;
  --motion-ease: cubic-bezier(.18, .84, .24, 1);
  --motion-liquid: cubic-bezier(.2, .9, .24, 1.04);
}

/* Native dialog state/focus changes stay immediate; only its presentation flows. */
dialog {
  opacity: 0;
  translate: 0 14px;
  scale: .965 1;
  transform-origin: 50% 65%;
  transition: opacity var(--motion-panel) var(--motion-ease),
    translate var(--motion-dialog) var(--motion-ease),
    scale var(--motion-dialog) var(--motion-liquid),
    display var(--motion-dialog) allow-discrete,
    overlay var(--motion-dialog) allow-discrete;
}
dialog[open] { opacity: 1; translate: 0 0; scale: 1; }
dialog::backdrop {
  opacity: 0;
  transition: opacity var(--motion-panel) var(--motion-ease),
    display var(--motion-dialog) allow-discrete,
    overlay var(--motion-dialog) allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
@starting-style {
  dialog[open] { opacity: 0; translate: 0 14px; scale: .965 1; }
  dialog[open]::backdrop { opacity: 0; }
}

/* Floating menus retain their own layout and placement, including exit frames. */
:where(.account-menu, .training-settings-panel, .course-picker-menu) {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transform-origin: top right;
  transition: opacity var(--motion-fast) var(--motion-ease),
    translate var(--motion-panel) var(--motion-ease),
    scale var(--motion-panel) var(--motion-liquid),
    display var(--motion-panel) allow-discrete;
}
:where(.account-menu, .training-settings-panel, .course-picker-menu)[hidden] {
  opacity: 0; translate: 0 -7px; scale: .98 .96; pointer-events: none;
}
@starting-style {
  :where(.account-menu, .training-settings-panel, .course-picker-menu):not([hidden]) {
    opacity: 0; translate: 0 -7px; scale: .98 .96;
  }
}

/* Same-origin document navigation stays native: no routing, popup or history interception. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 300ms; animation-timing-function: var(--motion-ease); }
::view-transition-old(root) { animation: ui-motion-page-out 180ms ease-in both; }
::view-transition-new(root) { animation: ui-motion-page-in 300ms var(--motion-ease) both; }
::view-transition { pointer-events: none; }
@keyframes ui-motion-page-out { to { opacity: 0; translate: 0 -5px; } }
@keyframes ui-motion-page-in { from { opacity: 0; translate: 0 9px; } }

/* The document-entry blend also works when the browser skips a native handoff. */
main { animation: ui-motion-document-in var(--motion-content) var(--motion-ease); }
@keyframes ui-motion-document-in { from { opacity: .4; } to { opacity: 1; } }
body.training-in-progress main, body.course-active main { animation: none; }

/* Animate new reading/form content, never the keystroke-painted passage. */
:where(#course-reading:not(.baseline-step) > #course-reading-title,
  #course-reading:not(.baseline-step) > .course-reading-lead,
  #course-reading:not(.baseline-step) > .course-step-content:not(:has(.course-input-proxy)),
  #course-reading > .course-step-actions,
  #game-setup, #game-result, #dashboard-nickname-form, .cloud-sync-notice:not([hidden])) {
  animation: ui-motion-content-in var(--motion-content) var(--motion-ease) both;
}
@keyframes ui-motion-content-in { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }

.course-reading-track i { animation: ui-motion-progress-in var(--motion-dialog) var(--motion-ease) both; }
@keyframes ui-motion-progress-in { from { width: var(--motion-progress-from, 0%); } }

/* Disclosure state remains native, with a smooth intrinsic-height handoff. */
details::details-content {
  height: 0;
  opacity: 0;
  overflow: clip;
  interpolate-size: allow-keywords;
  transition: height var(--motion-panel) var(--motion-ease),
    opacity var(--motion-panel) var(--motion-ease),
    content-visibility var(--motion-panel) allow-discrete;
}
details[open]::details-content { height: auto; opacity: 1; }

/* Small causal feedback, not motion on per-key typing highlights. */
:where(button, .primary, .secondary, .landing-header-cta, .account-identity, .app-header nav a, .goal-choice) {
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, opacity var(--motion-fast) ease,
    scale var(--motion-fast) var(--motion-ease);
}
:where(button:not(.course-curriculum-backdrop), .primary, .secondary, .landing-header-cta):not(:disabled):active { scale: .98; }
:where(input:not(.course-input-proxy):not(.zen-input-proxy), textarea:not(.course-input-proxy):not(.zen-input-proxy)) {
  transition: border-color var(--motion-fast) ease, outline-color var(--motion-fast) ease;
}

/* Curriculum disclosure keeps the original lesson DOM, progress and keyboard behavior. */
.course-curriculum { transition: transform var(--motion-panel) var(--motion-ease); }
.course-curriculum-lessons {
  height: auto; opacity: 1; overflow: clip; interpolate-size: allow-keywords;
  transition: height var(--motion-panel) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease), display var(--motion-panel) allow-discrete;
}
.course-curriculum-lessons[hidden] { height: 0; opacity: 0; pointer-events: none; }
.course-curriculum-backdrop { opacity: 1; transition: opacity var(--motion-panel) ease, display var(--motion-panel) allow-discrete; }
.course-curriculum-backdrop[hidden] { opacity: 0; pointer-events: none; }
@starting-style {
  .course-curriculum-lessons:not([hidden]) { height: 0; opacity: 0; }
  .course-curriculum-backdrop:not([hidden]) { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  :root { --motion-fast: 0ms; --motion-panel: 0ms; --motion-dialog: 0ms; --motion-content: 0ms; }
  dialog, dialog[open] { translate: none; scale: none; }
  :where(button, .primary, .secondary, .landing-header-cta):not(:disabled):active { scale: none; }
}