/*
 * Hero filmowe - inwestycje niestandardowe.
 *
 * Sekcja jest torem przewijania (kilka ekranów wysokości), a w jej wnętrzu
 * siedzi przyklejona scena o wysokości jednego ekranu. Skrypt zamienia postęp
 * przewijania na czas filmu i numer aktu; CSS odpowiada tylko za wygląd i
 * przejścia, więc bez JS zostaje statyczne hero na plakacie.
 */

.ax-cine {
  --ax-cine-screens: 5.6;
  --ax-cine-fade: 900ms;
  --ax-cine-ease: cubic-bezier(.16, 1, .3, 1);
  /*
   * Ogon toru: ostatni odcinek przewijania nie rusza już filmu, tylko trzyma
   * ostatnią klatkę i ostatni akt na ekranie. Bez tego koniec opowieści ucieka
   * w górę w tej samej chwili, w której film dobiega końca.
   */
  --ax-cine-hold: 70svh;
  position: relative;
  height: calc(var(--ax-cine-screens) * 100svh + var(--ax-cine-hold));
  background: var(--ax-ink-deep);
  color: var(--ax-paper);
}

.ax-cine__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- kadr ---------- */

.ax-cine__media {
  position: absolute;
  inset: 0;
}

.ax-cine__poster,
.ax-cine__video,
.ax-cine__poster picture,
.ax-cine__poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ax-cine__poster-img,
.ax-cine__video {
  object-fit: cover;
  object-position: 50% 46%;
}

/*
 * Plakat leży pod filmem i gaśnie, kiedy pojawi się pierwsza klatka. Dzięki
 * temu LCP liczy się z obrazka (AVIF), a nie z 7 MB filmu.
 */
.ax-cine__poster {
  opacity: 1;
  transition: opacity 700ms ease;
}

/*
 * Plakat gaśnie dopiero wtedy, gdy film dojdzie do pełnego krycia. Gdy obie
 * warstwy przenikały równocześnie, w połowie przejścia każda była w połowie
 * przejrzysta i przez nie prześwitywał granat sekcji: kadr na moment ciemniał
 * o kilkanaście procent jasności i wracał, co widać było jako granatowy błysk
 * zaraz po wczytaniu hero. Film leży nad plakatem, więc samo jego rozjaśnienie
 * wystarcza - plakat nie musi się do tego wygaszać.
 */
.ax-cine[data-cine-video-ready="1"] .ax-cine__poster {
  opacity: 0;
  transition-delay: 720ms;
}

.ax-cine__video {
  opacity: 0;
  transition: opacity 700ms ease;
  border: 0;
  background: transparent;
}

.ax-cine[data-cine-video-ready="1"] .ax-cine__video {
  opacity: 1;
}

/* Plakat aktu - warstwa zapasowa, gdy film nie wchodzi (statyczny tryb). */
.ax-cine__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  opacity: 0;
  transition: opacity var(--ax-cine-fade) ease;
}

.ax-cine__still[data-cine-on="1"] {
  opacity: 1;
}

/*
 * Dolny cień jest tu mocniejszy niż w zwykłym hero, bo na dole kadru stoi
 * wszystko naraz: tytuł, lead, przyciski i zegar. Górny pas jest po to, żeby
 * belka i podpowiedź przewijania nie ginęły na jasnym niebie.
 */
.ax-cine .ax-hero__grad-b {
  background:
    linear-gradient(to top, rgba(11, 15, 34, .9) 0%, rgba(11, 15, 34, 0) 40%),
    linear-gradient(to bottom, rgba(11, 15, 34, .5) 0%, rgba(11, 15, 34, 0) 25%);
}

/*
 * Cień wjeżdża tylko z prawej i tylko wtedy, gdy grają akty - tekst aktu stoi
 * przy tej krawędzi. Lewa strona kadru zostaje czysta: film jest tu treścią,
 * a nie tłem pod aplą.
 */
.ax-cine__grad-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62vw, 900px);
  background: linear-gradient(to left, rgba(11, 15, 34, .82) 0%, rgba(11, 15, 34, .72) 38%, rgba(11, 15, 34, .35) 68%, rgba(11, 15, 34, 0) 100%);
  opacity: 0;
  transform: translateX(6%);
  transition: opacity var(--ax-cine-fade) ease, transform 1.1s var(--ax-cine-ease);
  pointer-events: none;
}

