#intro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: all;
background: white;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
transition: opacity var( --animation-transition-duration ) var( --animation-transition-easing ); }
#intro.animation {
--animation-transition-duration: 0.5s;
}
#intro.do-animate {
--animation-transition-duration: 0.25s;
opacity: 0;
}
#intro.is-hidden,
body:not( .needs-intro ) #intro__image {
display: none;
}
.intro-done #intro.do-animate {
transition-delay: 0s;
pointer-events: none;
}
#intro__animation {
--ratio: 1.4814814815;
width: 100%;
max-width: 70vh;
}
#intro__animation-inner {
position: relative;
width: 100%;
padding-top: calc( 100% / var( --ratio ) );
}
#intro__animation-inner > lottie-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}