/* ░░ TELEDYSK — „Drugi mózg nie śpi" (film na otwarcie agencji) ░░
   Na tokenach z colors_and_type.css. Duży player 16:9 (click-to-play z dźwiękiem,
   preload=none → 26MB wideo ładuje się DOPIERO po kliknięciu, nie blokuje strony). */

.film{position:relative;overflow:hidden}
.film__head{max-width:720px;margin:0 auto;text-align:center}
.film__head .sec-lead{margin-left:auto;margin-right:auto;max-width:60ch}

/* ── PLAYER 16:9 ── */
.film__player{position:relative;margin:clamp(28px,4vw,44px) auto 0;max-width:960px;
  aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  background:var(--bg-inset);border:1px solid var(--border-soft);box-shadow:var(--shadow-lg);
  transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.film__player:hover{border-color:var(--border-cyan);box-shadow:var(--shadow-lg),var(--glow-cyan)}
.film__vid{width:100%;height:100%;display:block;object-fit:cover;background:var(--bg-inset)}
/* PEŁNY EKRAN bez ucinania: w kadrze 16:9 na stronie cover=contain (idealnie wypełnia box), ale po kliknięciu
   „pełny ekran" na monitorze o innym aspekcie (16:10/ultrawide/telefon w poziomie) cover PRZYCINAŁ brzegi.
   W fullscreenie pokazujemy CAŁĄ klatkę: contain (ewentualny letterbox na czarnym tle, zero ucinania).
   Prefiksy dla Safari/starszych. iOS ma natywny fullscreen wideo, który i tak nie przycina. */
.film__vid:fullscreen{object-fit:contain;background:#000}
.film__vid:-webkit-full-screen{object-fit:contain;background:#000}

/* przycisk „odpal" na całym kadrze (jak w portfolio); po starcie znika → natywne kontrolki */
.film__play{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(0deg,rgba(7,6,13,.55),rgba(7,6,13,.12) 42%,rgba(7,6,13,.28));
  transition:opacity var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
.film__playdisc{width:clamp(64px,9vw,88px);height:clamp(64px,9vw,88px);border-radius:50%;
  display:grid;place-items:center;color:var(--fg-on-neon);background:var(--magenta);
  box-shadow:0 8px 30px rgba(7,6,13,.6);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.film__play svg.lucide{width:34px;height:34px;fill:var(--fg-on-neon);margin-left:3px}
.film__play:hover .film__playdisc{transform:scale(1.08);background:var(--magenta-bright);
  box-shadow:0 10px 34px rgba(7,6,13,.7),var(--edge-cyan)}
/* metka: czas + „ma dźwięk" (sygnalizuje, że to teledysk z muzyką, nie niemy klip) */
.film__playmeta{position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-1);text-shadow:0 1px 6px rgba(0,0,0,.95);pointer-events:none}
/* FIX: klasa .is-playing ląduje na .film__player (nie na sekcji .film) → selektor musi celować w player,
   inaczej przycisk „play" NIGDY nie znikał po kliknięciu (był to bug na mobilce). */
.film__player.is-playing .film__play{opacity:0;pointer-events:none;visibility:hidden}

/* ── „o tym filmie" — krótka nota manifest, wyśrodkowana ── */
.film__note{max-width:640px;margin:clamp(26px,3.5vw,36px) auto 0;text-align:center}
/* w bloku pod filmem została TYLKO puenta (opis filmu żyje w leadzie nad playerem) — odstęp od kadru
   daje margines .film__note, więc puenta nie potrzebuje własnego margin-top */
/* puenta: na mobile ŁAMIE SIĘ kontrolowanie po pierwszym zdaniu („Co pomyślę – to mam." od 2. linijki);
   na desktopie <br> znika i całość siedzi w jednej linii */
@media (min-width:761px){.film__punch-br{display:none}}
.film__punch{font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:clamp(1.2rem,2.6vw,1.65rem);line-height:1.28;letter-spacing:var(--tracking-h);
  color:var(--fg-1);text-wrap:balance}

@media (prefers-reduced-motion:reduce){
  .film__player,.film__playdisc,.film__play{transition:none}
}