/* ==========================================
   PREFAB: Parallax Image Layers
   Tobb kep kulonbozo sebessegel mozog
   ========================================== */

.pf-parallax {
  position: relative;
  height: 100vh;
  overflow: visible;
}

.pf-parallax-layer {
  position: absolute;
  will-change: transform;
}

/* Pre-defined layer positions */
.pf-parallax-layer[data-depth="0.1"] { z-index: 1; }
.pf-parallax-layer[data-depth="0.3"] { z-index: 2; }
.pf-parallax-layer[data-depth="0.5"] { z-index: 3; }
.pf-parallax-layer[data-depth="0.7"] { z-index: 4; }
.pf-parallax-layer[data-depth="1"]   { z-index: 5; }

.pf-parallax-layer img {
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Content overlay */
.pf-parallax-content {
  position: absolute;
  z-index: 10;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.pf-parallax-content h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
}

.pf-parallax-content p {
  font-size: 1.1rem;
  opacity: 0.8;
  max-width: 400px;
}

/* Dark background variant */
.pf-parallax--dark {
  background: #1a1a1a;
}

/* Light background variant */
.pf-parallax--light {
  background: #f5f0eb;
}

.pf-parallax--light .pf-parallax-content {
  color: #1e1d14;
  text-shadow: none;
}

/* Scattered composition preset */
.pf-parallax--scattered .pf-parallax-layer:nth-child(1) { top: 10%; left: 5%; }
.pf-parallax--scattered .pf-parallax-layer:nth-child(2) { top: 30%; right: 8%; }
.pf-parallax--scattered .pf-parallax-layer:nth-child(3) { bottom: 15%; left: 15%; }
.pf-parallax--scattered .pf-parallax-layer:nth-child(4) { bottom: 25%; right: 20%; }
.pf-parallax--scattered .pf-parallax-layer:nth-child(5) { top: 5%; left: 45%; }

.pf-parallax--scattered .pf-parallax-layer img {
  width: 250px;
  height: 300px;
  object-fit: cover;
}

.pf-parallax--scattered .pf-parallax-layer:nth-child(2) img { width: 320px; height: 220px; }
.pf-parallax--scattered .pf-parallax-layer:nth-child(4) img { width: 200px; height: 250px; }

@media (max-width: 768px) {
  .pf-parallax--scattered .pf-parallax-layer img { width: 150px; height: 180px; }
  .pf-parallax--scattered .pf-parallax-layer:nth-child(2) img { width: 180px; height: 130px; }
}