/* @admin: Franek 2026-10-06 — „wez na stronie glor-ja (tylko tutaj lokalnie nie wgrywaj tego jeszcze) zamiast tego
   zdjecia co jest na gorze umiesc film https://www.youtube.com/watch?v=7l_yFVeJaXE - niech bedzie w tle z przyciskiem
   na srodku "play" co bedzie go odtwarzac".
   Warstwa tenx/ jak normal-scroll — motyw nietkniety, cofniecie = usuniecie dwoch plikow i dwoch znacznikow.
   Sekcja Home ma transform: translateZ(0) (tenx/normal-scroll.css), wiec jest blokiem zawierajacym — film i przycisk
   pozycjonujemy wzgledem niej. NIE ruszamy transformu sekcji (pulapka nr 3 w glor-ja-static-claude.md). */
/* kadr z filmu jako tło do czasu startu filmu (i jedyne tło przy oszczędzaniu danych / 2G): WebP, a przeglądarka bez
   WebP bierze JPG — pierwsza deklaracja to zapas dla przeglądarek bez image-set() */
.ptf-section[data-anchor="Home"] {
    background-image: url(hero-film.jpg) !important;
    background-image: image-set(url(hero-film.webp) type("image/webp"), url(hero-film.jpg) type("image/jpeg")) !important;
    background-size: cover; background-position: center;
}

/* @admin: Franek 2026-10-06 — „a w tym filmiku co jest w tle podkrec troche saturacje czy cos bo jest troche szaro wyglada,
   daj tam jakis profil zeby to atrakcyjniej wygladalo”. Profil barw w JEDNYM miejscu (--tenx-film-grade): nasycenie,
   kontrast i odrobina jasności. Działa na film, na obie kanwy odbić (drawImage pomija filtr CSS filmu, więc kanwy dostają
   go osobno) i na kadr startowy filmu (poster) — napisów i przycisków nie dotyka. */
:root { --tenx-film-grade: saturate(1.45) contrast(1.12) brightness(1.04); }
.tenx-hero-film { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.tenx-hero-film video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    filter: var(--tenx-film-grade);
}
/* telefon: film 80% szerokości kadru wyśrodkowany, nad i pod nim lustrzane odbicia na kanwie (tenx/hero-film.js) */
.tenx-hero-film--mirror video { inset: auto; }
.tenx-hero-mirror { position: absolute; inset: 0; width: 100%; height: 100%; display: none; filter: var(--tenx-film-grade); }
.tenx-hero-film--mirror .tenx-hero-mirror { display: block; }
/* rozmyta kopia odbić; maskę (0% rozmycia przy styku z filmem -> 100% po 50 px) ustawia tenx/hero-film.js */
.tenx-hero-mirror--blur { filter: blur(14px) var(--tenx-film-grade); inset: auto; }   /* pozycję i wymiary z zapasem ustawia JS */
/* przyciemnienie pod napisami — kadr filmu ma jasne tlo, a „Głos Daje Moc" jest biale */
.tenx-hero-film::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 5, 19, .72) 0%, rgba(10, 5, 19, .45) 45%, rgba(10, 5, 19, .25) 100%);
    transition: opacity .4s ease;
}
.ptf-section[data-anchor="Home"] .ptf-section__vertical-align { position: relative; z-index: 1; }

/* @admin: Franek 2026-10-06 — „Przycisk od glosnosci bez tla, bez podpisu "wlacz dzwiek" sama ikona w prawym dolnym
   rogu kontenera. No i dodaj jeszcze na lewo od tego przycisku taki mini equalizer w sensie wizualizacje tego dzwieku
   w slupkach niskie wysokie tony”. Słupki rysuje tenx/hero-film.js z widma dźwięku filmu policzonego z góry
   (tenx/energia-eq.json) i zsynchronizowanego z czasem filmu — ruszają się tylko wtedy, gdy gra film, i pokazują jego
   prawdziwy dźwięk; to nie jest animacja w pętli (zakaz migających/pulsujących wskaźników). */
