#introFx{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    overflow:hidden;
    pointer-events:none;
}

/* canvas */
#fireworksCanvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

/* image */
.intro-image{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0.5);
    opacity:0;
    z-index:2;
}

.intro-image img{
    height:70vh;
}


.intro-image.show{
    animation: imageEntry 1.5s ease forwards;
}


.intro-image.blast{
    animation: imageBlast 0.8s ease forwards;
}
@keyframes imageBlast{
    0%{
        transform:translate(-50%, -50%) scale(1);
        opacity:1;
    }
    100%{
        transform:translate(-50%, -50%) scale(.5) rotate(0deg);
        opacity:0;
    }
}

@keyframes imageEntry{
    0%{
        transform:translate(-50%, -50%) scale(0.3);
        opacity:0;
    }
    60%{
        transform:translate(-50%, -50%) scale(1.1);
        opacity:1;
    }
    100%{
        transform:translate(-50%, -50%) scale(1);
        opacity:1; 
    }
}