/* === OŻYWIENIE STRONY ===
   Wspólne dla wszystkich podstron — dołącza je narzedzia/wspolne.mjs.
   Zasady jak w reszcie projektu:
   - :hover tylko w @media (hover:hover), na dotyku nic nie zostaje „przyklejone” pod palcem,
   - przy prefers-reduced-motion nic się nie rusza,
   - bez JavaScriptu wszystko jest widoczne: chowane są tylko elementy, którym
     animacje.js nadał klasę .ods (a nadaje ją wyłącznie treści poniżej ekranu). */

/* ─── ODSŁANIANIE PRZY PRZEWIJANIU ─── */
/* !important, bo karty i listy mają własne przejścia, które inaczej wygrałyby z odsłanianiem.
   Opóźnienie (transition-delay) celowo poza !important — ustawia je skrypt, karta po karcie. */
.ods{opacity:0;transform:translateY(26px);transition-property:opacity,transform!important;transition-duration:.8s!important;transition-timing-function:cubic-bezier(.22,.61,.36,1)!important}
.ods.ods-in{opacity:1;transform:none}
/* zdjęcie w odsłanianej ramce dojeżdża z lekkiego przybliżenia */
.ods .zoom img{transform:scale(1.12);transition-duration:1.6s,.7s}
.ods.ods-in .zoom img{transform:none}
/* pas ze zdjęciem: ramka stoi, porusza się zdjęcie i wjeżdża podpis */
.pas-foto.ods{opacity:1;transform:none}
.pas-foto.ods img{transform:scale(1.14)}
.pas-foto.ods figcaption{opacity:0;transform:translateY(18px);transition:opacity .8s ease .35s,transform .9s cubic-bezier(.22,.61,.36,1) .35s}
.pas-foto.ods.ods-in img{transform:none}
.pas-foto.ods.ods-in figcaption{opacity:1;transform:none}
/* linia pod nagłówkiem sekcji rysuje się od lewej (zamiast obramowania z atrybutu style) */
.linia{position:relative;border-bottom-color:transparent!important}
.linia::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#0a0a0a;transform-origin:left;transition:transform 1.3s cubic-bezier(.22,.61,.36,1) .2s}
.linia.ods::after{transform:scaleX(0)}
.linia.ods.ods-in::after{transform:scaleX(1)}

/* ─── HERO PODSTRON ─── */
.hero-tlo{animation:cn-oddal 2.4s cubic-bezier(.22,.61,.36,1) both}
@keyframes cn-oddal{from{transform:scale(1.09)}to{transform:none}}
.hero-fakty li{animation:cn-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-fakty li:nth-child(1){animation-delay:.42s}
.hero-fakty li:nth-child(2){animation-delay:.52s}
.hero-fakty li:nth-child(3){animation-delay:.62s}
.hero-fakty li:nth-child(4){animation-delay:.72s}

/* ─── NAGŁÓWEK ─── */
/* opacity i visibility zostają — na stronie głównej nagłówek wygasza brama */
header{transition:box-shadow .3s ease,opacity .45s ease,visibility .45s}
header.przewiniety{box-shadow:0 12px 30px -20px rgba(10,10,10,.45)}

/* ─── KARTY (zakres, technologie, materiały, etapy) ─── */
.karta{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.karta h3,.karta dt{transition:color .3s ease}
/* pomarańczowa linia przelatuje po górnej krawędzi */
.karta::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:#c2410c;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
/* biała karta z cieniem pod treścią — wychodzi poza pole karty, więc układ się nie przesuwa */
.karta::after{content:'';position:absolute;z-index:-1;top:-2px;left:-18px;right:-18px;bottom:-18px;background:#fff;box-shadow:0 0 0 1px #e6e6e3,0 24px 46px -28px rgba(10,10,10,.4);opacity:0;transition:opacity .4s ease}

/* ─── LISTY ─── */
.lista-ruch>li{transition:padding-left .35s cubic-bezier(.22,.61,.36,1),color .3s ease,box-shadow .35s ease}

/* ─── ZDJĘCIA ─── */
.zoom{display:block;overflow:hidden}
.zoom img{transition:transform 1s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.pas-foto img{transition:transform 1.8s cubic-bezier(.22,.61,.36,1),filter .8s ease}
.park li{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease}

@media (hover:hover){
  .karta:hover{transform:translateY(-4px)}
  .karta:hover::before{transform:scaleX(1)}
  .karta:hover::after{opacity:1}
  .karta:hover h3,.karta:hover dt{color:#c2410c}

  .lista-ruch>li:hover{padding-left:12px!important;color:#c2410c;box-shadow:inset 3px 0 0 #c2410c}
  .lista-ruch>li:hover a{color:#c2410c}

  /* zdjęcie przybliża się, czarno-białe nabiera koloru — tak jak w bramie */
  figure:hover .zoom img,a:hover .zoom img,article:hover .zoom img,.park li:hover .zoom img{transform:scale(1.06)}
  figure:hover .zoom img{filter:none!important}
  .pas-foto:hover img{transform:scale(1.04);filter:grayscale(.35) brightness(.6) contrast(1.05)}
  .park li:hover{position:relative;z-index:1;transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(10,10,10,.45)}

  /* podkreślenie w menu rysuje się od lewej (tylko w poziomym menu) */
  @media (min-width:921px){
    .cn-nav a.nav{position:relative}
    .cn-nav a.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#c2410c;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
    .cn-nav a.nav:hover::after{transform:scaleX(1)}
  }
}

/* ─── POWIĘKSZENIE ZDJĘCIA PO KLIKNIĘCIU ─── */
.powieksz{cursor:zoom-in}
.powieksz:focus-visible{outline:2px solid #c2410c;outline-offset:2px}
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:56px 20px;background:rgba(10,10,10,.92);opacity:0;transition:opacity .3s ease;cursor:zoom-out}
.lightbox.otwarty{opacity:1}
/* min-width: małe zdjęcia (park maszynowy, 500 px) też wychodzą na duży ekran; duże i tak są szersze */
.lightbox img{max-width:100%;max-height:100%;min-width:min(100%,640px);object-fit:contain;transform:scale(.96);transition:transform .4s cubic-bezier(.22,.61,.36,1);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox.otwarty img{transform:none}
.lightbox p{position:absolute;left:0;right:0;bottom:16px;margin:0;padding:0 20px;text-align:center;color:#e6e6e3;font-size:14px}
.lightbox button{position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,10,.6);color:#fff;font-size:22px;line-height:1;cursor:pointer}

/* ─── BEZ RUCHU ─── */
@media (prefers-reduced-motion:reduce){
  .ods,.ods .zoom img,.pas-foto.ods img,.pas-foto.ods figcaption{opacity:1!important;transform:none!important;transition:none!important}
  .linia::after{transform:none!important;transition:none!important}
  .hero-tlo,.hero-fakty li{animation:none!important}
  .karta,.karta::before,.karta::after,.zoom img,.pas-foto img,.park li,.lista-ruch>li,.lightbox,.lightbox img{transition:none!important}
}
@media print{.ods,.pas-foto.ods figcaption{opacity:1!important;transform:none!important}}