/* ==========================================================================
   Motion — one scale for every transition in the app (transitions.dev tokens).
   Opens are a touch slower than closes, overshoot only on entrances, every
   distance small. Loaded last so it owns timing; looks stay in ui.css.
   ========================================================================== */
:root {
  interpolate-size: allow-keywords;   /* lets <details> animate to height: auto */

  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;    /* closes, text swaps, tooltips */
  --duration-fast: 250ms;     /* opens, tabs, page slides, accordions */
  --duration-medium: 350ms;   /* toast in, panel close */
  --duration-slow: 400ms;     /* panel open, content reveal */
  --duration-very-slow: 500ms;/* text reveal, emphasis, number pop */

  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);

  /* The app's own names now point at the shared scale. */
  --ui-ease: var(--ease-smooth-out);
  --ui-spring: var(--ease-bounce);
  --ui-fast: var(--duration-quick);
  --ui-med: var(--duration-fast);
  --ui-slow: var(--duration-slow);
}

/* --------------------------------------------------------- pop-ups (modal)
   Scale up from .96 on open (250ms), dip back quieter on close (150ms). */
.ui-modal-box {
  transform: scale(.96);
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out);
}
.ui-modal.is-open .ui-modal-box { transform: scale(1); }
.ui-modal.is-closing .ui-modal-box {
  opacity: 0; transform: scale(.96);
  transition-duration: var(--duration-quick);
}
.ui-modal-scrim { transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.ui-modal.is-closing .ui-modal-scrim { transition-duration: var(--duration-quick); }
.idea-add-modal-body { animation: t-modal-in var(--duration-fast) var(--ease-smooth-out) backwards; }
@keyframes t-modal-in { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 560px) {
  /* On a phone it's a sheet: it rises instead of scaling. */
  .idea-add-modal-body { animation: t-sheet-in var(--duration-slow) var(--ease-smooth-out) backwards; }
}
@keyframes t-sheet-in { from { opacity: .6; transform: translateY(40px); } }

/* ------------------------------------------------------------------ toasts
   Rise 16px with a soft blur, in 350ms. */
.toast-host .flash { animation: t-toast-in var(--duration-medium) var(--ease-smooth-out) backwards; }
@keyframes t-toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(2px); } }

/* ----------------------------------------------------------- page headings
   The title and the line under it rise in, 40ms apart. */
.main h1 { animation: t-rise var(--duration-very-slow) var(--ease-smooth-out) backwards; }
.main h1 + p, .main h1 + .soft, .main .page-head p { animation: t-rise var(--duration-very-slow) var(--ease-smooth-out) var(--duration-stagger) backwards; }
@keyframes t-rise { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }

/* ------------------------------------------------- idea cards (accordion)
   Open/close by height (grid-rows style, via ::details-content) with a blur. */
.idea-toggle::details-content {
  block-size: 0; overflow: clip; opacity: 0; filter: blur(2px);
  transition: block-size var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out),
    filter var(--duration-fast) var(--ease-smooth-out), content-visibility var(--duration-fast) allow-discrete;
}
.idea-toggle[open]::details-content { block-size: auto; opacity: 1; filter: none; }
.idea-chevron { transition: transform var(--duration-fast) var(--ease-smooth-out); }

/* ----------------------------------------------------------- sliding tabs */
.seg-thumb { transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out); }

/* ------------------------------------------------------- numbers pop in
   Stat numbers rise into place with a small overshoot, staggered. */
.stat-value { animation: t-num-pop var(--duration-very-slow) var(--ease-pop) backwards; }
.kpi:nth-child(2) .stat-value { animation-delay: 60ms; }
.kpi:nth-child(3) .stat-value { animation-delay: 120ms; }
.kpi:nth-child(4) .stat-value { animation-delay: 180ms; }
@keyframes t-num-pop { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }

/* --------------------------------------------- "writing…" status shimmer
   The text gently fades in and out while Dashi is busy (flat colour, no gradient). */
.writing-strip:not(.is-idle) h3, .idea-planning .thinking-copy h3 {
  color: var(--ui-text-2);
  animation: t-shimmer 1.6s ease-in-out infinite alternate;
}
@keyframes t-shimmer { from { opacity: 1; } to { opacity: .5; } }

/* -------------------------------------------- hover: quick in, softer out */
.btn { transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.btn .ti-arrow-right, .btn .ti-chevron-right { transition: transform var(--duration-fast) var(--ease-bounce); }
.btn:hover .ti-arrow-right, .btn:hover .ti-chevron-right, a:hover > .ti-chevron-right { transform: translateX(3px); }

/* Arrivals (new idea cards): smaller distance, shared ease. */
.ui-arrive { animation: t-arrive var(--duration-slow) var(--ease-smooth-out) backwards; }
@keyframes t-arrive { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }

@media (prefers-reduced-motion: reduce) {
  .main h1, .main h1 + p, .main h1 + .soft, .main .page-head p, .stat-value, .toast-host .flash,
  .idea-add-modal-body, .ui-arrive, .writing-strip h3, .idea-planning .thinking-copy h3 { animation: none !important; }
  .writing-strip h3, .idea-planning .thinking-copy h3 { color: var(--ui-text) !important; background: none !important; }
  .idea-toggle::details-content, .ui-modal-box, .seg-thumb { transition: none !important; }
}