/* Filmy instruktażowe (Kambit_Cennik_Filmy) — animacje SVG sterowane atrybutem data-stan na .kf-scena. */
.kf{
  --kf-papier:#fff; --kf-tlo:#f2f1ed; --kf-panel:#fafaf8; --kf-atrament:#17171c; --kf-slaby:#5c5c68;
  --kf-kreska:#d6d4cc; --kf-cyan:#0091d0; --kf-magenta:#d6006e; --kf-zolty:#f5c400; --kf-scena:#e8e6e0;
  color:var(--kf-atrament); max-width:1060px; margin:0 auto; font-size:15px; line-height:1.55;
}
.kf *{box-sizing:border-box}
/* układ zależy od szerokości ZAKŁADKI, nie ekranu — zakładka na karcie ma ok. 600 px nawet na dużym monitorze */
.kf{container-type:inline-size}
.kf-scena{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@container (min-width:900px){.kf-scena{grid-template-columns:220px 1fr;gap:18px}}

.kf-kroki{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kf-kroki li{margin:0;padding:0;list-style:none}
.kf-kroki button{
  width:100%;text-align:left;background:none;border:0;border-left:2px solid var(--kf-kreska);border-radius:0;
  padding:8px 12px;cursor:pointer;color:var(--kf-slaby);font:inherit;font-size:14px;display:flex;gap:10px;align-items:baseline;
  transition:border-color .2s,color .2s,background .2s
}
.kf-kroki button:hover{background:var(--kf-panel);color:var(--kf-atrament)}
.kf-kroki button:focus-visible,.kf-sterowanie button:focus-visible{outline:2px solid var(--kf-cyan);outline-offset:2px}
.kf-kroki button[aria-current="true"]{border-left-color:var(--kf-cyan);color:var(--kf-atrament);font-weight:600;background:var(--kf-panel)}
.kf-nr{font-size:11px;font-variant-numeric:tabular-nums;opacity:.65;width:18px;flex:none}
@container (max-width:899px){
  .kf-kroki{flex-direction:row;overflow-x:auto;gap:0;scrollbar-width:thin}
  .kf-kroki button{border-left:0;border-bottom:2px solid var(--kf-kreska);white-space:nowrap}
  .kf-kroki button[aria-current="true"]{border-bottom-color:var(--kf-cyan)}
}

.kf-ekran{background:var(--kf-panel);border:1px solid var(--kf-kreska);border-radius:3px;overflow:hidden;min-width:0}
.kf-plotno{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:440/330;background:var(--kf-scena)}
.kf-podpis{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--kf-kreska);min-height:92px}
.kf-podpis p{margin:0;max-width:66ch}
.kf-licznik{font-size:11px;color:var(--kf-slaby);font-variant-numeric:tabular-nums;flex:none;padding-top:4px}
.kf-sterowanie{display:flex;gap:8px;padding:8px 14px;border-top:1px solid var(--kf-kreska);flex-wrap:wrap}
.kf-sterowanie button{font:inherit;font-size:13px;background:#fff;color:var(--kf-atrament);border:1px solid var(--kf-kreska);border-radius:2px;padding:4px 11px;cursor:pointer;line-height:1.4}
.kf-sterowanie button:hover{border-color:var(--kf-slaby)}
.kf-sterowanie .kf-graj{border-color:var(--kf-cyan);color:var(--kf-cyan);font-weight:600;min-width:92px}
.kf-transkrypcja{margin-top:14px;border-top:1px solid var(--kf-kreska);padding-top:10px}
.kf-transkrypcja summary{cursor:pointer;font-weight:600}
.kf-transkrypcja ol{margin:10px 0 0;padding-left:20px}
.kf-transkrypcja li{margin-bottom:6px}

/* elementy rysunku */
.kf-ark{fill:var(--kf-papier)}
.kf-krawedz{fill:none;stroke:#b9b7b0;stroke-width:.6}
.kf-druk-j{fill:#e6e6ec}.kf-druk-s{fill:#d9d9e0}.kf-druk-c{fill:#c9c9d2}.kf-atrament{fill:var(--kf-atrament);opacity:.72}
.kf-znaczniki path{stroke:var(--kf-kreska);stroke-width:.5;fill:none;opacity:.55}
.kf-wymiar{stroke:var(--kf-slaby);stroke-width:.7;fill:none}
.kf-wymiar.kf-akcent{stroke:var(--kf-cyan)}
.kf-opis{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:10px;fill:var(--kf-slaby)}
.kf-mocny{fill:var(--kf-cyan);font-weight:600}
.kf-tlo-opisu{fill:var(--kf-scena)}
.kf-kafel{fill:var(--kf-papier);stroke:#b9b7b0;stroke-width:.6}
.kf-w-nadruk .kf-kafel{fill:var(--kf-atrament);stroke:none}
.kf-w-nadruk .kf-opis{fill:#fafaf8}
.kf-pod{fill:none;stroke:var(--kf-slaby);stroke-width:.8;stroke-dasharray:3 3}
.kf-szew{stroke:var(--kf-magenta);stroke-width:1;stroke-dasharray:5 3;opacity:0;transition:opacity .4s ease}

.kf-panel{transition:transform .9s cubic-bezier(.62,.04,.28,1)}
.kf-rewers{opacity:0;transition:opacity .35s ease .5s}
.kf-warstwa{opacity:0;transition:opacity .4s ease}

/* ── stany: wspólne ─────────────────────────────────────────────── */
.kf-scena:is([data-stan="a4"],[data-stan="podzial"],[data-stan="papier"],[data-stan="nadruk"]) .kf-w-otwarte{opacity:1}
.kf-scena[data-stan="a4"] .kf-w-dol{opacity:1}
.kf-scena[data-stan="papier"] .kf-w-papier{opacity:1}
.kf-scena[data-stan="nadruk"] .kf-w-nadruk{opacity:1}
.kf-scena[data-stan="podzial"] :is(.kf-szew1,.kf-szew2){opacity:1}
.kf-scena[data-stan="zgiecie1"] .kf-szew1,.kf-scena[data-stan="zgiecie2"] .kf-szew2{opacity:1}
.kf-scena:is([data-stan="zgiecie1"],[data-stan="zgiecie2"]) .kf-w-po1{opacity:1}
.kf-scena[data-stan="zlozone"] .kf-w-zlozone{opacity:1}
.kf-scena:is([data-stan="zgiecie1"],[data-stan="zgiecie2"],[data-stan="zlozone"]) .kf-panelP{transform:scaleX(-1)}
.kf-scena:is([data-stan="zgiecie2"],[data-stan="zlozone"]) .kf-panelL{transform:scaleX(-1)}
.kf-scena:is([data-stan="zgiecie2"],[data-stan="zlozone"]) .kf-rewersL{opacity:1}

/* ── składanie w C: składka 97 mm po zgięciu leży NA środkowej i pokazuje rewers ── */
.kf--skladanie-c .kf-scena:is([data-stan="zgiecie1"],[data-stan="zgiecie2"],[data-stan="zlozone"]) .kf-rewersP{opacity:1}

/* ── harmonijka: prawa składka chowa się POD spód — widać tylko jej zarys ── */
.kf--harmonijka-z .kf-scena:is([data-stan="zgiecie1"],[data-stan="zgiecie2"],[data-stan="zlozone"]) .kf-w-pod{opacity:1}
.kf--harmonijka-z .kf-scena:is([data-stan="zgiecie1"],[data-stan="zgiecie2"],[data-stan="zlozone"]) .kf-panelP{opacity:0;transition:transform .9s cubic-bezier(.62,.04,.28,1),opacity .2s ease .7s}

/* ── wizytówki ─────────────────────────────────────────────────────────────── */
.kfw-pas-spadu{fill:var(--kf-magenta);opacity:0;transition:opacity .4s ease}
.kfw-obrys{fill:none;stroke:#b9b7b0;stroke-width:.6}
.kfw-linia-ciecia{fill:none;stroke:var(--kf-magenta);stroke-width:1;stroke-dasharray:5 3}
.kfw-linia-bezp{fill:none;stroke:#1f9d55;stroke-width:1;stroke-dasharray:3 3}
.kfw-leg-spad,.kfw-leg-ciecie{fill:var(--kf-magenta)}
.kfw-leg-bezp{fill:#1f9d55}
.kfw-obrys-maski{stroke:#b9b7b0;stroke-width:.8}
.kfw-poz{transition:transform .8s cubic-bezier(.62,.04,.28,1),opacity .4s ease}
.kfw-ze-spadem,.kfw-przyciete,.kfw-tyl,.kfw-blysk,.kfw-lakier-blysk,.kfw-napis-przod,.kfw-napis-tyl{transition:opacity .3s ease}
.kfw-ze-spadem{opacity:0}
.kfw-tyl,.kfw-napis-tyl,.kfw-blysk,.kfw-lakier-blysk{opacity:0}
.kfw-blysk,.kfw-lakier-blysk rect{transform-box:view-box}

:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="format"] .kfw-ze-spadem{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="format"] .kfw-przyciete{opacity:0}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="format"] .kfw-pas-spadu{opacity:.28}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="format"] .kfw-linie{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="papier"] .kf-w-papier{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="nadruk"] .kf-w-nadruk,
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="nadruk"] .kfw-podpis-strony{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="nadruk"] .kfw-obrot{animation:kfw-obrot 4.8s ease-in-out infinite}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="nadruk"] :is(.kfw-tyl,.kfw-napis-tyl){animation:kfw-tyl 4.8s steps(1,end) infinite}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="nadruk"] :is(.kfw-przyciete .kfw-przod,.kfw-napis-przod){animation:kfw-przod 4.8s steps(1,end) infinite}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena:is([data-stan="folia"],[data-stan="lakier"]) .kfw-w-uszl{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="folia"] .kfw-blysk{opacity:1;animation:kfw-blysk 2.4s ease-in-out infinite}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="lakier"] .kfw-poz{transform:translateX(-95px) scale(.72)}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="lakier"] .kfw-maska{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="lakier"] .kfw-lakier-blysk{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="lakier"] .kfw-lakier-blysk rect{animation:kfw-blysk 2.4s ease-in-out infinite}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="narozniki"] .kfw-w-narozniki{opacity:1}
.kfw-rogi{opacity:0;transition:opacity .5s ease}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena:is([data-stan="narozniki"],[data-stan="gotowe"]) .kfw-rogi{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="plik"] .kfw-poz{opacity:0}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="plik"] .kfw-strony{opacity:1}
:is(.kf--wizytowki,.kf--ulotki) .kf-scena[data-stan="gotowe"] .kfw-stos{opacity:1}

