/* Image effects for product-gallery main image */
.product-gallery .main-image{
  position: relative;
  overflow: hidden;
}
.product-gallery .main-image img{
  display:block;
  width:100%;
  opacity:0;
  transform:translateZ(0);
  transition: transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease;
}
.product-gallery .main-image img.active{
  opacity:1;
}

/* Effects */
.product-gallery .main-image.fade img{ opacity:0; }
.product-gallery .main-image.fade img.active{ opacity:1; }

.product-gallery .main-image.rotate img{ transform:rotate(0deg); }
.product-gallery .main-image.rotate img.active{ transform:rotate(360deg); }

.product-gallery .main-image.bounce img.active{
  animation:bounceIn 0.9s;
}

.product-gallery .main-image.slide img{ transform:translateX(80px); opacity:0; }
.product-gallery .main-image.slide img.active{ transform:translateX(0); opacity:1; }

.product-gallery .main-image.skew img{ transform:skew(8deg,0deg); opacity:0.85; }
.product-gallery .main-image.skew img.active{ transform:skew(0deg,0deg); opacity:1; }

.product-gallery .main-image.scale img{ transform:scale(0.9); opacity:0; }
.product-gallery .main-image.scale img.active{ transform:scale(1); opacity:1; }

.product-gallery .main-image.slideUp img{ transform:translateY(40px); opacity:0; }
.product-gallery .main-image.slideUp img.active{ transform:translateY(0); opacity:1; }

@keyframes bounceIn{
  0%{transform:scale(0.9);opacity:0;}
  60%{transform:scale(1.05);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}

/* Modal */
.img-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.img-modal.active{display:flex;}
.img-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
}
.img-modal__content{
  position:relative;
  max-width:90%;
  max-height:90%;
  z-index:1;
}
.img-modal__image{
  background:#000;
  border-radius:8px;
  overflow:hidden;
}
.img-modal__image img{
  max-width:100%;
  max-height:80vh;
  display:block;
  opacity:0;
  transform:translateZ(0);
  transition: transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease;
}
.img-modal__image img.active{opacity:1;}
.img-modal__close{
  position:absolute;
  top:-12px;
  right:-12px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#000;
  font-size:20px;
  cursor:pointer;
  z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* Reuse effects for modal */
.img-modal .main-image.fade img{ opacity:0; }
.img-modal .main-image.fade img.active{ opacity:1; }
.img-modal .main-image.rotate img{ transform:rotate(0deg); }
.img-modal .main-image.rotate img.active{ transform:rotate(360deg); }
.img-modal .main-image.bounce img.active{ animation:bounceIn 0.9s; }
.img-modal .main-image.slide img{ transform:translateX(80px); opacity:0; }
.img-modal .main-image.slide img.active{ transform:translateX(0); opacity:1; }
.img-modal .main-image.skew img{ transform:skew(8deg,0deg); opacity:0.85; }
.img-modal .main-image.skew img.active{ transform:skew(0deg,0deg); opacity:1; }
.img-modal .main-image.scale img{ transform:scale(0.9); opacity:0; }
.img-modal .main-image.scale img.active{ transform:scale(1); opacity:1; }
.img-modal .main-image.slideUp img{ transform:translateY(40px); opacity:0; }
.img-modal .main-image.slideUp img.active{ transform:translateY(0); opacity:1; }