/* Animations */
/* ---- motion ---- */
.bar { overflow: visible; }
.bar .fill { overflow: hidden; }
.bar .fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--flash) 35%, transparent) 45%, transparent 60%); transform: translateX(-100%); animation: shimmer 1.6s ease-in-out 2; }
@keyframes shimmer { 0%, 35% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }
.bar .pending { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 6px, transparent 6px 12px); background-size: 34px 34px; animation: stripes 1.2s linear 3; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
@keyframes stripes { to { background-position: 34px 0; } }
.bar .tick { transition: background-color .4s ease, transform .4s ease; }
.bar .tick.reached { background: var(--accent); transform: scaleY(1.25); }
.bar-labels span.reached { color: var(--fg); font-weight: 600; }
.pin { position: absolute; top: -34px; transform: translateX(-50%); pointer-events: none; font: 700 var(--text-xs) var(--font-body); color: var(--on-accent); background: var(--accent); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); white-space: nowrap; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--accent); transform: translateX(-50%) rotate(45deg); z-index: -1; }
.hero { padding-top: 32px; }
.bar.with-pin { margin-top: 48px; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.marker { transition: background-color .3s ease, border-color .3s ease; }
.step.now .marker { animation: pulse 2s ease-in-out 2; }
.pop { animation: pop .5s var(--ease-out); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.flash-good { animation: flashGood 1s ease; } .flash-bad { animation: flashBad 1s ease; }
@keyframes flashGood { 0% { color: var(--good); text-shadow: 0 0 22px var(--good); } 100% { text-shadow: none; } }
@keyframes flashBad { 0% { color: var(--bad); text-shadow: 0 0 22px var(--bad); } 100% { text-shadow: none; } }
[role="tabpanel"].enter { animation: enter .35s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.log-item.new, .step.new { animation: enter .4s ease; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
/* reduced motion: nothing moves, state still changes */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 520px) {
  .log-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .log-item .note { grid-column: 1 / -1; }
  .goal { text-align: left; }
}