/* ویجت عکس المنتور + کلاس slice-reveal */
.slice-reveal{position:relative;overflow:hidden;--sri-dur:1s}
.slice-reveal.sri-ready img.sri-src{visibility:hidden}

/* حالت کانتینر Flexbox با بک‌گراند: بک‌گراند اصلی حذف و ستون‌ها پشت محتوا قرار می‌گیرند */
.slice-reveal.sri-bg{isolation:isolate;background-image:none!important}
.slice-reveal.sri-bg>.sri-slices{z-index:-1}

.sri-slices{position:absolute;inset:0;display:flex;pointer-events:none}

/* هر ستون: برش (clip) با ارتفاع متفاوت */
.sri-slice{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--sri-dur) cubic-bezier(.77,0,.18,1) var(--d,0s);
}

/* داخل هر ستون: همان بخش از عکس؛ فقط scale می‌شود، حول مرکز خود همان ستون (هیچ حرکتی ندارد) */
.sri-img{
  position:absolute;top:0;height:100%;
  left:calc(var(--i) * -100%);
  width:calc(var(--cols) * 100%);
  background-size:100% 100%;background-repeat:no-repeat;
  transform:translate(0,0) scale(1);
  transform-origin:calc((var(--i) + .5) / var(--cols) * 100%) 50%;
  transition:transform var(--sri-dur) cubic-bezier(.77,0,.18,1) var(--d,0s);
  will-change:transform;
}

.slice-reveal.is-split .sri-slice{clip-path:inset(var(--t,0%) 0 var(--b,0%) 0)}
.slice-reveal.is-split .sri-img{transform:translate(var(--x,0%),var(--y,0%)) scale(var(--s,1))}

@media (prefers-reduced-motion:reduce){
  .sri-slice,.sri-img{transition-duration:.01s}
}