/* Auto Serwis Dobry Bieg · baza: zmienne, typografia, przyciski, układ, ruch */

:root {
  --grafit-950: #131516;
  --grafit-900: #1b1e1f;
  --grafit-800: #25292b;
  --grafit-700: #343a3d;
  --grafit-600: #50575b;
  --papier: #f2f1ec;
  --papier-ciemny: #e7e5de;
  --bialy: #fbfaf7;
  --atrament: #1a1c1d;
  --szary: #53585b;
  --szary-jasny: #b0b4b5;
  --tekst-jasny: #d3d6d6;
  --linia: #cfccc3;
  --linia-mocna: #878c8f;
  --linia-ciemna: #3a4043;
  --zolty: #ffc400;
  --zolty-mocny: #eab300;
  --zolty-ciemny: #a67f00;
  --fokus: var(--atrament);

  /* kolory kontrolek na desce */
  --lampa-bursztyn: #ffb400;
  --lampa-czerwona: #ff5a47;
  --lampa-blekitna: #5ccbff;

  --kroj: "Archivo", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Consolas, monospace;
  --waski: 82%;

  --szerokosc: 1240px;
  --margines: clamp(1.25rem, 0.55rem + 2.8vw, 2.75rem);
  --sekcja: clamp(4rem, 2.5rem + 5.5vw, 7.5rem);
  --promien: 4px;
  --gora: 6.5rem;

  /* krzywe ruchu: sprężyna z lekkim przerzutem i miękkie hamowanie */
  --sprezyna: cubic-bezier(.3, 1.5, .5, 1);
  --wyjazd: cubic-bezier(.16, 1, .3, 1);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --sprezyna: linear(0, .116 5%, .373 10%, .657 15%, .898 20%, 1.061 25%, 1.144 30%, 1.162 35%, 1.139 40%, 1.095 45%, 1.049 50%, 1.012 55%, .987 60%, .974 70%, .986 80%, .999 90%, 1);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--gora) + 1rem);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--kroj);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

p, ol, ul, dl, dd, figure { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

::selection { background: var(--zolty); color: var(--atrament); }

/* Typografia: rozciągnięte wersaliki jak na tabliczce znamionowej */

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1,
h2 {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .98;
}

h1 { font-size: clamp(2.25rem, 1.15rem + 4.4vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3rem); }

h3 {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

p { text-wrap: pretty; }

.etykieta {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--mono);
  font-stretch: var(--waski);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--szary);
}

.etykieta::before {
  content: "";
  flex: none;
  width: .65rem;
  height: .65rem;
  background: var(--zolty);
}

.wstep {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.5;
  color: var(--szary);
}

/* Układ */

.kontener {
  width: 100%;
  max-width: calc(var(--szerokosc) + 2 * var(--margines));
  margin-inline: auto;
  padding-inline: var(--margines);
}

.sekcja { padding-block: var(--sekcja); }

.ciemne {
  --fokus: var(--zolty);
  background: var(--grafit-900);
  color: var(--bialy);
}

.ciemne .etykieta { color: var(--szary-jasny); }
.ciemne .wstep { color: var(--tekst-jasny); }

.zolte {
  --fokus: var(--atrament);
  background: var(--zolty);
  color: var(--atrament);
}

.zolte .etykieta { color: var(--atrament); }
.zolte .etykieta::before { background: var(--atrament); }

.glowa-sekcji {
  display: grid;
  gap: 1.1rem;
  max-width: 48rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
}

html:not(.js) .tylko-js { display: none !important; }

/* Ikony */

.ikona {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Przyciski: spoczynek, najechanie, wciśnięcie, fokus */

.przycisk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .7rem 1.3rem;
  border: 2px solid transparent;
  border-radius: var(--promien);
  font-family: var(--kroj);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .4s var(--sprezyna);
}

.przycisk .ikona { transition: transform .45s var(--sprezyna); }
.przycisk:hover .ikona { transform: scale(1.14) rotate(-6deg); }
.przycisk:hover .ikona--strzalka { transform: translateX(5px); }

.przycisk:active {
  transform: translateY(3px) scale(.985);
  transition-duration: .07s;
}

.przycisk--duzy { min-height: 3.5rem; padding: .85rem 1.6rem; font-size: 1.0625rem; }

/* Żółty: dolna krawędź jak w przycisku maszyny, po najechaniu przebiega po nim światło */

.przycisk--zolty {
  background: var(--zolty);
  color: var(--atrament);
  box-shadow: 0 3px 0 var(--zolty-ciemny);
}

.przycisk--zolty::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(-115%);
}

