/* ══════════════════════════════════════════════════════════════
   PRIMEHOUSE MASTERCLASS - RUCH I MIKROINTERAKCJE (06.08.2026)

   Jeden system, trzy warstwy:
   1. wejście na stronę główną - film rozłożony na cały ekran zjeżdża
      na swoje miejsce, a reszta strony wchodzi za nim,
   2. odsłanianie sekcji przy przewijaniu,
   3. drobne reakcje na kursor: karty, przyciski, zdjęcia, nagłówek.

   Zasady, których pilnujemy w całym pliku:
   - animujemy wyłącznie `transform` i `opacity` (poza intro, które musi
     zmieniać wymiary - ale to jeden element i jednorazowo),
   - stan „ukryte przed odsłonięciem" wisi na klasie `.mc-js`, którą dokłada
     skrypt. Bez JS-u strona jest po prostu widoczna, nic nie znika,
   - `prefers-reduced-motion` wyłącza ruch, nie treść.
   ══════════════════════════════════════════════════════════════ */

:root {
  --mc-ruch-szybko: 180ms;
  --mc-ruch-sred:   340ms;
  --mc-ruch-wolno:  1000ms;

  /* wyhamowanie na końcu - ruch „dojeżdża", zamiast się zatrzymywać */
  --mc-ease:      cubic-bezier(.215, .61, .355, 1);   /* odpowiednik power3.out */
  /* mocny rozbieg i mocne wyhamowanie - do przejścia filmu */
  --mc-ease-morf: cubic-bezier(.65, 0, .15, 1);
}

/* ══════════════════════════════════════════════════════════════
   1. WEJŚCIE NA STRONĘ GŁÓWNĄ
   ══════════════════════════════════════════════════════════════ */

/* Blokady przewijania NIE ma tutaj celowo: `overflow` nie da się cofnąć
   animacją, więc gdyby skrypt padł, strona zostałaby zablokowana na zawsze.
   Blokadę zakłada i zdejmuje skrypt, który ma własny bezpiecznik czasowy. */

.mc-intro__scena {
  position: fixed;
  z-index: 60;
  overflow: hidden;
  background: var(--mc-czarny, #1c1b1f);
  /* Krzywa odpowiadająca `power3.inOut` z GSAP-a: mocny rozbieg i mocne
     wyhamowanie. Kadr rusza leniwie, nabiera prędkości i miękko siada
     w karcie - inaczej niż zwykłe wyhamowanie, które startuje szarpnięciem. */
  transition:
    transform     var(--mc-ruch-morf, 2000ms) cubic-bezier(.65, 0, .35, 1),
    border-radius var(--mc-ruch-morf, 2000ms) cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
  /* Jedzie samo `transform`, nie `width`/`height` (07.08.2026).

     Wcześniej animowane były wymiary, a każda ich zmiana wymusza przeliczenie
     układu strony - stąd szarpanie przy zmniejszaniu kadru. `transform` liczy
     kompozytor, poza układem, więc ruch jest płynny. Kadr dostaje od razu
     docelowe wymiary karty, a do miejsca startu wraca przekształceniem;
     skrypt kontr-skaluje film w środku, żeby obraz nie był rozciągnięty. */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}

/* Bez przejścia - tylko na moment ustawienia kadru startowego. */
.mc-intro__scena--zywa { transition: none; }

.mc-intro__scena video,
.mc-intro__scena img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Kontr-przekształcenie znoszące różnicę proporcji - patrz `ruszaj()`.
     Musi jechać tą samą krzywą i w tym samym czasie co kadr, inaczej obraz
     „oddycha" względem ramki. */
  transition: transform var(--mc-ruch-morf, 2000ms) cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
/* Przy ustawianiu stanu wyjściowego przejścia nie ma - ani na kadrze,
   ani na filmie w środku. */
.mc-intro__scena--zywa video,
.mc-intro__scena--zywa img { transition: none; }

/* Ta sama poświata co na karcie docelowej, żeby podmiana na końcu
   była niewidoczna. Wchodzi razem z przejściem. */
.mc-intro__scena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .78) 100%);
  opacity: 0;
  transition: opacity var(--mc-ruch-morf, 2000ms) cubic-bezier(.65, 0, .35, 1);
}

.mc-intro--rusza .mc-intro__scena::after { opacity: 1; }

/* Kadru NIE wygaszamy na końcu - próbowałam i wyszło gorzej.
   Półprzezroczysty kadr odsłania kopię filmu leżącą w karcie, a obie kopie
   są w innym miejscu materiału, więc widać podwójny, rozjeżdżający się obraz.
   Zamiast tego skrypt zgrywa kartę na tę samą klatkę i podmienia je cięciem. */

