html,
body {
  height: 100%;
  overflow: hidden;
}

@font-face {
  font-family: "Bangers";
  src:
    url("../assets/fonts/Bangers-Regular.woff2") format("woff2"),
    url("../assets/fonts/Bangers-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

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

.title__container {
  width: 70vw;
  height: 15vh;
  background: url("../assets/images/Txt.webp") center / contain no-repeat;
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  animation:
    comicStamp 900ms cubic-bezier(0.2, 0.9, 0.2, 1) both,
    titleBreathActive 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.1s infinite;

  will-change: transform, opacity, filter;
}

.girls__container {
  width: 90%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.girl__item {
  height: 70%;
  flex: 1;
  position: relative;
  top: 15%;
}

.girl__item.girl1:hover .girl1__image_hover,
.girl__item.girl2:hover .girl2__image_hover,
.girl__item.girl3:hover .girl3__image_hover {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0s;
}

.girl__item:hover .girl__title {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
  z-index: 13;
}

.girl__item:hover .girl__icon {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
  animation: softPulse 1.6s ease-in-out infinite;
  transform-origin: center;
  will-change: opacity, transform;
  z-index: 14;
}

.girl__item:hover .girl__title {
  opacity: 1;
  visibility: visible;
  animation: typing 1.2s steps(var(--steps)) forwards;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.girl__item:hover .girl__icon {
  animation-duration: 1.2s;
}

.girl__image {
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  will-change: opacity;
  z-index: 10;
}

.girl1__image_hover {
  background: url("../assets/images/girl1_hover.webp") center / cover no-repeat;
}

.girl2__image_hover {
  background: url("../assets/images/girl2_hover.webp") center / cover no-repeat;
}

.girl3__image_hover {
  background: url("../assets/images/girl3_hover.webp") center / cover no-repeat;
}

.girl__title {
  position: absolute;
  font-family: "Bangers";
  font-size: 55px;
  letter-spacing: 4px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: width, opacity;
}

.girl1__title {
  left: 47%;
  top: -10%;
  height: auto;
}
.girl2__title {
  top: -7%;
  left: 2%;
  height: auto;
}
.girl3__title {
  top: -7%;
  left: -4%;
  height: auto;
}

.girl1__title {
  --chars: 24ch;
  --steps: 24;
}

.girl2__title {
  --chars: 19ch;
  --steps: 19;
}

.girl3__title {
  --chars: 19ch;
  --steps: 17;
}

.girl__title::after {
  content: "|";
  margin-left: 6px;
  animation: caret 0.9s step-end infinite;
}

.girl__item .girl__title {
  width: 0;
}

.girl__icon {
  width: 15vw;
  height: 21vh;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear;
  will-change: opacity;
}

.girl1__icon {
  background: url("../assets/images/girl1__icon.webp") center / contain
    no-repeat;
  left: -5%;
  top: -18%;
}

.girl2__icon {
  background: url("../assets/images/girl2__icon.webp") center / contain
    no-repeat;
  right: -15%;
  top: -17%;
}

.girl3__icon {
  background: url("../assets/images/girl3__icon.webp") center / contain
    no-repeat;
  right: -4%;
  top: -16%;
}

.wrapper:has(.girl__item:hover) .overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

@keyframes comicStamp {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6) rotate(-6deg);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08) rotate(2deg);
    filter: blur(0);
  }
  75% {
    transform: translateX(-50%) scale(0.98) rotate(-1deg);
  }
  90% {
    transform: translateX(-50%) scale(1.02) rotate(0.6deg);
  }
  100% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

@keyframes titleBreathActive {
  0% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }

  50% {
    transform: translateX(-50%) scale(1.08) rotate(1.2deg);
  }

  100% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

@keyframes softPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: var(--chars);
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 2250px) {
  .girl1__icon {
    top: -22%;
    left: -12%;
  }

  .girl2__icon {
    top: -15%;
  }

  .girl3__icon {
    top: -19%;
    right: -10%;
  }

  .girl__title {
    font-size: 52px;
  }

  .girl1__title {
    top: -11%;
    left: 42%;
  }

  .girl2__title {
    left: -3%;
    top: -4%;
  }

  .girl3__title {
    left: -4%;
    top: -7%;
  }
}

@media (max-width: 2250px) and (max-height: 1080px) {
  .wrapper {
    background: url("../assets/images/bg.webp") 100% 80% / cover no-repeat;
  }

  .girl1__image_hover {
    background: url("../assets/images/girl1_hover.webp") 100% 80% / cover
      no-repeat;
  }

  .girl2__image_hover {
    background: url("../assets/images/girl2_hover.webp") 100% 80% / cover
      no-repeat;
  }

  .girl3__image_hover {
    background: url("../assets/images/girl3_hover.webp") 100% 80% / cover
      no-repeat;
  }

  .title__container {
    width: 54vw;
    top: 3%;
  }

  .girl1__icon {
    top: -28%;
    left: -8%;
  }

  .girl2__icon {
    top: -22%;
  }

  .girl3__icon {
    top: -25%;
    right: -1%;
  }

  .girl__title {
    font-size: 44px;
  }

  .girl1__title {
    top: -19%;
  }

  .girl2__title {
    top: -13%;
    left: 8%;
  }

  .girl3__title {
    left: -2%;
    top: -15%;
  }
}

@media (max-width: 2000px) {
  .title__container {
    width: 60vw;
    top: 3%;
  }

  .girl1__icon {
    top: -24%;
  }

  .girl2__icon {
    top: -20%;
  }

  .girl3__icon {
    top: -20%;
  }

  .girl1__title {
    top: -16%;
  }

  .girl2__title {
    top: -10%;
    left: 0;
  }

  .girl3__title {
    top: -12%;
    left: -7%;
  }
}

@media (max-width: 1920px) {
  .girl__title {
    font-size: 45px;
  }

  .girl1__icon {
    top: -22%;
  }

  .girl2__icon {
    top: -18%;
  }

  .girl3__icon {
    top: -18%;
  }

  .girl1__title {
    top: -11%;
    left: 45%;
  }

  .girl2__title {
    left: -5%;
    top: -8%;
  }

  .girl3__title {
    left: -14%;
    top: -8%;
  }
}

@media (max-width: 1440px) {
  .girl__title {
    font-size: 30px;
  }

  .girl2__title {
    --chars: 22ch;
  }

  .girl3__title {
    left: -8%;
  }
}

@media (max-height: 950px) {
  .title__container {
    width: 57vw;
  }

  .girl1__title {
    top: -17%;
  }

  .girl2__title {
    top: -10%;
  }

  .girl3__title {
    top: -12%;
  }

  .girl1__icon {
    top: -27%;
  }

  .girl3__icon {
    top: -23%;
  }
}

@media (max-height: 749px) {
  .girl3__title {
    top: -11%;
    left: -8%;
  }

  .girl1__title {
    top: -15%;
  }

  .girl1__icon {
    top: -25%;
  }

  .girl3__icon {
    top: -22%;
  }
}