/* ============================================================
   JURLEJ — SEKCJA 3: SPRAWDZONE MARKI
   Bloki korzystają z komponentu .usl z sekcji usług (kształt, szkło,
   przycisk w wycięciu, wejście). Tu tylko układ litery L, bardzo
   przezroczysty blok z tekstem, pasek marek i zdjęcia „color splash".
   ============================================================ */

.marki {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(64 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
  isolation: isolate;
  overflow: clip;
}
/* rysunek: tarcza hamulcowa, łożysko, śruba */
.marki__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/rysunek-marki.svg') top center / calc(1920 * var(--u)) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  pointer-events: none;
}

/* ---------------- odwrócone L ---------------- */
.marki__siatka {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(560 * var(--u));
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: calc(16 * var(--u));
}
.usl--panel { grid-column: 1; grid-row: 1; }
.usl--hamulec { grid-column: 2; grid-row: 1 / 3; }
.usl--czesci  { grid-column: 1; grid-row: 2; }
.usl--hamulec .usl__przycisk { width: calc(96 * var(--u)); padding: 0; }

/* ---------------- przezroczysty blok z tekstem ----------------
   Bardzo lekkie szkło: tło prawie przezroczyste i delikatne
   rozmycie, więc rysunek techniczny pod spodem jest wyraźnie widać. */
.usl--panel .usl__karta {
  border-radius: calc(28 * var(--u));
  /* bez rozmycia — sama przezroczystość, rysunek pod spodem jest ostry */
  background: linear-gradient(155deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .68) 50%, rgba(255, 255, 255, .78) 100%);
  box-shadow: inset 0 calc(-24 * var(--u)) calc(50 * var(--u)) calc(-20 * var(--u)) rgba(255, 255, 255, .35);
}
.usl--panel .usl__karta::after { display: none; }
/* przy tak przezroczystym szkle biała krawędź znika — delikatny szary obrys trzyma kształt */
.usl--panel .usl__obrys path { stroke: rgba(90, 86, 86, .32); stroke-width: 1.2; }
.marki__tekst {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* dół zostawia miejsce na wycięcie z przyciskiem — pasek przechodzi nad nim */
  padding: calc(40 * var(--u)) calc(56 * var(--u)) calc(92 * var(--u));
}

/* ---------------- tekst ---------------- */
.marki__nad {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.marki__tytul {
  margin: calc(16 * var(--u)) 0 0;
  font: 400 calc(56 * var(--u))/1.08 'Draco', sans-serif;
  letter-spacing: .06em;
  color: var(--grafit);
  --n: 14;
  --wy: 0s;
}
.marki__linia { display: block; white-space: nowrap; }
.marki__linia--czerwona { color: var(--czerwien); }
/* akapit i atuty obok siebie — tekst wypełnia szerokość bloku */
.marki__kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(56 * var(--u));
  margin-top: calc(22 * var(--u));
}
.marki__atuty {
  display: grid;
  gap: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(14.5 * var(--u));
  line-height: 1.5;
  font-weight: 500;
  color: #4a4747;
}
.marki__atuty li {
  position: relative;
  padding-left: calc(26 * var(--u));
}
/* bordowy trybik zamiast kropki — kształt z maski, kolor z tła */
.marki__atuty li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  background: var(--czerwien);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.00 1.00L14.15 1.21L15.21 4.24L16.67 5.02L19.78 4.22L21.15 5.89L19.76 8.79L20.24 10.36L23.00 12.00L22.79 14.15L19.76 15.21L18.98 16.67L19.78 19.78L18.11 21.15L15.21 19.76L13.64 20.24L12.00 23.00L9.85 22.79L8.79 19.76L7.33 18.98L4.22 19.78L2.85 18.11L4.24 15.21L3.76 13.64L1.00 12.00L1.21 9.85L4.24 8.79L5.02 7.33L4.22 4.22L5.89 2.85L8.79 4.24L10.36 3.76Z M12 8.2a3.8 3.8 0 1 0 0 7.6a3.8 3.8 0 1 0 0-7.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.00 1.00L14.15 1.21L15.21 4.24L16.67 5.02L19.78 4.22L21.15 5.89L19.76 8.79L20.24 10.36L23.00 12.00L22.79 14.15L19.76 15.21L18.98 16.67L19.78 19.78L18.11 21.15L15.21 19.76L13.64 20.24L12.00 23.00L9.85 22.79L8.79 19.76L7.33 18.98L4.22 19.78L2.85 18.11L4.24 15.21L3.76 13.64L1.00 12.00L1.21 9.85L4.24 8.79L5.02 7.33L4.22 4.22L5.89 2.85L8.79 4.24L10.36 3.76Z M12 8.2a3.8 3.8 0 1 0 0 7.6a3.8 3.8 0 1 0 0-7.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate .8s var(--ease);
}
.marki__atuty li:hover::before { rotate: 90deg; }
.marki__atuty b { font-weight: 700; color: var(--grafit); }
.marki__opis {
  margin: 0;
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #3b3939;
  text-wrap: pretty;
}

/* ---------------- pasek marek ----------------
   Dwie identyczne taśmy jadą obok siebie o własną szerokość, więc
   pętla jest bez szwu. Pigułki z bordowym obrysem; po najechaniu
   wypełniają się bordem jak przyciski strony. */
