/* ANIMACJE - warstwa dla skanujących (20.10.2026).
   Zasada: ruch podkreśla to, co ma zostać w głowie po 30 sekundach: ból -> mechanizm -> co dostajecie -> co zrobić.
   Wszystko gaśnie przy prefers-reduced-motion i w trybie zrzutu (.zrzut). */

/* 0. Kolor „dobre i bezpieczne” dla wyróżnień (czerwień zostaje tylko na zrzutach raportu) */
:root{--dobry:#2F7D6A;--dobry-miekki:#E3F1EC}

/* 1. Zdanie-sedno sekcji: podkreślenie rysuje się po wejściu w ekran */
.skan{position:relative;background-image:linear-gradient(var(--dobry),var(--dobry));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;transition:background-size .9s var(--ease) .25s;padding-bottom:2px}
.skan.in{background-size:100% 2px}
.tk-sedno.skan{background:none;padding-bottom:0}
.tk-sedno.skan::after{content:"";position:absolute;left:-3px;top:0;width:3px;height:0;background:var(--dobry);transition:height .9s var(--ease)}
.tk-sedno.skan.in::after{height:100%}
.tk-sedno.skan{border-left-color:transparent}

/* 2. Mocne słowa: <mark class="akcent"> - łagodny pasek koloru sygnału wjeżdża od lewej */
mark.akcent{background:none;color:inherit;font-weight:600;background-image:linear-gradient(var(--dobry-miekki),var(--dobry-miekki));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;transition:background-size .8s var(--ease) .4s;padding:0 .12em;margin:0 -.12em;border-radius:3px}
.in mark.akcent,mark.akcent.in{background-size:100% 100%}

/* 3. Nagłówki h2 słowo po słowie */
.h2-slowa .slowo{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.h2-slowa.in .slowo{opacity:1;transform:none}

/* 4. Trzy kroki Systemu: kreska nad krokiem rośnie, numer wjeżdża */
.tk-krok{border-top-color:transparent}
.tk-krok::before{content:"";display:block;height:1px;background:var(--tekst);width:0;margin-top:-19px;margin-bottom:18px;transition:width .9s var(--ease)}
.tk-krok.in::before{width:100%}
.tk-krok.in[data-opoznienie="2"]::before{transition-delay:.25s}
.tk-krok.in[data-opoznienie="3"]::before{transition-delay:.5s}

/* 5. Wiersze oferty pojawiają się po kolei */
.tk-wiersz{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tk-wiersz.in{opacity:1;transform:none}

/* 6. Grafika „nitka”: odsłania się z góry na dół razem z przewijaniem */
.tk-dlaczego-foto img{clip-path:inset(0 0 var(--odslona,100%) 0);transition:clip-path .2s linear}
.tk-dlaczego-foto.gotowe img{clip-path:none}

/* 7. Karta w hero: linijki „jak to działa” wchodzą po kolei */
.tk-kroczki li{opacity:0;transform:translateX(-8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tk-kroczki.in li{opacity:1;transform:none}
.tk-kroczki.in li:nth-child(2){transition-delay:.18s}
.tk-kroczki.in li:nth-child(3){transition-delay:.36s}

/* 8. Przycisk: strzałka oddycha raz po pojawieniu */
@keyframes tk-strzalka{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.in .btn-akcent .strzalka,.btn-akcent.in .strzalka{display:inline-block;animation:tk-strzalka 1.6s var(--ease) .9s 2}

/* wyłączenia */
@media (prefers-reduced-motion:reduce){
  .skan,.tk-sedno.skan::after,mark.akcent,.h2-slowa .slowo,.tk-krok::before,.tk-wiersz,.tk-kroczki li,.tk-dlaczego-foto img{transition:none;animation:none}
  .skan{background-size:100% 2px}.tk-sedno.skan::after{height:100%}mark.akcent{background-size:100% 100%}
  .h2-slowa .slowo,.tk-wiersz,.tk-kroczki li{opacity:1;transform:none}.tk-krok::before{width:100%}.tk-dlaczego-foto img{clip-path:none}
  .btn-akcent .strzalka{animation:none}
}
.zrzut .skan{background-size:100% 2px}.zrzut .tk-sedno.skan::after{height:100%}.zrzut mark.akcent{background-size:100% 100%}
.zrzut .h2-slowa .slowo,.zrzut .tk-wiersz,.zrzut .tk-kroczki li{opacity:1;transform:none;transition:none}
.zrzut .tk-krok::before{width:100%;transition:none}.zrzut .tk-dlaczego-foto img{clip-path:none}

/* v2 (20.10): więcej ruchu, który tłumaczy treść */
#hero h1 .linia{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
#hero h1 .linia-in{display:inline-block;will-change:transform}
.tk-sceny-os{position:relative;padding-left:26px!important;--os:0%}
.tk-sceny-os::before{content:"";position:absolute;left:4px;top:.6em;bottom:.6em;width:2px;background:linear-gradient(var(--dobry),var(--dobry)) no-repeat 0 0/100% var(--os),var(--linia)}
.tk-sceny-os li::before{left:0!important;background:var(--dobry)!important;box-shadow:0 0 0 4px var(--papier,#fff)}
.tk-wzory{position:relative}
.tk-glos-linia{position:absolute;left:4%;right:4%;top:calc(50% - 1px);height:2px;background:var(--dobry);transform-origin:left center;pointer-events:none;opacity:.55;z-index:0}
.tk-wzory > *{position:relative;z-index:1}
.tk-postep{height:2px;background:var(--linia);margin:0 0 26px;overflow:hidden;border-radius:2px}
.tk-postep i{display:block;height:100%;background:var(--dobry);transform-origin:left center}
.seq{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.seq.in{opacity:1;transform:none}
.licz{font-variant-numeric:tabular-nums}
.tk-foto{will-change:clip-path}
@keyframes tk-blysk{0%{box-shadow:0 0 0 0 rgba(47,125,106,.45)}100%{box-shadow:0 0 0 18px rgba(47,125,106,0)}}
.btn.blysk{animation:tk-blysk 1.1s ease-out 2}
.tk-albo{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease) .5s,transform .6s var(--ease) .5s}
.tk-albo.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.seq,.tk-albo{opacity:1;transform:none;transition:none}.btn.blysk{animation:none}.tk-sceny-os{--os:100%}}
.zrzut .seq,.zrzut .tk-albo{opacity:1;transform:none;transition:none}.zrzut .tk-sceny-os{--os:100%}

/* czerwone krzyżyki na kalendarzu (koszt): czerwień = dni stracone */
.tk-dlaczego-foto{position:relative}
.tk-x{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tk-x path{fill:none;stroke:#D8452A;stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.tk-x.gotowe path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.tk-x path{stroke-dashoffset:0}}
.zrzut .tk-x path{stroke-dashoffset:0}

/* koszt: karta wyśrodkowana względem grafiki + mini-tydzień */
.tk-kosztsek .tk-koszt{align-self:center}
.tk-tydzien{margin-top:26px;padding-top:20px;border-top:1px dashed var(--linia);display:grid;gap:12px}
.tk-tydzien-et{font-family:var(--krój-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-3)}
.tk-dni{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.tk-dni span{position:relative;display:grid;place-items:start center;padding-top:7px;height:62px;border-radius:10px;background:var(--papier,#fff);border:1px solid var(--linia);font-family:var(--krój-mono);font-size:14px;color:var(--tekst-2)}
.tk-dni .m{opacity:.5}
.tk-dni .x::after{content:"";position:absolute;inset:26px 14px 8px;background:
  linear-gradient(45deg,transparent calc(50% - 1.6px),#D8452A calc(50% - 1.6px),#D8452A calc(50% + 1.6px),transparent calc(50% + 1.6px)),
  linear-gradient(-45deg,transparent calc(50% - 1.6px),#D8452A calc(50% - 1.6px),#D8452A calc(50% + 1.6px),transparent calc(50% + 1.6px));
  transform:scale(0);opacity:0;transition:transform .35s var(--ease),opacity .2s}
.tk-koszt.in .tk-dni .x::after{transform:scale(1);opacity:1}
.tk-koszt.in .tk-dni .x:nth-child(1)::after{transition-delay:.7s}
.tk-koszt.in .tk-dni .x:nth-child(2)::after{transition-delay:.95s}
.tk-koszt.in .tk-dni .x:nth-child(3)::after{transition-delay:1.2s}
.tk-koszt.in .tk-dni .x:nth-child(5)::after{transition-delay:1.45s}
.tk-tydzien-opis{font-size:15px;color:var(--tekst-3);line-height:1.5}
@media (prefers-reduced-motion:reduce){.tk-dni .x::after{transform:scale(1);opacity:1;transition:none}}
.zrzut .tk-dni .x::after{transform:scale(1);opacity:1;transition:none}
@media (max-width:700px){.tk-dni span{height:54px}.tk-dni .x::after{inset:24px 10px 6px}}

/* BLOK NAPRAWY (koszt): zielone „naprawione” po czerwonych krzyżykach */
.tk-naprawa{margin-top:clamp(48px,6vw,84px);padding:clamp(28px,4vw,48px);background:var(--dobry-miekki);border:1px solid rgba(47,125,106,.28);border-radius:var(--promien)}
.tk-naprawa .etykieta{color:var(--dobry)}
.tk-naprawa-h{font-family:var(--krój-display);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;margin:8px 0 26px;color:var(--tekst)}
.tk-naprawy{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tk-naprawa-kafel{background:#fff;border:1px solid rgba(47,125,106,.25);border-radius:14px;padding:20px 22px;display:grid;gap:14px;align-content:start}
.tk-dziura{margin:0;font-size:16px;color:var(--tekst-3)}
.tk-dziura s{text-decoration:none;background:linear-gradient(#D8452A,#D8452A) no-repeat 0 55%/0% 2px;transition:background-size .7s var(--ease) .5s}
.tk-naprawa-kafel.in .tk-dziura s{background-size:100% 2px}
.tk-fix{margin:0;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:17px;line-height:1.45;color:var(--tekst);font-weight:500}
.tk-ptak{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--dobry);box-sizing:border-box}
.tk-ptak path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--ease) 1.1s}
.tk-naprawa-kafel.in .tk-ptak path{stroke-dashoffset:0}
.tk-naprawa-kafel[data-opoznienie="2"] .tk-ptak path{transition-delay:1.35s}
.tk-naprawa-kafel[data-opoznienie="3"] .tk-ptak path{transition-delay:1.6s}
.tk-naprawa-final{margin:30px 0 20px;font-family:var(--krój-display);font-size:clamp(24px,3vw,34px);line-height:1.2;color:var(--tekst)}
@media (max-width:960px){.tk-naprawy{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tk-dziura s{background-size:100% 2px;transition:none}.tk-ptak path{stroke-dashoffset:0;transition:none}}
.zrzut .tk-dziura s{background-size:100% 2px;transition:none}.zrzut .tk-ptak path{stroke-dashoffset:0;transition:none}