/* =============================================================
   PIEC — piec-flow.css
   Warstwa „jedna sekcja na ekran”. Ładowana tylko przez stronę
   główną (body.v2), więc karta.html i en.html zostają nietknięte.
   ============================================================= */

body.v2{
  background:#100E0C;
  --line:rgba(242,234,224,.11);
  --line-2:rgba(242,234,224,.07);
}

/* ---------- typografia: mocniejszy kontrast skali ---------- */
.v2 h1{font-size:clamp(2.5rem,6vw,5rem);line-height:.98;letter-spacing:-.032em}
.v2 h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.0;letter-spacing:-.03em}
.v2 .eyebrow{font-size:.66rem;letter-spacing:.26em;color:rgba(142,150,112,.9)}
.v2 .lead{color:var(--cream-2)}

/* ---------- scena = jeden ekran ---------- */
.scene{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(92px,13vh,150px) 0 clamp(72px,10vh,120px);
}
.scene--tight{min-height:0;padding-block:clamp(60px,8vh,96px)}
.scene__in{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.scene__in--narrow{max-width:940px}
.scene__head{text-align:center;max-width:46rem;margin:0 auto clamp(42px,6.5vh,84px)}
.scene__head .eyebrow{display:block;margin-bottom:1.5em}
.scene__head .lead{margin-top:1.3em}

/* wejście treści: delikatny stagger dzieci */
.js .stagger>*{
  opacity:0;transform:translateY(20px);
  transition:opacity 820ms cubic-bezier(.2,.7,.28,1),transform 820ms cubic-bezier(.2,.7,.28,1);
}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:80ms}
.js .stagger.in>*:nth-child(3){transition-delay:160ms}
.js .stagger.in>*:nth-child(4){transition-delay:240ms}
.js .stagger.in>*:nth-child(5){transition-delay:320ms}
.js .stagger.in>*:nth-child(6){transition-delay:400ms}
.js .img-rise{opacity:0;transform:scale(1.045);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.28,1)}
.js .img-rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .stagger>*,.js .img-rise{opacity:1;transform:none;transition:none}
}

/* ---------- nawigacja: chowa się przy scrollu w dół ---------- */
.v2 .nav{transition:transform 420ms cubic-bezier(.2,.7,.3,1),background-color 260ms ease,backdrop-filter 260ms ease}
.v2 .nav.is-hidden{transform:translateY(-102%)}

/* ---------- kropki sekcji ---------- */
.dots{
  position:fixed;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);
  z-index:40;display:grid;gap:15px;
}
.dots a{
  position:relative;width:7px;height:7px;border-radius:50%;
  background:rgba(242,234,224,.2);display:block;
  transition:background-color 300ms ease,transform 300ms cubic-bezier(.2,.7,.3,1);
}
.dots a::before{content:"";position:absolute;inset:-9px} /* większy cel dotyku */
.dots a::after{
  content:attr(data-label);position:absolute;right:16px;top:50%;transform:translateY(-50%) translateX(4px);
  font:500 .68rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity 240ms ease,transform 240ms cubic-bezier(.2,.7,.3,1);
}
.dots a:hover::after,.dots a:focus-visible::after{opacity:1;transform:translateY(-50%)}
.dots a.is-active{background:var(--terra-lit);transform:scale(1.45)}
@media (max-width:1140px){.dots{display:none}}

/* ---------- HERO ---------- */
.hero2{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero2 h1{margin:.42em 0 .5em}
/* akcent w hero jest jaśniejszy od terakoty z palety: na zdjęciu pizzy
   #C1440E schodzi do 2,9:1, ten ton trzyma 4,2:1 przy każdym obrocie */
.hero2 h1 em{font-style:normal;color:#F0894A}
.hero2 .lead{max-width:30rem}
.hero2__cta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:2.1em}
/* hero zajmuje dokładnie jeden ekran; pizza jest tłem, tekst leży na niej */
.scene--hero{
  height:100svh;min-height:600px;overflow:hidden;
  align-items:stretch;padding-bottom:0;
}
.scene--hero .scene__in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;height:100%;
  padding-bottom:10vh;   /* tekst nieco wyżej niż środek — kopuła pizzy ma miejsce */
}

/* pizza: środek dysku leży dokładnie na dolnej krawędzi ekranu,
   więc widać równo górną połowę — reszta jest poza kadrem */
.stage--center{
  --s:min(128vh,112vw,1280px);--spin:106s;
  position:absolute;inset:0;z-index:0;margin:0;
}
.stage--center .disc,.stage--center .stage__glow,.stage--center .stage__shadow{
  left:50%;right:auto;top:100%;
  width:var(--s);height:var(--s);
  margin-left:calc(var(--s) / -2);margin-right:0;margin-top:calc(var(--s) / -2);
}
/* lekkie przyciemnienie samego zdjęcia — JS steruje filtrem kontenera,
   więc brightness siedzi na <img>, żeby się nie kasowały */
