.site-intro{position:fixed;inset:0;z-index:10000;overflow:hidden;display:grid;place-items:center;background:#fff;color:#594D4D;font-family:inherit;pointer-events:auto;transition:opacity .8s ease-in-out}
.site-intro__phrase,.site-intro__name{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;font-weight:400;line-height:1.5}
.site-intro__phrase{font-size:70px;animation:intro-phrase-out .85s 3s ease-in-out forwards}
.site-intro__phrase span{display:inline-block;opacity:0;filter:blur(8px);animation:intro-letter .8s calc(1s + var(--i)*.065s) ease-out forwards}
.site-intro__name{font-size:60px;opacity:0;filter:blur(6px);animation:intro-name-in 1s 3.85s ease-out forwards}
@keyframes intro-letter{from{opacity:0;filter:blur(8px);translate:0 5px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes intro-phrase-out{to{opacity:0;filter:blur(6px)}}
@keyframes intro-name-in{to{opacity:1;filter:blur(0)}}
@keyframes intro-name-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(4px)}}
@keyframes intro-reveal{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(max-width:1000px){.site-intro__phrase{font-size:clamp(20px,5.4vw,70px)}.site-intro__name{font-size:clamp(36px,6vw,60px)}}
@media(prefers-reduced-motion:reduce){.site-intro{animation-delay:0s;animation-duration:.2s}.site-intro__phrase,.site-intro__name,.site-intro__bubbles,.site-intro__phrase span{animation:none}}



.site-intro.is-revealing{opacity:0;pointer-events:none}
.canvas.intro-droplet-stage{position:fixed;z-index:10001;pointer-events:none;background:none!important}
.site-intro__name.is-covered{animation:intro-name-out .65s ease-in-out forwards}

.intro-water-stream{position:fixed;inset:0;z-index:10001;overflow:hidden;pointer-events:none}
.intro-water-stream__carrier{position:absolute;top:0}
.intro-water-stream__drop{display:block;max-width:none}



.skip-intro .site-intro{display:none}

@media(max-width:768px){.site-intro__name{font-size:21px}}