/*
=============================
!HERO
=============================
*/

.hero {
   width: 100%;
   min-height: 100svh;
   position: relative;

   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.hero-bg {
   height: 75%;
   aspect-ratio: 16/9;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -1;
}

.hero-container {
   width: min-content;
   height: min-content;
   display: flex;
}

.hero-logo {
   width: calc(var(--key) * 100);
   height: min-content;
}

@media screen and (min-width: 768px) {
   .hero-logo {
      width: calc(var(--key) * 200);
   }
}
@media screen and (min-width: 1080px) {
   .hero-bg {
      width: 100%;
      height: unset;
   }
}

/* svg */
.fill-bg {
   fill: var(--GreyMedium3);
}

.str-bg {
   stroke-width: 20px;
   stroke: var(--GreyMedium3);
   stroke-linecap: round;
}

.fill-white {
   fill: var(--GreyLight);
}

.str-white {
   stroke-width: 5px;
   stroke: var(--GreyLight);
}

.fill-orange {
   fill: var(--Orange);
}

.str-orange {
   stroke-width: 5px;
   stroke: var(--Orange);
   stroke-linecap: round;
}

.nebula {
   fill: var(--GreyMedium1);
   transform-origin: center center;
   transform: scaleX(1.2);
}
/*
=============================
!about
=============================
*/

.about {
   width: 100%;
   height: min-content;
   display: flex;
   justify-content: center;
}

.about-container {
   width: var(--Width);
   height: min-content;
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   padding: 0 calc(var(--key) * 5);
   gap: calc(var(--key) * 8);
}

.about__heading {
   display: none;
}

/*
=============================
!projects
=============================
*/

.projects {
   width: 100%;
   position: relative;
   display: flex;
   justify-content: center;
   padding: calc(var(--key) * 2) 0 0 0;
}

.projects-container {
   width: 100%;
   display: flex;
   gap: calc(var(--key) * 2);
   padding: 0 calc(var(--key) * 2);
}

.projects-column {
   width: 100%;
   min-height: min-content;
   display: flex;
   flex-direction: column;
   gap: calc(var(--key) * 2);
}

.project {
   container: project / inline-size;
   width: 100%;
   min-height: min-content;
   display: flex;
   flex-direction: column;
   position: relative;
   padding: calc(var(--key) * 2 - 2px) calc(var(--key) * 2) calc(var(--key) * 2);
   border-radius: calc(var(--key) * 12);
   border-top: 2px solid var(--GreyMedium);
   background: var(--GreyMedium1);
   cursor: pointer;
}

.project::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: inherit; /* Повторяет скругление родителя */
   box-shadow: 0px 12px 15px 5px var(--GreyShadow);
   z-index: -1; /* Убираем тень под карточку */
   transition: opacity 0.3s ease;
}

.project-preview {
   width: 100%;
   border-radius: calc(var(--key) * 10);
}

.project-heading {
   width: max-content;
   display: flex;
   position: absolute;
   bottom: 0;
   margin: calc(var(--key) * 8) calc(var(--key) * 6);
   padding: calc(var(--key) * 2) calc(var(--key) * 4);
   border-radius: 9999px;
   background: var(--GreyMedium3);
   font-family: "bold", sans-serif;
   font-size: 7cqw;
   line-height: 1.2;
   color: var(--GreyLight);
   pointer-events: none;
}