/**
 * starter-kit.css — rytm strony zestawu startowego: kotwice i pięć odstępstw.
 *
 * Wymaga tokens.css i base.css wczytanych wcześniej.
 * Każdy odstęp pochodzi z var(--dc-*).
 *
 * TO NIE JEST PLIK SEKCJI, choć leży w sections/ — dokładnie jak
 * front-page.css, single-product.css, header.css, footer.css i styleguide.css:
 * pętla w dc_enqueue_assets() wczytuje stąd wszystko. Stylizuje WYŁĄCZNIE
 * owijkę .dc-starter-kit__section z template-starter-kit.php — nigdy sekcję
 * w środku.
 *
 * DLACZEGO TUTAJ, A NIE W assets/css/pages/zestaw-startowy.css. Motyw ma
 * drugą, warunkową szufladę na arkusze stron: dc_enqueue_assets() wczytuje
 * assets/css/pages/{slug}.css tylko na stronie o tym slugu (dziś: o-nas).
 * Byłaby tańsza — ~1,4 kB nie jechałoby przez cały serwis. Odpada z dwóch
 * powodów, oba twarde:
 *
 *   1. TAMTA SZUFLADA WIĄŻE SIĘ SLUGIEM, TA STRONA WIĄŻE SIĘ SZABLONEM.
 *      page-o-nas.php wygrywa w hierarchii nazwą pliku wziętą ze sluga, więc
 *      zmiana sluga odłącza szablon i style JEDNOCZEŚNIE — awaria jest jedna
 *      i widoczna od razu (uzasadnienie stoi w functions.php). Tutaj szablon
 *      wisi na meta _wp_page_template strony 216, nie na slugu. Zmiana sluga
 *      zabrałaby style, ZOSTAWIAJĄC działający szablon: strona renderuje się
 *      dalej, tylko z cichym rozjazdem rytmu. To jest dokładnie ta awaria
 *      w dwóch miejscach, przed którą tamten komentarz ostrzega.
 *   2. STRONA SKŁADANA Z SEKCJI MA JUŻ SWOJĄ KONWENCJĘ i to jej trzeci
 *      przypadek. front-page.css i single-product.css leżą w sections/;
 *      pages/ jest szufladą stron TREŚCIOWYCH (o-nas to ~600 linii własnych
 *      reguł dla jednego adresu). Ten plik ma pięć reguł na owijkę i zero
 *      reguł na treść — jest rodzeństwem tamtych dwóch, nie o-nas.
 *
 * ODSTĘPY MIĘDZY SEKCJAMI W WIĘKSZOŚCI TU NIE MIESZKAJĄ. Zmierzone
 * treść→treść w makiecie starter-kit.html i na zbudowanej stronie
 * (2026-08-31, 1440 / 768 / 390 px — w makiecie wynik identyczny na każdej
 * z trzech szerokości): siedem z dwunastu odstępów to 128 px i motyw daje je
 * bez ani jednej reguły tutaj, bo każda sekcja niesie .dc-section
 * (64 + 64 z base.css).
 *
 * ODSTĘPSTW JEST PIĘĆ i tylko one stoją niżej. Zmierzone, nie odczytane
 * z atrybutów style makiety. Cztery wracają do makiety, PIĄTE OD NIEJ
 * ODCHODZI — patrz sekcja 3b:
 *
 *   odstęp                        makieta   motyw   ustawiamy   różnica
 *   nagłówek → starter-kit-why       72       64        72        +8
 *   starter-kit-why → …-buy          56      128        56       −72
 *   …-buy → starter-kit-details     128      128        88       −40  ← nie z makiety
 *   faq → fraction-compare          152      128       152       +24
 *   help-cta → blog-carousel         64      128        64       −64
 *
 * SZÓSTE MIEJSCE, GDZIE MAKIETA MÓWI CO INNEGO: blog-carousel → stopka.
 * Makieta daje 0 px, my zostawiamy bazowe 64 px — powód w sekcji 5.
 * Nie ma na to reguły; wystarczyło jej NIE pisać.
 *
 * DODAJEMY PADDINGIEM, ODEJMUJEMY UJEMNYM MARGINESEM. Powód jest taki sam
 * jak w single-product.css: reguła ma dotyczyć owijki, nie sekcji w środku,
 * a paddingu nie da się zejść poniżej zera. Ujemny margines na owijce
 * zostawia sekcję nietkniętą i robi dokładnie to, co trzeba.
 *
 * KAŻDY ODSTĘP JEST ZAPISANY JEDNĄ REGUŁĄ NA JEDNYM ELEMENCIE — to nie
 * kosmetyka, tylko warunek poprawności. Marginesy pionowe sąsiadujących
 * elementów blokowych SIĘ SKLEJAJĄ, a przy wartościach ujemnych wynikiem
 * jest najmniejsza z nich, nie ich suma. Rozbicie −72 px na „−56 pod why"
 * i „−16 nad buy" dałoby więc −56, nie −72, i odstęp 72 px zamiast 56.
 * Stąd: nigdy dwie reguły na jeden odstęp.
 */