.ax-cine[data-cine-started="1"] .ax-cine__grad-side {
  opacity: 1;
  transform: none;
}

/* ---------- siatka treści ---------- */

/*
 * Dolny zapas jest większy, niż wygląda na to potrzeba, i to jest celowe.
 * Scena jest przyklejona do `top: 0`, ale przy nieruszonej stronie nad nią stoi
 * jeszcze belka nadrzędna - sticky zaczyna się pod nią, więc dolne ~42 px sceny
 * wypada pod krawędź okna. Przy ciaśniejszym zapasie przyciski i zegar lądowały
 * dokładnie w tym pasie i pierwsze, co widział wchodzący, to ucięta wizytówka.
 */
.ax-cine__shell {
  position: absolute;
  inset: 0;
  padding: calc(var(--ax-navh, 82px) + clamp(16px, 3vh, 40px)) var(--ax-gutter) clamp(76px, 10vh, 112px);
  pointer-events: none;
}

.ax-cine__frame {
  position: relative;
  width: 100%;
  max-width: var(--ax-maxw);
  height: 100%;
  margin: 0 auto;
}

/*
 * Apla pod wizytówką. Kadr wejściowy jest jasny - piaskowa elewacja w słońcu -
 * a dolny cień sceny kończy się niżej, niż sięga tytuł, więc górna połowa
 * hasła siadała na tle o własnej jasności. Zamiast przygaszać całe hero
 * zagęszczamy dokładnie ten obszar, w którym stoi kolumna treści: elipsa przy
 * lewym dolnym narożniku plus płaski pas na wysokości tytułu. Oba przejścia
 * dochodzą do zera wewnątrz kadru, więc apla nie ma widocznej krawędzi.
 *
 * Warstwa gaśnie razem z wizytówką: akty mają własny cień z prawej, a lewa
 * strona filmu ma wtedy zostać czysta.
 */
.ax-cine__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 76% at 6% 104%,
      rgba(11, 15, 34, .5) 0%,
      rgba(11, 15, 34, .34) 44%,
      rgba(11, 15, 34, .14) 70%,
      rgba(11, 15, 34, 0) 100%),
    linear-gradient(to top,
      rgba(11, 15, 34, .18) 0%,
      rgba(11, 15, 34, .28) 30%,
      rgba(11, 15, 34, .17) 48%,
      rgba(11, 15, 34, 0) 66%);
  transition: opacity var(--ax-cine-fade) ease;
}

.ax-cine__shell:has(.ax-cine__intro[aria-hidden="true"])::before {
  opacity: 0;
}

/* ---------- akt 00: wizytówka inwestycji ---------- */

/*
 * Wizytówka stoi na dole kadru, a nie nad nim: tytuł ma być największą rzeczą
 * na ekranie, więc wszystko inne schodzi mu z drogi. Po prawej zostaje kolumna
 * szerokości zegara - bez niej najdłuższy wiersz leadu wchodzi pod godzinę.
 */
.ax-cine__intro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-right: 300px;
  transition: opacity var(--ax-cine-fade) ease, transform var(--ax-cine-fade) var(--ax-cine-ease);
}

.ax-cine__intro[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
}

/*
 * Jedyny nadtytuł w kadrze - lokalizacja. Okruszki tu nie wchodzą, bo dwie
 * linie kapitalików z rozstrzeleniem jedna pod drugą czytały się jak dwie
 * ścieżki nawigacji; droga do strony stoi w belce i w stopce.
 */
.ax-cine__eyebrow {
  margin: 0 0 22px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, .6);
  /* Kapitaliki mają najcieńsze kreski w kadrze - cień je odkleja od zdjęcia. */
  text-shadow: 0 1px 10px rgba(11, 15, 38, .55);
}

/*
 * Tytuł jest tu jedynym elementem, który wolno rozpędzić do skali plakatu -
 * to on niesie wrażenie filmu, a nie belka z sekcjami. Interlinia poniżej
 * jedności skleja oba wiersze w jeden blok liter.
 */