.tenx-hero-audio {
    position: absolute; right: 32px; bottom: 28px; z-index: 3;
    display: flex; align-items: flex-end; gap: 14px;
}
.tenx-hero-eq { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.tenx-hero-eq span {
    display: block; width: 4px; height: 100%; background: #fff; border-radius: 1px;
    transform-origin: bottom; transform: scaleY(.12);
    filter: drop-shadow(1px 1px 0 var(--ptf-color-accent, #fc6600));
}
.tenx-hero-sound {
    border: 0; padding: 0; margin: 0; background: none; cursor: pointer; color: #fff; line-height: 0;
    filter: drop-shadow(2px 2px 0 var(--ptf-color-accent, #fc6600));
}
.tenx-hero-sound svg { width: 34px; height: 34px; display: block; }
.tenx-hero-sound:hover { color: var(--ptf-color-accent, #fc6600); filter: drop-shadow(2px 2px 0 #fff); }
.tenx-hero-sound:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 767px) {
    .tenx-hero-audio { right: 16px; bottom: 16px; gap: 10px; }
    .tenx-hero-eq { height: 26px; gap: 2px; }
    .tenx-hero-eq span { width: 3px; }
    .tenx-hero-sound svg { width: 28px; height: 28px; }
}


/* @admin: Franek 2026-10-06 — „Płyta Moc już wkrótce” zamiast „Głos Daje Moc”; „Moc” czcionką i gradientowym cieniem
   jak na wizualizacji płyty (okladka.html, propozycja v3: Didot italic, musztarda #F0B13F, glow natężenie 2).
   Glow = dwie rozmyte kopie napisu w gradiencie hamaka (text-shadow nie ma gradientu), rozmycie w em — ta sama proporcja
   do liter co na okładce (3,6 mm i 1,2 mm przy napisie 36 mm). */
.elementor-77 h1.ptf-heading .tenx-hero-moc {
    position: relative; display: inline-block; font-size: 1.3em; line-height: .9;
    /* @admin: Franek 2026-10-06 — „dobra a wroc czcionke spowrotem na ta sama co bylo Glos daje moc Poppins”: krój
       nagłówka motywu (Poppins 600, prosty) zamiast Didot italic — dotyczy wszystkich trzech linii. */
    font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600; letter-spacing: 0;
    text-shadow: none;
}
.tenx-hero-moc span {
    display: inline-block; padding: 0 .1em .06em 0;
    background: linear-gradient(100deg, #E3202A 0%, #3B2A8F 28%, #F0B13F 52%, #E3202A 76%, #1F8A4C 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.tenx-hero-moc .glow { position: absolute; left: 0; top: 0; transform: scale(1.06); filter: blur(.1em) saturate(1.6); opacity: 1; }
.tenx-hero-moc .glow2 { position: absolute; left: 0; top: 0; transform: scale(1.025); filter: blur(.033em) saturate(1.4); opacity: 1; }
/* @admin: Franek 2026-10-06 — „ten kolorj jako kolor tekstu "Moc" fc6600” (akcent strony zamiast musztardy z okładki v3) */
.tenx-hero-moc .text { position: relative; background: none; color: #fc6600; -webkit-text-fill-color: #fc6600; }
/* @admin: Franek 2026-10-06 — „napis płyta ta sama czcionka co moc tylko bez glowa i mniejsze i to juz wkrotce tez ta sama
   czcionka tylko bez glowa”: Didot italic jak „Moc”, białe, bez gradientowego glow i bez pomarańczowego cienia motywu
   (h1 { text-shadow }) — sam krój, jak napis na okładce. */
.elementor-77 h1.ptf-heading .tenx-hero-plyta,
.elementor-77 h1.ptf-heading .tenx-hero-soon {
    display: inline-block; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600;
    letter-spacing: 0; color: #fff; text-shadow: none;
}
/* @admin: Franek 2026-10-06 — „płyta jeszcze mniejsze taka sama czcionka co juz wkrotce i odstepy takie same i kazdy
   napis od lewej na rowno bo teraz moc jest przesunieta w prawo bez sensu”. Trzy linie jako kolumna z jednym odstępem
   (gap) zamiast <br>, które dokładały puste linie różnej wysokości; „Płyta” = rozmiar „już wkrótce”; „Moc” bez lewego
   wcięcia warstw glow (było .1em), więc wszystkie linie zaczynają się w tej samej kolumnie. */
.elementor-77 h1.ptf-heading:has(.tenx-hero-moc) { display: flex; flex-direction: column; align-items: flex-start; gap: .08em; }
.elementor-77 h1.ptf-heading:has(.tenx-hero-moc) br { display: none; }
.elementor-77 h1.ptf-heading .tenx-hero-plyta,
.elementor-77 h1.ptf-heading .tenx-hero-soon { font-size: .42em; line-height: 1; margin: 0; }
/* Równe odstępy liczone od KRAWĘDZI LITER, nie pudełek linii (zmierzone metrykami fontu z kanwy: przerwa „Płyta”→„Moc”
   wynosiła 0,036, a „Moc”→„już wkrótce” 0,423 wielkości nagłówka). Docelowo obie = 0,26 wielkości nagłówka (Franek:
   „i wiekszy troszke ten odstep” — było 0,18); marginesy przeliczone ponownie po powrocie do Poppins (inne
   proporcje liter niż Didot). marginesy
   przeliczone na em każdego napisu (Moc 1,3x, pozostałe 0,42x nagłówka), więc proporcja trzyma się na każdej szerokości. */
.elementor-77 h1.ptf-heading .tenx-hero-moc { margin-top: .076em; }
.elementor-77 h1.ptf-heading .tenx-hero-soon { margin-top: -.079em; }
/* Wyrównanie do lewej KRAWĘDZI LITER (Franek: „kazdy napis od lewej na rowno”): Poppins ma wewnętrzny margines
   +0,069 wysokości litery przed „P” i „M”, a „j” wystaje haczykiem −0,029 w lewo (zmierzone measureText
   actualBoundingBoxLeft) — kompensacja w em każdego napisu, więc działa na każdej szerokości. */
.elementor-77 h1.ptf-heading .tenx-hero-plyta,
.elementor-77 h1.ptf-heading .tenx-hero-moc { margin-left: -.069em; }
.elementor-77 h1.ptf-heading .tenx-hero-soon { margin-left: .029em; }

/* @admin: Franek 2026-10-06 — strzałka „dziubek w dół” zamiast „Dowiedz się więcej”, prowadzi do sekcji Płyta.
   position: fixed jak oryginalny przycisk motywu — blokiem zawierającym jest sekcja Home (transform w normal-scroll.css),
   więc strzałka stoi przy dolnej krawędzi sekcji, nie ekranu; z-index 3 z tego samego powodu co przycisk (sekcja
   następna zachodzi na hero). */
.tenx-hero-arrow {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
    display: block; padding: 10px; color: #fff; line-height: 0;
    filter: drop-shadow(3px 3px 0 var(--ptf-color-accent, #fc6600));
}
.tenx-hero-arrow svg { width: 44px; height: 26px; display: block; }
.tenx-hero-arrow:hover { color: var(--ptf-color-accent, #fc6600); filter: drop-shadow(3px 3px 0 #fff); }
.tenx-hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 767px) {
    .tenx-hero-arrow { bottom: 14px; }
    .tenx-hero-arrow svg { width: 36px; height: 21px; }
}

/* @admin: Franek 2026-10-06 — „to juz wkrotce mniejsza czcionka z 2x i do prawej dosuniete tak zeby prawa krawedz byla na
   rowno z napisem Moc”. Rozmiar 0,21 wielkości nagłówka (połowa z 0,42); nagłówek ma szerokość treści (najszersze jest
   „Moc”), a „już wkrótce” stoi przy prawej krawędzi kolumny. Marginesy (prawy i górny) wyrównują KRAWĘDZIE LITER —
   wartości z pomiaru measureText, opis przy regułach niżej. */
.elementor-77 h1.ptf-heading:has(.tenx-hero-moc) { width: max-content; }
/* zmierzone (measureText): przy wyrównaniu pudełek prawa krawędź liter „już wkrótce” wychodziła 0,167 wielkości nagłówka
   poza prawą krawędź liter „Moc” (zapas .1em na glow + margines kroju) -> margin-right .797em, po dopisaniu „..” .786em; górny margines dobrany tak,
   żeby przerwa „Moc”→„już wkrótce” została równa przerwie „Płyta”→„Moc” (0,26 nagłówka). */
.elementor-77 h1.ptf-heading .tenx-hero-soon { font-size: .21em; align-self: flex-end; margin: -.113em .786em 0 0; }

/* @admin: Franek 2026-10-06 — „i te napisy Płyta i już wkrótce ten cien taki pomaranczowy co wczesniej byl w glos daje moc”.
   Motyw: h1 { text-shadow: 5px 4px 0 var(--ptf-color-accent) } przy dużym napisie, a mniejsze nagłówki strony
   (oś czasu występów, h4) 2px 2px. Proporcja w em dawała tu 1–2 px — cień był niewidoczny (zmierzone na zrzucie),
   więc wartości w px wg tej konwencji: „Płyta” 3px 3px, „już wkrótce” 2px 2px. */
/* @admin: Franek 2026-10-06 — „dobra jednak i plyta i juz wkrotce bez tego cienia”: ostatecznie bez cienia (wcześniejsze
   decyzje o cieniu powyżej zastąpione tą). */
.elementor-77 h1.ptf-heading .tenx-hero-plyta { text-shadow: none; }
/* @admin: Franek 2026-10-06 — „to już wkrótce bez tego cienia” (przy Didot), potem „i przywroc ten cien w juz wkrotce”
   (po powrocie do Poppins): cień motywu 2px 2px jak wcześniej. */
.elementor-77 h1.ptf-heading .tenx-hero-soon { text-shadow: none; }   /* Franek 2026-10-06: ostatecznie bez cienia */

/* @admin: Franek 2026-10-06 — „a daj ten napis "juz wkrotce" ta cienka czcionka druga”: drugi krój strony — Didot
   (Didot LT Pro Italic z motywu, ten sam co podpis „Bartek” i „Moc” na okładce płyty). */
/* @admin: Franek 2026-10-06 — „i nie jednak cofnij na ta poprzednia czcionke to juz wkrotce na ta standardowa”:
   z powrotem Poppins 600 jak „Płyta” i „Moc” (marginesy wyrównania te same co przed zmianą na Didot). */
.elementor-77 h1.ptf-heading .tenx-hero-soon { font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600;
    margin: -.113em .786em 0 0; }

/* @admin: Franek 2026-10-06 — „na mobile to ma byc jednak wysrodkowany to plyta moc juz wkrotce zeby na srodku bylo
   a nie do lewej przyklejone”. Motyw trzyma nagłówek na telefonie position:fixed, left:20px — blok wyśrodkowany
   (left 50% + przesunięcie o połowę własnej szerokości); układ w środku bloku bez zmian. */
@media (max-width: 767px) {
    /* +.089em: pudełko ma po prawej zapas na glow „Moc”, więc środkujemy KRAWĘDZIE LITER (zmierzone: bez korekty 37 px
       z lewej i 51 px z prawej przy nagłówku 78,75 px -> przesunięcie 7 px = .089em) */
    .elementor-77 h1.ptf-heading:has(.tenx-hero-moc) { left: 50% !important; right: auto !important; transform: translateX(calc(-50% + .089em)); }
}

/* @admin: Franek 2026-10-06 — „w widoku mobile ten equalizer ma byc przyklejony do lewej krawedzi”: na telefonie pasek
   zajmuje całą szerokość — equalizer przy lewej krawędzi, przycisk dźwięku dalej przy prawej. */
/* @admin: Franek 2026-10-06 — „i na desktopie ten equalizer tez do prawej krawedzi przyklejony jak na mobile”: układ jak na
   telefonie na każdej szerokości — equalizer po lewej, przycisk dźwięku po prawej. Na pulpicie granice wyrównuje do
   krawędzi treści kontenera tenx/hero-film.js (alignAudio); 32 px to wartość do chwili pierwszego pomiaru. */
.tenx-hero-audio { left: 32px; justify-content: space-between; }
@media (max-width: 767px) {
    .tenx-hero-audio { left: 16px; right: 16px; }
}
/* @admin: Franek 2026-10-06 — „na mobile ten dziubek w dol jest nieklikalny”. Przyczyna (elementsFromPoint w środku
   strzałki): pierwszy był DIV.tenx-hero-audio — pasek rozciągnięty na całą szerokość przykrywał strzałkę. Pasek nie
   łapie kliknięć, łapie je tylko sam przycisk dźwięku. */
.tenx-hero-audio { pointer-events: none; }
.tenx-hero-audio .tenx-hero-sound { pointer-events: auto; }

/* @admin: Franek 2026-10-06 — „zobacz teraz jaka mam desktopowa szerokosc (...) przy tej szerokosci ustawia sie w chujowej
   pozycji czemu” (okno 1050x1092), potem „JA PIERDOLE PATRZ W JAKIM MIEJSCU JEST NAGLOWEK” + „ZA TRUDNE KURWA ZE NA
   DESKTOPIE MA BYC NA SRODKU”. Na pulpicie (od 1001 px) nagłówek hero stoi na ŚRODKU ekranu w pionie. ZMIERZONE przed tą
   regułą (środek nagłówka wobec połowy ekranu): 1050x1092 516/546, 1200x800 418/400, 1366x768 402/384, 1478x1040 540/520,
   1920x1080 560/540. Przyczyny: (1) motyw daje treści Home niesymetryczne wcięcie (220/120 albo 120/60 px zależnie od
   wysokości okna), a w 1001–1199 px w ogóle nie centruje sekcji; (2) pod nagłówkiem stoi pusty odstępnik Elementora
   070fff7 (61 px). Sekcja centrowana flexem, treść bez wcięć góra/dół, odstępnik schowany — na środek trafia sam
   nagłówek. Powyżej 1920 px centrowanie robi pomiar w tenx/normal-scroll.js (pomija elementy fixed, czyli strzałkę). */
@media (min-width: 1001px) {
    .ptf-section[data-anchor="Home"] { justify-content: center !important; }
    .ptf-section[data-anchor="Home"] .ptf-section__content { padding-top: 0 !important; padding-bottom: 0 !important; }
    .ptf-section[data-anchor="Home"] .elementor-element-070fff7 { display: none !important; }
}