/* ==========================================================================
   1. KOTWICE POD LEPKIM NAGŁÓWKIEM
   Nagłówek jest position: sticky (header.css) i zmierzony ma 61 px przy
   1440 px oraz 65 px przy 768 i 390 px. Bez marginesu przewijania cel
   kotwicy ląduje pod paskiem. Na TEJ stronie kotwic używanych jest dwie:
   #starter-kit-buy (przycisk „Zamów zestaw testowy" ze starter-kit-why
   ORAZ przełącznik frakcji, który wraca na nią po przeładowaniu)
   i #reviews (odnośnik przy ocenie w starter-kit-buy).
   --dc-space-80 jest pierwszym tokenem odstępu powyżej 65 px; nadwyżka
   15–19 px to oddech między paskiem a górną krawędzią sekcji, nie luz
   do zmierzenia. Ta sama wartość i ten sam powód co we front-page.css
   i single-product.css. Margines stoi na owijce, bo to ona niesie id
   (reguła 4: kotwica jest sprawą strony, nie sekcji).
   ========================================================================== */
.dc-starter-kit__section {
  scroll-margin-block-start: var(--dc-space-80);
}

/* ==========================================================================
   2. OTWARCIE STRONY: +8 px NAD PIERWSZĄ SEKCJĄ
   64 (sekcja) + 8 = 72 (makieta). Padding, nie margines: margines górny
   pierwszego dziecka skleiłby się z <main> i wypchnął całą stronę zamiast
   odsunąć samą sekcję.
   ========================================================================== */
.dc-starter-kit__section#starter-kit-why {
  padding-block-start: var(--dc-space-8);
}

/* ==========================================================================
   3. DOMKNIĘCIE DO SEKCJI ZAKUPOWEJ: 56 px ZAMIAST 128
   To jest ten jeden odstęp, który na tej stronie niesie treść: „dlaczego
   zestaw" i „kup zestaw" to jedna myśl w dwóch sekcjach, więc makieta
   ściska je do 56 px, podczas gdy każda inna para ma 128. Bez tego
   przycisk „Zamów zestaw testowy" i jego cel wyglądałyby na dwa osobne
   rozdziały strony.
   128 − 72 = 56. Cała różnica na JEDNYM elemencie — patrz nagłówek pliku.
   ========================================================================== */
.dc-starter-kit__section#starter-kit-buy {
  margin-block-start: calc(-1 * (var(--dc-space-64) + var(--dc-space-8)));
}

/* ==========================================================================
   3b. SEKCJA ZAKUPOWA → SZCZEGÓŁY: 88 px ZAMIAST 128
   ODEJŚCIE OD MAKIETY, świadome (uwaga Andrzeja, 2026-08-31, po obejrzeniu
   złożonej strony). Makieta daje tu pełne 128 px jak każdej innej parze
   i zmierzone tyle właśnie wychodziło, ale na złożonej stronie ta jedna para
   czyta się inaczej niż w makiecie: pod kartą zakupową nie stoi kolejna
   sekcja z własnym nagłówkiem, tylko PASEK ZAKŁADEK — lekki rząd pigułek,
   który sam w sobie nie ma ciężaru nagłówka. Przy 128 px wisiał w próżni
   i wyglądał na oderwany od tego, co opisuje.

   88 px (128 − 40) trzyma go przy karcie, nie sklejając ich w jedno.
   To ta sama liczba, którą makieta daje na dole FAQ — na tej stronie jest
   już drugim wystąpieniem, więc nie wprowadza nowej wartości do rytmu.
   Reguła stoi na sekcji NIŻSZEJ, jak każdy odstęp w tym pliku.
   ========================================================================== */