/* Oryginału w karcie NIE ukrywamy - i to jest zmiana wymuszona przez błąd.

   Wcześniej wideo karty miało `visibility: hidden`, dopóki kadr był na ekranie.
   Zamysł: żeby nie było widać dwóch filmów naraz. Skutek uboczny: gdy kadr
   lądował choćby kilka pikseli obok karty, w tej szparze wychodziło **czarne
   tło karty** - i to był ten ciemny pasek nad filmem.

   Teraz karta pokazuje swój film przez cały czas. Kadr i tak leży na niej,
   a treść jest ta sama, więc ewentualne niedopasowanie jest niewidoczne
   zamiast rzucać się w oczy czarnym paskiem. Przed zobaczeniem dwóch filmów
   naraz chroni blokada przewijania, która trzyma przez całe przejście. */

/* Dopóki film trzyma ekran, reszta strony czeka schowana. Nie chowamy jej
   `display: none`, żeby układ był już policzony i nic nie skakało. */
html.mc-intro .mc > section { opacity: 0; transform: translateY(64px); }

/* ══════════════════════════════════════════════════════════════
   2. ODSŁANIANIE PRZY PRZEWIJANIU

   Uwaga na kierunek działania, bo to nie jest kosmetyka.

   Stan ukryty wisi na klasie `mc-czeka`, którą skrypt **zdejmuje**
   przy odsłanianiu - a nie na regule bazowej, którą trzeba by potem
   przebić drugą klasą. Różnica jest taka, że tutaj stanem domyślnym
   jest „widoczne": jeśli cokolwiek pójdzie nie tak - skrypt nie wstanie,
   przeglądarka nie ruszy przejścia, karta stoi w tle z zamrożoną osią
   czasu - element po prostu jest widoczny, bo nic go nie chowa.

   Przy odwrotnym ułożeniu (ukryte w bazie, odsłanianie przez przejście)
   zamrożone przejście zostawia treść na `opacity: 0` na zawsze.
   ══════════════════════════════════════════════════════════════ */

.mc-js .mc > section {
  transition:
    opacity   var(--mc-ruch-wolno) var(--mc-ease),
    transform var(--mc-ruch-wolno) var(--mc-ease);
}

/* 64 px i sekunda, jak wjazd sekcji na sellit.com. Przy krótszym dystansie
   i szybszym czasie ruch ginie - widz widzi, że coś mignęło, ale nie czyta
   tego jako wjazdu od dołu. */
.mc-js .mc > section.mc-czeka {
  opacity: 0;
  transform: translateY(64px);
}

/* Grupy, w których elementy wchodzą po kolei. Opóźnienie liczy skrypt
   i wpisuje w `--i`. */
.mc-js .mc-odslona > * {
  transition:
    opacity   var(--mc-ruch-wolno) var(--mc-ease),
    transform var(--mc-ruch-wolno) var(--mc-ease);
  transition-delay: calc(var(--i, 0) * 85ms);
}

.mc-js .mc-odslona.mc-czeka > * {
  opacity: 0;
  transform: translateY(44px);
}

/* Po wejściu kasujemy opóźnienia, żeby reakcje na kursor ruszały od razu. */
.mc-js .mc-odslona.mc-po-odslonie > * { transition-delay: 0s; }

/* ══════════════════════════════════════════════════════════════
   3. NAGŁÓWEK - ŚCIŚNIĘCIE PO PRZEWINIĘCIU
   ══════════════════════════════════════════════════════════════ */

#polor-header {
  transition:
    box-shadow var(--mc-ruch-sred) var(--mc-ease),
    background-color var(--mc-ruch-sred) var(--mc-ease);
}

#polor-header .newu-header-inner,
#polor-header .pxl-logo,
#polor-header .newu-logo-podpis {
  transition:
    height var(--mc-ruch-sred) var(--mc-ease),
    padding var(--mc-ruch-sred) var(--mc-ease),
    opacity var(--mc-ruch-sred) var(--mc-ease),
    transform var(--mc-ruch-sred) var(--mc-ease);
}

#polor-header.newu-przewiniety {
  box-shadow: 0 1px 22px rgba(0, 0, 0, .07);
}

#polor-header.newu-przewiniety .pxl-logo { height: 38px; }

/* Podpis pod logo ma zostac widoczny zawsze - moze sie zmniejszyc,
   nie moze zniknac (decyzja Patrycji, 18.08.2026, cofa wczesniejsza
   decyzje z 06.08 o chowaniu go przy scisnietym nagłowku). Przy 38 px
   logo dostaje ten sam mniejszy stopien pisma co w naglowku mobilnym
   (juz sprawdzony, najmniejszy tekst w serwisie) - i wlasne --newu-logo-h,
   zeby wciecie napisu nadal trafiało pod litere "P" po zmniejszeniu logo. */
