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


html,
body{

    width:100%;
    height:100%;

}


body{

    overflow:hidden;

    font-family:Arial, sans-serif;

}




/* ======================
   СЦЕНА
====================== */


.scene{

    position:relative;

    width:100vw;

    height:100vh;


    background-image:
        url("../assets/backgrounds/bg-inventation.png");


    background-size:cover;

    background-position:center;

    overflow:hidden;

}





/* ======================
   ТЕКСТ
====================== */


h1{

    position:absolute;

    top:40px;

    width:100%;

    text-align:center;


    color:white;

    font-size:54px;


    text-shadow:
    0 3px 12px black;

}



.subtitle{

    position:absolute;

    top:120px;

    width:100%;

    text-align:center;


    color:white;

    font-size:24px;


    text-shadow:
    0 3px 10px black;

}

/* ======================
   ДВЕРЬ
====================== */

.door{

    position:absolute;

    left:50%;
    bottom:10px;

    transform:translateX(-50%);

    width:420px;
    height:630px;

    overflow:hidden;

    cursor:pointer;

    transition: filter .8s ease;

}


.door img{

    position:absolute;

    left:0;
    top:0;

    width:auto;
    height:630px;

    user-select:none;

    pointer-events:none;

}


.door:hover{

    filter:
        drop-shadow(0 0 6px rgba(254,254,245,.35))
        drop-shadow(0 0 14px rgba(254,254,245,.6))
        drop-shadow(0 0 28px rgba(254,254,245,.45))
        drop-shadow(0 0 45px rgba(254,254,245,.25));

}



/* ======================
   ЛЕТАЮЩИЙ ДРАКОН
====================== */


.dragon-left{

    position:absolute;

    width:128px;
    height:128px;

    left:calc(50% - 350px);
    bottom:400px;

    background-image:url("../assets/creations/dragon-left.png");
    background-repeat:no-repeat;

    animation:
        dragonLeftFrames 1s steps(8) infinite,
        dragonFloatLeft 4.2s ease-in-out infinite;
}

@keyframes dragonLeftFrames{

    from{
        background-position:0 0;
    }

    to{
        background-position:-1024px 0;
    }

}

.dragon-right-1{

    position:absolute;

    width:128px;
    height:128px;

    left:calc(50% + 220px);
    bottom:400px;

    background-image:url("../assets/creations/dragon-right-1.png");
    background-repeat:no-repeat;

    animation:
        dragonRightFrames 1.2s steps(16) infinite,
        dragonFloatRight1 4.8s ease-in-out infinite;
    
    animation-delay:-0.55s, -2.1s;
}

@keyframes dragonRightFrames{

    from{
        background-position:0 0;
    }

    to{
        background-position:-2048px 0;
    }

}

.dragon-right-2{

    position:absolute;

    width:128px;
    height:128px;

    left:calc(50% + 310px);
    bottom:250px;

    background-image:url("../assets/creations/dragon-right-2.png");
    background-repeat:no-repeat;

    animation:
        dragonRightFrames 1.2s steps(16) infinite,
        dragonFloatRight2 5.5s ease-in-out infinite;

    animation-delay:0s, 0s;
}

@keyframes dragonFloatLeft{

    0%   { transform:translate(0,0); }
    25%  { transform:translate(5px,-8px); }
    50%  { transform:translate(-6px,-14px); }
    75%  { transform:translate(4px,-6px); }
    100% { transform:translate(0,0); }

}

@keyframes dragonFloatRight1{

    0%   { transform:translate(0,0); }
    25%  { transform:translate(-7px,-10px); }
    50%  { transform:translate(4px,-16px); }
    75%  { transform:translate(-3px,-7px); }
    100% { transform:translate(0,0); }

}

@keyframes dragonFloatRight2{

    0%   { transform:translate(0,0); }
    20%  { transform:translate(6px,-4px); }
    50%  { transform:translate(-5px,-12px); }
    80%  { transform:translate(3px,-8px); }
    100% { transform:translate(0,0); }

}

/* ======================
   ДРАКОН-ХРАНИТЕЛЬ
====================== */


.little-dragon{


    position:absolute;



    width:200px;

    height:200px;

    z-index:7;


    left:calc(50% - 300px);

    bottom:25px;



    background-image:
    url("../assets/creations/dragon-blincked.png");



    background-repeat:no-repeat;



    /*
       8 кадров по 256px
       уменьшаем до 200px
    */

    background-size:1600px 200px;



    background-position:0 0;



    animation:

    littleDragonFrames 2s steps(8) infinite;


}





/* моргание */

@keyframes littleDragonFrames{


    from{

        background-position:0 0;

    }


    to{

        background-position:-1600px 0;

    }

}


