.home-hero {
  position: relative;
  height: clamp(37.5rem, 100dvh, 75rem);
  
  & .home-hero__scroll {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    
    & .bar {
      animation: scroll-line 1600ms ease-in-out infinite;
    }
  }
  
  & .swiper {
    height: 100%;
    z-index: 0;
    & .swiper-wrapper, & .swiper-slide {
      height: 100%;
    }
    & .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(10, 10, 10, 0.40) 0%, rgba(10, 10, 10, 0.03) 38%, rgba(10, 10, 10, 0.03) 58%, rgba(10, 10, 10, 0.60) 100%);
      pointer-events: none;
      opacity: 0.5;
      z-index: 1;
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(/system_panel/uploads/images/pattern-dot.png);
      background-repeat: repeat;
      background-size: 3px 3px;
      pointer-events: none;
      opacity: 0.5;
      z-index: 2;
    }
    &:not(.swiper-initialized) {
      & .swiper-wrapper {
        display: flex;
        overflow-x: auto;
      }
      & .swiper-slide {
        min-width: 100%;
        width: 100%;
      }
    }
  }
  
  & .swiper-pagination {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    top: unset;
    left: unset;
    margin: 0;
    width: unset;
    
    & .swiper-pagination-bullet {
      background-color: transparent;
      border: 1px solid var(--snow);
    }
    & .swiper-pagination-bullet-active {
      background-color: var(--snow);
    }
  }
}

@keyframes scroll-line {
  0% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
  }

  45% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: top;
  }

  46% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;
  }
}