.dc-starter-kit__section#starter-kit-details {
  margin-block-start: calc(-1 * var(--dc-space-40));
}

/* ==========================================================================
   4. ODDECH POD FAQ: 152 px ZAMIAST 128
   64 (sekcja) + 24 = 88 px dolnego oddechu, czyli 152 px treść→treść.
   Ta sama wartość i ten sam powód co w single-product.css: makieta domyka
   FAQ szerzej niż resztę, a shared/faq.php stoi też na karcie produktu
   i tam domknięcie jest inne. Różnicę dokłada STRONA, nie sekcja.
   ========================================================================== */
.dc-starter-kit__section#faq {
  padding-block-end: var(--dc-space-24);
}

/* ==========================================================================
   5. ZAMKNIĘCIE STRONY: BLOG PRZYKLEJONY DO CTA, ALE NIE DO STOPKI
   Makieta zbija ogon strony dwa razy: #contact (u nas shared/help-cta)
   i blog stoją 64 px od siebie zamiast 128 — to zostaje — oraz blog dotyka
   stopki (0 px zamiast 64). DRUGIEGO NIE POWTARZAMY (decyzja Andrzeja,
   2026-08-31, po obejrzeniu złożonej strony).

   Powód jest w różnicy między makietą a motywem, nie w liczbie. W makiecie
   tor bloga ma 24 px własnego dolnego paddingu i to on stykał się ze stopką;
   w motywie tor ma 0 px, więc te same „0 px treść→treść" ustawiają
   przy krawędzi stopki SAME KARTY. Karty mają cień i zaokrąglone dolne rogi,
   a stopka — własne, jaśniejsze tło z górną krawędzią: dolne rogi kart
   wchodziły w nią i wyglądały na ucięte. Zero w makiecie i zero w motywie
   dają więc dwa różne obrazy, a wierność makiecie jest wiernością OBRAZU.

   Zostaje więc bazowe 64 px z .dc-section — bez ani jednej reguły na dole,
   dokładnie tyle samo, ile ma cross-sell → stopka na karcie produktu.
   Odstęp help-cta → blog zostaje ściśnięty: 128 − 64 = 64.

   NIE ROBIMY TEGO PADDINGIEM STOPKI. Stopka jest wspólna dla całego serwisu,
   a odstęp do niej jest dziś poprawny na obu pozostałych złożonych stronach
   (strona główna 80 px, karta produktu 64 px — zmierzone). Reguła w
   footer.css przesunęłaby obie, żeby naprawić trzecią. To rytm TEJ strony
   i tu mieszka.
   ========================================================================== */
.dc-starter-kit__section#blog-carousel {
  margin-block-start: calc(-1 * var(--dc-space-64));
}

/* ==========================================================================
   6. WARSTWA ATMOSFERY — CZTERY ZŁOTE PLAMY POD CAŁĄ STRONĄ
   Makieta (starter-kit.html l. 47–52) kładzie pod treścią rozmytą siatkę
   złotych plam; od niej góra strony jest ZŁOTAWA, a nie od tła sekcji.
   To samo jest w home.html i product.html — i na żadnej zbudowanej stronie
   motywu tego nie ma. Tu wchodzi po raz pierwszy, na tej jednej stronie.

   GEOMETRIA W PIKSELACH, KOLOR W TOKENACH. Ten sam podział, co w istniejącej
   plamie .dc-about__blob: rozmiary i przesunięcia plamy atmosferycznej są
   jednorazową geometrią sceny, a nie odstępem z rytmu strony, więc nie mają
   w tokenach czego wziąć; kolor ma i bierze (--dc-accent-a*). Liczby
   przepisane z makiety co do piksela.

   OPACITY JEST JEDYNYM POKRĘTŁEM MOTYWU. Makieta daje warstwie .16
   w jasnym i .09 w ciemnym, przy identycznych kolorach plam w obu (home.html
   i home-dark.html mają tam te same rgba). Naszej rampy nie da się przepisać
   jeden do jednego: szczyt makiety to alfa .9, a najmocniejszy token
   w skali to --dc-accent-a50. Dlatego opacity NIE jest przepisane z makiety,
   tylko DOBRANE tak, żeby wyszedł ten sam piksel.

   Skalibrowane pomiarem, nie na oko: zrzuty górnych 1440 × 700 px makiety
   i strony, porównane w czterech punktach w plamie i jednym poza nią.
   Przy .31 różnica nie przekracza 2/255 na żadnym kanale w żadnym punkcie
   (w plamie 235,234,229 wobec 233,233,228; poza plamą 238,241,244 w obu —
   identycznie, co potwierdza, że zgadza się samo tło). Ciemny bierze tę samą
   wartość przez proporcję z makiety (.09/.16), czyli .31 × 0,5625 ≈ .17.
   ========================================================================== */
