/* ==========================================================================
   Billboard (strona główna) i nagłówek filmu
   ========================================================================== */
.hero {
  --hero-overlap: clamp(48px, 9vw, 150px);
  --interval: 9000ms;
  position: relative;
  height: clamp(540px, 92svh, 1000px);
  margin-bottom: calc(var(--hero-overlap) * -1);
  overflow: hidden;
  isolation: isolate;
}
.hero__slides {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
}
/* Obraz wtapia się w tło strony (z poświatą), zamiast kończyć się twardą krawędzią */
.hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1100ms var(--ease-in-out); }
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1.06);
  /* Lekkie rozmycie tylko „skleja” dwa kadry w przenikaniu — 4px wystarcza i jest tanie */
  filter: blur(4px);
  transition: transform 1400ms var(--ease-out), filter 600ms var(--ease-out);
}
.is-active > .hero__art { transform: none; filter: none; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: ken-burns 22s var(--ease-in-out) infinite alternate;
  animation-play-state: paused;
}
.is-active .hero__img { animation-play-state: running; }
.hero[data-paused] .hero__img { animation-play-state: paused; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -0.6%); } }
.hero__scrim, .title-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7, 8, 13, .94) 0%, rgba(7, 8, 13, .72) 28%, rgba(7, 8, 13, .15) 62%, rgba(7, 8, 13, 0) 80%),
    linear-gradient(to top, rgba(7, 8, 13, .7) 0%, rgba(7, 8, 13, .45) 22%, rgba(7, 8, 13, 0) 48%),
    linear-gradient(to bottom, rgba(7, 8, 13, .75), rgba(7, 8, 13, 0) 30%);
}

/* --- „Kadr w ramie”: gdy mamy tylko kadr z YouTube (z wypalonymi napisami), obraz zajmuje prawe ~62%,
   a tytuł stoi na czystym atramencie. Przycięcie + skala wypychają napisy z krawędzi poza kadr.
   Obraz jest wyłącznie skalowany/przycinany i przykryty gradientami — nigdy zmieniany. --- */
.hero__slide--framed .hero__art, .title-hero--framed .title-hero__art { left: 38%; bottom: 20%; }
.hero__slide--framed .hero__art {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 36%, transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 36%, transparent 84%);
  mask-composite: intersect;
}
/* Mocniejsze przybliżenie środka kadru: górny i dolny pas (tam zwykle wypalone napisy) wypadają poza ramę */
.hero__slide--framed .hero__img, .title-hero--framed .title-hero__img { object-position: 70% 40%; scale: 1.3; transform-origin: 70% 42%; }
.hero__slide--framed .hero__img[data-bars], .title-hero--framed .title-hero__img[data-bars] { object-position: 50% 35%; scale: var(--unbar, 1.34); }
.hero__slide--framed .hero__scrim, .title-hero--framed .title-hero__scrim {
  background:
    linear-gradient(to right, var(--bg) 36%, rgba(7, 8, 13, .85) 46%, rgba(7, 8, 13, .2) 70%, rgba(7, 8, 13, 0) 85%),
    linear-gradient(to bottom, rgba(7, 8, 13, .92) 0, rgba(7, 8, 13, .5) 14%, rgba(7, 8, 13, 0) 34%),
    linear-gradient(to top, var(--bg) 0, rgba(7, 8, 13, .6) 30%, rgba(7, 8, 13, 0) 55%);
}

