/* POGP - pokaz zdjec na stronie O POGP. Dolaczany tylko tam. */
.pogp-anim {
  position: relative;
  overflow: hidden;
  height: 500px;
  background-color: #0c3c3d;
}

.pogp-anim_slajd {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

.pogp-anim_slajd.is-widoczna {
  opacity: 1;
}

.pogp-anim_slajd img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
}

/* Ruch na przemian: slajd nieparzysty sie oddala, parzysty przybliza.
   Przy trzech sekundach jednostajne zblizanie w jedna strone robi sie
   meczace, a naprzemienne czyta sie jak oddech. Czas ruchu to dlugosc
   slajdu plus przenikanie, zeby kadr nie zastygal przed zmiana. */
.pogp-anim_slajd.is-widoczna img {
  animation: pogp-anim-oddalenie 3.8s linear forwards;
}

.pogp-anim_slajd:nth-child(even) img {
  transform: scale(1);
}

.pogp-anim_slajd:nth-child(even).is-widoczna img {
  animation-name: pogp-anim-zblizenie;
}

@keyframes pogp-anim-oddalenie {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

@keyframes pogp-anim-zblizenie {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Plansza z napisami (24.09.2026, kolaz odznaczen): widoczna w calosci
   i nieruchoma. Zdjecia moga byc przyciete i przyblizane, plansza nie -
   na waskim ekranie ucieloby skrajne elementy. Tlo to ten sam gradient,
   co w samej grafice, zeby pasy po bokach nie odcinaly sie od obrazu. */
.pogp-anim_slajd--plansza {
  background-image: linear-gradient(to bottom right, #0e383b, #17555a);
}

.pogp-anim_slajd--plansza img {
  object-fit: contain;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pogp-anim_slajd { transition: opacity .3s linear; }
  .pogp-anim_slajd img,
  .pogp-anim_slajd.is-widoczna img { transform: none; animation: none; }
}