/* Interface motion: quiet feedback for every page, 150–300ms, ease-out.
   dna-motion.css keeps the brand artwork (helix still, light pass, marks);
   this file owns UI transitions. Everything here stops under reduced motion. */
:root {
  --m-fast: 150ms;
  --m-base: 220ms;
  --m-slow: 300ms;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-rise: 8px;
}

/* Page and section arrival. Main fades only, so fixed children keep their place. */
:is(main, .wj-page, .screen.active) { animation: m-fade var(--m-slow) var(--m-ease) both; }
:is(main > section, main > article, .settings-card, .wj-card, .m-reveal) {
  animation: m-rise var(--m-slow) var(--m-ease) both;
}
main > :is(section, article):nth-of-type(2) { animation-delay: 40ms; }
main > :is(section, article):nth-of-type(3) { animation-delay: 80ms; }
main > :is(section, article):nth-of-type(n+4) { animation-delay: 110ms; }

/* Tabs, steps and panels animate whenever they are shown again. */
:is([role="tabpanel"], .tab-panel, .step-panel, .wj-beat, [data-step]:not([hidden])) {
  animation: m-rise var(--m-base) var(--m-ease) both;
}
[role="tab"] { transition: color var(--m-fast) var(--m-ease), background-color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease); }

/* Buttons: hover and press feedback. */
:is(button, .btn, .button, a.btn, .primary-button, .secondary-button, [role="button"], input[type="submit"]) {
  transition: background-color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease),
    color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease), opacity var(--m-fast) var(--m-ease);
}
:is(button, .btn, .button, a.btn, .primary-button, .secondary-button, [role="button"], input[type="submit"]):not(:disabled):active {
  transform: scale(.97);
}

/* Interactive cards lift a little on hover. */
@media (hover: hover) and (pointer: fine) {
  :is(a[class*="card"], button[class*="card"], .tool-card, .m-lift) {
    transition: transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease);
  }
  :is(a[class*="card"], button[class*="card"], .tool-card, .m-lift):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-black) 9%, transparent);
  }
}

/* Dialogs enter and leave; the backdrop fades. */
dialog {
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease),
    overlay var(--m-base) allow-discrete, display var(--m-base) allow-discrete;
  opacity: 0;
  transform: translateY(var(--m-rise)) scale(.98);
}
dialog[open] { opacity: 1; transform: none; }
dialog::backdrop {
  transition: background-color var(--m-base) var(--m-ease), overlay var(--m-base) allow-discrete, display var(--m-base) allow-discrete;
}
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(var(--m-rise)) scale(.98); }
}

/* Drawers: the Coach panel and the phone menu slide in and out. */
.genie-panel {
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease), display var(--m-base) allow-discrete;
  opacity: 0;
  transform: translateY(12px);
}
.genie-panel.open { opacity: 1; transform: none; }
@starting-style {
  .genie-panel.open { opacity: 0; transform: translateY(12px); }
}
@media (max-width: 640px) {
  .dna-refreshed .dna-sidebar { transition: transform var(--m-slow) var(--m-ease), visibility 0s linear var(--m-slow); }
  .dna-refreshed.dna-menu-open .dna-sidebar, .dna-menu-open .dna-sidebar { transition: transform var(--m-slow) var(--m-ease), visibility 0s; }
  .dna-menu-open .dna-nav-scrim { animation: m-fade var(--m-base) var(--m-ease) both; }
}

/* Collapse and expand. Browsers that cannot size to auto still fade the body in. */
:root { interpolate-size: allow-keywords; }
/* Content shows at once (scripts can focus it); only the height eases open. */
details::details-content {
  transition: height var(--m-base) var(--m-ease);
  height: 0;
  overflow: clip;
}
details[open]::details-content { height: auto; }
details[open] > :not(summary) { animation: m-fade var(--m-base) var(--m-ease) both; }
summary { transition: color var(--m-fast) var(--m-ease); }

/* Loading placeholders. */
.m-skeleton {
  position: relative; overflow: hidden; border-radius: 8px; color: transparent !important;
  background: color-mix(in srgb, var(--brand-tan) 22%, var(--brand-light-panel));
}
.m-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--brand-white) 55%, transparent) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: m-shimmer 1.4s ease-in-out infinite;
}
:root[data-theme="dark"] .m-skeleton { background: var(--brand-dark-raised); }
:root[data-theme="dark"] .m-skeleton::after { background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--brand-cream) 10%, transparent) 50%, transparent 80%); }

/* Chat typing indicator for the Coach and the Coach panel. */
.m-typing { display: inline-flex; align-items: center; gap: 5px; min-height: 1.4em; padding: 2px 0; }
.m-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gold); opacity: .35; animation: m-dot 1.1s ease-in-out infinite; }
.m-typing i:nth-child(2) { animation-delay: .15s; }
.m-typing i:nth-child(3) { animation-delay: .3s; }
.m-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Saved confirmation: a small check and word, then gone. */
.m-toast {
  position: fixed; z-index: 400; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 10px 16px 10px 12px; border-radius: 999px;
  background: var(--brand-forest); color: var(--brand-cream);
  font: 500 14px/1.3 var(--brand-body);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-black) 18%, transparent);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
}
.m-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.m-toast svg { width: 18px; height: 18px; flex: none; }
.m-toast svg path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.m-toast.is-on svg path { animation: m-check var(--m-slow) var(--m-ease) 80ms forwards; }
.m-saved-pulse { animation: m-pulse var(--m-slow) var(--m-ease); }

@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-rise)); } to { opacity: 1; transform: none; } }
@keyframes m-shimmer { to { transform: translateX(100%); } }
@keyframes m-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes m-check { to { stroke-dashoffset: 0; } }
@keyframes m-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-gold) 40%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* Reduced motion: no movement anywhere. Durations collapse rather than
   vanish, so scripts that wait for transitionend/animationend still run. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  :is(button, .btn, .button, a.btn, .primary-button, .secondary-button, [role="button"]):active,
  :is(a[class*="card"], button[class*="card"], .tool-card, .m-lift):hover { transform: none !important; }
  .m-typing i { opacity: .7; }
  .m-toast { transition: none; }
  .m-toast svg path { stroke-dashoffset: 0; }
}
/* Separate rule: a browser without ::details-content must not drop the block above. */
@media (prefers-reduced-motion: reduce) {
  ::details-content { transition-duration: .01ms !important; }
}
@media print { .m-toast { display: none !important; } }