/* ==========================================
   PREFAB: Image Clip Reveal
   Kep scroll-ra fokozatosan feltarul
   ========================================== */

.pf-image-reveal {
  position: relative;
  overflow: hidden;
}

.pf-image-reveal img {
  width: 100%;
  display: block;
}

/* Clip iranyok */
.pf-image-reveal[data-reveal="left"] img {
  clip-path: inset(0 100% 0 0);
}

.pf-image-reveal[data-reveal="right"] img {
  clip-path: inset(0 0 0 100%);
}

.pf-image-reveal[data-reveal="top"] img {
  clip-path: inset(0 0 100% 0);
}

.pf-image-reveal[data-reveal="bottom"] img {
  clip-path: inset(100% 0 0 0);
}

.pf-image-reveal[data-reveal="center"] img {
  clip-path: inset(50% 50% 50% 50%);
}

.pf-image-reveal[data-reveal="circle"] img {
  clip-path: circle(0% at 50% 50%);
}

/* Revealed state */
.pf-image-reveal.revealed img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-image-reveal[data-reveal="circle"].revealed img {
  clip-path: circle(75% at 50% 50%);
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Optional caption */
.pf-image-reveal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.8s;
}

.pf-image-reveal.revealed .pf-image-reveal-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Full-width variant */
.pf-image-reveal--full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.pf-image-reveal--full img {
  height: 70vh;
  object-fit: cover;
}

/* Rounded variant */
.pf-image-reveal--rounded {
  border-radius: 20px;
  overflow: hidden;
}