/* Healing House motion, shared by every app screen.
   Three layers: page to page (cross-document view transitions), state to state
   (same-document view transitions started by motion.js), and small feedback on controls.
   Everything sits behind prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --m-fast: 160ms;
    --m-mid: 320ms;
    --m-slow: 520ms;
  }

  /* ---- page to page: the header stays, the page underneath rises in ---- */
  @view-transition { navigation: auto; }
  .shell { view-transition-name: shell; }
  ::view-transition-old(root) { animation: m-out 220ms ease-in both; }
  ::view-transition-new(root) { animation: m-in var(--m-slow) var(--m-ease) both; }

  /* ---- first paint: the page's blocks arrive one after another ---- */
  .canvas > * { animation: m-rise var(--m-slow) var(--m-ease) both; }
  .canvas > :nth-child(2) { animation-delay: 60ms; }
  .canvas > :nth-child(3) { animation-delay: 120ms; }
  .canvas > :nth-child(4) { animation-delay: 180ms; }
  .canvas > :nth-child(5) { animation-delay: 240ms; }

  /* ---- state to state: the chosen thing slides to its new place ---- */
  ::view-transition-group(*) { animation-duration: var(--m-mid); animation-timing-function: var(--m-ease); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
  .days button[aria-pressed="true"] { view-transition-name: m-day; }
  .rooms button[aria-pressed="true"] { view-transition-name: m-room; }
  .lens button[aria-pressed="true"] { view-transition-name: m-len; }
  .times .slot[aria-pressed="true"] { view-transition-name: m-time; }
  .seg button[aria-pressed="true"] { view-transition-name: m-seg; }
  .queue button[aria-current="true"] { view-transition-name: m-queue; }
  .areas a[aria-current="page"] { view-transition-name: m-area; }
  .summary, .detail, .sent, #form { view-transition-name: m-main-card; }
  .toast { view-transition-name: m-toast; }

  /* ---- things that appear: toast, popover ---- */
  .toast { transition: opacity var(--m-mid) var(--m-ease), translate var(--m-mid) var(--m-ease), display var(--m-mid) allow-discrete; }
  @starting-style { .toast { opacity: 0; translate: 0 16px; } }
  .pop { transition: opacity var(--m-fast) ease-out, scale var(--m-mid) var(--m-ease), display var(--m-fast) allow-discrete; transform-origin: top left; }
  @starting-style { .pop { opacity: 0; scale: .96; } }
  .err:not(:empty) { animation: m-rise var(--m-mid) var(--m-ease) both; }

  /* ---- feedback on controls ---- */
  .days button, .rooms button, .lens button, .slot, .seg button, .chips span, .ghost, .tile, .bar, .queue li button, .areas a, .switch i {
    transition: background-color var(--m-fast), color var(--m-fast), border-color var(--m-fast), transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast);
  }
  .days button:active, .rooms button:active, .lens button:active, .slot:active, .seg button:active, .chips label:active span, .ghost:active, .queue li button:active { transform: scale(.97); }
  .tile:hover { transform: translateY(-2px); }
  /* bars fill once on arrival, not again on every re-render */
  html:not(.m-ready) .prog i { animation: m-grow 900ms var(--m-ease) both; transform-origin: left center; }
  .instant::before { animation: m-pulse 2.4s ease-in-out infinite; }
  .nowline span { animation: m-pulse 2.4s ease-in-out infinite; }
  .changed input { animation: m-flash 600ms ease-out; }
}

@keyframes m-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes m-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes m-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes m-grow { from { transform: scaleX(0); } }
@keyframes m-pulse { 50% { opacity: .55; } }
@keyframes m-flash { from { background: #fff; } }