/* ------------------------------------------------------------------
   Hero — showreel (js/film.js): pełnoekranowe wideo 16:9 bez paska odtwarzacza, mała ikona pauzy, karta końcowa #filmEnd.
   Kadr ma proporcje wideo (16:9 na całą szerokość, najwyżej wysokość okna), więc na typowym ekranie nie ma pasów.
   Gdy okno jest szersze niż 16:9, wideo zostaje całe, a jego boczne krawędzie miękko wtapiają się w tło kadru
   (= tło showreelu #0E0E11). Pionowo (telefon): wideo 16:9, pod nim stała karta z CTA.
------------------------------------------------------------------ */
.film {
  --reel-bg: #0E0E11;
  position: relative;
  background: var(--reel-bg);
}
.film__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  background: var(--reel-bg);
  container: film / size;
}
.film__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--reel-bg);
  cursor: pointer;
}
/* okno szersze niż 16:9: obraz (szer. 177,8cqh) zostaje na środku — boki wtapiamy w tło */
@container film (min-aspect-ratio: 1.8) {
  .film__video {
    --edge: calc(50% - 88.9cqh);
    -webkit-mask-image: linear-gradient(90deg, transparent var(--edge), #000 calc(var(--edge) + 12cqh), #000 calc(100% - var(--edge) - 12cqh), transparent calc(100% - var(--edge)));
            mask-image: linear-gradient(90deg, transparent var(--edge), #000 calc(var(--edge) + 12cqh), #000 calc(100% - var(--edge) - 12cqh), transparent calc(100% - var(--edge)));
  }
}

/* ---------- ikona pauzy (jedyna kontrolka; dostępność: autoodtwarzanie > 5 s musi dać się zatrzymać) ---------- */
.film__toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(243, 241, 236, 0.28);
  border-radius: 50%;
  background: rgba(14, 14, 17, 0.45);
  color: var(--paper);
  opacity: .55;
  cursor: pointer;
  transition: opacity .2s, border-color .2s;
}
.film__toggle:hover, .film__toggle:focus-visible { opacity: 1; border-color: var(--paper); }
.film__toggle .icon { width: 14px; height: 14px; }
.film__toggle .i-play { display: none; }
.film__toggle.is-paused .i-play { display: block; }
.film__toggle.is-paused .i-pause { display: none; }
.film.is-end .film__toggle, .no-js .film__toggle, .no-film .film__toggle { display: none; }

/* ---------- karta końcowa ---------- */
.film__end {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  color: var(--paper);
  background: var(--reel-bg);          /* pełne tło: ostatnia klatka wideo ma własne imię/kontakt — bez prześwitu, bez „podwójnego” tekstu */
  transition: opacity .8s ease;
}
/* z JS karta czeka na koniec filmu; bez JS albo gdy wideo nie działa — widoczna od razu */
html:not(.no-js) .film:not(.is-end):not(.no-film) .film__end { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.end { display: grid; justify-items: start; gap: 1.8cqh; padding: 0 6cqw 2cqh; }
.end__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 5.4cqh, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #FFB08A;
}
.end__name {
  font-size: min(6.2cqw, 12cqh);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: .88;
  white-space: nowrap;
}
.end__name .w { display: inline-block; }
/* PL: ukośna kreska „ł” w szerokim Archivo styka się z sąsiadami przy −0,05em — luźniejsze światło */
:lang(pl) .end__name { letter-spacing: 0.01em; }
.end__role { font-family: var(--font-mono); font-size: max(11px, 1.5cqmin); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 241, 236, 0.78); }
.end__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2cqh; }
.film__end .btn--ghost { color: var(--paper); border-color: rgba(243, 241, 236, 0.45); background: rgba(6, 9, 26, 0.35); }
.film__end .btn--ghost:hover { border-color: var(--paper); }
.film__end .btn--primary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.end__replay {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border: 0;
  background: none;
  color: rgba(243, 241, 236, 0.72);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.end__replay:hover, .end__replay:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.no-js .end__replay, .no-film .end__replay { display: none; }

@keyframes endIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.film.is-end .end > * { animation: endIn .8s cubic-bezier(.16, 1, .3, 1) both; }
.film.is-end .end > :nth-child(2) { animation-delay: .09s; }
.film.is-end .end > :nth-child(3) { animation-delay: .18s; }
.film.is-end .end > :nth-child(4) { animation-delay: .27s; }
.film.is-end .end > :nth-child(5) { animation-delay: .4s; }

/* ---------- pionowo (telefon, wąskie okno): wideo 16:9 → stała karta z CTA ---------- */
@media (max-aspect-ratio: 11 / 10) {
  .film__frame { display: contents; }
  .film__video { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }
  .film__toggle { top: calc(100vw * 9 / 16 - 52px); bottom: auto; right: 12px; }
  .film__end { position: relative; inset: auto; background: var(--reel-bg); }
  html:not(.no-js) .film:not(.is-end):not(.no-film) .film__end { opacity: 1; visibility: visible; }
  .film:not(.is-end) .end__replay { display: none; }
  .film.is-end .end > * { animation: none; }
  .end { gap: 12px; padding: 28px var(--gutter) 36px; }
  .end__tag { font-size: clamp(24px, 7vw, 40px); }
  .end__name { font-size: min(12.6vw, 76px); white-space: normal; }
  .end__name .w { display: block; }
  .end__role { font-size: 11px; }
  .end__cta { margin-top: 6px; }
  .end__cta .btn { padding: 12px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .film.is-end .end > * { animation: none; }
  .film__end { transition: none; }
}