#polor-header.newu-przewiniety .logo-default {
  --newu-logo-h: 38px;
}

#polor-header.newu-przewiniety .newu-logo-podpis {
  font-size: 0.59375rem;
  letter-spacing: .13em;
}

/* ══════════════════════════════════════════════════════════════
   4. REAKCJE NA KURSOR
   ══════════════════════════════════════════════════════════════ */

/* --- karty, które można kliknąć --- */
a.mc-filar,
a.mc-karta-num,
a.mc-czl-filar,
a.mc-wydarzenie,
a.mc-czl-nagranie {
  transition:
    transform var(--mc-ruch-sred) var(--mc-ease),
    box-shadow var(--mc-ruch-sred) var(--mc-ease),
    border-color var(--mc-ruch-sred) var(--mc-ease);
}

a.mc-filar:hover,
a.mc-karta-num:hover,
a.mc-czl-filar:hover,
a.mc-wydarzenie:hover,
a.mc-czl-nagranie:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(28, 27, 31, .10);
}

a.mc-filar:active,
a.mc-karta-num:active,
a.mc-czl-filar:active,
a.mc-wydarzenie:active,
a.mc-czl-nagranie:active {
  transform: translateY(-1px);
  transition-duration: var(--mc-ruch-szybko);
}

/* Karty nieklikalne też reagują, tylko delikatniej - żeby strona
   nie sprawiała wrażenia martwej tam, gdzie nie ma odnośnika. */
.mc-cen-plan,
.mc-filar,
.mc-karta-num {
  transition:
    transform var(--mc-ruch-sred) var(--mc-ease),
    box-shadow var(--mc-ruch-sred) var(--mc-ease);
}

.mc-cen-plan:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(28, 27, 31, .09); }

/* --- zdjęcia w zaokrąglonych kadrach --- */
.mc-czl-sp__foto,
.mc-czl-nagranie__foto,
.mc-cen-plan__foto,
.mc-format__foto,
.mc-news__foto {
  overflow: hidden;
}

.mc-czl-sp__foto img,
.mc-czl-nagranie__foto img,
.mc-cen-plan__foto img,
.mc-format__foto img,
.mc-news__foto img {
  transition: transform var(--mc-ruch-wolno) var(--mc-ease);
}

.mc-czl-nagranie:hover .mc-czl-nagranie__foto img,
.mc-cen-plan:hover .mc-cen-plan__foto img,
.mc-news__foto:hover img {
  transform: scale(1.04);
}

/* --- przyciski --- */
.mc-btn:active {
  transform: translateY(0) scale(.985);
  box-shadow: none;
  transition-duration: var(--mc-ruch-szybko);
}

/* Przyciski ze strzałką: strzałka wysuwa się przy najechaniu. */
.mc-btn svg,
.mc-czl-filar__wiecej svg {
  transition: transform var(--mc-ruch-sred) var(--mc-ease);
}

.mc-btn:hover svg,
.mc-czl-filar__wiecej:hover svg { transform: translateX(3px); }

/* --- strzałki karuzeli --- */
.mc-strzalka {
  transition:
    background-color var(--mc-ruch-szybko) var(--mc-ease),
    transform var(--mc-ruch-szybko) var(--mc-ease),
    opacity var(--mc-ruch-szybko) var(--mc-ease);
}

.mc-strzalka:not([disabled]):hover  { transform: scale(1.06); }
.mc-strzalka:not([disabled]):active { transform: scale(.94); }

/* --- odnośniki w menu: podkreślenie wyjeżdża od lewej --- */
#polor-header .menu-navigation > li > a {
  position: relative;
}

#polor-header .menu-navigation > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mc-ruch-sred) var(--mc-ease);
}

#polor-header .menu-navigation > li > a:hover::after,
#polor-header .menu-navigation > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Pozycja z podmenu ma własną strzałkę - podkreślenie tylko myliłoby. */
#polor-header .menu-navigation > li.menu-item-has-children > a::after { display: none; }

/* --- etykiety i pastylki --- */
.mc-badge {
  transition: transform var(--mc-ruch-sred) var(--mc-ease);
}

a:hover > .mc-badge { transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   5. KTO NIE CHCE RUCHU, TEN GO NIE DOSTAJE

   Wyłączamy animacje, ale nie treść: wszystko, co miało się odsłonić,
   jest od razu widoczne.
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mc-js .mc > section,
  .mc-js .mc > section.mc-czeka,
  .mc-js .mc-odslona > *,
  .mc-js .mc-odslona.mc-czeka > *,
  html.mc-intro .mc > section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mc-intro__scena { display: none !important; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}