/* OWNER: Charlie. Today screen entrance motion only. Everything is scoped under
   [data-mo-enter="today"], the window motion-core.js opens for 700ms after this
   screen mounts on a route entry, so it plays once per visit and never replays
   when paint() re renders the screen after a save. Transform and opacity only,
   per css/motion-tokens.css. No JS lane needed: pure CSS covers all three moments. */

@keyframes mt-rise {
  from { opacity: 0; transform: translateY(var(--mo-rise)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mt-grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Moment 1: the dashboard composes itself, headline first, then the stat tiles,
   then the sections below, in a calm stagger capped under 300ms and 8 items. */
[data-mo-enter="today"] .book-title,
[data-mo-enter="today"] .td-stats > .td-stat,
[data-mo-enter="today"] .td-scroll > .td-card,
[data-mo-enter="today"] .td-cols > .td-card {
  animation: mt-rise var(--mo-base) var(--mo-ease-out) both;
}
[data-mo-enter="today"] .book-title { animation-delay: 0ms; }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(1) { animation-delay: calc(var(--mo-stagger) * 1); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(2) { animation-delay: calc(var(--mo-stagger) * 2); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(3) { animation-delay: calc(var(--mo-stagger) * 3); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(4) { animation-delay: calc(var(--mo-stagger) * 4); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(5) { animation-delay: calc(var(--mo-stagger) * 5); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(6) { animation-delay: calc(var(--mo-stagger) * 6); }
[data-mo-enter="today"] .td-scroll > .td-card { animation-delay: calc(var(--mo-stagger) * 7); }
[data-mo-enter="today"] .td-cols > .td-card:nth-child(1) { animation-delay: calc(var(--mo-stagger) * 8); }
[data-mo-enter="today"] .td-cols > .td-card:nth-child(2) { animation-delay: calc(var(--mo-stagger) * 8); }
[data-mo-enter="today"] .td-cols > .td-card:nth-child(3) { animation-delay: calc(var(--mo-stagger) * 8); }

/* Moment 2: the revenue bars grow from the baseline. fill-box makes "bottom" mean
   each rect's own bottom edge instead of the whole SVG viewport. scaleY only,
   never width or height, so the bar's final geometry never moves. */
[data-mo-enter="today"] .td-svg rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: mt-grow-y var(--mo-slow) var(--mo-ease-out) both;
  animation-delay: calc(var(--mo-stagger) * 7 + 60ms);
}

/* Moment 3: the big number in each tile lands a beat after its tile arrives.
   Text content is never touched, only transform and opacity. */
[data-mo-enter="today"] .td-stat b.num {
  animation: mt-rise var(--mo-fast) var(--mo-ease-out) both;
}
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(1) b.num { animation-delay: calc(var(--mo-stagger) * 1 + 70ms); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(2) b.num { animation-delay: calc(var(--mo-stagger) * 2 + 70ms); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(3) b.num { animation-delay: calc(var(--mo-stagger) * 3 + 70ms); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(4) b.num { animation-delay: calc(var(--mo-stagger) * 4 + 70ms); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(5) b.num { animation-delay: calc(var(--mo-stagger) * 5 + 70ms); }
[data-mo-enter="today"] .td-stats > .td-stat:nth-child(6) b.num { animation-delay: calc(var(--mo-stagger) * 6 + 70ms); }