/* Domowe aplikacje — kopia z systemu projektowego. Nie edytuj tutaj: zmiany w systemie, potem podmień plik. */
/* Domowe aplikacje — ruch (do ruch.js). Korzysta z tokenów --surface, --surface-2. */
@keyframes ruch-in { from { opacity: 0; transform: translateY(10px); } }
.ruch-in { animation: ruch-in .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--ruch-i, 0) * 45ms); }

/* pasek, który rośnie od lewej (np. podział budżetu, postęp) */
@keyframes ruch-rosnij { from { transform: scaleX(0); } }
.ruch-rosnij { transform-origin: 0 50%; animation: ruch-rosnij .6s cubic-bezier(.2, .7, .2, 1) both; }

/* szkielety */
@keyframes ruch-blysk { to { background-position: -200% 0; } }
.ruch-szkielet { display: grid; gap: 12px; grid-column: 1 / -1; }
.ruch-szk { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: ruch-blysk 1.3s linear infinite; }
.ruch-szk-wiersz { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.ruch-szk-wiersz span { display: grid; gap: 7px; }
.ruch-szk-kolo { width: 40px; height: 40px; border-radius: 10px; }
.ruch-szk-kafle { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ruch-szk-kafel { display: grid; gap: 8px; justify-items: center; }
.ruch-szk-sq { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }

/* rozmyta okładka jako tło karty; nakładka z koloru karty trzyma kontrast tekstu */
.ruch-okladka { position: relative; isolation: isolate; overflow: hidden; }
.ruch-okladka::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--ruch-okladka) center / cover no-repeat;
  filter: blur(34px) saturate(1.6); opacity: .9; transition: opacity .5s; }
.ruch-okladka::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--surface) 68%, transparent); }

/* przejścia między widokami: krótkie przenikanie */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .ruch-in, .ruch-szk, .ruch-rosnij { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}