/* Libre motion layer — loaded after styles.css, driven by motion.js.
   Everything sits behind prefers-reduced-motion, so the app stays still for people who ask for that. */

:root {
  --m-spring: cubic-bezier(0.22, 1.2, 0.36, 1);   /* small overshoot, feels alive */
  --m-out: cubic-bezier(0.16, 1, 0.3, 1);          /* fast start, soft landing */
  --m-in: cubic-bezier(0.5, 0, 0.75, 0);
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Page changes ----------
     motion.js adds .m-enter (+ a direction) only when the route changes, so re-renders
     after a tap don't replay anything. The old fade from styles.css is switched off. */
  .app.enter > * { animation: none; }

  .app.m-enter > * {
    animation: m-rise 0.5s var(--m-out) both;
    animation-delay: calc(min(var(--m-i, 0), 8) * 45ms);
  }
  .app.m-enter.m-fwd > * { animation-name: m-from-right; }
  .app.m-enter.m-back > * { animation-name: m-from-left; }

  @keyframes m-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes m-from-right { from { opacity: 0; transform: translateX(28px); } }
  @keyframes m-from-left { from { opacity: 0; transform: translateX(-28px); } }

  /* Progress bars fill up and goal rings draw in when a page opens. */
  .app.m-enter .bar > span { animation: m-fill 0.9s var(--m-out) 0.15s both; }
  @keyframes m-fill { from { width: 0; } }

  /* Covers fade in once loaded instead of popping in. */
  img.m-img-wait { opacity: 0; }
  img.m-img-in { animation: m-img 0.45s ease-out both; }
  @keyframes m-img { from { opacity: 0; transform: scale(1.03); } }

  /* ---------- Touch feedback ---------- */
  .btn, .chip, .tag, .seg button, .genre-tile, .icon-btn, .task-check, .set-row, .more-item,
  .tabbar a, .tabbar button, .result, .rec, a.cover, .cover-link, .pill-on {
    transition: transform 0.18s var(--m-spring), background-color 0.2s, color 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active, .chip:active, .tag:active, .seg button:active, .genre-tile:active,
  .set-row:active, .more-item:active, .pill-on:active { transform: scale(0.96); }
  .icon-btn:active, .task-check:active { transform: scale(0.86); }
  .rec:active, a.cover:active, .cover-link:active, .result:active { transform: scale(0.98); }

  /* Tab bar: the newly active icon gives a little hop. */
  .tabbar .m-pop .ms, .tabbar .m-pop svg, .tabbar .m-pop .avatar { animation: m-pop 0.5s var(--m-spring); }
  @keyframes m-pop {
    0% { transform: scale(0.7); }
    55% { transform: scale(1.14); }
    100% { transform: scale(1); }
  }
  .tabbar .tabbar-press .ms, .tabbar .tabbar-press svg { transform: scale(0.85); transition: transform 0.12s; }

  /* Daily task ticked: the check bounces and the text settles. */
  .task.m-just-done .task-check { animation: m-tick 0.55s var(--m-spring); }
  .task.m-just-done .task-text { animation: m-strike 0.4s ease-out; }
  @keyframes m-tick {
    0% { transform: scale(0.6) rotate(-12deg); }
    60% { transform: scale(1.2) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
  }
  @keyframes m-strike { from { opacity: 0.4; transform: translateX(-4px); } }

  /* ---------- Bottom sheets ---------- */
  .sheet[open] { animation: m-sheet-in 0.42s var(--m-spring); }
  .sheet[open]::backdrop { animation: m-fade 0.3s ease-out; }
  .sheet.m-closing { animation: m-sheet-out 0.2s var(--m-in) forwards; }
  .sheet.m-closing::backdrop { animation: m-fade 0.2s ease-in reverse forwards; }
  @keyframes m-sheet-in { from { transform: translateY(60px); opacity: 0; } }
  @keyframes m-sheet-out { to { transform: translateY(60px); opacity: 0; } }
  @keyframes m-fade { from { opacity: 0; } }

  /* Inside a sheet, fields arrive one after another. */
  .sheet[open] .sheet-form > * { animation: m-rise 0.4s var(--m-out) both; }
  .sheet[open] .sheet-form > *:nth-child(2) { animation-delay: 40ms; }
  .sheet[open] .sheet-form > *:nth-child(3) { animation-delay: 80ms; }
  .sheet[open] .sheet-form > *:nth-child(4) { animation-delay: 120ms; }
  .sheet[open] .sheet-form > *:nth-child(n+5) { animation-delay: 160ms; }

  /* More menu springs from the tab bar. */
  .more-menu:not([hidden]) { animation: m-menu 0.32s var(--m-spring); transform-origin: bottom right; }
  @keyframes m-menu { from { opacity: 0; transform: translateY(10px) scale(0.92); } }

  /* ---------- Toast ---------- */
  .toast { transition: opacity 0.25s ease, transform 0.45s var(--m-spring); }

  /* ---------- Small delights ---------- */
  .skeleton, .g-cover.sk { animation: m-shimmer 1.4s ease-in-out infinite; }
  @keyframes m-shimmer { 50% { opacity: 0.45; } }

  /* Rating stars pop when chosen. */
  .stars .on, .star.on { animation: m-pop 0.45s var(--m-spring); }

  /* Favourites shelf: covers settle onto the shelf. */
  .app.m-enter .pf-fav .cover, .app.m-enter .fav-shelf .cover { animation: m-drop 0.6s var(--m-spring) both; }
  @keyframes m-drop { from { opacity: 0; transform: translateY(-16px) rotate(-3deg); } }
}