/* ============================================================================
   fade-in.css — lagodne pojawianie sie grafik zamiast twardego "skoku"
   ----------------------------------------------------------------------------
   Zasada: obrazek startuje niewidoczny (opacity 0) i po zaladowaniu plynnie
   dochodzi do swojej docelowej przezroczystosci. Klase `ca-fade` i `ca-in`
   nadaje skrypt fade-in.js — CSS sam nie wie, kiedy obrazek sie zaladowal.

   Ten plik ladowany JEST PO styles.css, wiec przy rownej swoistosci wygrywa.
   Nie modyfikuje styles.css ani kodu React.
   ============================================================================ */

/* Stan poczatkowy: niewidoczny. */
img.ca-fade {
  opacity: 0;
  transition: opacity .45s ease;
}

/* Po zaladowaniu: pelna widocznosc. */
img.ca-fade.ca-in {
  opacity: 1;
}

/* WYJATEK — logotypy marek.
   styles.css (linia 413) nadaje im docelowo `opacity: .8` razem z grayscale.
   Gdybysmy doprowadzili je do 1, zrobilyby sie ciemniejsze niz w projekcie.
   Swoistosc 0,3,1 przebija ogolna regule wyzej (0,2,1). */
.brand-logo img.ca-fade.ca-in {
  opacity: .8;
}

/* Uzytkownicy z wlaczonym "ogranicz animacje" (system/przegladarka) dostaja
   natychmiastowe pojawienie sie, bez przejscia. */
@media (prefers-reduced-motion: reduce) {
  img.ca-fade {
    transition: none;
  }
}