/* ---------------------------------------------------------------
   Hero z filmem (rotomat KRAFF, render Cycles).
   Ładowane PO site.css. Nadpisuje tylko to, co dotyczy hero z filmem;
   reszta (header, scrub kadru, typografia, przyciski) zostaje z site.css.
--------------------------------------------------------------- */

.hero--film .hero-media{ background:#0b0a09; }
.hero--film .hero-media::after{ opacity:.35; }

.hero-film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:8% 50%;
  display:block; background:#0b0a09;
}
.hero-film--loop{ visibility:hidden; }
.hero--film.is-looping .hero-film--loop{ visibility:visible; }
.hero--film.is-looping .hero-film--intro{ visibility:hidden; }

/* Render ma ciemne lewe pole, więc cień może być lżejszy niż pod zdjęciem:
   tekst dalej ma kontrast, a rotomat po prawej nie jest przygaszony. */
.hero--film .hero-shade{
  background:
    linear-gradient(90deg, rgba(10,10,10,.74) 0%, rgba(10,10,10,.42) 30%, rgba(10,10,10,0) 56%),
    linear-gradient(0deg, rgba(10,10,10,.58) 0%, rgba(10,10,10,0) 40%);
}
/* Kadr renderu zostawia tekstowi lewe ~44% szerokości ekranu, niezależnie
   od rozdzielczości. Wspólny .gutter centruje kontener 1280px, więc na 2K/4K
   odsuwał tekst o 640px+ w prawo, prosto na rotomat. Tu odstęp liczymy
   od kadru filmu (max 7vw), a rozmiar tekstu rośnie razem z ekranem. */
.hero--film{
  /* do ~1920px tekst trzyma linię logo; szerzej nie dalej niż 17vw od krawędzi */
  --film-pad:min(max(20px, calc((100vw - 1280px)/2)), 17vw);
  /* "od 2006 roku." w Marcellus ≈ 6.4em: nagłówek musi skończyć się
     przed 44vw, gdzie w kadrze zaczyna się rotomat */
  --film-h1:min(clamp(42px, 4.6vw, 112px), calc((44vw - var(--film-pad) - 24px) / 6.4));
}
.hero--film .hero-copy{ padding-inline:var(--film-pad); }
.hero--film .hero-copy-inner{ max-width:calc(44vw - var(--film-pad) - 24px); }
.hero--film .hero-copy h1{ font-size:var(--film-h1); max-width:none; }
.hero--film .hero-copy p{
  margin-top:clamp(20px, 1.6vw, 34px); max-width:42ch;
  font-size:clamp(16px, .8vw, 20px);
}
.hero--film .hero-cta-row{ margin-top:clamp(28px, 2.2vw, 48px); }
.hero-film-toggle{ right:var(--film-pad); }

/* Tekst wchodzi, gdy kamera kończy odjazd z tarczy zegarka, a nie
   równocześnie z nim. Własne przejścia zamiast animacji z site.css:
   tamte startowały od translateY(105%), przy którym przez padding linii
   wystawały górne krawędzie liter, więc tekst był widać od pierwszej klatki. */
.hero--film .hero-copy h1 .line > span,
.hero--film .hero-copy p,
.hero--film .hero-cta-row{ animation:none; }
@media (prefers-reduced-motion: no-preference){
  .hero--film .hero-copy h1 .line > span{
    transform:translateY(140%);
    transition:transform 1.15s cubic-bezier(.2,.75,.15,1);
  }
  .hero--film .hero-copy h1 .line:nth-child(2) > span{ transition-delay:.12s; }
  .hero--film .hero-copy p,
  .hero--film .hero-cta-row{
    opacity:0; transform:translateY(14px);
    transition:opacity .9s ease .5s, transform 1s cubic-bezier(.2,.75,.15,1) .5s;
  }
  .hero--film .hero-cta-row{ transition-delay:.62s; }
  .hero--film.is-revealed .hero-copy h1 .line > span,
  .hero--film.is-revealed .hero-copy p,
  .hero--film.is-revealed .hero-cta-row{ transform:none; opacity:1; }
}

/* Bez przypinania hero i bez „ramki” na scrollu: hero ma zwykłą wysokość
   ekranu, strona przewija się od pierwszego ruchu kółkiem. Zostaje tylko
   lekki paralaks filmu i wygaszanie tekstu, liczone w hero-film.js. */
.hero--film,
.hero--film.is-scrub{ height:auto; }
.hero--film .hero-stage,
.hero--film.is-scrub .hero-stage{ position:relative; }
.hero--film .hero-media{ clip-path:none !important; border-radius:0 !important; }
.hero-film{ will-change:transform; }

/* Pauza animacji (WCAG 2.2.2: ruch dłuższy niż 5 s musi dać się zatrzymać). */
.hero-film-toggle{
  position:absolute; z-index:3; bottom:28px;
  right:max(20px, calc((100vw - 1280px)/2));
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(10,10,10,.28); color:#f1efe9;
  border:1px solid rgba(241,239,233,.38); cursor:pointer;
  transition:background .25s ease, border-color .25s ease, opacity .4s ease;
  opacity:0;
}
.hero--film.is-revealed .hero-film-toggle{ opacity:1; }
.hero-film-toggle:hover{ background:rgba(10,10,10,.6); border-color:#f1efe9; }
.hero-film-toggle:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.hero-film-toggle svg{ width:16px; height:16px; }
.hero-film-toggle .i-play{ display:none; }
.hero-film-toggle[aria-pressed="true"] .i-play{ display:block; }
.hero-film-toggle[aria-pressed="true"] .i-pause{ display:none; }

/* Szerokości, przy których tekst wchodziłby na rotomat: przesuwamy kadr. */
@media (min-width: 700px) and (max-width: 1180px){
  .hero-film{ object-position:12% 50%; }
  .hero--film .hero-copy-inner{ max-width:420px; }
  .hero--film .hero-copy h1{ font-size:clamp(40px, 5.4vw, 56px); }
}

/* Telefon / pionowy ekran: osobny kadr 4:5 u góry, tekst pod nim na czerni,
   zamiast tekstu położonego na rotomacie. */
@media (max-width: 699px), (max-aspect-ratio: 4/5){
  .hero--film .hero-stage{ background:#0a0a0a; }
  .hero--film .hero-media{ inset:0 0 auto 0; height:auto; aspect-ratio:4/5; }
  .hero-film{ object-position:50% 50%; }
  .hero--film .hero-shade{
    background:linear-gradient(180deg,
      rgba(10,10,10,0) 0, rgba(10,10,10,0) calc(125vw - 160px), #0a0a0a calc(125vw - 8px));
  }
  .hero--film .hero-copy{ padding-bottom:28px; }
  .hero--film .hero-copy-inner{ max-width:none; }
  .hero--film .hero-copy h1{ font-size:clamp(38px, 11vw, 52px); }
  .hero--film .hero-copy p{ margin-top:16px; font-size:15px; line-height:1.6; }
  .hero--film .hero-cta-row{ margin-top:22px; gap:10px; }
  .hero--film .hero-cta-row a{ flex:1 1 auto; justify-content:center; }
  .hero-film-toggle{ top:calc(125vw - 56px); bottom:auto; }
}