/* Base overlay styles */

.col.ps-0.pe-0.my-1:has([class*="image-"])::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--hover-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  z-index: 999;
  pointer-events: none;
}

/* Desktop hover behavior */

@media (hover: hover) and (pointer: fine) {
  .col.ps-0.pe-0.my-1:has([class*="image-"]):hover::after {
    opacity: 1;
  }
}

/* Mobile toggle behavior with JavaScript */

@media (hover: none), (pointer: coarse) {
  .col.ps-0.pe-0.my-1:has([class*="image-"]) {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (hover: none), (pointer: coarse) {
  .col.ps-0.pe-0.my-1:has([class*="image-"]).mobile-overlay-active::after {
    opacity: 1;
  }
}

/* Your image-specific variables */

.col.ps-0.pe-0.my-1:has(.image-1) {
  --hover-image: url('../../assets/img/03_145_happiness_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-2) {
  --hover-image: url('../../assets/img/02_081_lips_purse_effort_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-3) {
  --hover-image: url('../../assets/img/01_155_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-4) {
  --hover-image: url('../../assets/img/01_113_mouth_press_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-5) {
  --hover-image: url('../../assets/img/03_108_disgust_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-6) {
  --hover-image: url('../../assets/img/02_062_lips_corner_pull_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-7) {
  --hover-image: url('../../assets/img/02_086_lips_FV_effort_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-8) {
  --hover-image: url('../../assets/img/01_020_eye_squint_blink_texture_crop.webp');
}

.col.ps-0.pe-0.my-1:has(.image-9) {
  --hover-image: url('../../assets/img/03_091_mouth_press_texture_crop.webp');
}

.col.ps-0.pe-0.my-1 {
  position: relative;
}