/* BROVO motion layer: loaded after styles.css. Quick springy presses, one orchestrated entrance per screen, numbers that react.
   Everything here is switched off by the existing data-motion="off" and prefers-reduced-motion rules in styles.css.
   Adapted from a motion pack by the DUNCE session (DUNCE's feel). */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.3, 1.5, .5, 1); }

button { transition: transform var(--t-press) var(--ease), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.cta:active { transform: scale(.97); }
.step button:active, .mini button:active { transform: scale(.9); background: var(--line); }
.rpe button:active, .seg button:active, .tabs button:active { transform: scale(.95); }
.link:active { opacity: .55; }
.cta:not([disabled]):hover { box-shadow: 0 8px 24px -8px var(--glow); }
.rpe button[aria-pressed="true"] { animation: pick .28s var(--spring); }
@keyframes pick { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

/* the tab indicator slides (--tab is set by paint() in app.js) */
.tabs button[aria-current="page"] { box-shadow: none; }
.tabs::before { content: ""; position: absolute; top: 0; left: 0; width: 25%; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px;
  transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform var(--t-slow) var(--ease); }

/* a screen arrives: its blocks rise in, one after another (the class is added only when the screen really changes) */
.screen.enter .upper > *, .screen.enter .lower > * { animation: rise .5s var(--ease) both; }
.screen.enter .upper > :nth-child(2), .screen.enter .lower > :nth-child(1) { animation-delay: 50ms; }
.screen.enter .upper > :nth-child(3), .screen.enter .lower > :nth-child(2) { animation-delay: 100ms; }
.screen.enter .upper > :nth-child(4), .screen.enter .lower > :nth-child(3) { animation-delay: 150ms; }
.screen.enter .upper > :nth-child(n+5), .screen.enter .lower > :nth-child(n+4) { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* numbers react when they change */
.gym-pulse .big, .big.bump { animation: bump .22s var(--spring); }
@keyframes bump { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
.dots i.on { animation: dotpop .45s var(--spring) both; }
.dots i.on:nth-child(2) { animation-delay: 40ms; } .dots i.on:nth-child(3) { animation-delay: 80ms; } .dots i.on:nth-child(4) { animation-delay: 120ms; }
.dots i.on:nth-child(5) { animation-delay: 160ms; } .dots i.on:nth-child(6) { animation-delay: 200ms; } .dots i.on:nth-child(7) { animation-delay: 240ms; }
@keyframes dotpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bar .t i { transform-origin: left; animation: grow .7s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }

/* the last three seconds of rest pulse */
.clock.warn { animation: tick 1s ease-in-out infinite; color: var(--accent); }
@keyframes tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.toast { animation: toastIn .38s var(--spring) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.splash { animation: splashIn .5s var(--ease) both; }
@keyframes splashIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* screens slide as one piece while the tab bar stays put (view transitions; the keyframes below only run in browsers that have them) */
.screen { view-transition-name: screen; }
/* The tab bar is its own layer and shows live: otherwise the page snapshot freezes the orange line at the old tab and it appears to jump back before sliding. */
.tabs { view-transition-name: tabs; }
::view-transition-group(tabs), ::view-transition-image-pair(tabs), ::view-transition-new(tabs) { animation: none; }
::view-transition-old(tabs) { display: none; }
::view-transition-group(screen), ::view-transition-image-pair(screen) { animation-duration: .34s; animation-timing-function: var(--ease); }
::view-transition-old(screen), ::view-transition-new(screen) { animation-duration: .34s; animation-timing-function: var(--ease); animation-fill-mode: both; mix-blend-mode: normal; }
html[data-vt="fwd"]::view-transition-old(screen) { animation-name: vt-out-left; }  html[data-vt="fwd"]::view-transition-new(screen) { animation-name: vt-in-right; }
html[data-vt="back"]::view-transition-old(screen) { animation-name: vt-out-right; } html[data-vt="back"]::view-transition-new(screen) { animation-name: vt-in-left; }
html[data-vt="fade"]::view-transition-old(screen) { animation-name: vt-fade-out; }  html[data-vt="fade"]::view-transition-new(screen) { animation-name: vt-fade-in; }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-32px); } } @keyframes vt-in-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(32px); } }  @keyframes vt-in-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } }
html[data-motion="off"]::view-transition-group(*), html[data-motion="off"]::view-transition-old(*), html[data-motion="off"]::view-transition-new(*) { animation: none !important; }

/* empty progress: a ghost chart that draws itself */
.emptyhero { background: var(--surface); border-radius: 22px; padding: 1.4rem 1rem 1.2rem; display: grid; gap: var(--s2); text-align: center; justify-items: center; }
.emptyhero svg { width: 100%; max-width: 15rem; height: auto; }
.emptyhero .ghostline { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.emptyhero circle { fill: var(--hi); opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .emptyhero .ghostline { animation: draw 1.2s var(--ease) .15s both; } .emptyhero circle { animation: dotpop .5s var(--spring) 1.05s both; }
  @keyframes draw { from { stroke-dashoffset: 1; } }
}