Украшение для сайта на Хеллоуин Таинственный домик

Интересное тематическое украшение для сайта к празднику Хеллоуина в виде таинственного домика где обитает всякая нечисть. Скорее всего этот заброшенный ;жуткий замок принадлежит злой ведьме где идёт вечеринка. При наведении курсора на различные элементы и животных будет анимироваться тот или иной участок . Анимация выполнена при помощи CSS. Короче классная штука для оформления сайта к Хеллуину.

HTML

<div class="sky">
    <div class="moon"></div>
</div>

<div class="content">

    <div class="level-0">
        <div class="door">
            <div class="nosferatu"></div>
            <div class="logs">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="shining"></div>
    </div>
    <div class="level-1">
        <div class="window">
            <div class="frankenstein"></div>
        </div>
        <div class="shining"></div>
    </div>
    <div class="level-2">
        <div class="window">
            <div class="witch"></div>
        </div>
        <div class="shining"></div>
    </div>


    <div class="balcony"></div>
    <div class="bat-cat">
        <div class="body"></div>
        <div class="leg"></div>
        <div class="leg"></div>
        <div class="head"></div>
        <div class="ears"></div>
        <div class="tail"></div>
        <div class="wings">
            <div class="wing">
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
            </div>
            <div class="wing">
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
            </div>
        </div>
    </div>







    <div class="roof-0">
        <div class="window">
            <div class="phantom"></div>
            <div class="phantom"></div>
        </div>
        <div class="shining"></div>
    </div>
    <div class="roof-1"></div>
    <div class="roof-2">
        <div class="chimney"></div>
    </div>

    <div class="flying-bat"></div>

    <div class="fence">
        <span></span><span></span>
        <div class="bat">
            <div class="head">
                <div class="eyes"></div>
                <div class="mouth"></div>
            </div>
            <div class="wings"></div>
            <div class="legs">
                <div class="leg"></div>
                <div class="leg"></div>
            </div>
        </div>
        <div class="chimney"></div>
    </div>
    <div class="fence">
        <span></span><span></span>
        <div class="tomb">RIP</div>
        <div class="zombie-hand"></div>
        <div class="stones"></div>
    </div>



</div>

CSS

/*** IN PROGRESS ***/
/* adding more and more... */

