@import "./fonts.css";

:root {
  --bg-color: #101010;
  --text-color: #F4F4F4;
  --text-color-2: #D9D9D9;
  --green-color: #EEFF8B;
  --orange-color: #FF9D60;
  --black-color: #1E1E1E;
  --window-bg-color: #21212175;

  --default-bold-border: 2px solid #656565;
  --default-border: 1px solid #656565;
}

@keyframes base-appearance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes circles-appearance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes h1-appearance {
  from {
    transform: translateY(-20vh);
    opacity: 0;
  }

  to {
    transform: translateY(0vh);
    opacity: 1;
  }
}

@keyframes peoples-appearance {
  from {
    transform: translateY(30vh) rotate(-10deg);

    opacity: 0;
  }

  to {
    transform: translateY(0vh) rotate(5deg);

    opacity: 1;
  }
}

@keyframes peoples-appearance-second {
  from {
    transform: translateY(30vh) rotate(10deg);

    opacity: 0;
  }

  to {
    transform: translateY(0vh) rotate(-5deg);

    opacity: 1;
  }
}

@keyframes black-grad-appearance {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes section-shifts-1 {
  0% {
    transform: translateY(0vh) translateX(0vh) rotate(-5deg);
  }

  25% {
    transform: translateY(-.5vh) translateX(0vh) rotate(-5deg);
  }

  50% {
    transform: translateY(-1vh) translateX(-1vh); rotate(-1deg)
  }

  75% {
    transform: translateY(.5vh) translateX(-.5vh) rotate(-3.2deg);
  }

  100% {
    transform: translateY(0vh) translateX(0vh) rotate(-5deg);
  }
}

@keyframes section-shifts-2 {
  0% {
    transform: translateY(0vh) translateX(0vh) rotate(5deg);
  }

  25% {
    transform: translateY(.5vh) translateX(-.5vh) rotate(5deg);
  }

  50% {
    transform: translateY(-.5vh) translateX(-.5vh) rotate(1deg);
  }

  75% {
    transform: translateY(-.5vh) translateX(0vh) rotate(2.5deg);
  }

  100% {
    transform: translateY(0vh) translateX(0vh) rotate(5deg);
  }
}

@keyframes notification-appearance {
  from {
    transform: translateY(-20vh);
    rotate: 5deg;
    opacity: 0;
  }

  to {
    transform: translateY(0vh);
    rotate: 0deg;
    opacity: 1;
  }
}

@keyframes notification-disappearance {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes peoples-shifts-1 {
  0% {
    transform: translateY(0vh) translateX(0vh) rotate(-5deg);
  }

  25% {
    transform: translateY(-.5vh) translateX(0vh) rotate(-3.2deg);
  }

  50% {
    transform: translateY(-.5vh) translateX(-.5vh) rotate(-3.2deg);
  }

  75% {
    transform: translateY(.5vh) translateX(-.5vh) rotate(-3.2deg);
  }

  100% {
    transform: translateY(0vh) translateX(0vh) rotate(-5deg);
  }
}

@keyframes peoples-shifts-2 {
  0% {
    transform: translateY(0vh) translateX(0vh) rotate(5deg);
  }

  25% {
    transform: translateY(.5vh) translateX(-.5vh) rotate(2.5deg);
  }

  50% {
    transform: translateY(-.5vh) translateX(-.5vh) rotate(2.5deg);
  }

  75% {
    transform: translateY(-.5vh) translateX(0vh) rotate(2.5deg);
  }

  100% {
    transform: translateY(0vh) translateX(0vh) rotate(5deg);
  }
}

h1 {
    font-size: 100px;
    font-weight: bold;
    font-family: "Neue Machina";
    font-weight: 800;
    text-transform: uppercase;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);

    width: 100vw;
    overflow-x: clip;
}

body {
    width: 100vw;
    margin: 0px;

    font-family: "Inter";
}

.main-header {
    display: flex;
    padding-inline: 12.5vw;
    justify-content: space-between;
    height: 0px;
    position: relative;
    z-index: 101;

    animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s forwards 1 base-appearance;
}

.logo {
    font-family: "Neue Machina";
    font-weight: 800;
    font-size:  40px;
    line-height: 35px;
    text-transform: uppercase;
}

.logo.green {
    color: var(--green-color);
}

.logo.orange {
    color: var(--orange-color);
}

nav {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    padding-top: 2em;
    row-gap: 2px;
}

nav span {
    gap: 2px;
}

nav a {
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;

    outline: 2px solid #656565;
    padding: 3px;
    padding-inline: 10px;
    border-radius: 25px;
    text-wrap-mode: nowrap;
}

a {
    color: var(--text-color-2);
}

nav span {
    display: flex;
    justify-content: flex-end;
}

::selection {
    background: #65656525;
    color: var(--green-color);
}

svg, img {
    pointer-events: none;
}

.auth-link {
    font-weight: 500;
    font-size: 15px;
    padding-top: 2em;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 70px;
}

.nav-sandvich-button {
    margin-top: 32px;
    display: none;

    height: 100px;
    background: transparent;
    color: var(--green-color);
    border-radius: 30px;
    align-items: center;
    font-size: 40px;
    gap: 1ch;
    font-weight: 700;
    padding-inline: 1ch;
    border: 5px solid var(--green-color);
}

.nav-sandvich-button img {
    height: 35px;
}

.sw-menu-container {
    display: flex;
    opacity: 1;
    background: #1E1E1E;
    backdrop-filter: blur(20px);
    position: absolute;
    height: 100vh;
    width: 75vw;
    z-index: 100;

    text-transform: uppercase;
    gap: 1ch;

    flex-direction: column;
    padding-top: 10vh;
    padding-inline: 12.5vw;
    font-size: 50px;
    font-weight: 500;
    font-family: "Neue Machina", sans-serif;

    transition: all .5s ease;
}

.sw-menu-container.hidden {
    opacity: 0;
    display: none;
}

.nv2, .nv4 {
    text-align: end;
}

.bg-elipse {
    position: absolute;
    transform: scale(0.85);
    opacity: 0;

    animation: 1s cubic-bezier(0, 0, 0, 0.97) .5s forwards 1 circles-appearance;
}

.bg-elipse.n1 {
    left: 20vw;
    top: -28vw;
    z-index: -1;
}

.bg-elipse.n2 {
    left: 35vw;
    top: 19vh;
    z-index: -1;
}

.bg-elipse.n3 {
    left: 5vw;
    top: 19vh;
    z-index: -1;
}

.bg-elipses-container {
    position: sticky;
    top: 0px;
    height: 0px;
    width: 100vw;
    z-index: -1;
}

.gruz {
    position: absolute;
    height: 90vh;
    left: -5vh;
    bottom: -10vh;

    animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s forwards 1 peoples-appearance-second, 8s ease-out 1.5s infinite peoples-shifts-1;
}

.bottom-black-grad-wrapper {
    height: 0px;
    width: 100vw;
    position: sticky;
    top: 72vh;
}

.bottom-black-grad {
    width: 100vw;
    height: 30vh;
    opacity: 0;
    background: linear-gradient(0deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, .5) 50%, rgba(20, 20, 20, 0) 100%);
    animation: 1s cubic-bezier(0, 0, 0, 0.97) 1s forwards 1 black-grad-appearance;
}

