#intro {
position: fixed;
inset: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.intro-logo svg {
width: 220px;
}
.logo-outline path {
fill: none;
stroke-width: 3;
stroke-dasharray: 1250;
stroke-dashoffset: 1250;
animation: drawLine 2s linear forwards;
}
.p1, .p2 {
stroke: #21409A;
}
.p3 {
stroke: #F79420;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
.intro-logo.active {
animation: zoomFill 1.5s forwards;
}
@keyframes zoomFill {
0% {
transform: scale(1);
}
60% {
transform: scale(8);
}
100% {
transform: scale(12);
opacity: 0;
}
}
.intro-hide {
animation: fadeOut 600ms ease forwards;
}
@keyframes fadeOut {
to {
opacity: 0;
visibility: hidden;
}
}