/* A brief drop and splash dissolve directly into the page. */
.opening[hidden]{display:none!important}
.opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#f8faf7;opacity:1;touch-action:none;transition:opacity .75s ease,visibility .75s;outline:none}
.opening::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,#fff8,transparent 72%);pointer-events:none}
html[data-intro="pending"],html[data-intro="playing"],html[data-intro="leaving"]{overflow:hidden!important;overscroll-behavior:none}
html[data-intro="pending"] body,html[data-intro="playing"] body,html[data-intro="leaving"] body{overflow:hidden!important}
html[data-intro="pending"] .opening{display:grid!important}
.opening__scene{position:absolute;left:50%;top:43%;width:min(1080px,140vw,160svh);height:auto;max-width:none;overflow:visible;transform:translate(-50%,-50%);pointer-events:none}
.opening.is-playing .opening__scene{animation:opening-scene-away .18s ease .98s both}
.opening__zoom{transform-origin:450px 420px}
.opening.is-playing .opening__zoom{animation:opening-approach .8s ease-out both}
.opening__drop-flight{opacity:0}
.opening.is-playing .opening__drop-flight{animation:opening-fall .65s cubic-bezier(.42,0,.84,.52) both,opening-drop-presence .12s ease-out both}
.opening__drop-body,.opening__drop-fluid{transform-origin:0 126px}
.opening.is-playing .opening__drop-fluid{animation:opening-fluid .65s ease-in both}
.opening.is-playing .opening__drop-body{animation:opening-impact .34s cubic-bezier(.16,.75,.25,1) .65s both}
.opening__drop-river{fill:none;stroke:#f7fff8;stroke-width:5;stroke-linecap:round;opacity:.56}
.opening__crown{opacity:0;transform-origin:0 0}
.opening.is-playing .opening__crown{animation:opening-crown .4s ease-out .65s both}
.opening__spray{opacity:0;--from-x:0px;--peak-y:-150px;--land-x:0px;--turn:0deg;--size:.8;--delay:.66s;--flight:.4s}
.opening.is-playing .opening__spray{animation:opening-spray-x var(--flight) linear var(--delay) both,opening-spray-presence var(--flight) linear var(--delay) both}
.opening.is-playing .opening__spray-rise{animation:opening-spray-y var(--flight) linear var(--delay) both}
.opening.is-playing .opening__spray-form{animation:opening-spray-form var(--flight) linear var(--delay) both}
.opening__spray--one{--from-x:-38px;--peak-y:-104px;--land-x:-170px;--turn:-32deg;--size:.8}
.opening__spray--two{--from-x:34px;--peak-y:-118px;--land-x:181px;--turn:30deg;--size:.85;--delay:.68s}
.opening__spray--three{--from-x:0px;--peak-y:-154px;--land-x:24px;--turn:7deg;--size:.65;--delay:.65s;--flight:.43s}
.opening__ripple{fill:none;stroke:#badfe1;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;vector-effect:non-scaling-stroke}
.opening.is-playing .opening__ripple{animation:opening-ripple .55s ease-out .65s both}
.opening.is-playing .opening__ripple--two{animation-delay:.74s;stroke:#cce5df;stroke-width:1.5}
.opening.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.opening.is-quick{transition-duration:.16s}
#main:focus{outline:none}
@keyframes opening-approach{from{transform:scale(.9)}to{transform:scale(1.06)}}
@keyframes opening-fall{from{transform:translateY(-230px) rotate(-3deg)}to{transform:translateY(64px) rotate(0)}}
@keyframes opening-drop-presence{from{opacity:0}to{opacity:1}}
@keyframes opening-fluid{from{transform:scale(.99,1.01)}to{transform:scale(.94,1.065)}}
@keyframes opening-impact{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.55,.035)}}
@keyframes opening-crown{0%{opacity:0;transform:scale(.5,.18)}22%{opacity:.85;transform:scale(1,1)}100%{opacity:0;transform:scale(1.35,.12)}}
@keyframes opening-spray-x{from{transform:translateX(var(--from-x))}to{transform:translateX(var(--land-x))}}
@keyframes opening-spray-y{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.18,.65,.35,1)}46%{transform:translateY(var(--peak-y));animation-timing-function:cubic-bezier(.55,0,.8,.3)}100%{transform:translateY(14px)}}
@keyframes opening-spray-form{from{transform:rotate(0) scale(var(--size))}to{transform:rotate(var(--turn)) scale(.55,.7)}}
@keyframes opening-spray-presence{0%{opacity:0}14%,72%{opacity:.92}100%{opacity:0}}
@keyframes opening-ripple{0%{opacity:0;transform:scale(.45,.4)}16%{opacity:.7}100%{opacity:0;transform:scale(2.1,1.8)}}
@keyframes opening-scene-away{to{opacity:0}}
@media(max-width:600px){.opening__scene{width:145vw}}
@media(max-height:450px) and (min-width:601px){.opening__scene{top:35%;width:158svh}}
@media(prefers-reduced-motion:reduce){.opening{transition:opacity .16s ease}.opening.is-playing .opening__scene,.opening.is-playing .opening__zoom,.opening.is-playing .opening__drop-flight,.opening.is-playing .opening__drop-body,.opening.is-playing .opening__drop-fluid,.opening.is-playing .opening__crown,.opening.is-playing .opening__spray,.opening.is-playing .opening__spray-rise,.opening.is-playing .opening__spray-form,.opening.is-playing .opening__ripple{animation:none!important}}