/* One-second brand entrance when someone arrives on the site (not on clicks between pages).
   <head> adds .flow-enter (and .flow-enter-calm for reduced motion). The green screen shows from
   the first paint; the animation only starts once .flow-play is added, which happens after the
   page is visible and drawn, so Safari's background preloading cannot use up the second. */
.flow-entrance{display:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1000;overflow:hidden;isolation:isolate;background:#245f49;pointer-events:none}
.flow-enter .flow-entrance{display:grid;place-items:center;align-items:center;justify-items:center}
.flow-entrance .flow-silk{position:absolute;top:-15%;left:-15%;width:130%;height:130%;max-width:none;opacity:0;transform-origin:50% 50%}
.flow-entrance .flow-logo{position:relative;width:clamp(155px,21vw,285px);height:auto;max-width:none;opacity:0;filter:brightness(0) invert(1)}

/* Safety: if the start signal never arrives, the screen clears itself after 4 seconds. */
.flow-enter:not(.flow-play) .flow-entrance{animation:flow-safety 300ms ease 4s both}
@keyframes flow-safety{to{opacity:0;visibility:hidden}}

.flow-play .flow-entrance{animation:flow-reveal 1000ms cubic-bezier(.22,.61,.36,1) both}
.flow-play .flow-entrance .flow-silk{animation:flow-drape 1000ms cubic-bezier(.25,.1,.25,1) both}
.flow-play .flow-entrance .flow-logo{animation:flow-wordmark 1000ms cubic-bezier(.22,.61,.36,1) both;will-change:transform,opacity}
@keyframes flow-wordmark{0%,8%{opacity:0;transform:scale(.96)}38%,60%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1.035)}100%{opacity:0;transform:scale(1.055)}}
@keyframes flow-drape{0%{opacity:0;transform:translate3d(-2%,1.4%,0) scale(1.035) rotate(-2deg)}30%{opacity:.5}72%{opacity:.58}100%{opacity:.3;transform:translate3d(1.7%,-1%,0) scale(1.065) rotate(1deg)}}
@keyframes flow-reveal{0%,76%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

/* Reduced motion: the same green screen and logo, held still, then a plain fade. */
.flow-enter-calm .flow-entrance .flow-silk{opacity:.5}
.flow-enter-calm .flow-entrance .flow-logo{opacity:1}
.flow-play.flow-enter-calm .flow-entrance{animation:flow-reveal-calm 900ms ease both}
.flow-play.flow-enter-calm .flow-entrance .flow-silk,.flow-play.flow-enter-calm .flow-entrance .flow-logo{animation:none;transform:none}
@keyframes flow-reveal-calm{0%,60%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}