/* The same live rain film continues through the entrance and the homepage. */
#entry-gate {
 position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;
 margin:0;padding:0;overflow:hidden;color:#fff;background:transparent;
}
#entry-gate::backdrop {background:rgba(2,5,8,.42);backdrop-filter:none;transition:background 1.5s ease;}
#entry-gate::before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 10%,#02050750 100%);opacity:.65;transition:opacity 1.5s;}
.entry-prompt {position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);text-align:center;width:min(86vw,440px);text-shadow:0 2px 22px #0009;}
#entry-heading {font:400 11px/1.5 var(--sans);letter-spacing:.35em;padding-left:.35em;outline:0;opacity:.72;}
#entry-description {margin-top:23px;font:400 13px/1.8 var(--serif);letter-spacing:.12em;}
.entry-options {display:flex;justify-content:center;align-items:center;gap:30px;margin-top:40px;}
.entry-options button {position:relative;display:grid;place-items:center;min-width:94px;min-height:64px;color:#fff;font:400 27px/1 var(--sans);letter-spacing:.14em;text-indent:.14em;background:none;border:0;transition:opacity .35s;}
.entry-options button::after {content:'';position:absolute;bottom:4px;left:20px;right:20px;height:1px;background:#ffffffa6;transform:scaleX(0);transition:transform .4s;}
.entry-options button:is(:hover,:focus-visible)::after {transform:scaleX(1);}
.entry-options button:focus-visible {outline:1px dashed #dce6ec;outline-offset:6px;}
.entry-options>span {font:13px var(--sans);opacity:.3;}
.entry-note {position:absolute;inset:auto 24px max(42px,env(safe-area-inset-bottom));text-align:center;font:10px/1.8 var(--sans);letter-spacing:.06em;color:#c1c8cc;}
.entry-brand {position:fixed;width:var(--entry-logo-width);height:auto;left:var(--entry-logo-x);top:var(--entry-logo-y);filter:brightness(0) invert(1);opacity:0;pointer-events:none;}
.entry-active .header,.entry-active .spatial-nav,.entry-active .experience-bottom,.entry-active #design-compare {opacity:0;pointer-events:none;}
.entry-active .installation-wordmark {opacity:0;}
.entry-active #water {filter:none;}
.entry-active.entry-revealing .header,.entry-active.entry-revealing .spatial-nav,.entry-active.entry-revealing .experience-bottom,.entry-active.entry-revealing #design-compare {opacity:1;transition:opacity .65s ease;}
.entry-active.entry-revealing .installation-wordmark {opacity:.95;transition:none;}
#entry-gate.is-falling::backdrop {background:rgba(2,5,8,.08);}
#entry-gate.is-falling::before {opacity:.15;}
#entry-gate.is-falling .entry-prompt h1,#entry-gate.is-falling .entry-prompt>p,#entry-gate.is-falling .entry-options>span,#entry-gate.is-falling .entry-note,#entry-gate.is-falling .entry-options button:not(.is-selected) {opacity:0;transition:opacity .4s;}
#entry-gate.is-falling .entry-options button.is-selected {animation:choice-to-water .34s cubic-bezier(.5,0,.8,.4) both;}
#entry-gate.is-falling .entry-options button::after {display:none;}
#entry-gate.is-falling .entry-brand {animation:entry-logo 1.5s cubic-bezier(.33,0,.25,1) 1.1s both;}
#entry-gate.is-revealing::backdrop {background:transparent;transition-duration:.65s;}
#entry-gate.is-revealing::before {opacity:0;}
#entry-gate.is-revealing .entry-brand {animation:none;opacity:0;}
@keyframes choice-to-water {0%{opacity:1;transform:scale(1);filter:blur(0)}65%{opacity:.75}100%{opacity:0;transform:scale(.055,.1);filter:blur(1px)}}
@keyframes entry-logo {0%{opacity:0;filter:brightness(0) invert(1) blur(10px)}35%{opacity:.46;filter:brightness(0) invert(1) blur(4px)}75%{opacity:.86;filter:brightness(0) invert(1) blur(.6px)}100%{opacity:.95;filter:brightness(0) invert(1) blur(0)}}
@media(max-width:760px){.entry-prompt{top:42%}.entry-options{gap:22px;margin-top:34px}.entry-options button{font-size:25px;min-width:88px}.entry-note{font-size:10px;bottom:max(35px,env(safe-area-inset-bottom))}}
@media(orientation:landscape) and (max-height:540px){.entry-prompt{top:42%}#entry-description{margin-top:10px}.entry-options{margin-top:10px}.entry-note{bottom:16px}}
@media(prefers-reduced-motion:reduce){#entry-gate,#entry-gate::backdrop,#entry-gate::before,.entry-options button,.entry-options button::after{transition:none}}

/* A quiet sequence of entrances follows the focus of the intact wordmark. */
.entry-active.entry-revealing .spatial-nav {transition:none;}
.entry-active.entry-revealing .spatial-nav :is(button,a) {animation:entry-link .55s cubic-bezier(.2,.7,.2,1) calc(var(--entry-order,0)*.05s) both;}
.spatial-nav>:nth-child(1) {--entry-order:0;}
.spatial-nav>:nth-child(2) {--entry-order:1;}
.spatial-nav>:nth-child(3) {--entry-order:2;}
.spatial-nav>:nth-child(4) {--entry-order:3;}
.spatial-nav>:nth-child(5) {--entry-order:4;}
.spatial-nav>:nth-child(6) {--entry-order:5;}
.spatial-nav>:nth-child(7) {--entry-order:6;}
.spatial-nav>:nth-child(8) {--entry-order:7;}
@keyframes entry-link {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
