/* =========================================================
   INSTRUMENT SANS
   ========================================================= */

@font-face {
    font-family: "Instrument Sans";
    src: url("assets/fonts/InstrumentSans-VariableFont_wdth,wght.ttf")
         format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff;
    color: #000000;

    font-family: "Instrument Sans", sans-serif;
    font-weight: 700;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    width: 100%;
    min-height: 100vh;

    padding: 264px 64px 64px;

    text-align: center;
}


/* =========================================================
   TITLE
   ========================================================= */

.logo {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.logo img {
    display: block;

    width: 900px;
    max-width: 80vw;
    height: auto;
}

.logo2 {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.logo2 img {
    display: block;

    width: 800px;
    max-width: 80vw;
    height: auto;
}


/* =========================================================
   BUNNY
   ========================================================= */

.icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-top: 38px;
}

.icon img {
    display: block;

    width: 200px;
    max-width: 200px;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   LINKS — DESKTOP
   ========================================================= */

.links {
    width: 100%;
    max-width: 900px;

    margin: 38px auto 0;
}

.links p {
    margin: 0;

    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;

    letter-spacing: -0.05em;
}


/* =========================================================
   BACK NAV
   ========================================================= */

.back_nav {
    position: absolute;

    width: 100%;
    max-width: 900px;

    margin: 38px;

    z-index: 100;
}

.back_nav p {
    margin: 0;

    font-size: 84px;
    font-weight: 700;
    line-height: 1.05;

    letter-spacing: -0.05em;
}

  /* -------------------------
       VACANCY
       ------------------------- */

    .vacancy {
        margin-top: 12px;
        display: flex;
       justify-content: center; 
       align-items: center;         
    }

    .vacancy p {
        font-size: 48px;
         padding: 6px 12px;
         max-width: 360px;
         color: #FFFFFF;
         background-color: #FF1609;
         border-radius: 10px
        line-height: 0.95;
    }
}

 .vacancymessage {
        margin-top: 12px;
    }

    .vacancymessage p {
        font-size: 12px;
        font-weight: 200px;
        line-height: 0.95;
    }
}


/* =========================================================
   INDIVIDUAL LINKS
   ========================================================= */

.links a {
    color: #000000;

    font-weight: 700;

    text-decoration: none;

    transition: color 150ms ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.links a:hover {
    color: #FF1609;
}

.back_nav a:hover {
    color: #FF1609;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    main {
        padding: 264px 64px 64px;

        text-align: center;
    }


    /* -------------------------
       Title
       ------------------------- */

    .logo img {
        width: 400px;
        max-width: 92vw;
    }


    /* -------------------------
       Top Video
       ------------------------- */

    .top-video {
        width: 50%;
        margin: -64px auto 0;
    }

    .top-video video {
        display: block;
        width: 100%;
        height: auto;
    }


    /* -------------------------
       Bunny
       ------------------------- */

    .icon {
        margin-top: 55px;
    }

    .icon img {
        width: 150px;
        max-width: 150px;
    }


    /* -------------------------
       Links
       ------------------------- */

    .links {
        width: 100%;

        margin-top: 70px;
    }

    .links p {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin: 0;

        font-size: 84px;
        font-weight: 700;
        line-height: 1.05;

        letter-spacing: -0.05em;
    }

    .links a {
        display: block;

        color: #000000;
        font-weight: 700;
    }


    /* Make "inquiry form." wrap like the reference */

    .links a:first-child {
        max-width: 360px;
    }


    /* -------------------------
       Back Navigation
       ------------------------- */

    .back_nav {
        margin-top: 38px;
    }

    .back_nav p {
        font-size: 84px;
        line-height: 1.05;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {

    main {
        padding: 264px 16px 64px;
    }


    /* -------------------------
       Title
       ------------------------- */

    .logo img {
        width: 100%;
        max-width: 100%;
    }


    /* -------------------------
       Bunny
       ------------------------- */

    .icon {
        margin-top: 55px;
    }

    .icon img {
        width: 145px;
        max-width: 145px;
    }


    /* -------------------------
       Links
       ------------------------- */

    .links {
        margin-top: 65px;
    }

    .links p {
        font-size: 48px;
        line-height: 0.95;
    }

    .links a:first-child {
        max-width: 330px;
    }


    /* -------------------------
       Back Navigation
       ------------------------- */

    .back_nav {
        margin-top: 65px;

        z-index: 100;
    }

    .back_nav p {
        font-size: 48px;
        line-height: 0.95;
    }
}


/* =========================================================
   PAGE LOAD — PAGE CONTENT
   ========================================================= */

main,
.back_nav {
    opacity: 0;

    animation:
        pageAppear 2s
        linear
        forwards;
}

@keyframes pageAppear {

    0%,
    40% {
        opacity: 0;
    }

    41%,
    100% {
        opacity: 1;
    }
}


/* =========================================================
   RED PAGE LOADER
   ========================================================= */

.page-loader {
    position: fixed;

    inset: 0;

    background: #FF1609;

    z-index: 9999;

    overflow: visible;

    transform-origin: top;

    animation:
        redReveal 2s
        cubic-bezier(0.76, 0, 0.24, 1)
        forwards;
}

@keyframes redReveal {

    /* Thin line */

    0% {
        transform: scaleY(0.01);
    }


    /* Expand to cover the entire page */

    40% {
        transform: scaleY(1);
    }


    /* Hold over the loaded page */

    65% {
        transform: scaleY(1);
    }


    /* Slide completely downward */

    100% {
        transform: translateY(100%);
    }
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */

@media (pointer: fine) {

    body,
    a {
        cursor: none;
    }

    .custom-cursor {
        position: fixed;
        width: 16px;
        height: 16px;

        background: #FF1609;

        border-radius: 50%;

        pointer-events: none;

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

        z-index: 100000;

        transition:
            width 180ms ease,
            height 180ms ease,
            background 180ms ease,
            border 180ms ease,
            transform 180ms ease;
    }


    /* ---------------------------------------------
       HOVERING A LINK
       --------------------------------------------- */

    .custom-cursor.cursor-link {

        width: 34px;
        height: 34px;

        background: transparent;

        border: 3px solid #FF1609;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}

/* =========================================================
   PAGE EXIT
   ========================================================= */

body.page-exiting main,
body.page-exiting .back_nav {
    animation: pageExitDown 350ms ease-in forwards;
}

@keyframes pageExitDown {

    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(100vh);
    }

}