.ax-cine__title {
  margin: 0;
  color: var(--ax-paper);
  font-weight: 600;
  /*
   * Hasło jest dłuższe niż dawna nazwa osiedla, a pod nim stoi czterozdaniowy
   * lead. Skala plakatu (164 px) zjadała kadr i wciskała opis pod zegar.
   */
  font-size: clamp(48px, 7.2vw, 118px);
  line-height: .9;
  letter-spacing: -.045em;
  /* Rozmyty cień pod literami - dokłada kontrast tam, gdzie apla jest już cienka. */
  text-shadow: 0 2px 28px rgba(11, 15, 38, .42);
}

/*
 * Bez wcięcia drugiego wiersza. Przy tej skali litery przesunięcie rozbijało
 * nazwę na dwa osobne słowa zamiast na jedną nazwę osiedla w dwóch liniach.
 */
.ax-cine .ax-hero__line--italic {
  padding-left: 0;
}

.ax-cine .ax-hero__line--italic .ax-hero__line-inner {
  font-weight: 300;
  font-style: italic;
  font-size: 1em;
  letter-spacing: -.035em;
  /* Stalowy odcień odcina drugi wiersz od pierwszego bez zmiany skali. */
  color: var(--ax-steel-light);
}

.ax-cine__lead {
  max-width: 52ch;
  margin: 18px 0 0;
  /*
   * Lead jest treścią wizytówki, nie dopiskiem pod tytułem - przy 15 px na
   * 1440 px czytał się jak podpis techniczny i wymagał wpatrywania się.
   */
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: rgba(244, 241, 235, .78);
  text-shadow: 0 1px 14px rgba(11, 15, 38, .5);
}

.ax-cine__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  pointer-events: auto;
}

.ax-cine__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px clamp(20px, 2vw, 30px);
  border-radius: var(--ax-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.ax-cine__cta--solid {
  background: var(--ax-paper);
  color: var(--ax-ink);
  border: 1px solid var(--ax-paper);
}

.ax-cine__cta--solid:hover,
.ax-cine__cta--solid:focus-visible {
  background: transparent;
  color: var(--ax-paper);
  transform: translateY(-2px);
}

.ax-cine__cta--ghost {
  background: var(--ax-glass-dark-light-bg);
  backdrop-filter: var(--ax-glass-dark-light-blur);
  -webkit-backdrop-filter: var(--ax-glass-dark-light-blur);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--ax-paper);
}

.ax-cine__cta--ghost:hover,
.ax-cine__cta--ghost:focus-visible {
  border-color: rgba(255, 255, 255, .48);
  transform: translateY(-2px);
}

/* ---------- akty 01..n: narracja przy kadrze ---------- */

/*
 * Akt siedzi wyżej niż połowa kadru: pod nim jest jeszcze zegar, a tekst
 * wyśrodkowany optycznie wypada nad środkiem, nie w nim.
 */
.ax-cine__act {
  position: absolute;
  right: 0;
  top: 44%;
  width: min(440px, 42vw);
  margin: 0;
  transform: translateY(calc(-50% + 26px));
  opacity: 0;
  pointer-events: none;
  /*
   * Wyjście aktu: szybkie i bez opóźnienia. Reguła stanu docelowego rządzi
   * przejściem, więc to jest czas gaśnięcia ustępującego nagłówka.
   */
  transition: opacity 360ms ease, transform 360ms var(--ax-cine-ease);
}

/*
 * Wejście dopiero po zgaśnięciu poprzednika. Wspólne 0,9 s bez opóźnienia -
 * tak ma prototyp - stawiało oba nagłówki na 50% krycia w tej samej chwili, a
 * przy tej skali liter czytało się to jak usterka, nie jak przenikanie. Teraz
 * jest to zejście i wejście, nie zlanie: 340 ms opóźnienia mija się o 20 ms z
 * końcem gaśnięcia, więc kadr nigdy nie pokazuje dwóch aktów naraz.
 */
.ax-cine__act[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(-50%);
  transition:
    opacity var(--ax-cine-fade) ease 340ms,
    transform var(--ax-cine-fade) var(--ax-cine-ease) 340ms;
}

.ax-cine__act-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, .6);
}

.ax-cine__act-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ax-steel-light);
  font-variant-numeric: tabular-nums;
}