/* pasek przez całą szerokość bloku — od lewej krawędzi do zdjęcia */
.marki__pasek {
  display: flex;
  margin: calc(30 * var(--u)) calc(-56 * var(--u)) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marki__tor {
  flex: none;
  display: flex;
  gap: calc(12 * var(--u));
  margin: 0;
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)) 0;
  list-style: none;
  animation: tasma 38s linear infinite;
}
.marki__pasek:hover .marki__tor { animation-play-state: paused; }
.marki__tor li {
  position: relative;
  padding: calc(12 * var(--u)) calc(24 * var(--u));
  border-radius: 999px;
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  letter-spacing: .16em;
  white-space: nowrap;
  color: #7a1810;
  background: linear-gradient(180deg, rgba(143, 29, 20, .07), rgba(143, 29, 20, .02));
  box-shadow:
    inset 0 0 0 1.5px rgba(143, 29, 20, .55),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.marki__tor li:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .55) 0%, rgba(150, 148, 148, 0) 55%),
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  box-shadow:
    inset 0 0 0 1.5px rgba(143, 29, 20, .9),
    0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(110, 0, 0, .25);
}
@keyframes tasma { to { transform: translateX(-100%); } }

/* ---------------- zdjęcia color splash ----------------
   Zdjęcie bazowe jest już czarno-białe z czerwienią, więc bez filtrów.
   Kolorowa wersja leży wyżej i po najechaniu lekko prześwituje. */
.usl--splash .usl__zdj,
.usl--splash:hover .usl__zdj { filter: none; }
.usl--splash .usl__zdj--kolor { opacity: 0; transition: opacity .8s var(--ease), scale 1.4s var(--ease); }
.usl--splash:hover .usl__zdj--kolor { opacity: .45; }
/* reguły wejścia z sekcji usług nadpisują przejście — przywracamy krycie */
.js .usl--splash.jest-w-kadrze .usl__zdj--kolor { transition: opacity .8s var(--ease), scale 2.6s var(--ease) var(--opoz, 0s); }
.js .usl--splash.jest-w-kadrze:hover .usl__zdj--kolor { transition: opacity .8s var(--ease), scale 1.4s var(--ease); }

/* ---------------- wejście ----------------
   Najpierw blok (opóźnienie z js/uslugi.js), w nim napis nad, litery,
   akapit i pasek. Blok ma backdrop-filter, więc bez filtra rozmycia
   na nim samym — filtr na przodku wyłącza rozmycie tła. */
.js .usl--panel,
.js .usl--panel.jest-w-kadrze,
.js .usl--panel.jest-poza { filter: none; }
.js .marki__tekst.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(.75s + var(--l) * .06s);
}
.js .marki__nad,
.js .marki__opis,
.js .marki__atuty,
.js .marki__pasek {
  opacity: 0;
  translate: 0 calc(16 * var(--u));
  filter: blur(6px);
  transition: opacity .4s var(--ease), translate .5s var(--ease), filter .4s var(--ease);
}
.js .marki__tekst.jest-w-kadrze .marki__nad,
.js .marki__tekst.jest-w-kadrze .marki__opis,
.js .marki__tekst.jest-w-kadrze .marki__atuty,
.js .marki__tekst.jest-w-kadrze .marki__pasek {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 1.9s, 1.5s;
}
.js .marki__tekst.jest-w-kadrze .marki__nad { transition-delay: .55s; }
.js .marki__tekst.jest-w-kadrze .marki__opis { transition-delay: 1.5s; }
.js .marki__tekst.jest-w-kadrze .marki__atuty { transition-delay: 1.65s; }
.js .marki__tekst.jest-w-kadrze .marki__pasek { transition-delay: 1.9s; }

/* ============================================================
   TELEFON — tekst, hamulec, części jeden pod drugim
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .marki {
    height: auto;
    display: block;
    padding: calc(70 * var(--u)) calc(10 * var(--u)) calc(80 * var(--u));
  }
  .marki__tlo { background-size: calc(900 * var(--u)) auto; background-position: 70% 0; }
  .marki__siatka {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: calc(10 * var(--u));
  }
  .usl--panel,
  .usl--hamulec,
  .usl--czesci { grid-column: 1; grid-row: auto; }
  .usl.usl--panel { height: auto; }
  /* blok rośnie z treścią — karta wraca do przepływu */
  .usl--panel .usl__karta { position: relative; border-radius: calc(20 * var(--u)); }
  .marki__tekst { padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(70 * var(--u)); }
  .usl.usl--hamulec { height: calc(440 * var(--u)); }
  .usl.usl--czesci { height: calc(260 * var(--u)); }

  .marki__nad { font-size: calc(9 * var(--u)); }
  .marki__tytul { margin-top: calc(10 * var(--u)); font-size: calc(17.5 * var(--u)); }
  .marki__kolumny { grid-template-columns: 1fr; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
  .marki__opis { font-size: calc(12 * var(--u)); }
  .marki__atuty { font-size: calc(11.5 * var(--u)); gap: calc(6 * var(--u)); }
  .marki__atuty li { padding-left: calc(18 * var(--u)); }
  .marki__atuty li::before { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
  .marki__pasek { margin: calc(16 * var(--u)) calc(-20 * var(--u)) 0; }
  .marki__tor li { font-size: calc(9.5 * var(--u)); padding: calc(9 * var(--u)) calc(16 * var(--u)); }

  .usl--panel .usl__przycisk,
  .usl--czesci .usl__przycisk,
  .usl--hamulec .usl__przycisk { width: calc(78 * var(--u)); padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .marki__tor { animation: none; }
  .js .marki__nad, .js .marki__opis, .js .marki__atuty, .js .marki__pasek {
    opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important;
  }
  .js .usl--splash .usl__zdj { filter: none !important; }
}