.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 0.625rem;
  padding-top: 7.5rem;
  @media screen and (min-width: 1200px) {
    height: calc(var(--vh, 1vh) * 100);
    padding-left: 3.75rem;
    padding-right: 0;
  }
}

.home-hero__image {
  position: relative;
  @media screen and (min-width: 768px) {
    max-width: 600px;
    align-self: center;
  }
  @media screen and (min-width: 1024px) {
    max-width: 800px;
  }
  @media screen and (min-width: 1200px) {
    margin-left: -2.5rem;
    margin-right: -3.75rem;
    max-width: 950px;
  }
}

.home-hero__title {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-right: 1.125rem;
  padding-left: 1.125rem;
  gap: 3rem;
  
  & h1 {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1.8;
  }
  
  & h1 br {
    display: none;
  }
  
  @media screen and (min-width: 768px) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    & h1 {
      font-size: 1.5rem;
      padding-left: 1.5rem;
    }
    
    & h1 br {
    display: block;
    }
  }
  @media screen and (min-width: 1024px) {
    & h1 {
      padding-left: 2rem;
    }
  }
   @media screen and (min-width: 1200px) {
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 12.5rem;
  }
}

.home-hero__title--main {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  
  & .home-hero__title--animation {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  & .home-hero__title--animation-1 {
    color: var(--pink);
    animation: home-hero__title--animation-1 9s linear infinite;
  }
  
  & .home-hero__title--animation-2 {
    color: var(--teal);
    animation: home-hero__title--animation-2 9s linear infinite;
  }
  
  & .home-hero__title--animation-3 {
    color: var(--red);
    animation: home-hero__title--animation-3 9s linear infinite;
  }
}

@keyframes home-hero__title--animation-1 {
  0% { opacity: 1; }
  28% { opacity: 1; }
  33% { opacity: 0; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes home-hero__title--animation-2 {
  0% { opacity: 0; }
  33% { opacity: 0; }
  38% { opacity: 1; }
  61% { opacity: 1; }
  66% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes home-hero__title--animation-3 {
  0% { opacity: 0; }
  66% { opacity: 0; }
  71% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

.h-1em {
  height: 1em;
}

.w-2em {
  width: 2em;
}

.home-hero__news {
  position: relative;
  background-color: hsl(from var(--snow) h s l / 60%);
  backdrop-filter: blur(8px);
  padding: 1.5rem 1.5rem;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  width: 100%;
  @media screen and (min-width: 1200px) {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 30rem;
    padding-left: 3rem;
  }
}

.masked-image--home-feature-cloud--1 {
  position: relative;
  width: 82%;
  filter: drop-shadow(8px 8px 0px 0px var(--red));
  --mask-image: url(/system_panel/uploads/images/mask-cloud-1--red.png);
  
  &::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    background-image: var(--mask-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  & img {
    object-fit: cover;
    width: 100%;
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
.masked-image--home-feature-cloud--2 {
  position: relative;
  width: 82%;
  filter: drop-shadow(8px 8px 0px 0px var(--red));
  --mask-image: url(/system_panel/uploads/images/mask-cloud-2--red.png);
  
  &::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    background-image: var(--mask-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  & img {
    object-fit: cover;
    width: 100%;
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}

.home-feature-image--1 {
  aspect-ratio: 145 / 118;
  position: relative;
  & .masked-image--home-feature-cloud--1, & .masked-image--home-feature-cloud--2 { 
    width: 75%;
    position: absolute;
  }
  & .masked-image--home-feature-cloud--1 { 
    top: 0;
    left: 0;
  }
  & .masked-image--home-feature-cloud--2 { 
    bottom: 0;
    right: 0;
  }
  & .dot {
    width: 75%;
    top: 25%;
    left: 2%;
    position: relative;
  }
}
.home-feature-image--2 {
  aspect-ratio: 200 / 147;
  position: relative;
  & .masked-image--home-feature-cloud--2 { 
    top: 0;
    left: 0;
    width: 86.6666%;
  }
  & .dot {
    width: 72.6666%;
    bottom: 0;
    right: 0;
    position: absolute;
  }
}

.home-feature-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  
  @media screen and (min-width: 768px) {
    gap: 1rem;
  }
  
  & .home-feature-list__item {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-image: url("/system_panel/uploads/images/feature-backdrop.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.home-services {
  & .swiper {
    &:not(.swiper-initialized) {
      & .swiper-wrapper {
        display: flex;
        overflow: auto;
      }
      & .swiper-slide {
        min-width: 100%;
      }
    }
  }
}

.home-services__control {
  cursor: pointer;
}
.home-services__image {
  position: relative;
  & img {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
  }
  
  @media screen and (min-width: 1024px) {
    order: 2;
    & img {
      aspect-ratio: auto;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
  }
}

.home-info-cloud {
  position: absolute;
  top: 172px;
  right: -95px;
  width: 938px;
}
.home-info-links {
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  box-shadow: 0 -20px 0 0 #F08409;
  overflow: hidden;
  
  @media screen and (min-width: 1024px) {
    border-top-left-radius: 8rem;
    border-top-right-radius: 8rem;
  }
}

.masked-image--home-about-cloud {
  width: 74.4456%;
  filter: drop-shadow(8px 8px 0px 0px var(--red));
  --mask-image: url(/system_panel/uploads/images/mask-cloud-2--blue.png);
  
  &::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    background-image: var(--mask-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  & img {
    object-fit: cover;
    width: 100%;
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
.home-about-cloud-dec {
  aspect-ratio: 709 / 758;
  & .masked-image--home-about-cloud {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  & .masked-image--about-cloud {
    width: 74.4456%;
    left: 5.6417%;
  }
  & .about-cloud__dec {
    width: 76.77%;
    right: 0;
    top: 20.46%;
  }
}


.home-recruit {
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  overflow: hidden;
  margin-top: -128px;
  
  @media screen and (min-width: 1024px) {
    border-top-left-radius: 8rem;
    border-top-right-radius: 8rem;
  }
  
  & .home-recruit__dot {
    width: 933px;
    position: absolute;
    top: -160px;
    right: -216px;
  }
}
.home-features {
  & .running-track {
    position: relative;
    transform: translateY(-35px);
  }
}