/* ======================
   ВОЛШЕБНЫЕ БУТЫЛОЧКИ
====================== */

.bottle{

    position:absolute;

    width:55px;

    pointer-events:none;

}


/* ---------- Расположение ---------- */

.bottle1{

    left:calc(50% - 600px);
    bottom:130px;

    animation:bottleFloat1 5s ease-in-out infinite;

}

.bottle2{

    left:calc(50% - 470px);
    bottom:510px;

    animation:bottleFloat2 4.2s ease-in-out infinite;

}

.bottle3{

    left:calc(50% - 700px);
    bottom:600px;

    animation:bottleFloat3 5.8s ease-in-out infinite;

}

.bottle4{

    left:calc(50% + 320px);
    bottom:520px;

    animation:bottleFloat4 4.6s ease-in-out infinite;

}

.bottle5{

    left:calc(50% + 230px);
    bottom:200px;

    animation:bottleFloat5 5.5s ease-in-out infinite;

}

.bottle6{

    left:calc(50% + 600px);
    bottom:0px;

    animation:bottleFloat6 4.9s ease-in-out infinite;

}


/* ---------- Полёт ---------- */

@keyframes bottleFloat1{

    0%{transform:translate(0,0) rotate(-6deg);}
    25%{transform:translate(8px,-12px) rotate(2deg);}
    50%{transform:translate(-5px,-18px) rotate(8deg);}
    75%{transform:translate(6px,-8px) rotate(-2deg);}
    100%{transform:translate(0,0) rotate(-6deg);}

}

@keyframes bottleFloat2{

    0%{transform:translate(0,0) rotate(8deg);}
    30%{transform:translate(-10px,-14px) rotate(-4deg);}
    60%{transform:translate(5px,-6px) rotate(5deg);}
    100%{transform:translate(0,0) rotate(8deg);}

}

@keyframes bottleFloat3{

    0%{transform:translate(0,0) rotate(-10deg);}
    20%{transform:translate(6px,-8px) rotate(-2deg);}
    55%{transform:translate(-8px,-18px) rotate(7deg);}
    100%{transform:translate(0,0) rotate(-10deg);}

}

@keyframes bottleFloat4{

    0%{transform:translate(0,0) rotate(5deg);}
    25%{transform:translate(-7px,-12px) rotate(-5deg);}
    50%{transform:translate(8px,-20px) rotate(4deg);}
    100%{transform:translate(0,0) rotate(5deg);}

}

@keyframes bottleFloat5{

    0%{transform:translate(0,0) rotate(-8deg);}
    40%{transform:translate(7px,-10px) rotate(3deg);}
    70%{transform:translate(-6px,-18px) rotate(-4deg);}
    100%{transform:translate(0,0) rotate(-8deg);}

}

@keyframes bottleFloat6{

    0%{transform:translate(0,0) rotate(6deg);}
    20%{transform:translate(-5px,-8px) rotate(-2deg);}
    60%{transform:translate(10px,-16px) rotate(5deg);}
    100%{transform:translate(0,0) rotate(6deg);}

}

/* ======================
   ВОЛШЕБНЫЕ КЛЮЧИКИ
====================== */

.key{

    position:absolute;

    width:60px;

    pointer-events:none;

}


/* ---------- Расположение ---------- */

.key1{

    left:calc(50% - 640px);
    bottom:300px;

    animation:keyFloat1 5.5s ease-in-out infinite;

}

.key2{

    left:calc(50% - 350px);
    bottom:600px;

    animation:keyFloat2 4.6s ease-in-out infinite;

}

.key3{

    left:calc(50% + 280px);
    bottom:610px;

    animation:keyFloat3 5.2s ease-in-out infinite;

}

.key4{

    left:calc(50% + 610px);
    bottom:150px;

    animation:keyFloat4 4.9s ease-in-out infinite;

}


/* ---------- Полёт ---------- */

@keyframes keyFloat1{

    0%   {transform:translate(0,0) rotate(0deg);}
    25%  {transform:translate(10px,-10px) rotate(12deg);}
    50%  {transform:translate(-8px,-18px) rotate(25deg);}
    75%  {transform:translate(5px,-8px) rotate(12deg);}
    100% {transform:translate(0,0) rotate(0deg);}

}

@keyframes keyFloat2{

    0%   {transform:translate(0,0) rotate(0deg);}
    30%  {transform:translate(-10px,-12px) rotate(-18deg);}
    60%  {transform:translate(8px,-6px) rotate(-30deg);}
    100% {transform:translate(0,0) rotate(0deg);}

}

