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

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

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

body {
    overflow: hidden;
    background: #000;
    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


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

#aimatio {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    background: #000;
}


/* =========================================
   VIDEO
========================================= */



/* =========================================
   INTERFACE
========================================= */

#interface {
    position: absolute;
    inset: 0;

    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    padding:
        max(30px, env(safe-area-inset-top))
        max(25px, env(safe-area-inset-right))
        max(25px, env(safe-area-inset-bottom))
        max(25px, env(safe-area-inset-left));

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}


/* Interface visible */

#interface.visible {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}



/* =========================================
   VIDEO STAGE
========================================= */

.video-stage {
    position: absolute;
    inset: 0;

    z-index: 2;

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

    overflow: hidden;

    background: #000;

    opacity: 1;

    transition: opacity 1.5s ease;
}


.video-stage.finished {
    opacity: 0;
    pointer-events: none;
}


/* =========================================
   BACKGROUND VIDEO — BLUR
========================================= */

.video-blur {
    position: absolute;

    top: -50px;
    left: -50px;

    width: calc(100% + 100px);
    height: calc(100% + 100px);

    object-fit: cover;
    object-position: center center;

    filter:
        blur(35px)
        brightness(0.55)
        saturate(0.9);

    transform: scale(1.08);

    z-index: 1;

    pointer-events: none;
}


/* =========================================
   МАТОВЫЙ СЛОЙ
========================================= */

.video-stage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background: rgba(0, 0, 0, 0.15);

    pointer-events: none;
}


/* =========================================
   MAIN 9:16 VIDEO
========================================= */

#introVideo.video-main {
    position: relative;

    /*
     * Никаких left:50%, inset:0 и transform.
     * Центрированием занимается flex родителя.
     */

    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;

    transform: none;

    width: auto;
    height: 100%;

    /*
     * Настоящее соотношение 9:16
     */
    aspect-ratio: 9 / 16;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center center;

    z-index: 3;

    background: #000;

    box-shadow:
        -30px 0 60px rgba(0,0,0,0.30),
         30px 0 60px rgba(0,0,0,0.30);
}


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

@media (max-width: 600px) {

    #introVideo.video-main {
        width: 100%;
        height: 100%;

        max-width: 100%;
        max-height: 100%;

        object-fit: contain;

        box-shadow: none;
    }

}




/* =========================================
   LOGO
========================================= */

.logo {
    margin-top: 3vh;

    text-align: center;

    opacity: 0;
    transform: translateY(-15px);

    transition:
        opacity 1.2s ease 0.3s,
        transform 1.2s ease 0.3s;
}

#interface.visible .logo {
    opacity: 1;
    transform: translateY(0);
}


.logo h1 {
    font-size: clamp(28px, 5vw, 64px);

    font-weight: 300;

    letter-spacing: 0.35em;

    margin-left: 0.35em;

    text-shadow:
        0 0 20px rgba(255,255,255,0.25);
}


.logo-line {
    width: 60px;
    height: 1px;

    margin: 12px auto;

    background: rgba(255,255,255,0.7);
}


.logo p {
    font-size: clamp(8px, 1.2vw, 12px);

    letter-spacing: 0.35em;

    color: rgba(255,255,255,0.65);
}


/* =========================================
   NAVIGATION
========================================= */

.navigation {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 12px;

    width: min(330px, 85vw);
}


.nav-item {
    display: flex;
    align-items: center;

    min-height: 58px;

    padding: 0 20px;

    color: #fff;

    text-decoration: none;

    border: 1px solid rgba(255,255,255,0.25);

    background: rgba(0,0,0,0.18);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}


/* sequential appearance */

#interface.visible .nav-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.5s;
}

#interface.visible .nav-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.65s;
}

#interface.visible .nav-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.8s;
}

#interface.visible .nav-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.95s;
}


/* hover */

.nav-item:hover {
    background: rgba(255,255,255,0.12);

    border-color: rgba(255,255,255,0.65);
}


.nav-number {
    width: 45px;

    font-size: 10px;

    color: rgba(255,255,255,0.45);

    letter-spacing: 0.15em;
}


.nav-title {
    font-size: 13px;

    font-weight: 400;

    letter-spacing: 0.25em;
}


/* =========================================
   FOOTER
========================================= */

.footer {
    font-size: 9px;

    letter-spacing: 0.4em;

    color: rgba(255,255,255,0.4);

    opacity: 0;

    transition: opacity 1s ease 1.3s;
}


#interface.visible .footer {
    opacity: 1;
}


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

@media (max-width: 600px) {

    #interface {
        padding-top:
            max(20px, env(safe-area-inset-top));

        padding-bottom:
            max(20px, env(safe-area-inset-bottom));
    }


    .logo {
        margin-top: 2vh;
    }


    .logo h1 {
        font-size: 30px;
    }


    .navigation {
        width: 88vw;

        max-width: 360px;

        gap: 10px;
    }


    .nav-item {
        min-height: 55px;

        padding: 0 18px;
    }


    .nav-title {
        font-size: 12px;
    }
}


/* =========================================
   LANDSCAPE / DESKTOP

   Наш исходник 9:16.
   На широком экране сохраняем центр композиции.
========================================= */

@media (min-aspect-ratio: 1/1) {

    #introVideo {
        object-position: center center;
    }


    .navigation {
        width: 300px;
    }
}
/* =========================================
   FINAL STATIC BACKGROUND
========================================= */

#finalBackground {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image: url("/assets/main.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================================
   VIDEO
========================================= */

.video-stage {
    position: absolute;
    inset: 0;
    z-index: 2;

    overflow: hidden;
    background: #000;
}


/* =========================================
   СЛОЙ 1 — РАЗМЫТЫЙ ФОН
========================================= */

.video-blur {
    position: absolute;

    /* выносим за края, чтобы blur
       не создавал тёмную рамку */
    inset: -40px;

    width: calc(100% + 80px);
    height: calc(100% + 80px);

    object-fit: cover;
    object-position: center;

    filter:
        blur(30px)
        brightness(0.55)
        saturate(0.85);

    transform: scale(1.08);

    pointer-events: none;
}


/* Дополнительное "матовое стекло" */

.video-stage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background: rgba(0, 0, 0, 0.12);

    pointer-events: none;
}


/* =========================================
   СЛОЙ 2 — ОРИГИНАЛЬНОЕ ВИДЕО 9:16
========================================= */

.video-main {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: auto;
    height: 100%;

    max-width: 100%;

    object-fit: contain;

    z-index: 3;

    opacity: 1;

    box-shadow:
        0 0 70px rgba(0, 0, 0, 0.55);

    transition: opacity 1.5s ease;
}


.video-main.finished {
    opacity: 0;
    pointer-events: none;
}


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

@media (max-aspect-ratio: 9/16) {

    .video-main {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }

}


/* =========================================
   INTERFACE
========================================= */

#interface {
    position: absolute;
    inset: 0;

    z-index: 10;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}


#interface.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}