/* ==========================================================
   SORYBOFAMILY — MOTION PLUS
   Papildo animations.css: perėjimai tarp puslapių, krepšelio
   puslapis, užsakymo laiko juosta, skaičių animacija.
   Pagarba "Reduce motion" – viskas išsijungia.
   ========================================================== */

/* ---------- 1. Perėjimas tarp puslapių ---------- */
html.sf-motion body{transition:opacity .2s ease}
html.sf-motion body.sf-leaving{opacity:0;pointer-events:none}

/* ---------- 2. Krepšelio puslapis ---------- */
@keyframes sfItemIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.98)}to{opacity:1;transform:none}}
html.sf-motion .cart-item{animation:sfItemIn .5s var(--sf-ease) backwards}
html.sf-motion .cart-item:nth-child(2){animation-delay:.06s}
html.sf-motion .cart-item:nth-child(3){animation-delay:.12s}
html.sf-motion .cart-item:nth-child(n+4){animation-delay:.18s}

/* pašalinama prekė: nuslysta į šoną ir sutraukiama */
.cart-item.sf-removing{
  opacity:0;transform:translate3d(48px,0,0) scale(.97);
  transition:opacity .28s ease,transform .3s var(--sf-ease);
  pointer-events:none;
}

/* kiekio pakeitimas */
@keyframes sfQtyPop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.sf-qty-pop{animation:sfQtyPop .3s var(--sf-ease)}
.cart-qty-btn:active:not(:disabled){transform:scale(.88)}

/* sumos pasikeitimas: skaičius „užslysta“ iš apačios */
@keyframes sfTick{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.sf-tick{display:inline-block;animation:sfTick .35s var(--sf-ease)}

/* ---------- 3. Užsakymo laiko juosta ---------- */
/* linija tarp žingsnių „užsipildo“ žalia, kai žingsnis atliktas */
.inf-timeline .plog-row:not(:last-child)::after{
  background:linear-gradient(#3ddc84,#3ddc84) top/100% 0 no-repeat,rgba(255,255,255,.08);
  transition:background-size .55s var(--sf-ease);
}
.inf-timeline .plog-row.is-done:not(:last-child)::after{background-size:100% 100%,auto}

/* varnelė „iššoka“, kai žingsnis tampa atliktas */
@keyframes sfDotDone{0%{transform:scale(.6)}55%{transform:scale(1.2)}100%{transform:scale(1)}}
.inf-timeline .plog-row.is-done .plog-dot{animation:sfDotDone .45s var(--sf-ease)}

/* aktyvaus žingsnio ikona trumpai pašoka */
@keyframes sfGlyph{0%{transform:translateY(0)}35%{transform:translateY(-5px)}70%{transform:translateY(1px)}100%{transform:none}}
.inf-timeline .plog-row.is-active .plog-glyph{animation:sfGlyph .6s var(--sf-ease)}

/* kai viskas baigta – žiedas švelniai pulsuoja vieną kartą */
@keyframes sfRingDone{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
.inf-timeline .plog-ring.is-done{animation:sfRingDone .6s var(--sf-ease)}

/* ---------- 4. Mygtukas su užkrovimu (po paspaudimo) ---------- */
.btn.sf-press{transform:scale(.97)}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.sf-motion body.sf-leaving{opacity:1}
  .cart-item.sf-removing{transition:none}
}