#introFx{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    overflow:hidden;
    pointer-events:none;
}
.color-splash{
    position:absolute;
    width:100%;
    height:100%;
    background: radial-gradient(circle at center,
        rgba(255,0,150,0.5),
        rgba(0,200,255,0.4),
        rgba(255,255,0,0.3),
        transparent 70%);
    transform: scale(0);
    opacity:0;
}

.color-splash.show{
    animation: waterSpread 4s ease forwards;
}

@keyframes waterSpread{
    0%{
        transform: scale(0);
        opacity:0;
    }
    40%{
        transform: scale(1.2);
        opacity:1;
    }
    70%{
        transform: scale(1.5);
        opacity:0.9;
    }
    100%{
        transform: scale(2);
        opacity:0;
    }
}

.intro-image{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0.5);
    opacity:0;
}
.intro-image img{
    height:70vh;
}
.intro-image.show{
    animation: imageZoom 9s ease forwards;
}

@keyframes imageZoom{
      0%{
        transform:translate(-50%, -50%) scale(0.3)rotate(-180deg);
        opacity:.1;

    }
    10%{
        transform:translate(-50%, -50%) scale(0.7);
        opacity:.2;
    }
    30%{
        transform:translate(-50%, -50%) scale(1.1);
        opacity:1;
    }
    70%{
        transform:translate(-50%, -50%) scale(.9);
        opacity:1;
    }
    85%{
        transform:translate(-50%, -50%) scale(1);
        opacity:.9;
    }
       100%{
        transform:translate(-50%, -50%) scale(.5)rotate(2deg);
        opacity:0;
    }
    
}