/* Animowany przebieg zamowienia z nadrukiem (template-parts/proces-nadruku.php).

   Zasada: kazdy stan kroku jest zwyklym stylem pod [data-krok], a animacje
   tylko do niego dochodza (fill-mode both). Bez JS i przy ograniczonym ruchu
   scena stoi na kroku 4 (fartuch z logo), a pod nia jest pelna lista krokow.

   Krzywe: wejscie ease-out, przesuniecie po scenie ease-in-out. Ruch tylko
   transform i opacity. Krok trwa 2,6 s, wysylka 3,2 s (proces.js). */
.fr-pn{
  --pn-out:cubic-bezier(0.23,1,0.32,1);
  --pn-inout:cubic-bezier(0.77,0,0.175,1);
  --pn-kreska:var(--accent-on-dark);
  --pn-jasny:var(--ivory);
  --pn-zloto:var(--gold);
  display:grid;gap:20px 48px;align-items:center;margin-top:28px;
}
@media (min-width:900px){
  .fr-pn{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto}
  .fr-pn__scena{grid-column:1;grid-row:1}
  .fr-pn__os{grid-column:1;grid-row:2}
  .fr-pn__kroki{grid-column:2;grid-row:1 / span 2}
}
.fr-pn__scena{max-width:540px;width:100%;margin:0 auto}
.fr-pn__svg{display:block;width:100%;height:auto;overflow:visible}
.fr-pn__svg *{vector-effect:non-scaling-stroke}

