/* ============================================================
   brama-ruch.css — strona główna PL/EN/DE, układ C (wdrożony 13.09.2026)
   Wzorzec: /podglad/gora-C.html (zaakceptowany). Ładowany PO base.css.
   Kolejność: nagłówek → scena z kurtyną → trzy działy → najnowsze
   porównania → [PL: Okno — na żywo] → stopka. Jedno tło #F6F2EA.

   Stany ruchu (klasy na <html>, ustawia skrypt w <head>):
   .ruch          — JS działa i system nie prosi o ograniczenie ruchu
   .brama-gotowa  — wejście już grało w tej sesji: nic nie jest ukryte
                    na starcie; skrypt chowa (.czeka) tylko to, co leży
                    pod kadrem, i pokazuje przy przewijaniu
   Bez JS i przy prefers-reduced-motion żadna z reguł ukrywania nie działa.
   ============================================================ */
:root{
  --linia-sekcji:#DCD4C6;
  --krzywa:cubic-bezier(.22,.61,.36,1);
  --cien-kafla:0 14px 34px -12px rgba(92,74,52,.16),0 2px 6px -2px rgba(92,74,52,.10);
  --cien-zero:0 0 0 -12px rgba(92,74,52,.16),0 0 0 -2px rgba(92,74,52,.10);   /* ten sam cień bez rozmycia i przesunięcia */
}
html,body,.home{background:#F6F2EA;}

/* ---- linie: nagłówek, stopka i odstępy między sekcjami — jeden kolor ---- */
.home-header{border-bottom:1px solid var(--linia-sekcji);}
.home-footer{position:relative;border-top:1px solid var(--linia-sekcji);}
.odstep{position:relative;width:100%;max-width:var(--szer-tresci);margin-inline:auto;padding:0 var(--margines-boczny);box-sizing:border-box;}
.odstep hr{border:0;border-top:1px solid var(--linia-sekcji);margin:0;}
/* głębia pod linią: szeroki, bardzo słaby ciepły cień w dół (bez pasa i kreski) */
.odstep::after,.home-footer::before{content:"";position:absolute;left:var(--margines-boczny);right:var(--margines-boczny);top:1px;height:40px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0,rgba(92,74,52,.05),rgba(92,74,52,0));}
.home-footer::before{top:0;left:0;right:0;}

/* ---- SCENA — bez winiety; poświata i ziarno gasną przed brzegami ---- */
.hero-vignette{display:none;}
.hero-spot{top:50%;width:min(1000px,calc(100% - 60px));height:calc(100% - 60px);}
.hero-grain{-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 100%);}
/* zapas od kurtyny i Ludzika (min. 16 px) liczy skrypt (--zapas-prawy); bez JS kurtyny nie ma */
.hero-inner{padding-right:var(--zapas-prawy,var(--margines-boczny));}
.h1-linia{display:inline-block;}

/* ---- odstępy sekcji ---- */
.dzialy{padding:40px var(--margines-boczny) 40px;}