:root {
    --gray: #1a191a;
    --black: #080708;
    --dark: #443847;
    --window: #ffc800cf;
    --house: #000;
    --bat: #0c0c0c;
    --bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: 
    linear-gradient(180deg, #000, #fff0, #fff0),
    radial-gradient(circle at 50% 100%, #005eff, #6d006d, #38005e );
}

body:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10vmin;
    z-index: -1;
    background: 
    radial-gradient(circle at calc(50% - 33vmin) calc(100% + 31vmin), var(--house) 40vmin, #fff0 calc(40vmin + 1px) ), radial-gradient(circle at calc(50% + 33vmin) calc(100% + 30vmin), var(--house) 40vmin, #fff0 calc(40vmin + 1px) ), radial-gradient(circle at 50% calc(100% + 43vmin), var(--house) 50vmin, #fff0 calc(50vmin + 1px) );
    background-repeat: no-repeat;
}

.content {
    width: 90vmin;
    height: 90vmin;
    /*background: url(./haunted.png) no-repeat center;*/
    background-size: cover;
    position: relative;
    perspective: 100vmin;
    perspective-origin: top;
    bottom: 5vmin;
}
    
.content * {
    position: absolute;
    transform-style: preserve-3d;
}

.level-0 {
    width: 30vmin;
    height: 25vmin;
    background: var(--house);
    bottom: 0;
    left: 22vmin;
    transform: rotateX(82deg) skewX(5deg);
    z-index: 1;
}

.level-1 {
    width: 16vmin;
    height: 34vmin;
    background: var(--house);
    bottom: 3.75vmin;
    left: 53vmin;
    transform: perspective(100vmin) rotateX(82deg) skewX(-10deg);
}

.level-2 {
    width: 19vmin;
    height: 35vmin;
    background: var(--house);
    bottom: 31.5vmin;
    left: 29vmin;
    transform: perspective(150vmin) rotateX(45deg) skewX(2deg) rotate(2deg);
    clip-path: polygon(0% 85%, 0% 0%, 100% 0%, 100% 94%, 48% 57%);
    z-index: 1;
    box-shadow: 0.25vmin -0.5vmin 0.5vmin 0 #fff4 inset, 0.5vmin -0.5vmin 1.5vmin 0 #fff2 inset;
}


.roof-0 {
    width: 37vmin;
    height: 23vmin;
    bottom: 23.25vmin;
    left: 18.75vmin;
    border: 19vmin solid #0000;
    box-sizing: border-box;
    border-bottom: 22vmin solid var(--house);
    transform: skew(-8deg, -1deg) rotate(1.25deg);
    border-radius: 0.5vmin;
}

.roof-1, .chimney:before {
    background: radial-gradient(circle at -9vmin 1vmin, #fff0 18vmin, #fff3 calc(18vmin + 1px) 18vmin, #fff0 19vmin 100%), radial-gradient(circle at -9vmin 1vmin, #fff0 18vmin, var(--house) calc(18vmin + 1px) ), radial-gradient(circle at 24.5vmin -5vmin, #fff0 25vmin, var(--house) calc(25vmin + 1px) ), #0000;
    width: 21vmin;
    height: 17vmin;
    bottom: 31.75vmin;
    left: 52vmin;
    transform: skew(-8deg, -1deg) rotate(2deg);
    border-radius: 0.5vmin;
    background-size: calc(50% - 1vmin) 100%, calc(50% - 1vmin) 100%, calc(50% + 1vmin) 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 99% 0;
}

/*
.roof-0 .chimney {
    left: -11vmin;
    top: 4vmin;
    transform: rotateY(180deg) rotateZ(29deg);
    transform-origin: -20% 120%;
}


.roof-0 .chimney:after {
    border-radius: 5vmin 0vmin 8vmin;
}
*/

.roof-2 {
    background: radial-gradient(circle at 34vmin -9vmin, #fff0 35vmin, var(--house) calc(35vmin + 1px) ), radial-gradient(circle at -18vmin 4vmin, #fff0 28vmin, #fff6 calc(28vmin + 1px), #fff0 28.75vmin ), radial-gradient(circle at -18vmin 4vmin, #fff0 28vmin, var(--house) calc(28vmin + 1px) ), #0f00;
    width: 34vmin;
    height: 25vmin;
    bottom: 63.9vmin;
    left: 26vmin;
    transform: skew(-8deg, -1deg) rotate(1deg);
    border-radius: 0.5vmin;
    background-size: calc(50% + 6.5vmin) 100%, calc(50% + 7vmin) 100%, calc(50% - 6.5vmin) 100%, calc(50% - 7vmin) 100%;
    background-repeat: no-repeat;
    background-position: 99% 0, 0 0, 0 0;
}

.door {
    background: 
    linear-gradient(183deg, #fff0 7.5vmin, #000 calc(7.5vmin + 1px) 8vmin, #fff0 calc(8vmin + 1px) 0), 
    linear-gradient(94deg, #000 0.75vmin, #fff0 calc(0.75vmin + 1px)), 
    linear-gradient(-94deg, #000 0.75vmin, #fff0 calc(0.75vmin + 1px)), 
    linear-gradient(-5deg, #000 0.5vmin, #fff0 calc(0.5vmin + 1px)), 
    linear-gradient(86deg, #fff0 3.5vmin, #000 calc(3.5vmin + 1px) 4vmin, #fff0 calc(4vmin + 1px)), 
    linear-gradient(95deg, #fff0 7vmin, #000 calc(7vmin + 1px) 7.5vmin, #fff0 calc(7.5vmin + 1px)), 
    linear-gradient(92deg, #fff0 10vmin, #000 calc(10vmin + 1px) 10.5vmin, #fff0 calc(10.5vmin + 1px)), 
    radial-gradient(circle at 50% 87%, #fff0 5.65vmin, #000 calc(5.65vmin + 1px)), 
    radial-gradient(circle at 46% 87%, #fff0 5.65vmin, #000 calc(5.65vmin + 1px)), 
    linear-gradient(38deg, #fff0 4.25vmin, #000 calc(4.25vmin + 1px) 4.75vmin, #fff0 calc(4.75vmin + 1px)), 
    linear-gradient(87deg, #fff0 1vmin, #000 calc(1vmin + 1px)), 
    linear-gradient(123deg, #fff0 5vmin, #000 calc(5vmin + 1px) 5.5vmin, #fff0 calc(5.5vmin + 1px)), 
    linear-gradient(150deg, #fff0 7vmin, #000 calc(7vmin + 1px) 7.5vmin, #fff0 calc(7.5vmin + 1px)),
    linear-gradient(180deg, var(--window), var(--window)), #fff;
    width: 13vmin;
    height: 20vmin;
    bottom: 1.5vmin;
    left: 8vmin;
    transform: skew(2deg, -2deg);
    border-radius: 100% 100% 0.5vmin 0.5vmin;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 65%, 100% 64%, 100% 63%, 105% 38%, 105% 38%, 60% 39%, 11% 39%, 58% 39%, 56% 39%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 50% 0, 100% 0, 100% 0;
    /*overflow: hidden;*/
    perspective: 1000vmin;
    perspective-origin: top;
}



.window {
    width: 9vmin;
    height: 18vmin;
    width: 8vmin;
    height: 17vmin;
    background: 
    linear-gradient(178deg, #fff0 0 12vmin, #000 calc(12vmin + 1px) 12.6vmin, #fff0 calc(12.6vmin + 1px)), linear-gradient(183deg, #fff0 0 7vmin, #000 calc(7vmin + 1px) 7.65vmin, #fff0 calc(7.65vmin + 1px)), linear-gradient(91deg, #fff0 0 3.65vmin, #000 calc(3.65vmin + 1px) 4.1vmin, #fff0 calc(4.1vmin + 1px)), linear-gradient(180deg, var(--window), var(--window)), #fff;
    background: linear-gradient(178deg, #fff0 0 12vmin, #000 calc(12vmin + 1px) 12.4vmin, #fff0 calc(12.4vmin + 1px)), linear-gradient(183deg, #fff0 0 7vmin, #000 calc(7vmin + 1px) 7.45vmin, #fff0 calc(7.45vmin + 1px)), linear-gradient(91deg, #fff0 0 3.65vmin, #000 calc(3.65vmin + 1px) 4.1vmin, #fff0 calc(4.1vmin + 1px)), linear-gradient(180deg, var(--window), var(--window)), #fff;
    left: 3.5vmin;
    top: 8vmin;
    border-radius: 4vmin 5vmin 0.1vmin 0.1vmin;
    transform: rotateX(-0deg);
    overflow: hidden;
}

.level-1 .window {
    --window: #ff9900cf;
}

.level-1 .window:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -1vmin;
    max-height: 0;
    background: repeating-linear-gradient(180deg, var(--house) 0 0.5vmin, #fff0 0 0.85vmin );
    transition: max-height 2s var(--bounce) 0s;
    border-bottom: 0.75vmin solid var(--house);
}

.level-1 .window:hover:before {
    max-height: 100%;
    top: -0.75vmin;
    transition: max-height 2s var(--bounce) 0s;
}




.level-2 .window {
    --window: #ff8100cf;
}
.level-2 .window {
    transform: scale(0.75) rotateY(180deg) skewY(-2deg);
    top: 1vmin;
    left: 4.5vmin;
    border-radius: 4vmin 5vmin 0.1vmin 0.1vmin;
    overflow: hidden;
    border-top: 1px solid var(--house);
}





.roof-0 .window {
    --window: #e8ff00cf;
    --window: #084461e0;
    --light: #111;
    border-radius: 100%;
    height: 7vmin;
    width: 7vmin;
    background: linear-gradient(183deg, #fff0 0 3.25vmin, #000 calc(3.25vmin + 1px) 3.65vmin, #fff0 calc(3.65vmin + 1px)), linear-gradient(91deg, #fff0 0 3.25vmin, #000 calc(3.25vmin + 1px) 3.65vmin, #fff0 calc(3.65vmin + 1px)), linear-gradient(180deg, var(--light), var(--window));
    left: -3vmin;
}

@keyframes light-on {
    0%, 20%, 35% { --window: #084461e0; --light: #111; }
    10%, 30%, 40%, 100% { --window: #ffd5a0; --light: #fff5ce; }
}


.chimney {
    left: 21vmin;
    top: 8vmin;
    width: 7vmin;
    height: 12vmin;
}

.chimney:before {
    content: "";
    position: absolute;
    transform: scale(0.25) rotate(2deg);
    left: -7vmin;
    top: -6vmin;
}

.chimney:after {
    content: "";
    position: absolute;
    border: 1.5vmin solid #fff0;
    border-right: 2vmin solid var(--house);
    border-bottom: 3vmin solid var(--house);
    border-top: 0;
    width: 6vmin;
    height: 6vmin;
    left: -4.75vmin;
    bottom: -1.85vmin;
    border-radius: 5vmin 0vmin 6vmin;
}




.fence {
    background: radial-gradient(circle at 55% 32vmin, var(--house) 16vmin, #fff0 calc(16vmin + 1px));
    width: 22vmin;
    height: 22vmin;
    bottom: 0;
}

.fence:before {
    content: "";
    position: absolute;
    width: 2vmin;
    height: 18vmin;
    background: var(--house);
    left: 5vmin;
    top: 5vmin;
    transform: skewY(30deg) rotate(-1deg);
    box-shadow: 8vmin -5vmin 0 -0.25vmin var(--house);
    /*filter: drop-shadow(-2px -2px 0px #fff);*/
}

.fence:after {
    content: "";
    position: absolute;
    width: 1.75vmin;
    height: 16vmin;
    background: var(--house);
    left: 10vmin;
    top: 4vmin;
    transform: skewY(-20deg) rotate(1deg);
    box-shadow: 5vmin 3vmin 0 0.1vmin var(--house);
    /*filter: drop-shadow(-2px -2px 0px #fff);*/
}


.fence + .fence {
    right: 0;
}


.fence + .fence:before {
    left: 4vmin;
    top: 6vmin;
    height: 12vmin;
    transform: skewY(30deg) rotate(-7deg);
    box-shadow: 5vmin -2vmin 0 -0.25vmin var(--house);
}

.fence + .fence:after {
    left: 6.5vmin;
    top: 7vmin;
    height: 10vmin;
    transform: skewY(-23deg) rotate(-1deg);
    width: 1.5vmin;
    box-shadow: 5vmin 2vmin 0 -0.25vmin var(--house), 4.75vmin 3vmin 0 -0.25vmin var(--house);
}


.fence span {
    background: var(--house);
    width: 15vmin;
    height: 1.85vmin;
    top: 7vmin;
    left: 3vmin;
    transform: skewX(15deg) rotate(-10deg);
    /*filter: drop-shadow(-2px 2px 0px #fff);*/
}

.fence span + span {
    width: 15vmin;
    top: 12.25vmin;
    left: 2.5vmin;
    transform: rotate(-8deg) skewX(-18deg);
}



.fence + .fence span {
    width: 11vmin;
    top: 8vmin;
    transform: rotate(3deg) skewX(-4deg);
    height: 2vmin;
    left: 2.5vmin;
}

.fence + .fence span + span {
    top: 12vmin;
    transform: rotate(-4deg) skewX(17deg);
    left: 3.2vmin;
    width: 10.2vmin;
}





.balcony {
    width: 12vmin;
    height: 9vmin;
    background: 
    linear-gradient(-101deg, #fff0 0 1.5vmin, #000 calc(1.5vmin + 1px) 2.25vmin, #fff0 calc(2.25vmin + 1px)),linear-gradient(-98deg, #fff0 0 5.5vmin, #000 calc(5.5vmin + 1px) 6.25vmin, #fff0 calc(6.25vmin + 1px)), linear-gradient(88deg, #fff0 0 4vmin, #000 calc(4vmin + 1px) 4.75vmin, #fff0 calc(4.75vmin + 1px)), linear-gradient(85deg, #fff0 0 9vmin, #000 calc(9vmin + 1px) 9.75vmin, #fff0 calc(9.75vmin + 1px)), linear-gradient(177deg, #fff0 1vmin, #000 calc(1vmin + 1px) 2vmin, #fff0 calc(2vmin + 1px)), linear-gradient(183deg, #fff0 1vmin, #000 calc(1vmin + 1px) 2vmin, #fff0 calc(2vmin + 1px));
    z-index: 3;
    left: 43vmin;
    top: 34vmin;
    border-bottom: 2vmin solid var(--house);
    border-right: 0.75vmin solid var(--house);
    border-radius: 0.25vmin;
    transform: skewX(-18deg) rotate(5deg);
    transition: transform 1s var(--bounce) 0s;
    transform-origin: 0 100%;
}

.balcony:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    /*background: #00f4;*/
    top: -78%;
}


.balcony:hover {
    transform: skewX(-18deg) rotate(25deg);
    transition-duration: 0.5s;
}



















/*aqui*/


.sky {
    background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
    height: 100vh;
    z-index: -1;
    position: absolute;
    left: 0;
}

.sky:after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0vh;
    background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
        radial-gradient(2px 2px at 43px 75px, #735454, transparent),
        radial-gradient(2px 1px at 54px 184px, #828282, transparent),
        radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
        radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
        radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
        radial-gradient(1px 2px at 210px 154px, #805241, transparent),
        radial-gradient(2px 2px at 243px 102px, #866356, transparent),
        radial-gradient(2px 1px at 264px 184px, #794937, transparent),
        radial-gradient(2px 2px at 293px 44px, #735454, transparent),
        radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
        radial-gradient(2px 2px at 249px 162px, #884228, transparent),
        radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
        radial-gradient(1px 1px at 163px 42px, #403433, transparent),
        linear-gradient(180deg, #fff0 10%, #000 25%, #111 50%, #222 75%, #111 100%);
    background-repeat: no-repeat, repeat;
    background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
        333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
        333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
    opacity: 0.5;
    mix-blend-mode: color-burn;
}

.moon {
    position: absolute;
    z-index: 2;
    width: 20vmin;
    height: 20vmin;
    left: 20vmin;
    top: 15vmin;
    opacity: 1;
    border-radius: 100%;
    animation: start-moon 3s ease 0s 1;
    background: radial-gradient(circle at 50% 50%,#fdfdfd 0% 7vmin,#ffffff00 7.25vmin 100%),#fff;
    box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,0 0 20px 5px #fdfdfd;
}

.moon:before {
    content: "";
    background: radial-gradient(
        circle at 100% 60%,
        #ffffff00 0% 60%,
        #dddddd 75% 100%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    border-radius: 100%;
}

.moon:after {
    content: "";
    background: radial-gradient(
        circle at 0% 40%,
        #efefef 0% 60%,
        #ededed 75% 100%
    );
    width: 4.5vmin;
    height: 4.5vmin;
    position: absolute;
    top: 20%;
    left: 20%;
    border-radius: 100%;
    filter: blur(2px);
}




































/*TRICKS*/
.level-2 .window:before {
    content: "";
    position: absolute;
    width: 1.5vmin;
    height: 20vmin;
    background: hsla(0, 100%, 50%, 0.75);
    border-radius: 0 0 1vmin 1vmin;
    top: -22vmin;
    left: 50%;
    z-index: 1;
    transition: all 4s ease-out 0s;
    box-shadow: 
        -1.5vmin -3vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        -2.875vmin -2vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.65), 
        -3.875vmin -5.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.75), 
        -4.875vmin -4vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.725), 
        1.35vmin -1.5vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        2.5vmin -2.5vmin 0 -0.3vmin hsla(0, 100%, 50%, 0.725), 
        3.35vmin -5.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.65);
}

.level-2 .window:hover:before {
    top: 0vmin;
    box-shadow: 
        -1.5vmin -1vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        -2.875vmin -3vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.65), 
        -3.875vmin -2.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.75), 
        -4.875vmin -4vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.725), 
        1.35vmin -2.5vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        2.5vmin -1.5vmin 0 -0.3vmin hsla(0, 100%, 50%, 0.725), 
        3.35vmin -3.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.65);
}












/*** BAT ***/

@keyframes bat-fly {
    25% { transform: translateX(-1.5vmin) translateY(-5vmin) scale(0.6); }
    33% { margin-bottom: 5vmin; }
    50% { margin-bottom: 5vmin; transform: translateX(0.5vmin) scale(0.7);}
    66% { margin-bottom: 5vmin; }
    75% { transform: translateX(1vmin) scale(0.6); }
}

.bat {
    width: 15vmin;
    height: 12vmin;
    bottom: 30vmin;
    margin-bottom: 0;
    left: 13.25vmin;
    /*transition: animation 1s ease 1s;*/
}

.bat:hover  {
    transition: all 1s linear 0s;
    /*animation: bat-fly 4s linear 0s 2; */
}

.bat .head {
    background: radial-gradient(circle at 50% 100%, #fff0 calc(2vmin - 1px), #5558 calc(2vmin + 0px), var(--bat) calc(2vmin + 2px));
    width: 6vmin;
    height: 9.5vmin;
    left: 4vmin;
    top: 0.75vmin;
    border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
    transform: rotate(-173deg);
}

.bat .head:before, 
.bat .head:after {
    background: var(--bat);
    content: "";
    position: absolute;
    width: 0.5vmin;
    height: 2.65vmin;
    bottom: 5vmin;
    left: 5.65vmin;
    border-radius: 100% 100% 100% 0%;
    transform: rotate(-5deg);
}

.bat .head:after {
    left: -0.15vmin;
    border-radius: 100% 100% 0% 100%;
    transform: rotate(1deg);
}

.bat .eyes {
    width: 100%;
    height: 2.5vmin;
    bottom: 2.75vmin;
    transform: rotate(-5deg);
}

.bat .eyes:before, 
.bat .eyes:after {
    content: "";
    position: absolute;
    width: 1.35vmin;
    height: 1.75vmin;
    background: radial-gradient(ellipse at 38% 48%, #fff0 0.3vmin, var(--window) calc(0.3vmin + 1px)), radial-gradient(circle at 43% 60%, #fff 10%, #fff0 calc(10% + 1px) 100%);
    border-radius: 100%;
    left: 3.25vmin;
    top: 0.1vmin;
}

.bat .eyes:after {
    width: 1.65vmin;
    height: 2.25vmin;
    left: 1.25vmin;
    transform: rotateY(180deg);
}


.bat .mouth {
    background: 
        radial-gradient(ellipse at 42% 26%,pink 0.25vmin, #fff0 calc(0.25vmin + 1px)), 
        radial-gradient(ellipse at 36% 4%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
        radial-gradient(ellipse at 41% 0%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
        radial-gradient(ellipse at 75% 16%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
        radial-gradient(circle at 50% 6.5vmin, #fff0 4vmin, #400000 calc(4vmin + 1px));
    width: 4.5vmin;
    height: 3vmin;
    left: 0.65vmin;
    top: 0.75vmin;
    border-radius: 10vmin 10vmin 0 0;
}

.bat .mouth:before, 
.bat .mouth:after {
    content: "";
    position: absolute;
    width: 1vmin;
    height: 2.4vmin;
    background: conic-gradient(from 160deg, #fff0, #fff 5deg 35deg, #fff0 40deg 100%);
    top: 0.1vmin;
    left: 0.75vmin;
    transform: rotate(-10deg);
}

.bat .mouth:after {
    top: 0.2vmin;
    left: 3.1vmin;
    transform: rotate(13deg);
}


.bat .legs {
    width: 7vmin;
    height: 3vmin;
    bottom: 0.1vmin;
    left: 2.65vmin;
}

.bat .leg {
    background: var(--bat);
    width: 0.65vmin;
    height: 2.25vmin;
    transform: rotate(50deg);
    left: 0.75vmin;
    top: -0.25vmin;
    border-radius: 0 0 2vmin 2vmin;
    box-shadow: 0.15vmin -0.5vmin 0 0 var(--bat), -0.15vmin -0.5vmin 0 0 var(--bat);
}

.bat .leg:before, 
.bat .leg:after {
    content: "";
    position: absolute;
    background: var(--bat);
    width: 0.5vmin;
    height: 1.25vmin;
    transform: rotate(-55deg);
    left: 0.45vmin;
    top: 0.65vmin;
    border-radius: 0 0 2vmin 2vmin;
}

.bat .leg:after {
    transform: rotate(55deg);
    left: -0.35vmin;
    top: 0.5vmin;
}

.bat .leg + .leg {
    left: 5.5vmin;
    top: 0.75vmin;
    transform: rotate(-25deg);
}




.bat .wings {
    width: 100%;
    height: 65%;
    z-index: -1;
}

.bat .wings:before, 
.bat .wings:after {
    content: "";
    position: absolute;
    width: 30%;
    height: 70%;
    background: radial-gradient(circle at -2.2vmin 2.2vmin, #fff0 3vmin, var(--bat) calc(3vmin + 1px)),radial-gradient(circle at -1.25vmin 2.35vmin, #fff0 3vmin, var(--bat) calc(3vmin + 1px));
    bottom: 2.5vmin;
    left: 1vmin;
    transform-origin: 100% 100%;
    transform: rotate(-150deg);/*-15*/
    border-radius: 0 3.55vmin 0 0;
    background-repeat: no-repeat;
    background-size: 100% 3.2vmin, 100% 2.5vmin;
    background-position: 0 0, 0 3vmin;
    /*animation: bat-fly-r 0.15s ease 0s infinite;*/
}

@keyframes bat-fly-r {
    0%, 100% { transform: rotate(-15deg); }    
    50% { transform: rotate(-50deg); }    
}
@keyframes bat-fly-l {
    0%, 100% { transform: rotate(33deg) rotateY(180deg); }    
    50% { transform: rotate(63deg) rotateY(180deg); }    
}

.bat .wings:after {
    bottom: 2.65vmin;
    left: 3.75vmin;
    top: 0.25vmin;
    transform-origin: 100% 100%;
    transform: rotate(170deg) rotateY(180deg);/*33*/
    /*animation-name: bat-fly-l;*/
    animation-delay: -0.05s;
}

.flying-bat:hover + .fence .bat .wings:before {
    animation: bat-fly-r 0.125s ease 0s infinite;
}


.flying-bat:hover + .fence .bat .wings:after {
    animation: bat-fly-l 0.125s ease 0s infinite;
}













.tomb {
    background: var(--house);
    width: 5vmin;
    height: 6vmin;
    border-radius: 5vmin 5vmin 0 0;
    bottom: 3vmin;
    right: -7vmin;
    right: 0;
    transform: rotateX(12deg) skew(-11deg, 20deg);
    text-align: center;
    color: #3a1752;
    color: #490101;
    padding-top: 2vmin;
    font-family: serif;
    font-weight: bold;
    transition: all 2s ease 0s;
    z-index: 1;
    cursor: default;
    font-size: 1.75vmin;
}

.tomb:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 5vmin;
    border-right: 1vmin solid var(--house);
    border-top: 0.05vmin solid #fff0;
    border-radius: 0 3vmin 0 0;
    right: -1.2vmin;
    bottom: 0.1vmin;
}









@keyframes move-witch {
    0% { left: 1.5vmin; }
    25% { bottom: -4vmin}
    50% { left: -5vmin; }
    75% { bottom: 2vmin; }
    100% { left: 1.5vmin; }
}


.witch {
    width: 15vmin;
    height: 18vmin;
    left: -9.5vmin;
    bottom: -0.15vmin;
    opacity: 0.5;
    background: var(--house);
    animation: move-witch 4s ease 0s infinite alternate;
    box-sizing: border-box;
    clip-path: polygon(3% 55%, 5% 55%, 11% 55%, 22% 56%, 24% 57%, 24% 55%, 28% 56%, 34% 53%, 36% 51%, 38% 48%, 41% 42%, 42% 41%, 42% 38%, 43% 36%, 42% 36%, 40% 38%, 40% 38%, 40% 36%, 39% 33%, 38% 33%, 36% 33%, 35% 34%, 35% 33%, 35% 32%, 36% 30%, 37% 29%, 38% 27%, 38% 26%, 34% 23%, 32% 21%, 28% 17%, 27% 14%, 27% 12%, 40% 20%, 45% 17%, 50% 14%, 56% 10%, 59% 8%, 62% 8%, 66% 8%, 64% 9%, 62% 10%, 60% 13%, 58% 15%, 54% 18%, 53% 18%, 52% 24%, 56% 25%, 60% 27%, 64% 27%, 62% 28%, 58% 29%, 56% 30%, 59% 32%, 57% 31%, 56% 33%, 56% 32%, 55% 33%, 57% 33%, 56% 33%, 60% 36%, 56% 36%, 62% 37%, 56% 38%, 56% 40%, 58% 42%, 61% 45%, 64% 48%, 67% 52%, 69% 54%, 70% 56%, 69% 58%, 68% 59%, 70% 60%, 75% 60%, 76% 57%, 77% 56%, 78% 55%, 80% 56%, 80% 56%, 82% 57%, 83% 56%, 87% 56%, 90% 56%, 93% 56%, 96% 55%, 95% 56%, 97% 57%, 98% 60%, 97% 64%, 97% 67%, 96% 70%, 93% 69%, 88% 68%, 85% 67%, 82% 66%, 81% 66%, 80% 67%, 78% 66%, 77% 66%, 76% 66%, 75% 65%, 75% 63%, 74% 62%, 71% 61%, 67% 60%, 66% 61%, 64% 61%, 63% 62%, 64% 65%, 66% 67%, 68% 70%, 70% 72%, 73% 73%, 75% 75%, 78% 77%, 81% 78%, 78% 79%, 76% 80%, 75% 82%, 72% 81%, 71% 82%, 70% 82%, 70% 82%, 69% 81%, 67% 81%, 66% 79%, 65% 79%, 64% 78%, 62% 78%, 58% 78%, 54% 78%, 52% 77%, 51% 77%, 51% 77%, 51% 78%, 51% 79%, 54% 82%, 55% 84%, 56% 86%, 55% 86%, 53% 87%, 52% 89%, 50% 90%, 47% 92%, 47% 92%, 46% 91%, 47% 91%, 48% 90%, 50% 89%, 51% 87%, 51% 84%, 52% 84%, 47% 78%, 44% 75%, 41% 73%, 40% 79%, 41% 83%, 42% 85%, 41% 85%, 40% 84%, 39% 85%, 38% 86%, 36% 88%, 33% 89%, 32% 89%, 34% 87%, 36% 86%, 36% 84%, 36% 83%, 37% 82%, 38% 80%, 38% 74%, 37% 70%, 37% 68%, 36% 67%, 34% 66%, 35% 64%, 36% 62%, 36% 59%, 32% 59%, 29% 58%, 26% 59%, 24% 58%, 22% 57%, 12% 56%, 5% 56%, 3% 55%);
}















/* nosferatu */
.nosferatu {
    width: 10vmin;
    height: 12.5vmin;
    left: -4vmin;
    bottom: -0.15vmin;
    opacity: 0.5;
    background: var(--house);
    box-sizing: border-box;
    clip-path: polygon(75% 100%, 69% 95%, 66% 90%, 62% 87%, 60% 82%, 58% 79%, 57% 75%, 57% 73%, 58% 68%, 59% 67%, 59% 65%, 59% 64%, 59% 62%, 60% 60%, 60% 59%, 61% 58%, 61% 58%, 61% 57%, 62% 55.75%, 67% 54.25%, 70% 53.5%, 73% 52%, 75% 50.75%, 77.5% 50%, 78% 50%, 79.5% 49%, 79.5% 48.75%, 82.5% 47.75%, 83% 47.9%, 84% 48%, 86.25% 49%, 88% 49.5%, 90% 51%, 89% 49%, 88% 48%, 86% 47%, 84% 46%, 83% 46%, 83.5% 45.5%, 85% 45.5%, 88% 46%, 89% 46.5%, 90% 47%, 91% 48%, 91% 49%, 91.5% 47%, 91.5% 47%, 91% 46%, 89% 44.75%, 86% 44%, 83.5% 43.75%, 83% 43.25%, 84.15% 42.75%, 86% 42.75%, 89% 43.65%, 90% 43.75%, 91% 43.75%, 92% 44.25%, 92.5% 45%, 92.5% 46.5%, 93.5% 44%, 92.75% 43%, 90% 41.75%, 88% 40.5%, 85% 39.5%, 84% 39.5%, 82% 39.75%, 81% 40%, 80% 40%, 79% 40.5%, 78% 41%, 77% 41.25%, 76% 41.35%, 74.5% 42.25%, 72% 43%, 69.5% 44%, 70% 43%, 70.5% 42%, 71% 41%, 71.75% 40%, 72% 39%, 71.75% 38%, 71.5% 37%, 72% 36%, 72.2% 35%, 72.5% 33%, 73.25% 32%, 74% 31%, 74% 31%, 75% 30%, 76.5% 28.5%, 78% 30%, 78.5% 30.5%, 79.2% 29%, 79.5% 28%, 79.6% 26%, 79.25% 25%, 79.1% 24%, 80% 23%, 80.2% 22%, 80% 21%, 81% 21%, 81.35% 20.35%, 80.95% 19.75%, 80.5% 19.25%, 80.4% 19%, 80.5% 18.7%, 80.65% 16%, 80.5% 15%, 79.75% 13%, 78.75% 11%, 78% 10%, 76.75% 9%, 74% 7%, 73% 6.25%, 71% 5.35%, 69% 5%, 68% 5%, 67% 5.5%, 66% 6%, 65% 7%, 64.75% 7.5%, 64.5% 7.75%, 64% 7.5%, 63.25% 7.2%, 62% 7%, 61.25% 7.5%, 60.5% 8%, 59.5% 9%, 58.5% 9.5%, 57.5% 9.2%, 56% 9.35%, 55% 9.5%, 52% 9%, 50% 8.9%, 47% 9%, 44% 9.2%, 42.5% 9.65%, 41% 9.25%, 40.5% 9.25%, 39.5% 9.25%, 38.5% 10%, 36.5% 12%, 35.25% 13%, 34% 15%, 33.75% 17%, 33.25% 18%, 32.5% 20%, 30.5% 22%, 29.5% 23%, 27.25% 25%, 27% 25.25%, 25.75% 26%, 24.7% 27%, 23.8% 28%, 23% 28.6%, 22.25% 29.2%, 20.7% 30.8%, 20.1% 31.5%, 20% 32%, 19% 33%, 18% 35%, 17.25% 36%, 17% 37%, 17% 41%, 18% 46%, 18% 49%, 18% 50%, 18% 51%, 19% 57%, 19% 53%, 19% 55%, 18.7% 57%, 18.6% 59%, 19% 61%, 19% 62%, 19.5% 65%, 19.7% 68%, 19.6% 70%, 19.5% 71%, 18% 73%, 17% 74%, 15% 75%, 14% 76%, 12% 77%, 11% 78%, 10% 79%, 9% 80%, 8% 81%, 7% 83%, 7% 84.5%, 8.3% 83%, 9.3% 82%, 10.75% 81%, 12.2% 80%, 14% 79%, 15% 78%, 17% 77.2%, 18% 77.25%, 17.5% 78%, 16.5% 79%, 15.25% 80%, 14.5% 81%, 13.5% 82%, 13% 83%, 12.25% 84%, 11.7% 85%, 11% 86%, 11% 86%, 9.27% 88%, 9% 89%, 9% 90%, 10% 89%, 11.55% 88%, 12.5% 87%, 13.5% 86%, 15.3% 84%, 16% 83%, 18% 81%, 20% 80%, 19.75% 81%, 19.5% 81.25%, 19% 82%, 18% 84%, 16.7% 86%, 15.7% 87%, 15% 88%, 15% 89%, 16% 88%, 18% 87%, 19% 86%, 20% 84%, 21% 83.25%, 22% 82%, 22% 82%, 23% 81%, 26% 76%, 29% 69%, 30% 61%, 29% 57%, 29% 56%, 29% 54%, 28.75% 51%, 29% 48%, 28.8% 46%, 29% 44%, 29.6% 43.5%, 30% 41.5%, 29% 43%, 31% 41%, 32% 40%, 32.8% 39.25%, 34.5% 38.75%, 33.25% 45%, 33% 49%, 32% 53%, 31.8% 55%, 30.2% 59%, 29% 68%, 27% 74%, 25% 80%, 22.65% 85%, 19.85% 91%, 19.5% 93%, 18.25% 96%, 16.75% 100%);    
    animation: move-nosferatu 10s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) 0s infinite;
}

/*
.door:hover .nosferatu {
    animation-duration: 4s;
}
*/

@keyframes move-nosferatu {
      0% { left: -4vmin; }
     45% { left: 1.75vmin; }
     50% { bottom: 0; }
    100% { left: -4vmin; }
}





.frankenstein {
    width: 20vmin;
    height: 20vmin;
    left: -6.5vmin;
    bottom: -6.25vmin;
    opacity: 0.5;
    background: var(--house);
    box-sizing: border-box;
    clip-path: polygon(29% 87%, 31% 82%, 32% 82%, 38% 85%, 39% 83%, 41% 81%, 42% 79%, 46% 76%, 49% 68%, 49% 64%, 50% 59%, 51% 57%, 52% 55%, 52% 52%, 50% 51%, 49% 51%, 51% 48%, 52% 45%, 53% 42%, 54% 39%, 54% 38%, 53% 37%, 52% 38%, 51% 40%, 50% 40%, 48% 39%, 46% 37%, 45% 38%, 44% 38%, 43% 38%, 41% 42%, 40% 42%, 40% 40%, 41% 38%, 40% 39%, 38% 40%, 37% 42%, 36% 41%, 36% 41%, 36% 41%, 36% 41%, 35% 40%, 34% 40%, 34% 40%, 35% 38%, 38% 36%, 40% 35%, 43% 34%, 43% 33%, 45% 33%, 47% 32%, 47% 31%, 46% 30%, 43% 30%, 39% 30%, 37% 30%, 37% 32%, 36% 30%, 36% 28%, 36% 28%, 34% 27%, 31% 27%, 30% 27%, 28% 28%, 25% 27%, 24% 27%, 24% 26%, 23% 25%, 22% 25%, 22% 24%, 23% 23%, 23% 23%, 22% 22%, 22% 22%, 24% 22%, 26% 23%, 28% 23%, 29% 23%, 30% 23%, 31% 23%, 33% 24%, 35% 24%, 36% 23%, 37% 23%, 40% 23%, 45% 23%, 50% 23%, 53% 23%, 54% 21%, 55% 21%, 56% 21%, 58% 21%, 60% 21%, 60% 19%, 62% 19%, 62% 17%, 60% 17%, 59% 17%, 58% 16%, 58% 15%, 59% 14%, 58% 13%, 59% 13%, 59% 12%, 59% 11%, 58% 11%, 57% 11%, 57% 10%, 58% 9%, 58% 9%, 59% 8%, 59% 7%, 58% 7%, 58% 6%, 59% 5%, 59% 1%, 60% 0%, 61% 0%, 63% 0%, 64% 1%, 65% 1%, 66% 1%, 67% 2%, 68% 1%, 69% 3%, 70% 2%, 70% 2%, 71% 3%, 72% 3%, 73% 4%, 72% 5%, 72% 8%, 72% 10%, 70% 12%, 71% 14%, 69% 14%, 69% 15%, 69% 15%, 69% 15%, 70% 15%, 70% 16%, 69% 16%, 69% 15%, 68% 16%, 68% 16%, 69% 17%, 69% 17%, 69% 18%, 70% 19%, 72% 20%, 73% 21%, 74% 23%, 74% 24%, 74% 27%, 74% 31%, 74% 34%, 73% 38%, 73% 42%, 73% 45%, 73% 47%, 73% 49%, 73% 50%, 73% 51%, 73% 53%, 73% 54%, 74% 56%, 74% 56%, 72% 57%, 71% 57%, 71% 58%, 70% 61%, 70% 63%, 70% 64%, 71% 66%, 71% 68%, 71% 70%, 70% 71%, 71% 74%, 72% 77%, 73% 81%, 75% 86%, 76% 88%, 76% 89%, 77% 90%, 77% 91%, 77% 93%, 76% 93%, 76% 97%, 72% 98%, 66% 99%, 60% 100%, 59% 98%, 59% 96%, 59% 95%, 59% 94%, 60% 94%, 62% 93%, 64% 93%, 65% 92%, 65% 92%, 64% 91%, 64% 90%, 64% 89%, 64% 87%, 64% 85%, 64% 84%, 63% 82%, 62% 80%, 62% 78%, 61% 76%, 60% 73%, 60% 71%, 58% 73%, 55% 78%, 54% 80%, 52% 84%, 52% 86%, 51% 88%, 49% 89%, 48% 90%, 48% 91%, 46% 94%, 44% 96%, 44% 96%, 43% 96%, 42% 96%, 37% 93%, 31% 90%, 29% 88%);
    animation: move-frankenstein 8s ease 0s infinite alternate;
    transform-origin: 50% 100%;
}

@keyframes move-frankenstein {
    0% { left: -6.5vmin;  }
    20%, 60%, 80% { transform: rotate(5deg)}
    0%, 40%, 70% { transform: rotate(-5deg)}
    45% { left: -5.5vmin; }
    50% { bottom: -5vmin; }
    100% { left: -6.5vmin; }
}






.door:hover .logs {
    transform: rotateX(-50deg) rotateY(-1deg) scaleY(0.8);
}


.logs {
    width: 100%;
    height: 100%;
    bottom: 0;
    transform: rotateX(-40deg) rotateY(-136deg) scaleY(0.8);
    transform-origin: 0 100%;
    transition: transform 1s var(--bounce) 0s;
    filter: contrast(0.99);
    pointer-events: none;
    left: -0.5vmin;
}



.logs span {
    width: 2vmin;
    height: 70%;
    bottom: 0.5vmin;
    background: var(--house);
    left: 1vmin;
    transform: skewY(12deg);
    box-shadow: 8vmin -2.5vmin 0 0 var(--house);
}


.logs span + span {
    width: 1.6vmin;
    left: 3.1vmin;
    bottom: 0.75vmin;
    transform: skewY(-6deg);
    box-shadow: 4vmin 0.75vmin 0 0 var(--house);
}

.logs span + span + span {
    width: 1.75vmin;
    left: 5.1vmin;
    bottom: 1.25vmin;
    transform: skewY(20deg);
    box-shadow: 5.75vmin -1.5vmin 0 -0.25vmin var(--house), -5.75vmin 2.95vmin 0 -0.25vmin var(--house);
}



.logs:before, .logs:after {
    content: "";
    position: absolute;
    background: var(--house);
    width: 100%;
    height: 2vmin;
    bottom: 2vmin;
    transform: skew(-31deg, -3deg);
    left: -0.25vmin;
    box-shadow: -5vmin -8.5vmin 0 0 var(--house);
}

.logs:after {
    width: 12vmin;
    height: 2.5vmin;
    bottom: 6.25vmin;
    transform: skew(13deg, 13deg);
    left: 0.65vmin;
    box-shadow: none;
}










.bat + .chimney {
    left: 24.5vmin;
    top: -19.65vmin;
    transform: rotateY(180deg) rotateZ(29deg);
    transform-origin: -20% 120%;
    z-index: -1;
    width: 6vmin;
    transition: transform 0.25s var(--bounce) 0s;
}




.bat + .chimney:after {
    border-radius: 5vmin 0vmin 8vmin;
}







.flying-bat {
    position: absolute;
    width: 15vmin;
    height: 14vmin;
    bottom: 27vmin;
    left: 12vmin;
    z-index: 1;
}

.flying-bat:hover + .fence .bat {
    animation: bat-fly 4s linear 0s infinite; 
}

.flying-bat:hover + .fence .chimney {
    transform: rotateY(180deg) rotateZ(22deg); 
    transition: transform 1s var(--bounce) 0s;
}












.phantom {
    background: 
    radial-gradient(circle at 64% 23%, #0e1d24 0.25vmin, #fff0 calc(0.25vmin + 1px)),
    radial-gradient(circle at 35% 25%, #0e1d24  0.25vmin, #fff0 calc(0.25vmin + 1px)), #ffffff10;
    width: 3vmin;
    height: 5vmin;
    border-radius: 2vmin 2vmin 0 0;
    left: 1vmin;
    top: 1vmin;
    transform: skew(10deg, -10deg);
    clip-path: polygon(1% 99%, 0% 1%, 99% 0%, 100% 99%, 94% 99%, 90% 96%, 88% 92%, 85% 90%, 82% 88%, 81% 90%, 79% 93%, 78% 96%, 78% 100%, 72% 99%, 71% 95%, 71% 93%, 68% 90%, 64% 87%, 63% 86%, 61% 89%, 60% 91%, 59% 92%, 58% 93%, 57% 96%, 55% 97%, 53% 98%, 50% 95%, 49% 92%, 49% 91%, 48% 89%, 45% 86%, 43% 85%, 40% 89%, 40% 90%, 39% 92%, 38% 95%, 37% 96%, 34% 97%, 31% 98%, 30% 95%, 29% 93%, 29% 92%, 28% 90%, 25% 87%, 22% 87%, 20% 88%, 20% 90%, 19% 93%, 19% 95%, 18% 96%, 16% 98%, 14% 99%, 13% 97%, 11% 97%, 11% 95%, 10% 93%, 8% 93%, 5% 96%, 4% 97%, 4% 99%, 4% 99%, 0% 100%);
    animation: move-phantom 2s ease 0s infinite alternate;
}

@keyframes move-phantom {
    0% { left: 0.5vmin; transform: skew(10deg, -10deg) }
    20%, 60%, 80% { transform: rotate(8deg) skew(10deg, -10deg); }
    0%, 40%, 70% { transform: rotate(-7deg) skew(10deg, -10deg); }
    45% { left: 3.5vmin; }
    50% { bottom: -5vmin; }
    100% { left: 0.5vmin; transform: skew(10deg, -10deg) }
}



.phantom + .phantom {
    transform: skew(-7deg, 9deg) rotateY(180deg);
    animation-delay: -1s;
    animation-direction: reverse;
    animation-duration: 2.1;
    margin-top: -0.25vmin;
    width: 2.5vmin;
    height: 5.5vmin;
}


.roof-0 .window:hover {
    /*
    --window: #e8ff0099;
    --window: #ffd5a0;
    --light: #fff5ce;
    */
    animation: light-on 0.75s linear 0s 1;
    animation-fill-mode: forwards;
}

.roof-0 .window:hover .phantom {
    opacity: 0.05;

}




.tomb:hover {
    transform: rotateX(12deg) skew(-11deg, 20deg) rotateX(-13deg);
    transform: rotateX(12deg) skew(-19deg, 25deg) rotateX(-13deg);
    transform-origin: 50% 100%;
}




.zombie-hand {
    width: 5vmin;
    height: 8vmin;
    left: 12.75vmin;
    bottom: -2vmin;
    clip-path: polygon(24% 99%, 30% 77%, 32% 69%, 33% 66%, 34% 60%, 32% 56%, 27% 54%, 25% 52%, 22% 44%, 22% 39%, 21% 37%, 16% 36%, 15% 38%, 11% 38%, 6% 36%, 5% 34%, 7% 32%, 10% 32%, 12% 31%, 14% 31%, 16% 32%, 20% 32%, 25% 33%, 28% 33%, 29% 32%, 30% 30%, 28% 28%, 25% 27%, 23% 27%, 20% 27%, 17% 27%, 16% 26%, 17% 24%, 18% 22%, 19% 20%, 24% 20%, 28% 21%, 33% 22%, 35% 24%, 36% 27%, 38% 28%, 42% 26%, 42% 24%, 41% 21%, 38% 20%, 33% 17%, 31% 16%, 28% 16%, 26% 15%, 27% 12%, 29% 11%, 33% 12%, 36% 12%, 37% 13%, 39% 13%, 42% 15%, 45% 17%, 48% 19%, 49% 20%, 50% 23%, 53% 25%, 53% 23%, 53% 21%, 52% 18%, 52% 16%, 52% 14%, 48% 12%, 46% 9%, 44% 6%, 45% 5%, 48% 4%, 49% 4%, 52% 5%, 54% 7%, 58% 9%, 59% 10%, 60% 11%, 61% 13%, 63% 17%, 64% 18%, 66% 19%, 67% 21%, 67% 23%, 67% 25%, 66% 29%, 66% 32%, 68% 34%, 68% 35%, 70% 37%, 72% 37%, 74% 34%, 76% 33%, 77% 32%, 76% 31%, 76% 30%, 77% 27%, 81% 23%, 85% 21%, 88% 21%, 92% 21%, 93% 21%, 94% 21%, 94% 22%, 92% 24%, 92% 25%, 91% 27%, 90% 28%, 92% 29%, 92% 30%, 93% 31%, 94% 33%, 94% 34%, 91% 35%, 89% 36%, 88% 38%, 85% 39%, 84% 42%, 84% 43%, 83% 45%, 80% 47%, 75% 48%, 72% 50%, 68% 53%, 66% 56%, 64% 61%, 64% 65%, 63% 69%, 64% 73%, 64% 76%, 66% 99%);
    background: var(--house);
    transform-origin: 75% 100%;
    transform: rotate(10deg);
    transition: bottom 1s ease 0s;
}

.tomb:hover + .zombie-hand {
    animation: move-zombie 0.25s ease 0s infinite;
    animation-fill-mode: forwards;
    bottom: 5.25vmin;
    transition: bottom 3s ease 0.25s;
}

@keyframes move-zombie {
    0%, 50%, 100% { left: 12.75vmin;} 
    50% { margin-bottom: 0.15vmin;}  
    25%, 75% { left: 12.85vmin;}
}



.tomb:hover + .zombie-hand + .stones:before,
.tomb:hover + .zombie-hand + .stones:after {
    content: "";
    position: absolute;
    width: 0.5vmin;
    height: 0.75vmin;
    top: 0vmin;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: var(--house);
    animation: move-stone-1 2s ease-out 0s;
    animation-fill-mode: forwards;
}

.tomb:hover + .zombie-hand + .stones:after {
    animation: move-stone-2 2s ease-out 0.5s;
    animation-fill-mode: forwards;
    transform: rotateZ(180deg);
}



.tomb:hover + .zombie-hand + .stones {
    bottom: 3vmin;
}

.stones {
    right: 1.75vmin;
    bottom: -6vmin;
    width: 8vmin;
    height: 8vmin;
    /*background: #0f02;*/
    transform: rotate(45deg);
    transition: bottom 1.5s ease 0s;
    border-radius: 0 5vmin;
    z-index: -3;
    pointer-events: none;
}

@keyframes move-stone-1 {
    10% { top: 1vmin; left: 0.25vmin;}
    20% { top: 2vmin; left: 0.5vmin; }
    30% { top: 3vmin; left: 1vmin; }
    50% { top: 5vmin; left: 2.5vmin; transform: rotate(0deg); }
    60%, 100% { top: 6vmin; left: 2.5vmin; transform: rotate(30deg);}
}

@keyframes move-stone-2 {
    10% { left: 1vmin;}
    20% { left: 2vmin; }
    30% { left: 3vmin; top: 0.75vmin; }
    50% { left: 5vmin; top: 2.25vmin; transform: rotate(0deg); }
    60%, 100% { left: 5.25vmin; top: 4.5vmin; transform: rotate(30deg);}
}


























/**** BAT CAT *****/


.bat-cat {
    width: 80vmin;
    height: 40vmin;
    animation: fly-move 1s ease 0s 1;
    z-index: 2;
    transform: scale(0.2);
    left: 18vmin;
    top: 12vmin;
}

@keyframes fly {
    25% { transform: translateX(1vmin) scale(0.2); }
    33% { margin-top: -1vmin; }
    0%, 50%, 100% { transform: translateX(0vmin) scale(0.2); }
    66% { margin-top: 1vmin; }
    75% { transform: translateX(2vmin) scale(0.2); }
}

@keyframes fly-move {
    25% { transform: translateX(-0.5vmin) scale(0.2); }
    53% { margin-top: 0.5vmin; }
    86% { margin-top: -0.5vmin; }
    75% { transform: translateX(0.5vmin) scale(0.2); }
}

.bat-cat * {
    position: absolute;
    box-sizing: border-box;
}

.balcony:hover + .bat-cat {
    animation: fly 1.5s ease 0s infinite;
}


.bat-cat .body {
    width: 20vmin;
    height: 20vmin;
    background: var(--black);
    border-radius: 1vmin 100%;
    top: 15vmin;
    left: 30vmin;
    transform: rotate(45deg) skew(-5deg, -5deg);
    box-shadow: 1vmin -0.15vmin 0 0 var(--gray) inset;
    z-index: 2;
    transition: all 1s ease 0s;
    border-radius: 8vmin 100%;
    top: 16.5vmin;
}



.balcony:hover + .bat-cat .body {
    border-radius: 1vmin 100%;
    top: 15vmin;
}

.bat-cat .head {
    width: 14vmin;
    height: 13vmin;
    background: var(--black);
    border-radius: 90% 90% 100% 100%;
    top: 7.25vmin;
    left: 33vmin;
    box-shadow: 1.2vmin 0.5vmin 0 0 inset var(--gray);
    z-index: 3;
}

.bat-cat .head:before,
.bat-cat .head:after {
    content: "";
    position: absolute;
    width: 3.75vmin;
    height: 4.25vmin;
    background: radial-gradient(circle at 60% 50%, #000 1.15vmin, #fff0 calc(1.15vmin + 1px)), #fff;
    border-radius: 100%;
    top: 5vmin;
    left: 2.15vmin;
    transform: rotate(-10deg);
}

.bat-cat .head::after {
    transform: rotate(10deg) rotateY(180deg);
    left: 8vmin;
}

.ears {
    width: 18.25vmin;
    height: 15vmin;
    left: 31vmin;
    top: 2vmin;
}

.ears:before,
.ears:after {
    content: "";
    position: absolute;
    width: 13vmin;
    height: 13vmin;
    left: -2.1vmin;
    top: 1.5vmin;
    background: var(--black);
    border-radius: 0.5vmin 100%;
    transform: skew(-5deg, -5deg) rotate(19deg);
    box-shadow: 1.25vmin -0.2vmin 0 0 var(--gray) inset;
}

.ears:after {
    left: 7vmin;
    transform: rotate(69deg) skew(-5deg, -5deg);
    box-shadow: 0.125vmin -1.5vmin 0 0 var(--gray) inset;

}

.bat-cat .wings {
    width: 80vmin;
    height: 40vmin;
    z-index: -1;
}

.bat-cat .wing {
    background: #ffc10700;
    width: 40vmin;
    height: 23vmin;
    top: 8vmin;
    transform-origin: 90% 50%;
    /*animation: fly-right 1.5s ease 0s infinite;*/
    opacity: 1;
    
    animation: stop-fly-right 1s linear 0s 1;
    animation-fill-mode: forwards;

}

.bat-cat .wing + .wing {
    transform: rotateY(180deg);
    left: 7vmin;
    animation: stop-fly-left 1s linear 0s 1;
    /*animation-name: fly-left;*/
    animation-fill-mode: forwards;
}



.balcony:hover + .bat-cat .wing {
    /*animation: stop-fly 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1;*/
    /*animation-fill-mode: forwards;*/
    opacity: 1;
    transition: opacity 0.5s ease 0s;
    animation: fly-right 0.15s ease 0s infinite;
}

.balcony:hover + .bat-cat .wing + .wing {
    animation-name: fly-left;
}


@keyframes fly-right {
    49% { transform: rotate(-25deg); }    
}

@keyframes fly-left {
    51% { transform: rotateY(180deg) rotate(-25deg); }  
}








@keyframes stop-fly-right {
    90% { opacity: 1;}
   100% { transform: rotateZ(-90deg) scaleX(0.5) scaleY(0.75); opacity: 0; }
}

@keyframes stop-fly-left {
    90% { opacity: 1;}
   100% { transform: rotateY(180deg) rotateZ(-90deg) scaleX(0.5) scaleY(0.75); opacity: 0; }
}








.finger {
    border-radius: 3vmin 5vmin;
    width: 0vmin;
    height: 22vmin;
    background: #f002;
    transform: rotate(68deg);
    top: -6vmin;
    left: 11vmin;
    border: 0.85vmin solid var(--black);
    background: var(--black);
    z-index: 2;
}

.finger + .finger {
    transform: rotate(28deg);
    top: 0vmin;
    left: 16vmin;
    height: 19vmin;
}

.finger + .finger + .finger {
    transform: rotate(-9deg);
    top: 0vmin;
    left: 23vmin;
    height: 23vmin;
}

.finger + .finger + .finger + .finger {
    transform: rotate(-50deg);
    top: -3.75vmin;
    left: 29vmin;
    height: 23vmin;
}

.finger:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.85vmin solid var(--black);
    border-radius: 100%;
}







.membrane {
    background: radial-gradient(circle at 38% 126%, #fff0 10vmin, var(--dark) calc(10vmin + 1px));
    width: 13vmin;
    height: 20vmin;
    transform: rotate(29deg);
    left: 5vmin;
    top: -3vmin;
    clip-path: polygon(100% 0%, 0% 80%, 100% 93%);
}

.membrane + .membrane {
    left: 16vmin;
    transform: rotate(30deg) rotateY(180deg);
    top: 3.5vmin;
}

.membrane + .membrane + .membrane {
    left: 24.5vmin;
    transform: rotate(-8deg) rotateY(180deg);
    top: 2.5vmin;
    clip-path: polygon(97% 0%, -50% 100%, 100% 100%);
    background: radial-gradient(circle at 70% 141%, #fff0 10vmin, var(--dark) calc(10vmin + 1px));
}






.bat-cat .leg {
    height: 5vmin;
    background: var(--black);
    box-shadow: 0.75vmin 0 0 0 var(--gray) inset;
    transition: all 0.4s ease 0.25s;
    width: 6vmin;
    border-radius: 1vmin 1vmin 2.5vmin 2.5vmin;
    left: 34vmin;
    top: 32.5vmin;
    z-index: 1;
    transform: rotate(5deg);
}

.bat-cat .leg + .leg {
    border-radius: 2vmin 1vmin;    
    left: 41vmin;
    transform: rotate(-5deg);
}


.balcony:hover + .bat-cat .leg {
    z-index: 1;
    width: 2vmin;
    height: 5vmin;
    background: var(--black);
    top: 35vmin;
    left: 37vmin;
    transform: rotate(15deg);
    border-radius: 1vmin 2vmin;
    box-shadow: 0.75vmin 0 0 0 var(--gray) inset;
    transition: all 0.4s ease 0.25s;
}

.balcony:hover + .bat-cat .leg + .leg {    
    left: 41vmin;
    border-radius: 2vmin 1vmin;
    transform: rotate(-13deg);
}


.bat-cat .leg:before {
    content: "";
    width: 2vmin;
    height: 4vmin;
    background: var(--black);
    top: 3.25vmin;
    transform-origin: 50% 0;
    left: -0.35vmin;
    border-radius: 1vmin 3vmin 3vmin 1vmin;
    border-left: 1.1vmin solid var(--gray);
    transition: all 0.4s ease 0.25s;
    position: absolute;
    transform: rotate(-160deg); 
    opacity: 0;
}

.bat-cat .leg + .leg:before {
    top: 3.25vmin;
    left: 0.25vmin;
    transform: rotate(18deg);
    border-radius: 3vmin 1vmin 1vmin 3vmin;
    border-left: 0;
    background: var(--gray);
    border-right: 1.35vmin solid var(--black);
    border-top: 1px solid var(--black);
}

.balcony:hover + .bat-cat .leg:before {
    transform: rotate(-25deg);
    opacity: 1;
    width: 1vmin;
}

.balcony:hover + .bat-cat .leg + .leg:before {
    transform: rotate(18deg);
}



.tail {
    width: 10vmin;
    height: 11vmin;
    border-radius: 1vmin 9vmin;
    left: 30vmin;
    top: 24vmin;
    transform: rotate(23deg);
    transform-origin: 100% 100%;
    border: 1vmin solid #fff0;
    border-bottom: 1vmin solid var(--black);
    border-left: 1.55vmin solid var(--black);
    filter: drop-shadow(-0.25vmin 0vmin 0px var(--gray)) drop-shadow(-0.25vmin 0vmin 0px var(--gray));
    z-index: 1;
    left: 25vmin;
    animation: tail-move 3s ease 0s infinite alternate;
    transition: all 0.4s ease 0.5s;
}

.tail:before {
    content: "";
    width: 2vmin;
    height: 2vmin;
    background: var(--black);
    border-radius: 3vmin 1vmin;
    left: -1.75vmin;
    top: -1.125vmin;
    transform: rotate(-36deg);
}

.balcony:hover + .bat-cat .tail {
    left: 30vmin;
    animation: none;
    transition-delay: 0s;
}

@keyframes tail-move {
    20% { transform: rotate(21deg); }
    72% { transform: rotate(25deg); }
    
}

/******* BAT CAT ******/
















.shining {
    /* background: red; */
    width: 28.75vmin;
    height: 2vmin;
    left: -28.8vmin;
    top: 0.015vmin;
    transform: rotate(-49.3deg);
    transform-origin: 100% 0;
    border-radius: 0 0 2.5vmin 500%;
    box-shadow: 0.5vmin 0.5vmin 0.5vmin 0 #fff2 inset;
}


.door + .shining {
    transform: rotate(-90deg);
    filter: blur(2px);
    width: 21.5vmin;
    left: -21.5vmin;
}

.level-1 .shining {
    transform: rotate(-91deg);
    filter: blur(4px);
}

.level-2 .shining {
    transform: rotate(-91deg);
    filter: blur(5px);
}