/* Rysunek */
.fr-pn__korpus,.fr-pn__szelka,.fr-pn__wiazanie,.fr-pn__kieszen{fill:none;stroke:var(--pn-kreska);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.fr-pn__korpus{fill:rgba(253,251,246,.04)}
.fr-pn__logo-kontur circle,.fr-pn__logo-kontur path{fill:none;stroke:var(--pn-zloto);stroke-width:1.4;stroke-dasharray:3 3}
.fr-pn__logo-pelne circle{fill:var(--pn-jasny)}
.fr-pn__logo-pelne path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.fr-pn__ramka rect{fill:none;stroke:var(--pn-zloto);stroke-width:1.2;stroke-dasharray:6 4}
.fr-pn__skan{stroke:var(--pn-zloto);stroke-width:1.6}
.fr-pn__ok circle,.fr-pn__przycisk-ok{fill:var(--pn-zloto)}
.fr-pn__ok path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fr-pn__plik path{fill:var(--ink);stroke:var(--pn-jasny);stroke-width:1.4;stroke-linejoin:round}
.fr-pn__plik circle{fill:var(--pn-jasny)}
.fr-pn__plik g path{fill:none;stroke:var(--ink);stroke-width:2.2}
.fr-pn__mail>rect{fill:var(--pn-jasny);stroke:none}
.fr-pn__mail-klapa,.fr-pn__mail-fartuch{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linejoin:round}
.fr-pn__mail-logo{fill:var(--ink)}
.fr-pn__przycisk rect{fill:var(--ink)}
.fr-pn__przycisk-tekst{fill:var(--ivory);font:600 10px var(--f-body);text-anchor:middle}
.fr-pn__przycisk-ok{fill:none;stroke:var(--ivory);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fr-pn__paczka rect,.fr-pn__paczka path{fill:none;stroke:var(--pn-zloto);stroke-width:1.6;stroke-linejoin:round}
.fr-pn__automat rect,.fr-pn__automat path{fill:none;stroke:var(--pn-kreska);stroke-width:1.4}
.fr-pn__sms rect{fill:var(--pn-zloto)}
.fr-pn__sms text{fill:var(--ink);font:700 12px var(--f-body);text-anchor:middle}
.fr-pn__sms .fr-pn__sms-maly{font-weight:400;font-size:9px}

/* Polozenia w scenie (transformacje w jednostkach rysunku). */
.fr-pn__fartuch{transform-origin:180px 160px}
.fr-pn__plik{transform:translate(160px,72px)}
.fr-pn__mail{transform:translate(226px,128px)}
.fr-pn__paczka{transform:translate(150px,222px)}
.fr-pn__logo-pelne,.fr-pn__logo-kontur,.fr-pn__ramka,.fr-pn__ok,.fr-pn__automat,.fr-pn__przycisk-ok{transform-box:fill-box;transform-origin:center}

/* Stany koncowe kazdego kroku. Wszystko domyslnie schowane. */
.fr-pn__plik,.fr-pn__mail,.fr-pn__ramka,.fr-pn__ok,.fr-pn__logo-kontur,.fr-pn__logo-pelne,
.fr-pn__paczka,.fr-pn__automat,.fr-pn__sms,.fr-pn__przycisk-ok{opacity:0}

[data-krok="1"] .fr-pn__logo-kontur{opacity:1}
[data-krok="2"] .fr-pn__logo-kontur,[data-krok="2"] .fr-pn__ok{opacity:1}
[data-krok="3"] .fr-pn__logo-kontur,[data-krok="3"] .fr-pn__ok,[data-krok="3"] .fr-pn__mail,[data-krok="3"] .fr-pn__przycisk-ok{opacity:1}
[data-krok="3"] .fr-pn__przycisk-tekst{opacity:0}
[data-krok="3"] .fr-pn__przycisk rect{fill:var(--pn-zloto)}
[data-krok="4"] .fr-pn__logo-pelne{opacity:1}
[data-krok="5"] .fr-pn__fartuch{opacity:0;transform:translate(-30px,62px) scale(.3)}
[data-krok="5"] .fr-pn__automat,[data-krok="5"] .fr-pn__sms{opacity:1}
[data-krok="5"] .fr-pn__paczka{opacity:1;transform:translate(282px,196px) scale(.42)}

/* Ruch. Tylko gdy JS wlaczyl scene i nikt nie prosil o mniej ruchu. */
@media (prefers-reduced-motion:no-preference){
  .fr-pn--ruch[data-krok="1"] .fr-pn__plik{animation:pn-plik 1.9s var(--pn-inout) both}
  .fr-pn--ruch[data-krok="1"] .fr-pn__logo-kontur{animation:pn-pojaw 400ms var(--pn-out) 1.5s both}

  .fr-pn--ruch[data-krok="2"] .fr-pn__ramka{animation:pn-ramka 2.2s var(--pn-out) both}
  .fr-pn--ruch[data-krok="2"] .fr-pn__skan{animation:pn-skan 700ms var(--pn-inout) 200ms 2 alternate both}
  .fr-pn--ruch[data-krok="2"] .fr-pn__ok{animation:pn-pojaw 350ms var(--pn-out) 1.6s both}

  .fr-pn--ruch[data-krok="3"] .fr-pn__mail{animation:pn-mail 700ms var(--pn-out) both}
  .fr-pn--ruch[data-krok="3"] .fr-pn__przycisk-tekst{animation:pn-znikaj 200ms ease 1.5s both}
  .fr-pn--ruch[data-krok="3"] .fr-pn__przycisk rect{animation:pn-wcisniety 400ms var(--pn-out) 1.3s both}
  .fr-pn--ruch[data-krok="3"] .fr-pn__przycisk-ok{animation:pn-pojaw 300ms var(--pn-out) 1.6s both}

  .fr-pn--ruch[data-krok="4"] .fr-pn__logo-kontur{animation:pn-znikaj 500ms ease 500ms both}
  .fr-pn--ruch[data-krok="4"] .fr-pn__logo-pelne{animation:pn-nadruk 900ms var(--pn-out) 300ms both}
  .fr-pn--ruch[data-krok="4"] .fr-pn__mail{animation:pn-mail-wyjdz 400ms var(--pn-inout) both}

  .fr-pn--ruch[data-krok="5"] .fr-pn__fartuch{animation:pn-zloz 1s var(--pn-inout) both}
  .fr-pn--ruch[data-krok="5"] .fr-pn__paczka{animation:pn-paczka 2.2s var(--pn-inout) 600ms both}
  .fr-pn--ruch[data-krok="5"] .fr-pn__automat{animation:pn-pojaw 500ms var(--pn-out) 1.2s both}
  .fr-pn--ruch[data-krok="5"] .fr-pn__sms{animation:pn-sms 400ms var(--pn-out) 2.6s both}
}

@keyframes pn-pojaw{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes pn-znikaj{to{opacity:0}}
@keyframes pn-plik{
  0%{opacity:0;transform:translate(300px,18px)}
  15%{opacity:1;transform:translate(292px,24px)}
  75%{opacity:1;transform:translate(160px,72px) scale(.9)}
  100%{opacity:0;transform:translate(160px,72px) scale(.8)}
}
@keyframes pn-ramka{0%{opacity:0;transform:scale(1.12)}20%{opacity:1;transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes pn-skan{from{transform:translateY(0)}to{transform:translateY(48px)}}
@keyframes pn-mail{from{opacity:0;transform:translate(280px,140px)}to{opacity:1;transform:translate(226px,128px)}}
@keyframes pn-mail-wyjdz{from{opacity:1;transform:translate(226px,128px)}to{opacity:0;transform:translate(280px,128px)}}
@keyframes pn-wcisniety{0%{fill:var(--ink)}40%{fill:var(--ink)}100%{fill:var(--gold)}}
@keyframes pn-nadruk{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes pn-zloz{from{opacity:1;transform:none}70%{opacity:1}to{opacity:0;transform:translate(-30px,62px) scale(.3)}}
@keyframes pn-paczka{
  0%{opacity:0;transform:translate(150px,222px) scale(.94)}
  15%{opacity:1;transform:translate(150px,222px) scale(1)}
  40%{opacity:1;transform:translate(150px,222px)}
  100%{opacity:1;transform:translate(282px,196px) scale(.42)}
}
@keyframes pn-sms{from{opacity:0;transform:translate(276px,100px) scale(.95)}to{opacity:1;transform:translate(276px,92px)}}

/* Os czasu */
.fr-pn__os{display:flex;align-items:center;gap:12px;max-width:540px;width:100%;margin:0 auto}
.fr-pn__os-pasek{flex:1;height:2px;background:rgba(198,185,142,.25);overflow:hidden}
.fr-pn__os-wypelnienie{display:block;height:100%;background:var(--pn-zloto);transform-origin:left;transform:scaleX(1);transition:transform 600ms var(--pn-inout)}
.fr-pn[data-krok="1"] .fr-pn__os-wypelnienie{transform:scaleX(.2)}
.fr-pn[data-krok="2"] .fr-pn__os-wypelnienie{transform:scaleX(.4)}
.fr-pn[data-krok="3"] .fr-pn__os-wypelnienie{transform:scaleX(.6)}
.fr-pn[data-krok="4"] .fr-pn__os-wypelnienie{transform:scaleX(.8)}
.fr-pn__os-podpis{font-size:13px;color:var(--accent-on-dark);white-space:nowrap}

/* Lista krokow. Bez ruchu widac wszystkie opisy; z ruchem tylko biezacy. */
.fr-band--ciemny .fr-pn__kroki{list-style:none;margin:0;padding:0;counter-reset:none}
.fr-pn__krok{border-top:1px solid rgba(198,185,142,.22);padding:12px 0}
.fr-pn__krok:last-child{border-bottom:1px solid rgba(198,185,142,.22)}
.fr-pn__krok-przycisk{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;color:var(--ivory)}
.fr-pn__krok-przycisk:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.fr-pn__nr{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--pn-zloto);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent-on-dark);transition:background-color 200ms var(--pn-out),color 200ms var(--pn-out)}
.fr-pn__tytul{font-family:var(--f-display);font-size:19px;line-height:1.3}
.fr-band--ciemny .fr-pn__opis{margin:8px 0 0 44px;font-size:15px;line-height:1.55;color:var(--accent-on-dark)}
.fr-pn__krok.is-teraz .fr-pn__nr{background:var(--pn-zloto);color:var(--ink)}
.fr-pn--ruch .fr-pn__krok:not(.is-teraz) .fr-pn__opis{display:none}
.fr-pn--ruch .fr-pn__krok:not(.is-teraz) .fr-pn__tytul{color:var(--accent-on-dark)}
@media (prefers-reduced-motion:reduce){
  .fr-pn--ruch .fr-pn__krok:not(.is-teraz) .fr-pn__opis{display:block}
}

/* Link z karty produktu */
.fr-pn-link{display:inline-block;margin:4px 0 14px;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fr-pn-link[hidden]{display:none}