.ax-cine__act-num::after {
  content: "";
  width: clamp(20px, 3vw, 42px);
  height: 1px;
  background: rgba(200, 216, 240, .5);
}

.ax-cine__act-title {
  margin: 14px 0 18px;
  color: var(--ax-paper);
  font-weight: 600;
  font-size: clamp(34px, 3.8vw, 60px);
  line-height: .95;
  letter-spacing: -.04em;
}

.ax-cine__act-title .ax-heading-italic {
  color: var(--ax-steel-light);
}

.ax-cine__act-lead {
  max-width: 40ch;
  margin: 0 0 20px;
  font-size: clamp(15.5px, 1.16vw, 18.5px);
  line-height: 1.6;
  color: rgba(244, 241, 235, .74);
}

.ax-cine__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-cine__chip {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--ax-pill);
  background: rgba(11, 15, 34, .34);
  backdrop-filter: var(--ax-glass-card-blur);
  -webkit-backdrop-filter: var(--ax-glass-card-blur);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, .82);
}

/* ---------- podpowiedź przewijania: prawy górny róg ---------- */

/*
 * Podpowiedź stoi pod belką, a nie na dole kadru. Dół należy do tytułu i
 * zegara, a kreska spadająca w dół mówi "przewiń" szybciej niż strzałka
 * doklejona do zdania.
 */
.ax-cine__hint {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  justify-items: end;
  gap: 10px;
  margin: 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  /*
   * Te dwie mikroetykiety leżą na gołym kadrze, poza zasięgiem dolnego
   * gradientu, więc przy jasnym ujęciu dnia gubiły się w koronach drzew.
   * Cień zamiast apli - hero ma zostać odsłonięte.
   */
  color: rgba(244, 241, 235, .72);
  text-shadow: 0 1px 10px rgba(11, 15, 38, .55);
  transition: opacity var(--ax-cine-fade) ease;
}

.ax-cine[data-cine-started="1"] .ax-cine__hint {
  opacity: 0;
}

.ax-cine__hint-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--ax-paper), transparent);
  animation: ax-cine-drop 1.8s var(--ax-cine-ease) infinite;
}

@keyframes ax-cine-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- zegar i suwak: prawy dolny róg ---------- */

/*
 * Godzina stoi w kadrze od pierwszej klatki - to ona zapowiada, że film
 * prowadzi od południa do nocy. Suwak dochodzi dopiero z pierwszym aktem,
 * kiedy jest już co przewijać.
 */
.ax-cine__gauge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: end;
  gap: 12px;
  min-width: 240px;
  pointer-events: auto;
}

.ax-cine__clock-lbl {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, .72);
  text-shadow: 0 1px 10px rgba(11, 15, 38, .55);
}

/*
 * Godzina jest drugą liczbą tej sekcji po tytule - przy 27 px ginęła obok
 * stumetrowych liter, a to ona pokazuje, że film idzie od rana do nocy.
 */
.ax-cine__clock-time {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ax-paper);
}

.ax-cine__scrub {
  display: block;
  width: 240px;
  margin-top: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ax-cine-fade) ease;
}

.ax-cine[data-cine-started="1"] .ax-cine__scrub {
  opacity: 1;
  pointer-events: auto;
}

.ax-cine__scrub input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}

.ax-cine__scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(244, 241, 235, .26);
}

.ax-cine__scrub input[type="range"]::-moz-range-track {
  height: 1px;
  background: rgba(244, 241, 235, .26);
}

/*
 * Uchwyt to znak Agrobeksu, nie kropka. Na całej długości filmu to jedyny
 * element interfejsu, który klient przesuwa palcem - niech to będzie nasz
 * znak, a nie domyślny suwak przeglądarki.
 */
