/*
 * All animation. Three layers:
 *   1. View Transitions — every re-render; each .view--* is its own group so cards slide into new positions,
 *      and changing day slides the session and check-in cards sideways (html[data-transition]).
 *   2. One-shot entrances — .is-booting (first load), .is-entering / .is-bumped / .chart--draw (set by FLASH keys).
 *   3. Press feedback — :active scale here, plus pulse() on the control after the re-render (lib/motion.js).
 * Everything is switched off for prefers-reduced-motion at the bottom.
 */

/* ---------- 1. view transitions ---------- */
.view--login { view-transition-name: login; }
.view--header { view-transition-name: header; }
.view--stats { view-transition-name: stats; }
.view--hints { view-transition-name: hints; }
.view--session { view-transition-name: session; }
.view--checkin { view-transition-name: checkin; }
.view--calendar { view-transition-name: calendar; }
.view--progress { view-transition-name: progress; }
.view--body { view-transition-name: body; }
.view--account { view-transition-name: account; }
.view--plan { view-transition-name: plan; }
.view--safety { view-transition-name: safety; }

::view-transition-group(*) {
  animation-duration: var(--motion-medium);
  animation-timing-function: var(--ease-out);
}
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--motion-fast);
}

html[data-transition="forward"]::view-transition-old(session),
html[data-transition="forward"]::view-transition-old(checkin) { animation: slide-out-left var(--motion-medium) var(--ease-out) both; }
html[data-transition="forward"]::view-transition-new(session),
html[data-transition="forward"]::view-transition-new(checkin) { animation: slide-in-right var(--motion-medium) var(--ease-out) both; }
html[data-transition="back"]::view-transition-old(session),
html[data-transition="back"]::view-transition-old(checkin) { animation: slide-out-right var(--motion-medium) var(--ease-out) both; }
html[data-transition="back"]::view-transition-new(session),
html[data-transition="back"]::view-transition-new(checkin) { animation: slide-in-left var(--motion-medium) var(--ease-out) both; }

/* signing in or out swaps the whole page */
html[data-transition="forward"]::view-transition-old(login) { animation: shrink-away var(--motion-medium) var(--ease-out) both; }
html[data-transition="back"]::view-transition-new(login) { animation: rise-in var(--motion-slow) var(--ease-out) both; }

/* ---------- 2. entrances ---------- */
.is-booting .view {
  animation: rise-in var(--motion-slow) var(--ease-out) both;
  animation-delay: calc(var(--order, 0) * var(--motion-stagger));
}
.is-booting .day-cell { animation: pop-in var(--motion-medium) var(--ease-spring) both; animation-delay: calc(var(--motion-slow) * .6); }

.is-entering { animation: rise-in var(--motion-medium) var(--ease-out) both; }
.message.is-entering { animation: slide-down var(--motion-medium) var(--ease-out) both; }
.demos.is-entering { animation: none; }
.demos.is-entering .demo {
  animation: pop-in var(--motion-medium) var(--ease-spring) both;
  animation-delay: calc(var(--index, 0) * var(--motion-stagger));
}
.checkin-summary__icon.is-entering { animation: check-pop var(--motion-slow) var(--ease-spring) both; }
.day-cell.is-entering { animation: pop-in var(--motion-slow) var(--ease-spring) both; }
.lab.is-entering { animation: slide-down var(--motion-medium) var(--ease-out) both; }
.stat.is-bumped b { display: inline-block; animation: bump var(--motion-slow) var(--ease-spring); }

.chart--draw .chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line var(--motion-slow) var(--ease-out) forwards;
  animation-duration: calc(var(--motion-slow) * 1.6);
}
.chart--draw .chart__point {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop-in var(--motion-medium) var(--ease-spring) both;
  animation-delay: calc(var(--motion-slow) + var(--index, 0) * var(--motion-stagger));
}
.chart__active { transition: cx var(--motion-fast) var(--ease-out), cy var(--motion-fast) var(--ease-out); }
.chart__crosshair { transition: x1 var(--motion-fast) var(--ease-out), x2 var(--motion-fast) var(--ease-out); }

.sync-dot--syncing { animation: breathe 1s ease-in-out infinite; }
.login__mark { animation: float 3.2s ease-in-out infinite; }

/* ---------- 3. press feedback ---------- */
button { transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); }
button:not(:disabled):active { transform: scale(.96); }
.text-input, .text-area { transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.text-input:focus, .text-area:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.day-cell:not(:disabled):hover { transform: scale(1.08); }

/* ---------- keyframes ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes check-pop { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes bump { 0% { transform: none; } 40% { transform: translateY(-6px) scale(1.18); } 100% { transform: none; } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes slide-out-left { to { opacity: 0; transform: translateX(-40px); } }
@keyframes slide-out-right { to { opacity: 0; transform: translateX(40px); } }
@keyframes shrink-away { to { opacity: 0; transform: scale(.92); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after,
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}