/* Wyprane3City — animacje wejścia i interakcje, fala 1 (16.09.2026, wybór Szefa: 1, 3, A, E).
   Tylko transform / opacity / clip-path / filter — nic nie przesuwa układu.
   prefers-reduced-motion: stan końcowy od razu, bez ruchu. */

/* ===================================================================
   KAFLE USŁUG (home) — siatka i przywrócone zdjęcia
   =================================================================== */
/* 6 kafli w 4 kolumnach zostawiało pół drugiego rzędu puste (po zdjęciu wypożyczalni) */
@media (min-width:1241px){ .serviceGrid{grid-template-columns:repeat(3,1fr)} }

/* ===================================================================
   1. „PRANIE" KAFLA PRZY WEJŚCIU
   Warstwa ::after szarzy i przygasza to, co pod nią (zdjęcie + gradient kafla),
   a przy wejściu w kadr ściera się od lewej do prawej z błękitnym pasem wody na krawędzi.
   Tekst kafla leży nad warstwą (dzieci mają z-index 1) — zostaje czytelny cały czas.
   Wszystko pod klasą .w3cAnim na <html> (stawia ją animacje.js) — bez JS kafel nigdy nie zostaje szary.
   =================================================================== */
.w3cAnim .serviceGrid .serviceCard::after{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  -webkit-backdrop-filter:grayscale(1) sepia(.4) brightness(.58) contrast(.92);
          backdrop-filter:grayscale(1) sepia(.4) brightness(.58) contrast(.92);
  background:linear-gradient(90deg, rgb(143 236 255/0) 0, rgb(143 236 255/.75) 50%, rgb(143 236 255/0) 100%) no-repeat;
  background-size:34px 100%; background-position:0 0;
  clip-path:inset(0 0 0 0);
}
.w3cAnim .serviceGrid .serviceCard.w3cPrany::after{
  clip-path:inset(0 0 0 100%); background-position:100% 0;
  transition:clip-path 1.15s cubic-bezier(.65,0,.35,1) var(--pranie-delay,0s),
             background-position 1.15s cubic-bezier(.65,0,.35,1) var(--pranie-delay,0s);
}

/* ===================================================================
   A. KAFEL: PRZECHYŁ ZA KURSOREM + „CZYSTY ŚLAD" POD KURSOREM (mysz)
   Po praniu ta sama warstwa ::after rozjaśnia kadr w kole pod kursorem.
   =================================================================== */
.w3cAnim .serviceGrid .serviceCard.w3cPranyKoniec::after{
  clip-path:none; background:none; opacity:0;
  -webkit-backdrop-filter:brightness(1.55) saturate(1.3);
          backdrop-filter:brightness(1.55) saturate(1.3);
  -webkit-mask:radial-gradient(circle 150px at var(--mx,50%) var(--my,50%), #000 0, rgb(0 0 0/.55) 45%, transparent 100%);
          mask:radial-gradient(circle 150px at var(--mx,50%) var(--my,50%), #000 0, rgb(0 0 0/.55) 45%, transparent 100%);
  transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .w3cAnim .serviceGrid .serviceCard.w3cPranyKoniec:hover::after{opacity:1}
  .serviceGrid .serviceCard.w3cTilt:hover{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-9px);
    transition:transform .12s ease-out, border-color .28s, box-shadow .28s;
  }
}

/* ===================================================================
   3. „JAK PRACUJEMY" — LINIA ŁĄCZĄCA KROKI, RYSOWANA PRZY PRZEWIJANIU
   Linia leży POD szklanymi kartami: w odstępach świeci pełną mocą, przez szkło prześwituje.
   Ikona kroku zapala się, gdy linia do niej dojdzie (klasa .w3cKrokZapalony z JS).
   =================================================================== */
.darkFeature .miniSteps{position:relative; isolation:isolate}
.w3cKrokiLinia{
  position:absolute; z-index:-1; width:2px; margin-left:-1px; pointer-events:none;
  left:var(--linia-x,100px); top:var(--linia-top,0px); height:var(--linia-h,0px);
  background:rgb(143 211 255/.12); border-radius:2px;
}
.w3cKrokiLinia i{
  position:absolute; inset:0; border-radius:inherit; transform-origin:top; transform:scaleY(var(--linia-p,0));
  background:linear-gradient(#29d3ff,#0a8bf0);
  box-shadow:0 0 12px rgb(41 211 255/.9), 0 0 26px rgb(41 211 255/.45);
}
.darkFeature .miniSteps article.w3cKrokZapalony::before{
  background:radial-gradient(circle,rgb(41 211 255/.30),rgb(10 86 200/.18));
  box-shadow:inset 0 0 0 1px rgb(41 211 255/.7), 0 0 22px rgb(41 211 255/.45);
}
.darkFeature .miniSteps article.w3cKrokZapalony::after{background:#8fecff}
.darkFeature .miniSteps article.w3cKrokZapalony>span{text-shadow:0 0 22px rgb(41 211 255/.75)}
/* przed zapaleniem ikona przygaszona */
.darkFeature .miniSteps.w3cKrokiGotowe article:not(.w3cKrokZapalony)::after{opacity:.45}

/* ===================================================================
   E. FAQ — PŁYNNE ROZWIJANIE, PLUS OBRACA SIĘ W KRZYŻYK
   Wysokość animuje JS (Web Animations); tu tylko ikona.
   =================================================================== */
.w3cFaq summary::after{transition:transform .35s cubic-bezier(.22,.8,.18,1), background .25s, color .25s}
.w3cFaq details[open] summary::after{content:"+"; transform:translateY(-50%) rotate(45deg)}
.w3cFaq details.w3cZamyka summary::after{transform:translateY(-50%) rotate(0deg); background:rgba(10,86,200,.10); color:#0a56c8}

@media (prefers-reduced-motion:reduce){
  .w3cAnim .serviceGrid .serviceCard::after{display:none}
  .w3cKrokiLinia i{transform:none}
  .w3cFaq summary::after{transition:none}
}