/* --------------------------------
   RESET
-------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #D97A2B;
    overflow: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------
   HOME
-------------------------------- */

.home {
    width: 100%;
    height: 100%;
}


/* --------------------------------
   HERO
-------------------------------- */

.hero {
    position: relative;

    width: 100%;
    height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* --------------------------------
   LOGO
-------------------------------- */

.logo-button {
    position: relative;
    z-index: 2;

    border: 0;
    padding: 0;

    background: transparent;

    cursor: pointer;
    appearance: none;
}

.logo {
    display: block;

    width: 300px;
    height: auto;

    opacity: 1;

    transform: scale(1);

    transition:
        opacity 0.85s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}


/* --------------------------------
   UFO
-------------------------------- */

.ufo {
    position: absolute;

    top: 54px;
    left: 50%;

    width: 72px;
    height: auto;

    transform: translateX(-50%);

    opacity: 0;

    pointer-events: none;

    z-index: 5;

    transition: opacity 0.65s ease 0.28s;
}

.hero.menu-open .ufo {
    opacity: 0.9;
}
.hero.menu-open .ufo {
    opacity: 0.8;
}

/* --------------------------------
   MENU
-------------------------------- */

.main-menu {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    opacity: 0;

    transform:
        translate(-50%, -44%);

    pointer-events: none;

    transition:
        opacity 0.65s ease 0.28s,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.main-menu a {
    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.12em;

    color: #F6F3EE;

    text-decoration: none;

    transition:
        opacity 0.3s ease,
        letter-spacing 0.35s ease;
}

.main-menu a:hover {
    opacity: 0.55;
    letter-spacing: 0.16em;
}


/* --------------------------------
   OPEN STATE
-------------------------------- */

.hero.menu-open .logo {
    opacity: 0.12;
    transform: scale(1.75);
}

.hero.menu-open .ufo {
    opacity: 0.8;
}

.hero.menu-open .main-menu {
    opacity: 1;

    transform:
        translate(-50%, -50%);

    pointer-events: auto;
}


/* --------------------------------
   TABLET
-------------------------------- */

@media (max-width: 1024px) {

    .logo {
        width: 230px;
    }

    .hero.menu-open .logo {
        transform: scale(1.8);
    }

    .ufo {
        top: 54px;
        width: 31px;
    }

}


/* --------------------------------
   MOBILE
-------------------------------- */

@media (max-width: 600px) {

    .logo {
        width: 175px;
    }

    .hero.menu-open .logo {
        transform: scale(1.9);
    }

    .ufo {
        top: 42px;
        width: 54px;
    }

    .main-menu {
        gap: 18px;
    }

    .main-menu a {
        font-size: 15px;
        letter-spacing: 0.16em;
    }

}


/* --------------------------------
   REDUCED MOTION
-------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .logo,
    .ufo,
    .main-menu,
    .main-menu a {
        transition: none;
    }

}