.stage--center .disc img{filter:brightness(.9) saturate(.97)}
.stage--center .stage__glow{
  width:calc(var(--s) * 1.15);height:calc(var(--s) * 1.15);
  margin-left:calc(var(--s) * -.575);margin-top:calc(var(--s) * -.575);
  opacity:.5;   /* ciepła poświata to światło padające na pizzę, nie tło */
}
.stage--center .stage__shadow{transform:none;opacity:.55}

/* zasłona czytelności: ciemniej pod tekstem, lekko przy dolnej krawędzi.
   Wartości dobrane pomiarem kontrastu przez pełny obrót pizzy — najgorszy
   kadr daje 5,9:1 przy 1280×720 i 6,2:1 przy 1440×900. */
.scene--hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(78% 58% at 50% 44%, rgba(15,13,12,.95), rgba(15,13,12,.82) 52%, rgba(15,13,12,0) 90%),
    linear-gradient(0deg, rgba(15,13,12,.38), rgba(15,13,12,0) 14%);
}
/* przycisk obrysowany ląduje na najjaśniejszym miejscu zdjęcia,
   więc dostaje własną szklaną podkładkę zamiast przygaszania całej pizzy */
.scene--hero .btn--ghost,
.v2 .scene--hero .btn--ghost{box-shadow:inset 0 0 0 1px rgba(242,234,224,.30)}
.scene--hero .btn--ghost:hover{background:rgba(16,14,12,.82);box-shadow:inset 0 0 0 1px rgba(242,234,224,.6)}
.v2 @media (prefers-reduced-transparency:reduce){
  .scene--hero .btn--ghost,.v2 }
.hero2 h1,.hero2 .lead,.hero2 .eyebrow{text-shadow:0 2px 26px rgba(12,10,9,.75)}

@media (max-width:900px){
  /* na telefonie o rozmiarze decyduje szerokość ekranu, nie wysokość */
  .stage--center{--s:min(128vh,146vw,760px)}
  .scene--hero .scene__in{padding-bottom:8vh}
}

/* ---------- STATUS jako osobny, spokojny ekran ---------- */
.status2{text-align:center;display:flex;flex-direction:column;align-items:center}
/* wskaźnik dwa razy większy; górny limit trzyma sekcję w jednym ekranie */
.status2 .pie{width:clamp(220px,30vh,344px);margin-bottom:clamp(26px,4vh,44px)}
.status2 .status__badge{margin-bottom:1.4em}
.status2 .status__head{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.03em;max-width:20ch;
}
.status2 .status__hours{margin-top:1.1em;font-size:1rem}
.status2 .status__meta{
  margin-top:2.4em;font:500 .72rem/1.5 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-3);
}
.status2 .status__meta b{
  display:block;margin-top:.5em;font-family:var(--display);font-size:1.5rem;
  letter-spacing:-.015em;color:var(--cream);text-transform:none;font-weight:500;
}
.status2__cta{margin-top:2.6em}
/* na niskich ekranach ściągam odstępy zamiast zmniejszać samą pizzę */
@media (max-height:800px){
  .status2 .pie{margin-bottom:22px}
  .status2 .status__meta{margin-top:1.7em}
  .status2__cta{margin-top:1.9em}
}

/* ---------- MENU ---------- */
.v2 .menu-grid{column-gap:clamp(40px,7vw,110px)}
.v2 .item{padding:1.35rem 0;border-bottom:1px solid var(--line-2)}
.v2 .item__ing{color:var(--cream-3)}
.v2 .menu-foot{margin-top:clamp(40px,6vh,64px);justify-content:center;flex-direction:column;text-align:center;gap:1.6rem}
.v2 .stubborn{font-size:clamp(1.05rem,1.7vw,1.35rem)}