.przycisk--zolty:hover { background: #ffcf2e; }
.przycisk--zolty:hover::after { transform: translateX(115%); transition: transform .75s var(--wyjazd); }
.przycisk--zolty:active { box-shadow: 0 0 0 var(--zolty-ciemny); }

.przycisk--ciemny { background: var(--atrament); color: var(--bialy); box-shadow: 0 3px 0 #000; }
.przycisk--ciemny:hover { background: var(--grafit-700); }
.przycisk--ciemny:active { box-shadow: 0 0 0 #000; }

.przycisk--obrys { border-color: currentColor; background: transparent; color: inherit; }
.przycisk--obrys:hover { border-color: var(--atrament); background: var(--atrament); color: var(--bialy); }
.ciemne .przycisk--obrys:hover { border-color: var(--bialy); background: var(--bialy); color: var(--atrament); }
.zolte .przycisk--obrys:hover { border-color: var(--atrament); background: var(--atrament); color: var(--zolty); }

/* Stan otwarcia (wypełnia skrypt) */

.stan {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--szary);
}

.stan strong { color: var(--atrament); font-weight: 700; }

.stan__kropka {
  position: relative;
  flex: none;
  width: .75rem;
  height: .75rem;
  border: 2px solid var(--atrament);
  border-radius: 50%;
}

.stan--otwarte .stan__kropka { background: var(--zolty); }

.ciemne .stan { color: var(--tekst-jasny); }
.ciemne .stan strong { color: var(--bialy); }
.ciemne .stan__kropka { border-color: var(--szary-jasny); }
.ciemne .stan--otwarte .stan__kropka { border-color: var(--zolty); background: var(--zolty); }

.zolte .stan { color: var(--atrament); }
.zolte .stan--otwarte .stan__kropka { background: var(--atrament); }

/* Nagłówek podstron */

.strona-glowa { padding-block: clamp(1rem, .5rem + 1.5vw, 2rem) clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; }

.strona-glowa__w {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 2rem clamp(2rem, 5vw, 5rem);
}

.strona-glowa__tekst { display: grid; justify-items: start; gap: 1.25rem; }
.strona-glowa__tekst:only-child { grid-column: 1 / -1; }

.strona-glowa__kadr { overflow: hidden; border-radius: var(--promien); }

.strona-glowa__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .5rem;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-stretch: var(--waski);
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--szary-jasny);
}

.okruszki li { display: flex; align-items: center; gap: .5rem; }
.okruszki li + li::before { content: "/"; color: var(--linia-mocna); }
.okruszki a { display: inline-flex; align-items: center; min-height: 48px; color: var(--tekst-jasny); }

@media (max-width: 859px) {
  .strona-glowa__w { grid-template-columns: minmax(0, 1fr); }
  .strona-glowa__kadr { display: none; }
}

/* Dostępność */

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pomin {
  position: absolute;
  z-index: 100;
  top: -10rem;
  left: .75rem;
  padding: .8rem 1.1rem;
  border-radius: var(--promien);
  background: var(--zolty);
  color: var(--atrament);
  font-weight: 700;
}

.pomin:focus { top: .75rem; }

/* Ruch wspólny. Stan ukryty istnieje tylko z klasą .ruch, którą dodaje skrypt:
   bez skryptu i przy „ogranicz ruch” cała treść jest widoczna od razu. */

@keyframes wjazd {
  from { opacity: 0; transform: translateY(1.1rem); }
  to { opacity: 1; transform: none; }
}

@keyframes maska {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes zblizenie {
  from { transform: scale(1.16); }
  to { transform: none; }
}

@keyframes puls {
  from { opacity: .7; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .ruch [data-wejscie=""] { transition: opacity .7s var(--wyjazd), transform .7s var(--wyjazd); }
  .ruch [data-wejscie=""]:not(.widoczne) { opacity: 0; transform: translateY(1.5rem); }

  /* podstrony: nagłówek wchodzi sam, bez czekania na skrypt */
  .js .strona-glowa__tekst > * { animation: wjazd .7s var(--wyjazd) both; }
  .js .strona-glowa__tekst > :nth-child(2) { animation-delay: .07s; }
  .js .strona-glowa__tekst > :nth-child(3) { animation-delay: .14s; }
  .js .strona-glowa__tekst > :nth-child(4) { animation-delay: .21s; }
  .js .strona-glowa__kadr { animation: maska .9s var(--wyjazd) .1s both; }
  .js .strona-glowa__foto { animation: zblizenie 1.5s var(--wyjazd) .1s both; }

  /* kropka „teraz otwarte”: trzy pulsy i spokój */
  .stan--otwarte .stan__kropka::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: currentColor;
    color: var(--zolty);
    opacity: 0;
    animation: puls 1.3s ease-out .8s 3;
  }

  .zolte .stan--otwarte .stan__kropka::after { color: var(--atrament); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}