.ax-cine__scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 22px;
  margin-top: -10.5px;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22111.7%2023.1%2077.77%2062.08%22%3E%3Cpath%20fill%3D%22%23F4F1EB%22%20d%3D%22M141.93%2C54.1l8.64-8.64-21.37-21.36c-.64-.64-1.5-1-2.41-1h-14.51c-.5%2C0-.76.61-.4.97l30.04%2C30.03ZM189.26%2C24.07c.36-.36.1-.97-.4-.97h-14.51c-.9%2C0-1.77.36-2.4%2C1l-21.37%2C21.36%2C8.64%2C8.64%2C30.04-30.03ZM111.87%2C84.21c-.36.36-.1.97.4.97h14.51c.9%2C0%2C1.77-.36%2C2.41-1l21.4-21.39-8.64-8.64-30.07%2C30.06ZM189.29%2C84.21l-30.07-30.06-8.64%2C8.64%2C21.4%2C21.39c.64.64%2C1.5%2C1%2C2.41%2C1h14.51c.51%2C0%2C.76-.61.4-.97Z%22%2F%3E%3C%2Fsvg%3E") center/22px 18px no-repeat;
  cursor: ew-resize;
}

.ax-cine__scrub input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22111.7%2023.1%2077.77%2062.08%22%3E%3Cpath%20fill%3D%22%23F4F1EB%22%20d%3D%22M141.93%2C54.1l8.64-8.64-21.37-21.36c-.64-.64-1.5-1-2.41-1h-14.51c-.5%2C0-.76.61-.4.97l30.04%2C30.03ZM189.26%2C24.07c.36-.36.1-.97-.4-.97h-14.51c-.9%2C0-1.77.36-2.4%2C1l-21.37%2C21.36%2C8.64%2C8.64%2C30.04-30.03ZM111.87%2C84.21c-.36.36-.1.97.4.97h14.51c.9%2C0%2C1.77-.36%2C2.41-1l21.4-21.39-8.64-8.64-30.07%2C30.06ZM189.29%2C84.21l-30.07-30.06-8.64%2C8.64%2C21.4%2C21.39c.64.64%2C1.5%2C1%2C2.41%2C1h14.51c.51%2C0%2C.76-.61.4-.97Z%22%2F%3E%3C%2Fsvg%3E") center/22px 18px no-repeat;
  cursor: ew-resize;
}

.ax-cine__scrub input[type="range"]:focus-visible {
  outline: 2px solid var(--ax-steel-light);
  outline-offset: 6px;
}

/* ---------- tryb statyczny: brak JS, oszczędny ruch, słabe łącze ---------- */

/*
 * Bez JS sekcja nie ma prawa zjadać sześciu ekranów pustki, dlatego wysokość
 * niesie modyfikator dokładany przez skrypt. Domyślnie stoimy na jednym
 * ekranie i wyglądamy jak zwykłe hero.
 */
.ax-cine:not([data-cine-ready]) {
  height: 100svh;
}

.ax-cine:not([data-cine-ready]) .ax-cine__gauge,
.ax-cine:not([data-cine-ready]) .ax-cine__act {
  display: none;
}

/*
 * W trybie statycznym zegar zostaje - pokazuje porę dnia z plakatu. Znika sam
 * suwak, bo nie ma czym przewijać.
 */
.ax-cine[data-cine-mode="static"] .ax-cine__scrub,
.ax-cine[data-cine-mode="static"] .ax-cine__video {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ax-cine__hint-line,
  .ax-cine .ax-hero__line-inner {
    animation: none !important;
  }

  .ax-cine__intro,
  .ax-cine__act,
  .ax-cine__still,
  .ax-cine__grad-side,
  .ax-cine__gauge {
    transition-duration: 1ms;
  }
}

/* ---------- pulpit węższy ---------- */

@media (max-width: 1240px) {
}

/*
 * Poniżej tej szerokości kolumna zegara zjadałaby połowę wiersza tytułu, więc
 * tekst dostaje całą szerokość, a zegar wraca nad niego.
 */
@media (max-width: 1000px) {
  .ax-cine__intro {
    padding-right: 0;
    bottom: clamp(64px, 9vh, 96px);
  }
}

@media (max-width: 1100px) {
  /* Rail zabiera szerokość potrzebną tekstowi - zwijamy go do samych kresek. */

}

/* ---------- telefon ---------- */

