/* ============================================================
   JURLEJ — SEKCJA 4: CHIP TUNING
   Odwrócone L: po lewej pionowe zdjęcie silnika z obrotomierzem,
   po prawej tekst, duże karty STAGE i mniejszy blok z laptopem.
   Na zdjęciach zamiast przycisków — szklane tabliczki w wycięciu.
   Bloki to komponent .usl (kształt i wejście z js/uslugi.js).
   ============================================================ */

.tuning {
  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: turbosprężarka, skala obrotomierza, śruba */
.tuning__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/rysunek-tuning.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;
}

/* trybik — ten sam kształt co znaczniki w sekcji marek */
:root { --trybik: 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"); }

/* ---------------- odwrócone L ---------------- */
.tuning__siatka {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: calc(600 * var(--u)) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(16 * var(--u));
}
.usl--chip { grid-column: 1; grid-row: 1 / 3; }
.tuning__tekst { grid-column: 2 / 4; grid-row: 1; padding: 0 0 calc(14 * var(--u)) calc(14 * var(--u)); }
.usl--stage:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.usl--stage:nth-of-type(3) { grid-column: 3; grid-row: 2; }

/* ---------------- tekst ---------------- */
.tuning__nad {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.tuning__tytul {
  margin: calc(14 * var(--u)) 0 0;
  font: 400 calc(56 * var(--u))/1.08 'Draco', sans-serif;
  letter-spacing: .06em;
  color: var(--grafit);
  white-space: nowrap;
  --n: 10;
  --wy: 0s;
}
.tuning__czerwony { color: var(--czerwien); }
.tuning__opis {
  max-width: calc(820 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #3b3939;
  text-wrap: pretty;
}

/* ---------------- szklana tabliczka w wycięciu zdjęcia ----------------
   Siedzi na tle strony, w miejscu, gdzie gdzie indziej jest przycisk.
   Wycięcie zdjęcia liczy js/uslugi.js z jej wymiarów i zaokrąglenia,
   więc łuk wycięcia biegnie równo wokół tabliczki. */
.usl__notatka {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: calc(390 * var(--u));
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  /* bordo jak przyciski strony: szary połysk u góry, jasna obwódka */
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .55) 0%, rgba(150, 148, 148, .18) 30%, rgba(150, 148, 148, 0) 48%),
    linear-gradient(100deg, #850000 0%, #6e0000 55%, #5a0000 100%);
  box-shadow:
    0 0 0 calc(3 * var(--u)) #cfcfcf,
    0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(90, 0, 0, .28);
}
.usl__notatka-tytul {
  margin: 0;
  font-size: calc(18 * var(--u));
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.usl__notatka-opis {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(13.5 * var(--u));
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
}
.usl--laptop .usl__notatka { width: calc(430 * var(--u)); }
/* zdjęcia bez tabliczki w środku — lżejsze przyciemnienie od dołu */
.usl--chip .usl__karta::after,
.usl--laptop .usl__karta::after { background: linear-gradient(0deg, rgba(10, 10, 10, .3), rgba(10, 10, 10, 0) 40%); }

/* wejście tabliczki — po zdjęciu, z dołu */
.js .usl .usl__notatka {
  opacity: 0;
  translate: 0 calc(24 * var(--u));
  transition: opacity .4s var(--ease), translate .5s var(--ease);
}
.js .usl.jest-w-kadrze .usl__notatka {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1.3s var(--ease) calc(var(--opoz, 0s) + .6s), translate 1.7s var(--ease) calc(var(--opoz, 0s) + .6s);
}

/* ---------------- karty STAGE ---------------- */
.usl--stage .usl__karta {
  border-radius: calc(26 * var(--u));
  background: linear-gradient(155deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .8) 100%);
  box-shadow: inset 0 calc(-24 * var(--u)) calc(50 * var(--u)) calc(-20 * var(--u)) rgba(255, 255, 255, .5);
}
.usl--stage .usl__karta::after { display: none; }
.usl--stage .usl__obrys path { stroke: rgba(90, 86, 86, .32); stroke-width: 1.2; }
.stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(24 * var(--u));
}
.stage p { margin: 0; }
.stage__gora { display: block; }
.stage__etykieta {
  font: 400 calc(22 * var(--u))/1 'Draco', sans-serif;
  color: var(--czerwien);
  letter-spacing: .04em;
  white-space: nowrap;
}
.stage__nazwa {
  margin-top: calc(10 * var(--u)) !important;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7b7574;
}
.stage__zysk {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-top: calc(18 * var(--u)) !important;
}
.stage__liczba {
  font: 400 calc(50 * var(--u))/1 'Draco', sans-serif;
  white-space: nowrap;
  color: var(--grafit);
}
.stage__jedn {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7b7574;
}
.stage__opis {
  margin-top: calc(22 * var(--u)) !important;
  font-size: calc(16.5 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #4a4747;
  text-wrap: pretty;
}
/* lista z bordowymi trybikami — ten sam znacznik co w sekcji marek */
.stage__lista {
  display: grid;
  gap: calc(13 * var(--u));
  margin: calc(26 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(15.5 * var(--u));
  line-height: 1.4;
  font-weight: 600;
  color: var(--grafit);
}
.stage__lista li { position: relative; padding-left: calc(26 * var(--u)); }
.stage__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  background: var(--czerwien);
  -webkit-mask: var(--trybik) center / contain no-repeat;
  mask: var(--trybik) center / contain no-repeat;
  transition: rotate .8s var(--ease);
}
.stage__lista li:hover::before { rotate: 90deg; }
/* dwa krótkie fakty i przykład z hamowni */
.stage__fakty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--u));
  margin: calc(30 * var(--u)) 0 0;
  padding: calc(20 * var(--u)) 0 0;
  border-top: 1px solid rgba(38, 37, 37, .1);
}
.stage__fakty dt {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9a9493;
}
.stage__fakty dd {
  margin: calc(5 * var(--u)) 0 0;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  color: var(--grafit);
}
.stage__przyklad {
  margin-top: calc(18 * var(--u)) !important;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  color: #5a5656;
}
.stage__przyklad b { color: var(--czerwien); font-weight: 800; }
.stage__cena {
  margin-top: auto !important;
  padding-top: calc(16 * var(--u));
  max-width: calc(100% - var(--wyc-w, 0px) + 36 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  color: #7b7574;
}
.stage__cena b { font-size: calc(24 * var(--u)); font-weight: 800; color: var(--czerwien); }

/* ---------------- obrotomierz ---------------- */
.zegar {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 6%;
  width: calc(400 * var(--u));
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5) 70%, rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .9),
    inset 0 calc(-20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .06),
    0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .35);
}
.zegar__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.zegar__tarcza { fill: none; stroke: rgba(38, 37, 37, .12); stroke-width: 1.5; }
.zegar__pole { fill: none; stroke: var(--czerwien); stroke-width: 10; stroke-linecap: butt; opacity: .85; }
.zegar__kreska { stroke: rgba(38, 37, 37, .55); stroke-width: 1.5; }
.zegar__kreska--duza { stroke: var(--grafit); stroke-width: 3; }
.zegar__kreska--czerwona { stroke: var(--czerwien); }
.zegar__liczba { font: 400 26px 'Draco', sans-serif; fill: var(--grafit); text-anchor: middle; }
.zegar__liczba--czerwona { fill: var(--czerwien); }
.zegar__jedn { font: 700 10px Manrope, sans-serif; letter-spacing: .16em; fill: #7b7574; text-anchor: middle; }
.zegar__igla path { fill: var(--czerwien); filter: drop-shadow(0 2px 3px rgba(90, 0, 0, .35)); }
.zegar__os { fill: var(--grafit); }
.zegar__os-srodek { fill: var(--czerwien); }
/* liczba mocy mieści się w otwartej dolnej części tarczy — nie wchodzi
   na skalę ani na czerwone pole */
.zegar__moc { font: 400 36px 'Draco', sans-serif; fill: var(--grafit); text-anchor: middle; }
.zegar__km { font: 700 11px Manrope, sans-serif; letter-spacing: .3em; fill: #7b7574; text-anchor: middle; }
.zegar__zysk {
  font: 800 14px Manrope, sans-serif;
  letter-spacing: .06em;
  fill: var(--czerwien);
  text-anchor: middle;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.zegar.jest-wynik .zegar__zysk { opacity: 1; }

/* ---------------- wejście tekstu ---------------- */
.js .tuning__tekst.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(.15s + var(--l) * .07s);
}
.js .tuning__nad,
.js .tuning__opis {
  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 .tuning__tekst.jest-w-kadrze .tuning__nad,
.js .tuning__tekst.jest-w-kadrze .tuning__opis {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 1.9s, 1.5s;
}
.js .tuning__tekst.jest-w-kadrze .tuning__opis { transition-delay: .9s; }

/* ============================================================
   TELEFON — tekst, silnik z zegarem, STAGE 1, STAGE 2, laptop
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .tuning {
    height: auto;
    display: block;
    padding: calc(70 * var(--u)) calc(10 * var(--u)) calc(80 * var(--u));
  }
  .tuning__tlo { background-size: calc(900 * var(--u)) auto; background-position: 60% 0; }
  .tuning__siatka {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: calc(10 * var(--u));
  }
  .tuning__tekst { grid-column: 1; grid-row: 1; padding: 0 calc(12 * var(--u)) calc(16 * var(--u)); }
  .usl--chip { grid-column: 1; grid-row: 2; height: calc(560 * var(--u)); }
  .usl--stage:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  .usl--stage:nth-of-type(3) { grid-column: 1; grid-row: 4; }
  .usl.usl--stage { height: auto; }
  .usl--stage .usl__karta { position: relative; border-radius: calc(20 * var(--u)); }

  .tuning__nad { font-size: calc(9 * var(--u)); }
  .tuning__tytul { margin-top: calc(10 * var(--u)); font-size: calc(20 * var(--u)); }
  .tuning__opis { font-size: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }

  .usl__notatka,
  .usl--laptop .usl__notatka { width: calc(250 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); }
  .usl__notatka-tytul { font-size: calc(14 * var(--u)); }
  .usl__notatka-opis { font-size: calc(11 * var(--u)); }

  .stage { padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
  .stage__etykieta { font-size: calc(16 * var(--u)); }
  .stage__nazwa { font-size: calc(9.5 * var(--u)); }
  .stage__liczba { font-size: calc(34 * var(--u)); }
  .stage__jedn { font-size: calc(8.5 * var(--u)); }
  .stage__opis { margin-top: calc(14 * var(--u)) !important; font-size: calc(12 * var(--u)); }
  .stage__lista { font-size: calc(11.5 * var(--u)); margin-top: calc(12 * var(--u)); }
  .stage__lista li { padding-left: calc(20 * var(--u)); }
  .stage__lista li::before { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
  .stage__fakty { margin-top: calc(14 * var(--u)); padding-top: calc(12 * var(--u)); }
  .stage__fakty dt { font-size: calc(8.5 * var(--u)); }
  .stage__fakty dd { font-size: calc(12 * var(--u)); }
  .stage__przyklad { font-size: calc(11.5 * var(--u)); }
  .stage__cena { font-size: calc(11 * var(--u)); max-width: calc(100% - var(--wyc-w, 0px)); }
  .stage__cena b { font-size: calc(17 * var(--u)); }

  .zegar { width: calc(260 * var(--u)); top: 5%; }
  .usl--stage .usl__przycisk { width: calc(78 * var(--u)); padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .tuning__nad, .js .tuning__opis, .js .usl .usl__notatka {
    opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important;
  }
}