/* ============================================================
   TechnoTerm — nowe.css  (v2, konfiguracja per strona)
   Spójna zasada na całej stronie:
   • KAFELKI (karty w gridach)  -> wjazd po kolei z obrotem 3D + tilt + obrót ikony
   • WIERSZE LIST (checklisty)  -> delikatny wjazd z lewej, po kolei, bez tiltu
   • ZDJĘCIA (galeria/blog)     -> tylko zoom na hover
   • NAGŁÓWKI / TEKSTY / STOPKA -> bez animacji
   ============================================================ */

/* --- kafelki: wjazd z obrotem --- */
.tt-card{
  opacity:0;
  transform:perspective(900px) rotateX(12deg) translateY(32px) scale(.96);
  transform-origin:50% 100%;
  transition:opacity .6s cubic-bezier(.22,.9,.3,1), transform .6s cubic-bezier(.22,.9,.3,1);
  transition-delay:var(--tt-d,0s);
}
.tt-card.tt-in{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}

/* --- wiersze list: wjazd z lewej --- */
.tt-row{
  opacity:0;
  transform:translateX(-18px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:var(--tt-d,0s);
}
.tt-row.tt-in{opacity:1;transform:translateX(0)}

/* --- zdjęcia galerii: fade przy wjeździe --- */
.tt-photo{
  opacity:0;
  transform:scale(.96);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:var(--tt-d,0s);
}
.tt-photo.tt-in{opacity:1;transform:scale(1)}

/* --- nagłówki sekcji: delikatny wjazd od dołu, kaskadowo --- */
.tt-hdr>*:not(ul):not(ol){opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.tt-hdr.tt-in>*:not(ul):not(ol){opacity:1;transform:none}
.tt-hdr.tt-in>*:nth-child(2){transition-delay:.09s}
.tt-hdr.tt-in>*:nth-child(3){transition-delay:.18s}
.tt-hdr.tt-in>*:nth-child(4){transition-delay:.27s}

/* --- tilt 3D + obrót ikony: tylko desktop z myszką --- */
@media (hover:hover) and (pointer:fine){
  .tt-tilt{transform-style:preserve-3d;transition:transform .18s ease, box-shadow .25s ease}
  .tt-tilt:hover{box-shadow:0 18px 45px rgba(8,14,9,.18);z-index:2}
  .tt-tilt .tt-ico{transition:transform .7s cubic-bezier(.3,.7,.3,1)}
  .tt-tilt:hover .tt-ico{transform:rotateY(360deg)}
  .tt-zoom{overflow:hidden}
  .tt-zoom img{transition:transform .6s ease}
  .tt-zoom:hover img{transform:scale(1.06)}
}

/* --- pasek postępu czytania --- */
#tt-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#3d6b18,#8fbc5a);
  z-index:2000;pointer-events:none;transition:width .1s linear;
}

/* --- liczniki (tylko strona główna) --- */
.tt-count{font-variant-numeric:tabular-nums}

/* --- mobile: prostszy wjazd, tilt nieaktywny (media hover wyżej) --- */
@media (max-width:480px){
  .tt-card{transform:perspective(900px) rotateX(8deg) translateY(22px)}
}

/* --- dostępność --- */
@media (prefers-reduced-motion:reduce){
  .tt-card,.tt-row,.tt-photo,.tt-hdr>*{opacity:1!important;transform:none!important;transition:none!important}
  .tt-tilt,.tt-tilt *,.tt-zoom img{transition:none!important;transform:none!important}
  #tt-progress{display:none}
}

/* --- druk i podglądy bez animacji: wszystko zawsze widoczne --- */
@media print{
  .tt-card,.tt-row,.tt-photo,.tt-hdr>*{opacity:1!important;transform:none!important}
}