/* ---------- HISTORIA: karta kremowa nachodząca na zdjęcie ---------- */
.story2{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:0}
.story2__img{position:relative;margin:0;border-radius:4px;overflow:hidden;height:min(66vh,600px);background:var(--brown)}
.story2__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.story2__card{
  position:relative;z-index:2;margin-left:clamp(-120px,-7vw,-40px);
  background:var(--cream);color:#191411;
  padding:clamp(30px,3.6vw,54px);border-radius:4px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.story2__card .eyebrow{color:#8A6A2F;display:block;margin-bottom:1.4em}
.story2__card h2{font-size:clamp(1.6rem,2.6vw,2.3rem);margin-bottom:.7em;color:#191411}
.story2__card p{font-size:.96rem;line-height:1.68;color:rgba(25,20,17,.72)}
.story2__card p+p{margin-top:.9em}
.story2__card .link{color:#B3450E;border-color:rgba(179,69,14,.3);margin-top:1.8em}
.story2__card .link:hover{border-color:#B3450E}
@media (max-width:920px){
  .story2{grid-template-columns:1fr}
  .story2__card{margin:-46px clamp(12px,4vw,32px) 0}
}

/* ---------- TRZY WYRÓŻNIKI ---------- */
.points2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,80px);text-align:center}
.points2 .point{border:0;padding:0}
.points2 .point__num{
  display:block;font-family:var(--display);font-size:2.6rem;font-weight:400;
  color:rgba(228,90,24,.5);letter-spacing:-.02em;margin-bottom:.5em;
}
.points2 .point h3{font-size:clamp(1.2rem,1.9vw,1.55rem);margin-bottom:.7em}
.points2 .point p{font-size:.94rem;line-height:1.65;color:var(--cream-3);max-width:24rem;margin:0 auto}
@media (max-width:820px){.points2{grid-template-columns:1fr;gap:44px}}

/* ---------- GALERIA: kolumny z przesunięciem ---------- */
.gal2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);align-items:start;max-width:1080px;margin-inline:auto}
.gal2 figure{margin:0;overflow:hidden;border-radius:3px;background:var(--brown)}
.gal2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(.2,.7,.25,1)}
@media (hover:hover){.gal2 figure:hover img{transform:scale(1.05)}}
.gal2__col{display:grid;gap:clamp(12px,1.6vw,22px)}
.gal2__col--drop{margin-top:clamp(28px,5vw,72px)}
.gal2 .r43{aspect-ratio:5/4}
.gal2 .r34{aspect-ratio:5/6}
@media (max-width:820px){
  .gal2{grid-template-columns:1fr 1fr}
  .gal2__col--drop{margin-top:0}
  .gal2__col:last-child{grid-column:span 2}
  .gal2__col:last-child{grid-template-columns:1fr 1fr;display:grid}
}

/* ---------- MANIFEST (bez agregatorów) ---------- */
.manifest{text-align:center;margin:0 auto}
.manifest blockquote{
  margin:0 auto;max-width:19ch;font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,5vw,4rem);line-height:1.02;letter-spacing:-.033em;
}
.manifest blockquote span{color:var(--terra-lit)}
.manifest p{
  margin-top:clamp(28px,4vh,44px);font-size:1rem;line-height:1.72;color:var(--cream-3);
  max-width:46ch;margin-inline:auto;
}
.manifest__rule{width:52px;height:1px;background:rgba(228,90,24,.55);margin:0 auto clamp(30px,4vh,46px)}

/* ---------- DOSTAWA ---------- */
.deliv2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
@media (max-width:920px){.deliv2{grid-template-columns:1fr}}
.v2 .phone{font-size:clamp(2.2rem,5vw,3.7rem);letter-spacing:-.035em}
.v2 .facts{border-radius:4px;margin-top:clamp(24px,3.4vh,36px)}
.v2 .fact{background:#15120F}
.v2 .map{border-radius:4px}

/* ---------- KONTAKT ---------- */
.contact2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:start}
@media (max-width:920px){.contact2{grid-template-columns:1fr}}
.v2 .hours td{padding:.86em 0}
.v2 .addr{margin-bottom:.5em}

/* ---------- przyciski: cieńsze, spokojniejsze ---------- */
.v2 .btn{padding:1.1em 1.9em}
.v2 .btn--ghost{box-shadow:inset 0 0 0 1px rgba(242,234,224,.22)}
.v2 .btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(242,234,224,.55)}

/* ---------- stopka ---------- */
.v2 .foot{background:#0B0A09;border-top:1px solid var(--line-2)}

/* ---------- tła sekcji ----------
   Zdjęcia są już stonowane i przyciemnione w pliku (najjaśniejszy piksel
   ~96/255), więc tekst ma minimum 4,6:1 w każdym miejscu kadru bez
   dokładania zasłony. Gradienty poniżej służą tylko wtopieniu krawędzi
   w tło strony, żeby sekcje nie miały widocznych szwów. */
.scene__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.scene__bg img{width:100%;height:100%;object-fit:cover;display:block}
.scene__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,#100E0C 0%,rgba(16,14,12,.62) 20%,rgba(16,14,12,.5) 50%,rgba(16,14,12,.62) 80%,#100E0C 100%),
    radial-gradient(120% 80% at 50% 50%,rgba(16,14,12,0) 34%,rgba(16,14,12,.42) 100%);
}
.scene>.scene__in{position:relative;z-index:2}
@media (prefers-reduced-transparency:reduce){
  .scene__bg img{opacity:.55}
}

/* Na zdjęciu przygaszone odcienie tekstu przestają wystarczać — w tych
   sekcjach podnoszę najsłabsze tiery palety i rozjaśniam akcenty.
   Zmierzone przy najjaśniejszym realnym pikselu tła: najsłabszy element
   ma 5,7:1 zamiast 2,2:1 sprzed poprawki. */
.scene--photo{
  --cream-2:rgba(242,234,224,.88);
  --cream-3:rgba(242,234,224,.70);
  --terra-lit:#F0894A;
}
.scene--photo .eyebrow{color:#AEB68C}
.scene--photo .points2 .point__num{color:rgba(240,137,74,.82)}
.scene--photo .tag{background:rgba(28,30,20,.85);color:#B7BE97}
.scene--photo .tag--terra{background:rgba(46,24,14,.85);color:#F0A578}