/* Standard animacji platformy. Klasa ew-ruch oddziela helper od starszych kopii .ew-*. */
:root {
  --ew-ease:cubic-bezier(.4,0,.2,1);
  --ew-dur:.35s;
  --ew-dur-stagger:.25s;
  --ew-stagger:.05s;
  --ew-slide:28px;
  --ew-rise:10px;
  --ew-dim:.45;
  --ew-ease-layout:cubic-bezier(.22,.65,.3,1);
  --ew-dur-layout:.65s;
}

/* Obsługiwany widok nie wraca do bazowego fadeIn po usunięciu klasy wjazdu. */
.view.ew-ruch { animation:none; }

:is(.ew-ruch.ew-wjazd-prawo, .ew-ruch .ew-wjazd-prawo) { --ew-od:var(--ew-slide); --ew-od-y:0px; }
:is(.ew-ruch.ew-wjazd-lewo, .ew-ruch .ew-wjazd-lewo) { --ew-od:calc(-1 * var(--ew-slide)); --ew-od-y:0px; }
:is(.ew-ruch.ew-wjazd-dol, .ew-ruch .ew-wjazd-dol) { --ew-od:0px; --ew-od-y:var(--ew-rise); }
.ew-ruch:is(.ew-wjazd-prawo, .ew-wjazd-lewo, .ew-wjazd-dol),
.ew-ruch :is(.ew-wjazd-prawo, .ew-wjazd-lewo, .ew-wjazd-dol) {
  overflow-x:clip;
  animation:ew-ruch-wjazd var(--ew-dur) var(--ew-ease) both;
}
@keyframes ew-ruch-wjazd {
  from { opacity:0; transform:translate(var(--ew-od), var(--ew-od-y)); }
  to { opacity:1; transform:none; }
}

/* Kaskada uruchamia się wyłącznie przy wejściu ekranu. */
.ew-kaskada > * { --ew-kolejnosc:0; }
:is(.ew-wjazd-prawo, .ew-wjazd-lewo, .ew-wjazd-dol) .ew-kaskada > *,
.ew-kaskada:is(.ew-wjazd-prawo, .ew-wjazd-lewo, .ew-wjazd-dol) > * {
  animation:ew-ruch-pojaw var(--ew-dur-stagger) var(--ew-ease) both;
  animation-delay:calc(var(--ew-kolejnosc, 0) * var(--ew-stagger));
}
.ew-kaskada > :nth-child(2) { --ew-kolejnosc:1; }
.ew-kaskada > :nth-child(3) { --ew-kolejnosc:2; }
.ew-kaskada > :nth-child(4) { --ew-kolejnosc:3; }
.ew-kaskada > :nth-child(n+5) { --ew-kolejnosc:4; }
@keyframes ew-ruch-pojaw {
  from { opacity:0; transform:translateY(var(--ew-rise)); }
  to { opacity:1; transform:none; }
}

.ew-pigulka { position:relative; isolation:isolate; }
.ew-pigulka > :not(.ew-pigulka-tlo) { position:relative; z-index:1; }
.ew-pigulka > .ew-pigulka-tlo {
  position:absolute; top:0; left:0; z-index:0; pointer-events:none;
  border-radius:999px; background:var(--color-card-bg, #fff); box-shadow:var(--shadow-sm, 0 1px 3px #0001);
  transition:transform var(--ew-dur) var(--ew-ease), width var(--ew-dur) var(--ew-ease), height var(--ew-dur) var(--ew-ease);
}
.ew-pigulka > .ew-pigulka-tlo[hidden] { display:none; }
.ew-pigulka > .ew-pigulka-tlo:not([hidden]) ~ :is([aria-pressed="true"], [aria-current="page"], [aria-selected="true"]) { background:transparent; box-shadow:none; }

.ew-ruch > .ew-ruch-warstwa {
  position:absolute; top:0; left:0; z-index:2; pointer-events:none; overflow:hidden;
  opacity:1; padding:0; margin:0; border:0;
}
.ew-ruch.ew-laduje > :not(.ew-ruch-warstwa) { opacity:var(--ew-dim); transition:opacity .2s; }
.ew-ruch.ew-laduje::before { content:none; animation:none; }
.ew-ruch .ew-laduje-pasek {
  position:absolute; top:0; left:0; right:0; z-index:2; height:3px;
  opacity:1; overflow:hidden; border-radius:999px; background:var(--color-accent-light, #c8dbc8);
}
.ew-laduje-pasek::before {
  content:''; display:block; height:100%; width:40%; border-radius:inherit;
  background:var(--color-accent, #8aaa8a); animation:ew-ruch-ladowanie 1s ease-in-out infinite alternate;
}
@keyframes ew-ruch-ladowanie { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.ew-ruch-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.ew-ruch.ew-czekanie { display:flex; align-items:center; gap:12px; animation:ew-ruch-pojaw .3s var(--ew-ease) .15s both; }
.ew-ruch .ew-kropki { display:inline-flex; gap:7px; }
.ew-ruch .ew-kropki i { width:10px; height:10px; border-radius:50%; background:var(--color-accent, #8aaa8a); animation:ew-ruch-kropka 1.1s ease-in-out infinite; }
.ew-ruch .ew-kropki i:nth-child(2) { animation-delay:.15s; }
.ew-ruch .ew-kropki i:nth-child(3) { animation-delay:.3s; }
@keyframes ew-ruch-kropka { 0%,80%,100% { transform:scale(.6); opacity:.35; } 40% { transform:scale(1); opacity:1; } }

.ew-ruch.ew-sukces > :is(i, svg, [data-ew-puchar]) { animation:ew-ruch-pop .65s ease-out; }
.ew-ruch .ew-ruch-konfetti {
  position:absolute; top:0; left:50%; width:5px; height:9px; background:#d4a04a;
  box-shadow:-80px 15px #8aaa8a,80px 20px #d4a04a,-40px 45px #d1aca1,50px 60px #8aaa8a,-120px 70px #d4a04a,120px 90px #d1aca1;
  animation:ew-ruch-konfetti 1.4s ease-out both; pointer-events:none;
}
@keyframes ew-ruch-pop { from { transform:scale(.5); } to { transform:scale(1); } }
@keyframes ew-ruch-konfetti { from { opacity:1; transform:translateY(-70px) rotate(-15deg); } to { opacity:0; transform:translateY(160px) rotate(25deg); } }

/* Optyczne podniesienie jest opcjonalne, bez narzucania wyglądu przyciskom i kartom. */
.ew-przycisk { transition:transform .18s var(--ew-ease); }
.ew-karta { transition:transform .2s var(--ew-ease); }
@media (hover:hover) {
  .ew-przycisk:not(:disabled):hover { transform:translateY(-1px); }
  .ew-karta:hover { transform:translateY(-3px); }
}

@media (prefers-reduced-motion:reduce) {
  .ew-ruch, .ew-ruch *, .ew-ruch::before, .ew-ruch::after, .ew-ruch *::before, .ew-ruch *::after,
  .ew-pigulka, .ew-pigulka *, .ew-przycisk, .ew-karta {
    animation:none!important; transition:none!important; scroll-behavior:auto!important;
  }
  .ew-ruch .ew-ruch-konfetti { display:none; }
  .ew-przycisk:hover, .ew-karta:hover { transform:none; }
}