@keyframes kfw-obrot{0%{transform:scaleX(0)}6%,44%{transform:scaleX(1)}50%{transform:scaleX(0)}56%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes kfw-tyl{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes kfw-przod{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes kfw-blysk{0%{transform:translateX(0)}100%{transform:translateX(420px)}}

/* ── pieczątki ─────────────────────────────────────────────────────────────── */
.kfp-kartka{fill:#fff;stroke:#d6d4cc;stroke-width:.8}
.kfp-linia,.kfp-data-txt{fill:#1f4fb4}
.kfp-obwodka{fill:none;stroke:#1f4fb4;stroke-width:3}
.kfp-data-txt{font-family:ui-monospace,Consolas,monospace;font-weight:700}
.kfp-pasek{fill:none;stroke:var(--kf-magenta);stroke-width:1;stroke-dasharray:4 3}
.kfp-ksztalt :is(rect,circle){fill:none;stroke:var(--kf-slaby);stroke-width:1.2}
.kfp-obszar :is(rect,circle){fill:none;stroke:#1f9d55;stroke-width:1;stroke-dasharray:3 3}
.kfp-obudowa{fill:#3a3a44}.kfp-podstawa{fill:#5c5c68}
.kfp-odbicie{opacity:.9;transition:opacity .4s ease}
.kfp-korpus{transform:translateY(0)}
.kf--pieczatki .kf-scena:is([data-stan="pole"],[data-stan="tekst"],[data-stan="data"]) .kfp-obrysy{opacity:1}
.kf--pieczatki .kf-scena[data-stan="pole"] .kfp-odbicie{opacity:.18}
.kf--pieczatki .kf-scena[data-stan="data"] .kfp-pasek{fill:rgba(214,0,110,.12);stroke-width:1.5}
.kf--pieczatki .kf-scena[data-stan="tusz"] .kfp-w-tusz{opacity:1}
.kf--pieczatki .kf-scena[data-stan="odbicie"] .kfp-korpus-w{opacity:1}
.kf--pieczatki .kf-scena[data-stan="odbicie"] .kfp-korpus{animation:kfp-nacisk 2.8s ease-in-out infinite}
.kf--pieczatki .kf-scena[data-stan="odbicie"] .kfp-odbicie{animation:kfp-slad 2.8s ease-in-out infinite}
@keyframes kfp-nacisk{0%,10%{transform:translateY(calc(var(--kfp-dol) - 80px))}40%,52%{transform:translateY(var(--kfp-dol))}80%,100%{transform:translateY(calc(var(--kfp-dol) - 80px))}}
@keyframes kfp-slad{0%,45%{opacity:0}55%,92%{opacity:.9}100%{opacity:0}}

/* ── film o kreatorze ───────────────────────────────────────────────────────── */
.kfk-okno{fill:#fafaf8;stroke:#d6d4cc;stroke-width:1}
.kfk-pasek{fill:#fff;stroke:#d6d4cc;stroke-width:.6}
.kfk-menu{font-size:9px;fill:var(--kf-atrament)}
.kfk-zapisz{fill:#2f3650}.kfk-zapisz-txt{font-size:8.5px;fill:#fff;font-weight:600}
.kfk-boczny{fill:#3a3f55}
.kfk-zakl-tlo{fill:transparent;transition:fill .3s}
.kfk-ikona{fill:#c9cbe0}
.kfk-zakl-txt{font-size:6.5px;fill:#e6e6ee}
.kfk-zaznaczenie{fill:none;stroke:var(--kf-cyan);stroke-width:1;stroke-dasharray:3 2}
.kfk-przel{fill:#fff;stroke:#d6d4cc;stroke-width:.8;transition:stroke .3s}
.kfk-naglowek{font-size:11px;font-weight:600;fill:var(--kf-atrament)}
.kfk-kafel-tlo{fill:#fff;stroke:#d6d4cc;stroke-width:1;transition:stroke .3s,fill .3s}
.kfk-kafel-txt{font-size:9px;fill:var(--kf-atrament)}
.kfk-ok{font-size:9.5px;fill:#1f9d55;font-weight:600}
.kfk-plansza,.kfk-przypiety,.kfk-bramka,.kfk-nr1,.kfk-nr2{transition:opacity .4s ease}
.kfk-tyl,.kfk-nr2,.kfk-przypiety,.kfk-bramka{opacity:0}
.kfk-kursor{transition:transform .9s cubic-bezier(.62,.04,.28,1);transform:translate(84px,120px)}

.kf--kreator .kf-scena:is([data-stan="koszyk"],[data-stan="zapisz"],[data-stan="pozniej"]) .kfk-koszyk{opacity:1}
.kf--kreator .kf-scena[data-stan="koszyk"] .kfk-kafel-0 .kfk-kafel-tlo,
.kf--kreator .kf-scena[data-stan="zapisz"] .kfk-kafel-0 .kfk-kafel-tlo,
.kf--kreator .kf-scena[data-stan="pozniej"] .kfk-kafel-3 .kfk-kafel-tlo{stroke:var(--kf-cyan);stroke-width:2;fill:#eef7fc}
.kf--kreator .kf-scena[data-stan="zapisz"] .kfk-przypiety,
.kf--kreator .kf-scena[data-stan="pozniej"] .kfk-bramka{opacity:1}
.kf--kreator .kf-scena:is([data-stan="linie"],[data-stan="tekst"],[data-stan="zdjecie"],[data-stan="strony"]) .kfk-linie{opacity:1}
.kf--kreator .kf-scena[data-stan="linie"] .kfk-przel-linie{stroke:var(--kf-cyan);stroke-width:1.6}
.kf--kreator .kf-scena:is([data-stan="tekst"],[data-stan="zdjecie"]) .kfk-tekst{opacity:1}
.kf--kreator .kf-scena[data-stan="zdjecie"] .kfk-zdjecie{opacity:1}
.kf--kreator .kf-scena[data-stan="tekst"] .kfk-zakl-tekst .kfk-zakl-tlo,
.kf--kreator .kf-scena[data-stan="zdjecie"] .kfk-zakl-zdjecie .kfk-zakl-tlo{fill:rgba(255,255,255,.18)}
.kf--kreator .kf-scena[data-stan="strony"] .kfk-przod{opacity:0}
.kf--kreator .kf-scena[data-stan="strony"] :is(.kfk-tyl,.kfk-nr2){opacity:1}
.kf--kreator .kf-scena[data-stan="strony"] .kfk-nr1{opacity:0}
.kf--kreator .kf-scena[data-stan="koszyk"] .kfk-kursor{transform:translate(112px,132px)}
.kf--kreator .kf-scena[data-stan="linie"] .kfk-kursor{transform:translate(160px,278px)}
.kf--kreator .kf-scena[data-stan="tekst"] .kfk-kursor{transform:translate(58px,86px)}
.kf--kreator .kf-scena[data-stan="zdjecie"] .kfk-kursor{transform:translate(58px,126px)}
.kf--kreator .kf-scena[data-stan="strony"] .kfk-kursor{transform:translate(404px,172px)}
.kf--kreator .kf-scena[data-stan="zapisz"] .kfk-kursor{transform:translate(112px,132px)}
.kf--kreator .kf-scena[data-stan="pozniej"] .kfk-kursor{transform:translate(378px,132px)}
.kf-link-kreator{margin:12px 0 0;font-size:14px}
.kf-link-kreator a{font-weight:600}

@media (prefers-reduced-motion: reduce){
  .kf-panel,.kf-rewers,.kf-warstwa,.kf-szew,.kfw-poz,.kfw-rogi,.kfk-kursor{transition:none!important}
  :is(.kf--wizytowki,.kf--ulotki,.kf--pieczatki) .kf-scena *{animation:none!important}
}
/* kotwica z linku na kartach: przypiety naglowek strony nie moze zaslonic poczatku filmu */
#jak-dziala-kreator{scroll-margin-top:120px}