/* Generic animation base */
.pmcc-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.pmcc-animate.show {
  opacity: 1;
  transform: none;
}

/* Variants */
.pmcc-slide-left {
  transform: translateX(-50px);
}

.pmcc-slide-right {
  transform: translateX(50px);
}

.pmcc-fade-in {
  transform: none;
  opacity: 0;
}

.pmcc-slide-left.show,
.pmcc-slide-right.show,
.pmcc-fade-in.show {
  opacity: 1;
  transform: none;
}

/* base transition utility */
.pmcc-transition {
  transition: transform 0.3s ease, color 0.3s ease, background-color 0.4s ease,
    box-shadow 0.3s ease, opacity 0.3s ease;
}

/* move element to right */
.pmcc-hover-move-right:hover,
.pmcc-anim-trigger:hover .pmcc-hover-move-right {
  transform: translateX(4px);
}

/* move element to left */
.pmcc-hover-move-left:hover,
.pmcc-anim-trigger:hover .pmcc-hover-move-left {
  transform: translateX(-4px);
}

/* move element to top */
.pmcc-hover-move-top:hover,
.pmcc-anim-trigger:hover .pmcc-hover-move-top {
  transform: translateY(-4px);
}

/* move element to bottom */
.pmcc-hover-move-bottom:hover {
  transform: translateY(4px);
}

/* scale element on hover */
.pmcc-hover-scale:hover,
.pmcc-anim-trigger:hover .pmcc-hover-scale {
  transform: scale(1.007);
}

/* change background color on hover */
.pmcc-hover-bg:hover,
.pmcc-anim-trigger:hover .pmcc-hover-bg {
  background-color: #f5f5f5;
}

/* change background color on hover */
.pmcc-hover-opacity:hover,
.pmcc-anim-trigger:hover .pmcc-hover-opacity {
  opacity: 0.5;
}

/* fade in element on hover */
.pmcc-hover-fadein {
  opacity: 0;
}

.pmcc-hover-fadein:hover,
.pmcc-anim-trigger:hover .pmcc-hover-fadein {
  opacity: 1;
}

/* image inset shadow on hover */
.pmcc-hover-shadow-inset {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 0.25rem !important;
}

/* 1. Initial State: Set shadow to transparent alpha (0) */
.pmcc-hover-shadow-inset::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;

  /* Use 0 alpha so it starts invisible but transitions smoothly */
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0);

  transition: box-shadow 0.3s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

/* 2. Hover State: Set shadow to 50% white (0.2) */
.pmcc-anim-trigger:hover .pmcc-hover-shadow-inset::after {
  /* CHANGED: Use rgba for 50% opacity on hover */
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.5);
}

/* Responsive for small screens */
@media (max-width: 768px) {
  .pmcc-hover-fadein {
    opacity: 1;
  }
}