@keyframes keyFloat3{

    0%   {transform:translate(0,0) rotate(0deg);}
    20%  {transform:translate(8px,-8px) rotate(15deg);}
    55%  {transform:translate(-10px,-16px) rotate(28deg);}
    100% {transform:translate(0,0) rotate(0deg);}

}

@keyframes keyFloat4{

    0%   {transform:translate(0,0) rotate(0deg);}
    25%  {transform:translate(-8px,-10px) rotate(-12deg);}
    50%  {transform:translate(10px,-18px) rotate(-24deg);}
    100% {transform:translate(0,0) rotate(0deg);}

}

/* ======================
   ВОЛШЕБНЫЕ ПУЗЫРЬКИ
====================== */

.bubble{

    position:absolute;

    pointer-events:none;

    z-index:3;

    animation:bubbleFly linear forwards;

}

@keyframes bubbleFly{

    0%{

        opacity:0;

        bottom:-60px;

        transform:
            translateX(0)
            scale(.4);

    }

    10%{

        opacity:1;

    }

    100%{

        opacity:0;

        bottom:110vh;

        transform:
            translateX(var(--moveX))
            scale(1.6);

    }

}

/* ======================
   ТАБЛИЧКА
====================== */

.table-sign{

    position:absolute;

    width:150px;

    left:calc(50% - 350px);

    bottom:70px;

    z-index:6;

    user-select:none;
    pointer-events:none;

}

/* ======================
   НАДПИСЬ "ГРАНИЦА МИРОВ"
====================== */

.border-title{

    position:absolute;

    width:520px;

    left:50%;
    top:35px;

    transform:translateX(-50%);

    z-index:20;

    user-select:none;
    pointer-events:none;

    animation:
        titleGlow 4s ease-in-out infinite,
        titleFloat 6s ease-in-out infinite;

}

@keyframes titleGlow{

    0%{

        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.15));

    }

    25%{

        filter:
            drop-shadow(0 0 6px rgba(255,255,255,.45))
            drop-shadow(0 0 12px rgba(255,245,220,.25));

    }

    50%{

        filter:
            drop-shadow(0 0 10px rgba(255,255,255,.75))
            drop-shadow(0 0 20px rgba(255,250,235,.45))
            drop-shadow(0 0 32px rgba(255,255,255,.25));

    }

    75%{

        filter:
            drop-shadow(0 0 6px rgba(255,255,255,.45))
            drop-shadow(0 0 12px rgba(255,245,220,.25));

    }

    100%{

        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.15));

    }

}

@keyframes titleFloat{

    0%{

        transform:
            translateX(-50%)
            translateY(0px);

    }

    25%{

        transform:
            translateX(-50%)
            translateY(-2px);

    }

    50%{

        transform:
            translateX(-50%)
            translateY(-4px);

    }

    75%{

        transform:
            translateX(-50%)
            translateY(-2px);

    }

    100%{

        transform:
            translateX(-50%)
            translateY(0px);

    }

}

/* ======================
   ЛЕТАЮЩИЕ ОСТРОВА
====================== */

.island{

    position:absolute;

    user-select:none;
    pointer-events:none;

    z-index:1;

    animation:
        islandFloat 8s ease-in-out infinite;

}

.island1{

    width:110px;

    left:170px;
    top:60px;

    animation-delay:0s;

}

.island2{

    width:240px;

    right:100px;
    top:160px;

    animation-delay:-2s;

}

.island3{

    width:220px;

    left:210px;
    bottom:140px;

    animation-delay:-4s;

}

.island4{

    width:100px;

    right:240px;
    bottom:70px;

    animation-delay:-1s;

}

.island5{

    width:190px;

    right:20px;
    top:10px;

    animation-delay:-3s;

}

@keyframes islandFloat{

    0%{

        transform:
            translateY(0px)
            rotate(0deg);

    }

    25%{

        transform:
            translateY(-5px)
            rotate(.3deg);

    }

    50%{

        transform:
            translateY(-9px)
            rotate(0deg);

    }

    75%{

        transform:
            translateY(-4px)
            rotate(-.3deg);

    }

    100%{

        transform:
            translateY(0px)
            rotate(0deg);

    }

}


#doorZoom{

    position:fixed;

    left:50%;
    bottom:10px;

    width:420px;
    height:630px;

    transform:
        translateX(-50%)
        scale(1);

    transform-origin:center center;

    z-index:9999;

    pointer-events:none;

    opacity:0;

}


#doorZoom img{

    width:100%;
    height:100%;

    object-fit:cover;

}



#doorZoom.active{

    animation:doorFly 1.2s ease-in forwards;

}



@keyframes doorFly{


    0%{

        opacity:1;

        transform:
            translateX(-50%)
            scale(1);

    }


    100%{

        opacity:1;

        transform:
            translateX(-50%)
            scale(8);

    }


}