/* OWNER: Charlie. Book screen only: grid/agenda entrance, the now line breathing, status wash.
   Selectors are all book- prefixed or scoped under [data-mo-enter="book"]. Tokens only, no invented durations. */
@keyframes book-rise {
  from { opacity: 0; transform: translateY(var(--mo-rise)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes book-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes book-flash {
  from { background-color: color-mix(in srgb, var(--accent) 26%, transparent); }
}

[data-mo-enter="book"] .book-card,
[data-mo-enter="book"] .book-item {
  animation: book-rise var(--mo-base) var(--mo-ease-out) both;
}

/* stagger by stylist column on the grid, capped at 8 columns, whole window under 300ms.
   nth-child(N of .book-col) counts only among .book-col siblings: .book-grid also holds
   .book-corner, .book-colhead and .book-times divs, so plain nth-of-type would miscount. */
[data-mo-enter="book"] .book-col:nth-child(1 of .book-col) .book-card { animation-delay: 0ms; }
[data-mo-enter="book"] .book-col:nth-child(2 of .book-col) .book-card { animation-delay: var(--mo-stagger); }
[data-mo-enter="book"] .book-col:nth-child(3 of .book-col) .book-card { animation-delay: calc(var(--mo-stagger) * 2); }
[data-mo-enter="book"] .book-col:nth-child(4 of .book-col) .book-card { animation-delay: calc(var(--mo-stagger) * 3); }
[data-mo-enter="book"] .book-col:nth-child(5 of .book-col) .book-card { animation-delay: calc(var(--mo-stagger) * 4); }
[data-mo-enter="book"] .book-col:nth-child(6 of .book-col) .book-card { animation-delay: calc(var(--mo-stagger) * 5); }
[data-mo-enter="book"] .book-col:nth-child(7 of .book-col) .book-card { animation-delay: calc(var(--mo-stagger) * 6); }
[data-mo-enter="book"] .book-col:nth-child(n+8 of .book-col) .book-card { animation-delay: calc(var(--mo-stagger) * 7); }

/* agenda rows on the phone page, capped at the first 8 rows in each hour group. book-hourcol
   also holds .book-open, so nth-child(N of .book-item) is scoped the same way as the columns. */
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(1 of .book-item) { animation-delay: 0ms; }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(2 of .book-item) { animation-delay: var(--mo-stagger); }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(3 of .book-item) { animation-delay: calc(var(--mo-stagger) * 2); }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(4 of .book-item) { animation-delay: calc(var(--mo-stagger) * 3); }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(5 of .book-item) { animation-delay: calc(var(--mo-stagger) * 4); }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(6 of .book-item) { animation-delay: calc(var(--mo-stagger) * 5); }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(7 of .book-item) { animation-delay: calc(var(--mo-stagger) * 6); }
[data-mo-enter="book"] .book-hourcol .book-item:nth-child(n+8 of .book-item) { animation-delay: calc(var(--mo-stagger) * 7); }

/* the now line breathes. the one allowed infinite loop in the app: opacity only, slow, subtle */
.book-now {
  animation: book-breathe 2.4s var(--mo-ease) infinite;
}

/* status wash: motion-book.js toggles .book-flash when data-status changes on a card or agenda row */
.book-card.book-flash,
.book-item.book-flash {
  animation: book-flash var(--mo-fast) var(--mo-ease-out);
}

/* September 28 motion upgrade, Ronnie: "subtle... beautiful, magical and fun but not as extreme".
   Moment: a brand new appointment settles into its slot once, the reward for a real booking
   landing. js/motion-book.js tags it by appointment id across re renders (book.js redraws the
   whole grid on every DB change), so only a truly new id gets this, never a re render of one
   already on screen and never the batch entrance above (which book-rise already covers). */
@keyframes book-land {
  0% { opacity: 0; transform: translateY(calc(var(--mo-rise) * -1)) scale(.94); }
  60% { opacity: 1; transform: translateY(2px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.book-card.book-land,
.book-item.book-land {
  animation: book-land var(--mo-slow) var(--mo-spring) both;
}

/* Moment: the drag ghost. js/book.js creates a fresh .book-drag-ghost element once per drag
   (reused while the pointer moves, never recreated), so a plain animation on the class plays
   once on arrival with no script needed here. The held card lifts a hair, and the ghost's
   colour softens between a valid and an invalid drop target instead of snapping. */
@keyframes book-ghost-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.book-drag-ghost {
  animation: book-ghost-in var(--mo-base) var(--mo-ease-out);
  transition: border-color var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease);
}
.book-card[data-dragging] {
  transition: transform var(--mo-instant) var(--mo-ease);
  transform: scale(.98);
}