@media (max-width: 1199px) {
    .promo_video {
        display: none;
    }
}

@media (min-width: 1200px) {
    .promo_video {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100vw;
        height: calc(var(--vh) * 100); /* Must be same as in HERO.CSS of .hero for width > 1200px BUT hero is height auto and it could be higher... */

        background-color: rgba(247, 247, 247, 1);
        overflow: hidden;

        perspective: 1200px;
        will-change: transform;

        animation:
            bgColor .8s 9.2s ease forwards,
            divHeightHide .2s 10s ease forwards;
    }

    .first_screen, .second_screen, .third_screen {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }







    /* ------------------------------------------------------- First screen ------------------------------- */
    .first_screen {
        transform-style: preserve-3d;

        animation:
            /* cameraMove 7.2s cubic-bezier(.6,0,.2,1) forwards, */
            cameraMove 6.8s cubic-bezier(.13,.19,.41,1.03) forwards,
            disapear 1s 6.8s ease forwards;
    }

    .word {
        position: absolute;

        color: var(--black);
        font-family: var(--font-theme);
        font-size: var(--fs-promo);
        font-weight: 700;
        white-space: nowrap;

        transform: translate(-50%,-50%);
        filter: blur(1px);
        opacity: .7;
    }

    .highlight {
        filter: blur(0);
        opacity: 1;
    }

    .w1 { top:50%; left:50%; transform:translate(-50%,-50%) translateZ(-400px); } /* Kvalita */
    .w2 { top:50%; left:150%; transform:translate(-50%,-50%) translateZ(-300px); } /* Tryskání */
    .w3 { top:150%; left:150%; transform:translate(-50%,-50%) translateZ(-200px); } /* 30 let */

    .w4 { top:125%; left:160%; transform:translate(-50%,-50%) translateZ(-750px); } /* Spolehlivost */
    .w5 { top:38%; left:34%; transform:translate(-50%,-50%) translateZ(-600px); } /* Cena */
    .w6 { top:30%; left:140%; transform:translate(-50%,-50%) translateZ(-700px); } /* Adheze */
    .w7 { top:70%; left:170%; transform:translate(-50%,-50%) translateZ(-600px); } /* Čistota */
    .w8 { top:60%; left:130%; transform:translate(-50%,-50%) translateZ(-650px); } /* Plochy */
    .w9 { top:60%; left:55%; transform:translate(-50%,-50%) translateZ(-250px); } /* Rychlost */
    .w10 { top:25%; left:70%; transform:translate(-50%,-50%) translateZ(-700px); } /* Standardy */
    .w11 { top:180%; left:120%; transform:translate(-50%,-50%) translateZ(-850px); } /* zakázky */
    .w12 { top:195%; left:170%; transform:translate(-50%,-50%) translateZ(-500px); } /* Spokojenost */




    /* -------------------------------------------------- First screen - animation ------------------------ */
    @keyframes cameraMove{
        0%{
        transform:translateZ(2400px) translateX(0) translateY(0);
        }

        20%{
        transform:translateZ(1000px) translateX(0) translateY(0);
        }

        50%{
        transform:translateZ(1000px) translateX(-100vw) translateY(0);
        }

        70%{
        transform:translateZ(1000px) translateX(-100vw) translateY(-100vh);
        }

        80%{
        transform:translateZ(1000px) translateX(-100vw) translateY(-100vh);
        }

        100%{
        transform:translateZ(2400px) translateX(-100vw) translateY(-100vh);
        }
    }










    /* ------------------------------------------------------ Second screen ------------------------------- */
    .second_screen {
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;

        transform-style: preserve-3d;

        opacity: 1;
        transform: translateZ(600px) translateX(10vw);
        animation:
            moveLeft 4s 5.4s ease forwards,
            disapear .6s 10s ease forwards; /* Disapear, if it set later, you see text moving up */
    }

    .second_screen .logo {
        height: 52px;
    }

    .second_screen p,
    .second_screen .logo {
        color: var(--black);
        font-size: var(--fs-promo);
        font-weight: 700;
        
        margin-right: 12px;
        opacity: 0;
        animation: wordSlide 3.4s ease-in forwards;
    }

    .second_screen .word_a { animation-delay: 5.8s; }
    .second_screen .word_b { animation-delay: 6.2s; }
    .second_screen .logo   { animation-delay: 6.6s; }
    .second_screen .word_c { animation-delay: 7s; }
    .second_screen .word_d { animation-delay: 7.4s; }



    /* ------------------------------------------------- Second screen - animation ------------------------ */
    @keyframes wordSlide{
        0%{
            opacity:0;
        }

        5% {
            opacity:1;
        }

        40%{
            opacity:1;
        }

        50% {
            opacity:0;
        }

        100%{
            opacity:0;
        }
    }

    @keyframes moveLeft {
        0% {
            transform: translateZ(600px) translateX(10vw);
        }

        40% {
            transform: translateZ(600px) translateX(10vw);
        }

        100% {
            transform: translateZ(600px) translateX(-10vw);
        }
    }









    /* ------------------------------------------------------- Third screen ------------------------------- */
    .third_screen {
        display: flex;
        padding-top: calc(var(--vh) * 16);
        perspective: 800px;

        opacity: 0;
        animation:
            fade_in .4s 9.2s ease forwards;
    }

    .third_screen h2 {
        font-size: var(--fs-hero);
        color: var(--white);
        font-weight: 700;
        display: flex;
        gap: 40px;
        margin: auto;
        margin-top: 0;
        transform: translateX(-2%);
    }

    .cube {
        position: relative;
        height: 1.2em;
        width: 5em;
        transform-style: preserve-3d;
        animation: rotateWords 6s 9.7s infinite;
    }

    .cube span {
        position: absolute;
        width: 100%;
        text-align: right;
        left: 0;
        top: 0;

        backface-visibility: hidden;   /* hlavní fix */
        -webkit-backface-visibility: hidden; /* Safari */
    }

    /* jednotlivé stěny kvádru */
    .cube span:nth-child(1) {
        transform: rotateX(0deg) translateZ(0.6em);
    }

    .cube span:nth-child(2) {
        transform: rotateX(90deg) translateZ(0.6em);
    }

    .cube span:nth-child(3) {
        transform: rotateX(180deg) translateZ(0.6em);
    }

    .cube span:nth-child(4) {
        transform: rotateX(270deg) translateZ(0.6em);
    }

    /* animace otáčení */
    @keyframes rotateWords {

        0%   { transform: rotateX(0deg); }
        20%  { transform: rotateX(0deg); }

        25%  { transform: rotateX(-90deg); }
        45%  { transform: rotateX(-90deg); }

        50%  { transform: rotateX(-180deg); }
        70%  { transform: rotateX(-180deg); }

        75%  { transform: rotateX(-270deg); }
        95%  { transform: rotateX(-270deg); }

        100% { transform: rotateX(-360deg); }
    }



    .skip-intro .first_screen, .skip-intro .second_screen {
        display: none;
    }

    .skip-intro .promo_video {
        background-color: rgba(247, 247, 247, 0);
    }

    .skip-intro .third_screen {
        animation: none;
        opacity: 1;
    }

    .skip-intro .cube {
        animation: rotateWords 6s 1s infinite;
    }
}








/* ----------------------------------------------------- Standard Display ----------------------------- */
@media (min-width: 1440px) {
    .hero, .promo_video {
        height: calc(var(--vh) * 100);
        animation:
            divHeight 1.2s 4s ease forwards,
            bgColor .8s 9.2s ease forwards,
            divHeightHide .2s 10s ease forwards;
    }

    .hero_container, .hero_bg, .hero {
        min-height: 0;
        height: calc(var(--vh) * 100);
        animation:
            divHeight 1.2s 4s ease forwards;
    }



    .w3 { top:172%; left:150%; transform:translate(-50%,-50%) translateZ(-200px); } /* 30 let */
    .w11 { top:160%; left:120%; transform:translate(-50%,-50%) translateZ(-850px); } /* zakázky */



    .third_screen h2 {
        transform: translateX(-5%);
    }


    .skip-intro .hero, .skip-intro .promo_video, .skip-intro .hero_container, .skip-intro .hero_bg {
        min-height: 0;
        height: calc(var(--vh) * 82);
        animation: none;
    }

    .skip-intro .promo_video {
        height: calc(var(--vh) * 50);
    }
}