.dc-starter-kit {
  position: relative;
}

.dc-starter-kit__atmosphere {
  position: absolute;
  z-index: var(--dc-z-base);
  inset: 0;

  /* Przycinanie stoi TUTAJ, a nie na .dc-starter-kit — overflow na przodku
     całej treści zabiłby position: sticky wewnątrz sekcji, gdyby kiedyś
     któraś go użyła. Warstwa dekoracyjna nie ma czego stracić. */
  overflow: hidden;
  pointer-events: none;
  opacity: 0.31;
}

[data-theme='dark'] .dc-starter-kit__atmosphere {
  opacity: 0.17;
}

.dc-starter-kit__sections {
  position: relative;
  z-index: var(--dc-z-raised);
}

.dc-starter-kit__blob {
  position: absolute;
  border-radius: var(--dc-radius-full);
}

/* Plama 1 — ta, którą widać jako złotawą górę strony. Wystaje poza lewą
   i górną krawędź, więc widoczna jest jej prawa dolna ćwiartka. */
.dc-starter-kit__blob--1 {
  inset-block-start: -280px;
  inset-inline-start: -220px;
  width: 1100px;
  height: 1100px;
  background-image: radial-gradient(
    ellipse at 40% 52%,
    var(--dc-accent-a50),
    var(--dc-accent-a30) 34%,
    var(--dc-accent-a10) 58%,
    var(--dc-accent-a00) 76%
  );
  filter: blur(78px);
  animation: dcStarterKitBlobA 34s var(--dc-ease) infinite;
}

.dc-starter-kit__blob--2 {
  inset-block-start: 900px;
  inset-inline-end: -200px;
  width: 920px;
  height: 920px;
  background-image: radial-gradient(
    ellipse at 57% 44%,
    var(--dc-accent-a50),
    var(--dc-accent-a30) 36%,
    var(--dc-accent-a10) 60%,
    var(--dc-accent-a00) 78%
  );
  filter: blur(70px);
  animation: dcStarterKitBlobB 28s var(--dc-ease) infinite;
}

.dc-starter-kit__blob--3 {
  inset-block-start: 2600px;
  inset-inline-start: -190px;
  width: 980px;
  height: 980px;
  background-image: radial-gradient(
    ellipse at 53% 50%,
    var(--dc-accent-a50),
    var(--dc-accent-a30) 38%,
    var(--dc-accent-a00) 70%
  );
  filter: blur(80px);
  animation: dcStarterKitBlobA 33s var(--dc-ease) 9s infinite;
}

.dc-starter-kit__blob--4 {
  inset-block-start: 4400px;
  inset-inline-end: -150px;
  width: 860px;
  height: 860px;
  background-image: radial-gradient(
    ellipse at 47% 52%,
    var(--dc-accent-a50),
    var(--dc-accent-a30) 40%,
    var(--dc-accent-a00) 70%
  );
  filter: blur(76px);
  animation: dcStarterKitBlobB 35s var(--dc-ease) 14s infinite;
}

/* Klatki przepisane z makiety. Dwie, nie cztery: plamy 3 i 4 biorą te same
   tory z innym opóźnieniem — tak samo jak w makiecie. */
@keyframes dcStarterKitBlobA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  30% {
    transform: translate(85px, -70px) scale(1.11);
  }

  65% {
    transform: translate(-60px, -100px) scale(1.07);
  }
}

@keyframes dcStarterKitBlobB {
  0%,
  100% {
    transform: translate(0, 0) scale(1.04);
  }

  35% {
    transform: translate(-90px, 80px) scale(0.95);
  }

  70% {
    transform: translate(80px, 110px) scale(1.14);
  }
}

/* Makieta wycisza wszystkie animacje przy prefers-reduced-motion; plamy
   zostają nieruchome, ale WIDOCZNE — to tło, nie ruch informacyjny. */
@media (prefers-reduced-motion: reduce) {
  .dc-starter-kit__blob {
    animation: none;
  }
}