/* Snop projektora z lewego górnego rogu — motyw marki zamiast generycznej poświaty */
.beam--hero { inset: 0; z-index: 1; mix-blend-mode: screen; }
.hero__content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--hero-overlap) + clamp(56px, 8vw, 110px));
  max-width: min(680px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  justify-items: start;
}
/* Wejście treści slajdu: krótki stagger po rozpoczęciu przenikania */
.hero__content { z-index: 2; }
.hero__content > * { opacity: 0; transform: translateY(14px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.is-active .hero__content > * { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.is-active .hero__content > :nth-child(1) { transition-delay: 260ms; }
.is-active .hero__content > :nth-child(2) { transition-delay: 320ms; }
.is-active .hero__content > :nth-child(3) { transition-delay: 380ms; }
.is-active .hero__content > :nth-child(4) { transition-delay: 440ms; }
.is-active .hero__content > :nth-child(5) { transition-delay: 500ms; }

/* Świadomy wybór slajdu: klawiatura — praktycznie bez animacji; kliknięcie kropki — szybko, bez staggeru.
   Wolne, kinowe przenikanie zostaje dla autoodtwarzania. */
.hero[data-speed="instant"] .hero__slide { transition-duration: 150ms; }
.hero[data-speed="instant"] .hero__art, .hero[data-speed="instant"] .hero__content > * { transition: none !important; }
.hero[data-speed="quick"] .hero__slide { transition-duration: 450ms; }
.hero[data-speed="quick"] .hero__art { transition-duration: 450ms; }
.hero[data-speed="quick"] .hero__content > * { transition-duration: 250ms !important; transition-delay: 0ms !important; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.hero__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 2px var(--accent-glow); }
.hero__title { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.04em; line-height: .98; text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
.hero__title a { border-radius: var(--radius-sm); }
.hero__desc {
  max-width: 52ch;
  font-size: var(--fs-lg);
  color: #dcd8d0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__desc--muted { color: var(--text-muted); font-size: var(--fs-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero .meta, .title-hero .meta { color: #cfcbd6; }
.hero__controls {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--hero-overlap) + clamp(14px, 2.2vw, 36px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__dots { display: flex; gap: 6px; }
.hero__dot { position: relative; width: 36px; height: 24px; -webkit-tap-highlight-color: transparent; }
.hero__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .25);
  transition: background-color var(--dur-2) var(--ease-out);
}
.hero__dot-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
.hero__dot.is-active .hero__dot-fill { animation: hero-progress var(--interval) linear forwards; }
.hero[data-paused] .hero__dot-fill { animation-play-state: paused; }
.hero__dot.is-done .hero__dot-fill { transform: scaleX(1); opacity: .45; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .hero__dot:hover::before { background: rgba(255, 255, 255, .5); }
}
.hero__toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.hero__toggle:active { transform: scale(0.94); }
.hero__toggle .icon { width: 16px; height: 16px; }
.hero__toggle .when-paused { display: none; }
.hero__toggle[aria-pressed="true"] .when-paused { display: block; }
.hero__toggle[aria-pressed="true"] .when-playing { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hero__toggle:hover { color: var(--text); border-color: rgba(255, 255, 255, .35); }
}
@media (max-width: 767px) {
  .hero { height: clamp(480px, 74svh, 680px); --hero-overlap: 36px; }
  .hero__img { object-position: 65% 30%; }
  .hero__scrim {
    background:
      linear-gradient(to top, var(--bg) 4%, rgba(7, 8, 13, .82) 38%, rgba(7, 8, 13, .1) 70%),
      linear-gradient(to bottom, rgba(7, 8, 13, .6), rgba(7, 8, 13, 0) 25%);
  }
  .hero__content { bottom: calc(var(--hero-overlap) + 56px); }
  .hero__controls { left: var(--gutter); right: auto; bottom: calc(var(--hero-overlap) + 8px); }
  .hero__desc { -webkit-line-clamp: 2; font-size: var(--fs-md); }
  /* Telefon: kadr w ramie = wpuszczony, zaokrąglony obraz u góry, tytuł pod nim (kadr centralny 4:3
     omija napisy przy krawędziach). */
  .hero__slide--framed .hero__art {
    left: 16px;
    right: 16px;
    top: calc(var(--nav-h) + 4px);
    bottom: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 90%);
    mask-image: linear-gradient(to bottom, #000 42%, transparent 90%);
  }
  .hero__slide--framed .hero__img { object-position: 50% 40%; scale: 1.28; transform-origin: 50% 28%; }
  .hero__slide--framed .hero__scrim { background: linear-gradient(to top, var(--bg) 22%, rgba(7, 8, 13, .7) 42%, rgba(7, 8, 13, 0) 62%); }
  .hero .hero__actions, .title-hero .hero__actions { display: grid; grid-template-columns: 1fr 1fr auto; width: 100%; }
  .hero__actions .btn--lg { --btn-h: 48px; padding: 0 12px; font-size: var(--fs-md); }
  .title-hero .hero__actions .btn { --btn-h: 48px; padding: 0 12px; }
  .title-hero .hero__actions .btn:first-child { grid-column: 1 / -1; }
}

/* --- Nagłówek strony filmu --- */
.title-hero { position: relative; min-height: clamp(460px, 74svh, 900px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.title-hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden; /* przybliżony (scale) kadr nie wychodzi poza ramę */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.title-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; view-transition-name: art; }
.title-hero__scrim {
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.title-hero__content {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) var(--gutter) clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  justify-items: start;
}
.title-hero__content > * { max-width: 760px; }
.title-hero__content > * { transition: opacity 350ms var(--ease-out), translate 400ms var(--ease-out); }
@starting-style {
  .title-hero__content > * { opacity: 0; translate: 0 12px; }
}
.title-hero__content > :nth-child(2) { transition-delay: 60ms; }
.title-hero__content > :nth-child(3) { transition-delay: 110ms; }
.title-hero__content > :nth-child(4) { transition-delay: 160ms; }
.title-hero__content > :nth-child(5) { transition-delay: 210ms; }
.title-hero__content > :nth-child(6) { transition-delay: 250ms; }
.title-hero__content > :nth-child(n+7) { transition-delay: 280ms; }
.title-hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: .98;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.title-hero__original { color: var(--text-muted); font-size: var(--fs-lg); font-style: italic; margin-top: -6px; }
.title-hero__tagline { font-size: var(--fs-lg); color: #dcd8d0; max-width: 56ch; }
.title-hero__note { max-width: 62ch; margin-top: -2px; }
.title-hero__note a { color: var(--text-muted); }
.title-hero--framed .title-hero__art {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 36%, transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 36%, transparent 84%);
  mask-composite: intersect;
}
@media (max-width: 767px) {
  .title-hero { min-height: 0; }
  .title-hero--framed .title-hero__art {
    left: auto;
    bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  }
  .title-hero--framed .title-hero__img { object-position: 50% 40%; scale: 1.25; transform-origin: 50% 25%; }
  .title-hero--framed .title-hero__scrim {
    background:
      linear-gradient(to top, rgba(7, 8, 13, .6) 0%, rgba(7, 8, 13, .45) 30%, rgba(7, 8, 13, 0) 65%),
      linear-gradient(to bottom, rgba(7, 8, 13, .75), rgba(7, 8, 13, 0) 32%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .title-hero__art { position: relative; inset: auto; aspect-ratio: 16 / 9; grid-row: 1; grid-column: 1; }
  .title-hero__scrim {
    background: linear-gradient(to top, rgba(7, 8, 13, .5) 0%, rgba(7, 8, 13, 0) 45%), linear-gradient(to bottom, rgba(7, 8, 13, .6), rgba(7, 8, 13, 0) 30%);
    grid-row: 1;
    grid-column: 1;
    position: relative;
    align-self: stretch;
  }
  .title-hero__content { grid-row: 2; grid-column: 1; padding-top: 4px; }
}

/* --- Ograniczony ruch: bez auto-przewijania, Ken Burns i przesunięć --- */
@media (prefers-reduced-motion: reduce) {
  .hero__art, .is-active > .hero__art { transform: none; filter: none; }
  .hero__img { animation: none; }
  .hero__content > *, .is-active .hero__content > * { transform: none; }
  .hero__slide { transition-duration: 400ms; }
  .hero__dot-fill { display: none; }
  .hero__dot.is-active::before { background: var(--accent); }
  .title-hero__content > * { translate: none; }
  @starting-style { .title-hero__content > * { translate: none; } }
}

/* Bardzo wąskie telefony: opis zbędny — metadane mówią dość */
@media (max-width: 399px) {
  .hero__desc { display: none; }
}