@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
   --white: #e2e0d4;
   --accent: #ccc28d;
   --border: 1px solid var(--accent);
}

* {
   margin: 0;
   padding: 0;
   outline: none;
   border: none;
   text-decoration: none;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   line-height: 1;
   list-style: none;
   text-align: center;
   letter-spacing: 0.5px;
   text-transform: lowercase;
   color: inherit;
   transition: ease-in-out 0.15s;
}
html {
   height: 100%;
}
body {
   height: 100%;
   width: 100%;
   display: grid;
   grid-template-rows: auto 1fr auto;
   background-color: #000;
   color: var(--white);
}
.container {
   margin: 0 auto;
   padding: 0 10px;
   width: 100%;
   max-width: 1440px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}
a,
button,
input,
textarea {
   cursor: pointer;
   background: none;
}
.h3 {
   width: fit-content;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: 1px;
}
.line {
   margin-bottom: 20px;
   width: 100%;
   height: 2px;
   background: var(--white);
}

/* header */
header {
   max-height: fit-content;
   width: 100%;
   margin: 15px 0;
}
header .container {
   width: 100%;
   display: flex;
   align-items: start;
}
.logo {
   width: 260px;
   height: auto;
   object-fit: contain;
}

/* main */
/* nav */
nav {
   padding: 10px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   align-items: center;
   gap: 10px 0;
}
nav button {
   padding: 30px 40px;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
}
nav button:nth-child(1):not(.active) {
   order: 1;
}
nav button:nth-child(2):not(.active) {
   order: 1;
}
nav button:nth-child(3):not(.active) {
   order: 2;
}
nav button:nth-child(4):not(.active) {
   order: 4;
}
nav button:nth-child(5):not(.active) {
   order: 4;
}
nav button.active {
   color: #000;
   background-color: var(--accent);
   order: 3;
}
nav button.active {
   padding: 20px 80px;
   color: #000;
   background-color: var(--accent);
   order: 3;
}
nav:has(button:nth-child(4).active) button:nth-child(3):not(.active) {
   order: 4;
}
nav:has(button:nth-child(5).active) button:nth-child(3):not(.active) {
   order: 4;
}
/* others */
.others {
   margin-top: 60px;
   margin-bottom: 100px;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: start;
   row-gap: 30px;
}
.others_div {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 30px 70px;
}
.others_box {
   display: flex;
   gap: 15px;
}
.others_img {
   height: 130px;
   width: 130px;
   object-fit: cover;
   border-radius: 10px;
}
.others_box_box {
   max-width: 280px;
   display: flex;
   flex-direction: column;
   gap: 15px;
}
.others_subtitle {
   font-weight: 900;
   text-align: start;
   text-transform: uppercase;
}
.others_text,
.others_link {
   text-align: start;
}
.others_box.unknown {
   opacity: 0.2;
   filter: blur(5px);
}
/* credits */
.credits {
   margin-bottom: 80px;
   padding: 60px 0;
   width: 100%;

   background: url("../img/credits.png");
   background-size: cover;
}
.credits_title {
   font-weight: 600;
}
.credits_title span {
   font-weight: 800;
   text-transform: uppercase;
}
.credits_title a {
   font-weight: 800;
   text-decoration: underline;
   text-transform: uppercase;
}
.credits_links {
   margin-top: 30px;
   margin-bottom: 70px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 50px;
}
.credits_link {
   font-size: 20px;
   font-weight: 300;
   text-transform: uppercase;
   letter-spacing: 1px;
}
.credits_link a {
   font-size: 20px;
   font-weight: 700;
   text-decoration: underline;
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* footer */
footer .container {
   margin-bottom: 40px;
   padding: 20px;
}
footer .copyright {
   padding-bottom: 10px;
   font-weight: 600;
}
footer img {
   width: 220px;
   height: auto;
}

/* hovers */
nav button:hover {
   transform: scale(1.2);
}
nav button.active {
   transform: scale(1);
}
.others_box:hover .others_link {
   color: var(--accent);
}
.credits_title a:hover {
   color: var(--accent);
}
.credits_link a:hover {
   color: var(--accent);
}

/* media */
@media (max-width: 900px) {
   nav {
      padding: 20px 0;
      flex-direction: column;
   }
}

@media (max-width: 600px) {
   .hero_box.unactive,
   .hero_box.unactive.furthest {
      display: none;
   }
   .hero_magic {
      transform: scale(0.8);
   }
   .hero_img {
      width: 100%;
      height: auto;
      transform: scale(1.25);
   }
}

/*  */
/*  */
/* deepseek */
/*  */
/*  */
nav button {
   transition: all ease-in-out 0.3s;
   flex: 1;
}
nav button.active {
   order: 3 !important;
   transform: scale(1.1);
   z-index: 2;
}

nav button[style*="order: 2"],
nav button[style*="order: 4"] {
   z-index: 1;
}
nav button[style*="order: 1"],
nav button[style*="order: 5"] {
   z-index: 0;
}

/* hover */
nav button:hover {
   transform: scale(1.15);
   z-index: 3;
}
nav button[style*="order: 2"]:hover,
nav button[style*="order: 4"]:hover {
   transform: scale(0.95);
}
nav button[style*="order: 1"]:hover,
nav button[style*="order: 5"]:hover {
   transform: scale(0.75);
}
nav button.active:hover {
   transform: scale(1.1);
}

@media (max-width: 900px) {
   nav {
      width: 100%;
      align-items: center;
      gap: 10px;
   }
   nav button {
      width: 100%;
   }
   /* В мобильной версии убираем карусель, оставляем только активное состояние */
   nav button:not(.active) {
      transform: scale(0.9);
      filter: brightness(0.7);
   }

   nav button.active {
      transform: scale(1);
   }
}

@media (max-width: 600px) {
   nav button {
      padding: 12px 30px;
   }

   nav button.active {
      padding: 12px 40px;
   }
}