.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("./assets/images/bg.webp") center/cover no-repeat;
}

.app {
  display: block;
  width: 100%;
  height: 100vh;
  position: relative;
}

.girl__container {
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.wrapper.dark .overlay {
  opacity: 1;
}

.wrapper.dark .girl__container {
  filter: brightness(0.6);
}

.wrapper.dark .girl__container.active {
  filter: brightness(1.1)
          drop-shadow(0 0 20px rgba(255, 175, 175, 0.6))
          drop-shadow(0 0 40px rgba(255, 2, 94, 0.5))
          drop-shadow(0 0 60px rgba(255, 2, 94, 0.3));
  animation: vibrate 1s infinite ease-in-out;
}

@keyframes vibrate {
  /* нейтральное положение */
  0% {
    transform: scale(1.05) translate(0, 0);
  }

  /* быстрая вибрация первые ~40% (0.4 сек) */
  5% {
    transform: scale(1.05) translate(-2px, 2px);
  }
  10% {
    transform: scale(1.05) translate(2px, -2px);
  }
  15% {
    transform: scale(1.05) translate(-2px, -2px);
  }
  20% {
    transform: scale(1.05) translate(2px, 2px);
  }
  25% {
    transform: scale(1.05) translate(-2px, 2px);
  }
  30% {
    transform: scale(1.05) translate(2px, -2px);
  }
  35% {
    transform: scale(1.05) translate(-2px, -2px);
  }
  40% {
    transform: scale(1.05) translate(0, 0);
  }

  /* длиннее пауза — ~0.6 сек */
  41%,
  100% {
    transform: scale(1.05) translate(0, 0);
  }
}

.container {
  width: 75%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  position: relative;
}

.girl1__img,
.girl2__img {
  width: 100%;
}

.girl1 {
  width: 21vw;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 1));
}

/* .girl1:hover {
  content: url("./assets/images/girl_a.webp");
} */

.girl2 {
  width: 19vw;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 1));
}

/* .girl2:hover {
  content: url("./assets/images/girl1_a.webp");
} */

.title__container {
  width: 25vw;
  height: 50vh;
  background: url(./assets/images/TXT.webp) center / contain no-repeat;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  z-index: 5;
}

.dildo__img {
  width: 100%;
  /* filter: drop-shadow(-20px 0 13px rgba(0, 0, 0, 0.6)); */
}

.dildo1__img {
  width: 100%;
  /* filter: drop-shadow(-15px 0 5px rgba(0, 0, 0, 0.6)); */
}

.dildo__container {
  position: absolute;
  bottom: 5%;
  left: 29%;
  width: 5vw;
  z-index: 1;
  opacity: 1;
}

.dildo__container.opacity,
.dildo1__container.opacity {
  opacity: 0;
}

.dildo1__container {
  position: absolute;
  bottom: 5%;
  right: 26%;
  width: 7vw;
  z-index: 1;
  opacity: 1;
}

.hover-zone {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 3; 
  cursor: pointer;
}

.left-zone {
  left: 0;
}

.right-zone {
  right: 0;
}


.left-zone:hover ~ .container .girl1__img {
  content: url("./assets/images/girl_a.webp");
}

.right-zone:hover ~ .container .girl2__img {
  content: url("./assets/images/girl1_a.webp");
}


@media (max-width: 2560px) and (max-height: 1440px) {
  .girl1 {
    width: 26.2vw;
  }

  .girl2 {
    width: 24vw;
  }

  .container {
    width: 86%;
  }

  .dildo__container {
    left: 31%;
  }

  .dildo1__container {
    right: 29%;
  }

  .title__container {
    width: 29vw;
  }
}

@media (max-width: 2560px) and (max-height: 1080px) {
  .girl1 {
    width: 22vw;
  }

  .girl2 {
    width: 20vw;
  }
  .container {
    width: 75%;
  }
}

@media (max-width: 1920px) {
  .girl1 {
    width: 27vw;
  }

  .girl2 {
    width: 24.4vw;
  }

  .container {
    width: 88%;
  }
}

@media (max-width: 1920px) and (max-height: 900px) {
  .girl1 {
    width: 25vw;
  }

  .girl2 {
    width: 22.7vw;
  }
}

@media (max-width: 1440px) {
  .girl1 {
    width: 27vw;
  }

  .girl2 {
    width: 24.4vw;
  }
}

@media (max-height: 749px) {
  .girl1 {
    width: 25vw;
  }

  .girl2 {
    width: 22.7vw;
  }
}