@media (max-width: 900px) {
  .ax-cine {
    --ax-cine-fade: 700ms;
  }

  .ax-cine__shell {
    padding: calc(var(--ax-navh, 82px) + 14px) var(--ax-gutter) 20px;
  }

  /*
   * Na wąskim ekranie tekst zajmuje dolną połowę kadru, a nie jego pas, więc
   * cień musi sięgać wyżej. Przy 40 % lead trafiał na jasne plamy zdjęcia.
   */
  .ax-cine .ax-hero__grad-b {
    background:
      linear-gradient(to top, rgba(11, 15, 34, .92) 0%, rgba(11, 15, 34, .55) 34%, rgba(11, 15, 34, 0) 62%),
      linear-gradient(to bottom, rgba(11, 15, 34, .5) 0%, rgba(11, 15, 34, 0) 22%);
  }

  /*
   * Na telefonie cień sceny sięga sam wysoko, więc apla wizytówki dokłada tu
   * mniej - inaczej dolna połowa kadru robi się prawie czarna.
   */
  .ax-cine__shell::before {
    opacity: .7;
  }

  .ax-cine__intro {
    bottom: clamp(64px, 12vh, 96px);
  }

  /*
   * Na telefonie tytuł nadal ma być największą rzeczą na ekranie - schodzimy
   * o krok skali, a nie o klasę. Przy 13vw nazwa osiedla gubiła się na tle
   * kadru i hero wyglądało jak zwykła karta inwestycji.
   */
  .ax-cine__title {
    font-size: clamp(40px, 12.4vw, 72px);
  }

  .ax-cine__eyebrow {
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: .18em;
  }

  /*
   * Na telefonie akt nie ma miejsca z boku i schodzi na dół kadru, więc cień
   * kładzie się poziomo - tak jak w projekcie.
   */
  .ax-cine__grad-side {
    top: auto;
    width: 100%;
    height: 70svh;
    transform: translateY(6%);
    background: linear-gradient(to top, rgba(11, 15, 34, .85) 0%, rgba(11, 15, 34, .7) 45%, rgba(11, 15, 34, 0) 100%);
  }

  .ax-cine__lead {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
  }

  .ax-cine__ctas {
    gap: 8px;
    margin-top: 18px;
  }

  /*
   * Przyciski na szerokość treści, nie ekranu. Dwa pasy przez całą szerokość
   * ważyły więcej niż tytuł i zjadały trzecią część kadru.
   */
  .ax-cine__cta {
    min-height: 46px;
    padding: 13px 18px;
    font-size: 10.5px;
  }

  /* Akty schodzą na dół kadru - tam gdzie i tak patrzy oko na telefonie. */
  .ax-cine__act {
    top: auto;
    bottom: clamp(58px, 11vh, 88px);
    width: 100%;
    transform: translateY(18px);
  }

  .ax-cine__act[aria-hidden="false"] {
    transform: translateY(0);
  }

  .ax-cine__act-title {
    margin: 12px 0 14px;
    font-size: clamp(28px, 8vw, 42px);
  }

  .ax-cine__act-lead {
    max-width: none;
    margin-bottom: 14px;
    font-size: 15.5px;
  }

  .ax-cine__chips {
    gap: 6px;
  }

  .ax-cine__chip {
    padding: 6px 11px;
    font-size: 9.5px;
    letter-spacing: .12em;
  }

  /*
   * Podpowiedź przewijania znika. Na telefonie nikogo nie trzeba uczyć, że
   * stronę się przewija, a trzydzieści znaków kapitalikami pod belką kładło
   * się na kadrze szerzej niż tytuł.
   */
  .ax-cine__hint {
    display: none;
  }

  /*
   * Zegar kładzie się poziomo w lewym dolnym rogu: prawy zajmuje szyna aktów,
   * a pionowy blok z godziną wchodziłby na przyciski.
   */
  .ax-cine__gauge {
    right: auto;
    left: 0;
    grid-auto-flow: column;
    align-items: baseline;
    justify-items: start;
    gap: 10px;
    min-width: 0;
  }

  .ax-cine__clock-time {
    font-size: 20px;
  }

  /* Suwak na telefonie tylko przeszkadza - prowadzi palec, nie kciuk. */
  .ax-cine__scrub {
    display: none;
  }
}

@media (max-width: 560px) {
  /*
   * Lead ma cztery zdania i jest celem tej wizytówki, nie dopiskiem.
   * Przy krótszym tytule mieści się w kadrze w całości - nie ucinamy.
   */
  .ax-cine__lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.52;
  }

  .ax-cine__act-lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}