/* Strona główna: film w nagłówku zamiast 4 zdjęć (addweb, 09.11.2026). Tylko na stronach głównych (inc/apartament.php, data-film-wideo).
   Pierwszy obraz to plakat = pierwsza klatka filmu (element LCP, bez skoku przy starcie); film dochodzi po wczytaniu strony
   (assets/hero-film.js), a przy „ogranicz animacje” i oszczędzaniu danych zostaje samo zdjęcie.
   Czytelność (Łukasz 9.11: jasne ujęcie apartamentu): jedno przyciemnienie zamiast motywowego – mocniej po lewej, pod tekstem i pod menu. */

.hero-z-filmem::after {
  background:
    linear-gradient(90deg, rgba(8,18,34,.78) 0%, rgba(8,18,34,.62) 32%, rgba(8,18,34,.30) 58%, rgba(8,18,34,.08) 80%, rgba(8,18,34,0) 100%),
    linear-gradient(0deg, rgba(8,18,34,.45) 0%, rgba(8,18,34,0) 35%),
    linear-gradient(180deg, rgba(8,18,34,.55) 0%, rgba(8,18,34,0) 22%);
}
.hero-z-filmem .hero-sub, .hero-z-filmem .hero-lead, .hero-z-filmem .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
/* telefon: tekst zajmuje całą szerokość – przyciemnienie od góry (menu) i mocniej od połowy w dół (pod tekstem) */
@media (max-width: 760px) {
  .hero-z-filmem::after { background: linear-gradient(180deg, rgba(8,18,34,.62) 0%, rgba(8,18,34,.22) 17%, rgba(8,18,34,.66) 29%, rgba(8,18,34,.86) 41%, rgba(8,18,34,.9) 100%); }
}
.hero-z-filmem .hero-lead { font-weight: 400; }

.hero-wideo img { animation: none; }
.hero-wideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.hero-wideo.gra video { opacity: 1; }
.hero-wideo.gra.wygas video { opacity: 0; transition: opacity .6s ease; }   /* koniec pętli: plaża → przejście przez pierwszą klatkę (promy) */

/* pasek postępu zsynchronizowany z filmem: 4 ujęcia */
.film-pasek.wideo { opacity: 0; transition: opacity .5s; }
.hero-wideo.gra ~ .film-pasek.wideo { opacity: 1; }
.film-pasek.wideo i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); animation: none; }

/* pauza (WCAG 2.2.2) */
.hero-pauza { position: absolute; z-index: 3; right: calc(clamp(16px, 4vw, 64px) + 4 * 34px + 3 * 8px + 14px); bottom: 24px;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(8,18,34,.35); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .25s, border-color .25s; }
.hero-pauza:hover, .hero-pauza:focus-visible { background: rgba(8,18,34,.6); border-color: #fff; }
.hero-pauza:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.hero-pauza svg { width: 14px; height: 14px; }
.hero-pauza .graj { display: none; }
.hero-pauza[aria-pressed="true"] .graj { display: block; }
.hero-pauza[aria-pressed="true"] .stop { display: none; }
@media (max-width: 760px) { .hero-pauza { bottom: auto; top: 75px; right: calc(16px + 4 * 22px + 3 * 8px + 10px); width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .hero-wideo video, .film-pasek.wideo, .hero-pauza { display: none !important; } }