/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2025 | 21:41:23 */
[data-scroll="reveal-x"] {
  position: relative;
  overflow: hidden;
}

/* Pseudo-element zakrywający całość */
[data-scroll="reveal-x"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 100%;
  height: 100%;
  background-color: var(--reveal-color, white);
  z-index: 2;
  pointer-events: none;
  transform-origin: right;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOut */
}

[data-scroll="reveal-x"].reveal-x-left::after {
	  transform-origin: right;
	right: unset;
	left: 0;
}

/* Po wejściu w viewport — zasłona zwęża się */
[data-scroll="reveal-x"].in-view::after {
  width: 0%;
	
}

/* Obrazek – efekt powiększenia (scale) */
[data-scroll="reveal-x"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  

  transform: scale(1.2); /* startowa skala */
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOut */
  transform-origin: center;
}

/* Po wejściu w viewport – skalowanie do 1 */
[data-scroll="reveal-x"].in-view img {
  transform: scale(1);
}
[data-scroll="fade-in"] img {
  opacity: 0;
  transform: translateY(20px); /* lub translateX jeśli chcesz efekt boczny */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Gdy JS doda klasę .in-view */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}