#loader{position:fixed;inset:0;background:#fff;z-index:999;display:grid;place-items:center;transition:opacity .4s}#loader.done{opacity:0;pointer-events:none}
#loader span{width:46px;height:46px;border-radius:50% 50% 50% 0;background:var(--cyan);transform:rotate(-45deg);animation:drop 1s ease-in-out infinite alternate}
@keyframes drop{to{transform:rotate(-45deg) scale(.7);opacity:.5}}
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.rev.in{opacity:1;transform:none}
.hero h1,.hero p,.hero-btns{animation:rise .9s both}.hero p{animation-delay:.15s}.hero-btns{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.bubbles span{animation:float linear infinite}@keyframes float{to{transform:translateY(-130vh)}}
.hero::after{content:"";position:absolute;left:-10%;bottom:-1px;width:120%;height:70px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;animation:wave 6s ease-in-out infinite alternate}@keyframes wave{to{transform:translateX(4%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rev{opacity:1;transform:none}}

#loader{background:var(--ivory)}.rev{transition-duration:.9s}.hero h1,.hero p.lead,.hero-btns,.meta,.frame{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}.hero p.lead{animation-delay:.12s}.hero-btns{animation-delay:.24s}.meta{animation-delay:.36s}.frame{animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.frame .arch img,.hero-wave,.badge,.dock a::after{animation:none!important}}
.rev{transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}