/* Step 5 (taste-motion + interaction-design). Tokens from site.css: --dur-fast 140ms, --dur-base 220ms, --ease-std, --ease-emph.
   Only transform and opacity. Every motion has one job:
   1 table lay    (focal)       home only, the five new books lay down once, 320ms, 60ms stagger. No page-wide reveal.
   2 cart pop     (feedback)    badge scales 1 -> 1.18 -> 1 when the count changes, 220ms.
   3 status line  (feedback)    "장바구니에 담았어요" / checkout errors fade in 4px, 180ms.
   4 progress fill(state)       library bars grow from 0 once on load, 420ms.
   5 press        (feedback)    buttons sink 1px, chips and tabs too, 140ms (site.css .btn:active already).
   Nothing loops. Reader panels/dialog keep their own motion in reader.css. */

/* 1 focal moment (home only): the five new books are laid on the oak table, once, 60ms apart (total 480ms).
   Animation starts when the shelf is inserted, content is visible by default (no hidden pre-state). */
body[data-page="home"] .table .book-card { animation: s5-lay 320ms var(--ease-emph) 1 both; }
body[data-page="home"] .table li:nth-child(2) .book-card { animation-delay: 60ms; }
body[data-page="home"] .table li:nth-child(3) .book-card { animation-delay: 120ms; }
body[data-page="home"] .table li:nth-child(4) .book-card { animation-delay: 180ms; }
body[data-page="home"] .table li:nth-child(5) .book-card { animation-delay: 240ms; }
@keyframes s5-lay { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 2 cart pop */
[data-cart-n].pop { animation: s5-pop var(--dur-base) var(--ease-emph) 1; }
@keyframes s5-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* 3 status line */
#buy-msg.msg-in, #co-msg.msg-in { animation: s5-msg-in 180ms var(--ease-emph) 1; }
@keyframes s5-msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 4 progress fill */
.bar-fill, .mini-track > span { transform-origin: left center; animation: s5-fill 420ms var(--ease-emph) 80ms 1 both; }
@keyframes s5-fill { from { transform: scaleX(0); } to { transform: none; } }

/* 5 press */
.chip:active, .tabs a:active, .pager a:active, .text-link:active { transform: translateY(1px); }
.chip, .tabs a, .pager a { transition: color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std); }

/* Reduced motion: presence only. Content appears, no transform or opacity animation, nothing waits for a fade. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .table .book-card, [data-cart-n].pop, #buy-msg.msg-in, #co-msg.msg-in, .bar-fill, .mini-track > span { animation: none; }
  .chip:active, .tabs a:active, .pager a:active, .text-link:active, .btn:active { transform: none; }
}