/* ---- NAJNOWSZE PORÓWNANIA (wspólne dla PL/EN/DE) ---- */
.brama-swieze{width:100%;max-width:var(--szer-tresci);margin-inline:auto;padding:36px var(--margines-boczny) 40px;box-sizing:border-box;}
.bs-label{font-family:"DM Sans",sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grafit-faint);margin:0 0 14px;}
.bs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.bs-grid .bs-item:nth-child(n+4){display:none;}   /* twarda blokada: zawsze najwyżej 3 kafle */
.bs-item{display:flex;flex-direction:column;background:#FBF9F4;border:0;border-radius:12px;box-shadow:var(--cien-kafla);padding:13px 16px;text-decoration:none;}
.bs-tit{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:21px;line-height:1.12;color:var(--grafit);margin:0 0 4px;}
.bs-sub{font-family:"DM Sans",sans-serif;font-size:13px;line-height:1.4;color:var(--grafit-mid);margin:0 0 10px;}
.bs-cta{margin-top:auto;font-family:"DM Sans",sans-serif;font-size:12px;font-weight:500;letter-spacing:.05em;color:var(--akcent-kamera-i-swiatlo);}
.bs-item--outdoor .bs-cta{color:var(--akcent-outdoor);}
.bs-more{margin:24px 0 0;text-align:center;}
.bs-btn{display:inline-block;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;color:var(--akcent-kamera-i-swiatlo);border:1px solid var(--akcent-kamera-i-swiatlo);border-radius:10px;padding:11px 18px;}
@media(max-width:900px){ .bs-grid{grid-template-columns:1fr;} }
@media(max-width:640px){ .bs-item{padding:10px 14px;} .bs-tit{font-size:18px;} }

/* ---- KAFLE DZIAŁÓW — tło o ton jaśniejsze od strony, ciepły cień, bez obrysu ---- */
.kafel-wrap,.dzialy.intro .kafel-wrap,.dzialy.intro.play .kafel-wrap{filter:none;}
.kafel-card{background:#FBF9F4;border:0;box-shadow:var(--cien-kafla);}
.kafel-card:active{transform:none;}

/* ---- OKNO — NA ŻYWO (tylko PL) ---- */
.brama-film{width:100%;max-width:var(--szer-tresci);margin-inline:auto;padding:36px var(--margines-boczny) 48px;box-sizing:border-box;}
.bf-kadr{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1B1D21;isolation:isolate;}
.bf-kadr video{display:block;width:100%;height:100%;object-fit:cover;}
html.ruch .bf-kadr video{transform:scale(1.12);}
.bf-pod{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
.bf-podpis{margin:0;font-family:"DM Sans",sans-serif;font-size:13px;line-height:1.45;color:var(--grafit-mid);}
.bf-dzwiek{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.03em;line-height:1;color:var(--grafit);background:transparent;border:1px solid var(--linia-sekcji);
  border-radius:999px;padding:8px 13px 8px 10px;cursor:pointer;}
.bf-dzwiek:focus-visible{outline:2px solid var(--grafit);outline-offset:2px;}
.bf-dzwiek svg{width:17px;height:17px;flex:none;}
.bf-dzwiek .bf-on{display:none;}
.bf-dzwiek[aria-pressed="true"] .bf-on{display:block;}
.bf-dzwiek[aria-pressed="true"] .bf-off{display:none;}

@media(max-width:640px){
  .brama-film{padding-top:28px;padding-bottom:40px;}
  .dzialy{padding-top:32px;padding-bottom:32px;}
  .brama-swieze{padding-top:28px;padding-bottom:32px;}
  .bf-podpis{font-size:12.5px;}
  .bf-dzwiek{width:36px;height:36px;padding:0;justify-content:center;}
  .bf-etykieta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

/* ---- ZERO efektów na najechanie kursorem ---- */
.bs-item:hover,.bs-item--outdoor:hover{transform:none;}
.bs-btn:hover{background:transparent;color:var(--akcent-kamera-i-swiatlo);}
.home-lang a:hover{color:rgba(58,65,71,.45);}
.home-foot-legal a:hover{color:rgba(58,65,71,.5);border-bottom-color:transparent;}
@media (hover:hover){ .kafel-card:hover{transform:none;box-shadow:var(--cien-kafla);} }
.bs-item,.kafel-card,.bs-btn{transition:none;}

/* ============================================================
   RUCH — tylko przy html.ruch
   ============================================================ */
/* przejścia (bez stanu ukrycia) */
html.ruch .wyl{transition:opacity 700ms var(--krzywa),transform 700ms var(--krzywa);transition-delay:var(--opozn,0ms);}
html.ruch .wyl.otw,html.ruch .hero-wyl,html.ruch .kafel-wrap.wyl,html.ruch .bs-item.wyl{transition-duration:800ms;}
html.ruch .hero-wyl{transition:opacity 800ms var(--krzywa),transform 800ms var(--krzywa);transition-delay:var(--opozn,0ms);}
html.ruch .kafel-wrap.wyl .kafel-card,html.ruch .bs-item.wyl{
  transition:opacity 800ms var(--krzywa),transform 800ms var(--krzywa),box-shadow 800ms var(--krzywa);transition-delay:var(--opozn,0ms);}
html.ruch .kafel-wrap.wyl .kafel-ikona,html.ruch .kafel-wrap.wyl .kafel-tytul,
html.ruch .bs-item.wyl .bs-tit,html.ruch .bs-item.wyl .bs-sub,html.ruch .bs-item.wyl .bs-cta{
  transition:opacity 800ms var(--krzywa),transform 800ms var(--krzywa);transition-delay:calc(var(--opozn,0ms) + 120ms);}

/* STAN UKRYCIA: pierwsza wizyta w sesji — wszystko, co jeszcze nie weszło;
   powrót (.brama-gotowa) — tylko to, co skrypt oznaczył jako .czeka */
html.ruch:not(.brama-gotowa) :is(.wyl,.hero-wyl):not(.jest),
html.ruch :is(.wyl,.hero-wyl).czeka:not(.jest){opacity:0;transform:translate3d(0,var(--ruch-dy,30px),0) scale(.96);}
html.ruch:not(.brama-gotowa) .wyl.wyl-op:not(.jest),html.ruch .wyl.wyl-op.czeka:not(.jest){transform:none;}   /* nagłówek: sama przezroczystość */
/* kafel unosi się: cień rośnie razem z nim */
html.ruch:not(.brama-gotowa) .kafel-wrap.wyl:not(.jest) .kafel-card,html.ruch .kafel-wrap.wyl.czeka:not(.jest) .kafel-card,
html.ruch:not(.brama-gotowa) .bs-item.wyl:not(.jest),html.ruch .bs-item.wyl.czeka:not(.jest){box-shadow:var(--cien-zero);}
/* treść kafla leży „głębiej”: 120 ms później, połowa przesunięcia */
html.ruch:not(.brama-gotowa) :is(.kafel-wrap,.bs-item).wyl:not(.jest) :is(.kafel-ikona,.kafel-tytul,.bs-tit,.bs-sub,.bs-cta),
html.ruch :is(.kafel-wrap,.bs-item).wyl.czeka:not(.jest) :is(.kafel-ikona,.kafel-tytul,.bs-tit,.bs-sub,.bs-cta){
  opacity:0;transform:translate3d(0,calc(var(--ruch-dy,30px) / 2),0);}

/* FILM: blok wideo NIGDY nie zmienia krycia — wchodzi samym ruchem. Półprzezroczysty
   blok z grającym filmem pokazywał przez obraz tło strony i linię sekcji. */
html.ruch .bf-kadr.wyl{opacity:1!important;transition:transform 800ms var(--krzywa);transition-delay:var(--opozn,0ms);}

/* głębia sceny: plan średni (hasło) i bliski (kurtyna + Ludzik) przesuwa skrypt */
html.ruch .hero-inner,html.ruch .hero-kurtyna{will-change:transform;}