.stroy {
    position: absolute;
    height: 110vh;
    right: 0vh;
    bottom: -15vh;

    animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s forwards 1 peoples-appearance, 8s ease-out 1.5s infinite peoples-shifts-2;
}

.planet {
    display: none;
}

#planetImgDesctopBlured {
    display: none;
}

select {
    display: flex;
    align-items: center;
    border-radius: inherit;
    border: var(--default-border);
}

select,
::picker(select) {
  appearance: base-select;
}

select::picker-icon {
  color: var(--green-color);
  transition: 0.4s rotate;
}

select:open::picker-icon {
  color: #ccc;
}

option:first-of-type {
  border-radius: 20px 20px 0 0;
}

option:last-of-type {
  border-radius: 0 0 20px 20px;
}

::picker(select) {
  border-radius: 20px;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

option:nth-of-type(odd) {
  background: var(--black-color);
}

option:hover,
option:focus {
  color: var(--green-color);
}

option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  color: var(--text-color);

  border: var(--default-border);
  background: #484848;
  padding: 10px;
  transition: 0.4s;
}

.notification-wrapper {
    position: sticky;
    height: 0px;
    top: 9px;
    left: 0px;
    z-index: 999;
}

.notification {
    margin-inline: auto;
    width: fit-content;
    padding: 25px;
    font-size: 25px;
    line-height: 25px;
    border: var(--default-border);
    border-radius: 50px;
    background: var(--window-bg-color);
    backdrop-filter: blur(90px);
    position: relative;
    max-width: min(45ch, 80vw);
    display: none;
    gap: 2ch;
    align-items: center;
    margin-top: 25px;

    animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s forwards 1 notification-appearance, 5s cubic-bezier(0, 0, 0, 0.97) 8s forwards 1 notification-disappearance;
}

