/* Scroll World — motyw dla strony CMS "O nas".
   Silnik (modules/webglobescrollworld) trzyma swoje domyślne tokeny w @layer sw,
   więc te reguły — nieulayerowane — zawsze wygrywają, niezależnie od kolejności
   ładowania. Ustawiamy tu tylko paletę, typografię i full-bleed kontenera. */

.scroll-world {
  /* paleta silnika */
  --sw-bg: #fdf6ea;
  --sw-ink: #2a2430;
  --sw-ink-soft: #6e6478;
  --sw-accent: #f04b4b;
  --sw-font-display: ui-rounded, "SF Pro Rounded", "Segoe UI", Arial, sans-serif;
  --sw-font-body: Arial, Helvetica, sans-serif;

  /* Wyjście poza wyśrodkowany kontener CMS na pełną szerokość okna.
     Kontener jest wyśrodkowany, więc ujemny margines o połowę różnicy
     szerokości działa niezależnie od paddingu motywu. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 100vw liczy się razem z pionowym paskiem przewijania, więc kontener bywa o te
   kilkanaście pikseli szerszy od body i strona dostaje poziomy pasek. Przycinamy
   to na wrapperze CMS-a. `clip` zamiast `hidden` — nie tworzy kontenera
   przewijania, a warstwy position:fixed silnika i tak z niego uciekają. */
.page-content--cms:has(.scroll-world) {
  overflow-x: clip;
}

/* Silnik pozycjonuje warstwy przez position:fixed. Gdyby któryś przodek
   miał transform/filter/perspective, fixed przypiąłby się do niego i cała
   scena rozjechałaby się w pionie. Sam kontener trzymamy więc czysty. */
.scroll-world,
.scroll-world__stage {
  transform: none;
  filter: none;
  perspective: none;
  contain: none;
}

/* Strona CMS ma klasę .rich-text — jej typografia (h2/p/ul/li/a) nie może
   nadpisywać copy generowanego przez silnik. */
.scroll-world .sw-copy__title {
  font-family: var(--sw-font-display);
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  text-transform: none;
}

.scroll-world .sw-copy__body {
  margin: 18px 0 0;
  padding: 0;
}

.scroll-world .sw-copy__tags {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.scroll-world .sw-copy__tags li {
  margin: 0;
  padding: 7px 14px;
  list-style: none;
}

.scroll-world .sw-copy__tags li::before,
.scroll-world .sw-copy__tags li::marker {
  content: none;
}

.scroll-world .sw-btn,
.scroll-world .sw-btn:hover,
.scroll-world .sw-btn:focus {
  text-decoration: none;
}

/* Sceny to SVG — przeglądarka skalowałaby je bez wygładzania krawędzi tekstu,
   a przy object-fit: cover trzeba jej powiedzieć, że mają wypełnić kadr. */
.scroll-world .sw-scene__still {
  background: var(--sw-bg);
}

/* Kadr pionowy (stillPortrait, 900×1600) jest projektowany tak, że bohater
   siedzi w górnych ~45% wysokości, a dolna część to tło schodzące pod scrim
   z tekstem. Na telefonie cała wysokość mieści się w kadrze, więc przesunięcie
   działa dopiero na tablecie, gdzie `cover` przycina pion. */
@media (orientation: portrait) {
  .scroll-world .sw-scene__still {
    object-position: center 38%;
  }
}

/* Telefon położony poziomo dostaje z powrotem kadr szeroki — tam przycinany
   jest pion, więc trzymamy go trochę wyżej niż środek. */
@media (orientation: landscape) and (max-width: 940px) {
  .scroll-world .sw-scene__still {
    object-position: center 40%;
  }
}