.notification-cross-btn {
    cursor: pointer;

    transition: all .2s ease;
}

.notification:hover {
}

.notification:hover .notification-cross-btn {
    transform: scale(1.1);
}

.notification-cross-btn {
    border: 0px;
    background: transparent;
}

.logo-copyr {
    font-size: 15px;
}

@media (hover: hover) {
    .header-nav-item:hover {
        background: var(--green-color);
        color: var(--bg-color);
        outline: 2px solid var(--green-color);
        z-index: 100;
    }
}

@media (aspect-ratio > 1/1) {
    .bg-elipse.n1, .bg-elipse.n2, .bg-elipse.n3 {
        display: none!important;
    }
}

@media (aspect-ratio < 1/1) {
    .notification {
        font-size: 45px;
        line-height: 45px;
        padding-block: 50px;
    }

    nav {
        display: none;
    }

    .nav-sandvich-button {
        display: flex;
    }

    .nv1 {
        animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s forwards 1 h1-appearance;
    }

    .nv2 {
        animation: 1s cubic-bezier(0, 0, 0, 0.97) .1s forwards 1 h1-appearance;
    }

    .nv3 {
        animation: 1s cubic-bezier(0, 0, 0, 0.97) .2s forwards 1 h1-appearance;
    }

    .nv4 {
        animation: 1s cubic-bezier(0, 0, 0, 0.97) .3s forwards 1 h1-appearance;
    }

    .nv5 {
        animation: 1s cubic-bezier(0, 0, 0, 0.97) .4s forwards 1 h1-appearance;
    }

    .header-nav-item {
        opacity: 0;
        text-decoration: none;
        color: var(--text-color);
    }

    .bg-elipse.n1 {
        display: none;
    }

    .bg-elipse.n2 {
        left: -22vw;
        top: 53vh;
        z-index: -1;
    }

    .bg-elipse.n3 {
        left: -13vw;
        top: 24vh;
        z-index: -1;
    }

    .bg-elipses-container {
        position: sticky;
        top: 0px;
        height: 100%;
        width: 100vw;
        z-index: -1;
    }

    .bg-elipse {
        transform: scale(1.2);
        animation: 1s cubic-bezier(0, 0, 0, 0.97) .5s forwards 1 circles-appearance;
    }

    .auth-link {
        display: none;
    }

    .logo {
        font-family: "Neue Machina";
        font-weight: 800;
        font-size: 60px;
        line-height: 50px;
        text-transform: uppercase;
    }

    .stroy {
        position: relative;
        left: -28vh;
        top: -2vh;
    }

    #stroyImgDesctop {
        display: none;
    }

    .logo-copyr {
        font-size: 25px;
    }

    :root {
      --default-bold-border: 3px solid #656565;
      --default-border: 2px solid #656565;
    }

    .gruz, #gruzImgDesctop {
        display: flex;
        filter: none;
        height: 72vh;
        bottom: 7vh;
    }
}