/* Start-up: the tiles fall into place, spell the name, and become the wordmark letter by letter. About 3.8 s: the tiles for 1.4 s, then the wordmark; a tap skips it. */
#splash{position:fixed;inset:0;z-index:9999;overflow:hidden;background:radial-gradient(circle at 50% 42%,#2A7A62 0,#1E6550 55%,#164C3D 100%);color:#F4EFE2;font-family:'Bricolage Grotesque',sans-serif;transition:opacity .35s ease}
#splash.out{opacity:0;pointer-events:none}
#splash .sp{position:absolute;left:50%;top:50%;width:390px;height:520px;margin:-260px 0 0 -195px}
#splash .tile{position:absolute;width:60px;height:72px;border-radius:10px;background:#FBF6EA;color:#1C2626;display:flex;align-items:center;justify-content:center;font-size:40px;line-height:1;box-shadow:0 4px 0 #E3D3B2,0 8px 0 #C2702C,0 14px 14px rgba(0,0,0,.35);animation:3.8s cubic-bezier(.3,1.2,.5,1) both}
#splash .tile small{position:absolute;right:7px;bottom:5px;font-size:13px;font-weight:800;color:#7A4513}
#splash .w{top:150px;font-weight:800;animation-name:sp-drop}
#splash .b{top:234px;font-weight:200;background:#F6EEDC;animation-name:sp-rise}
/* After 1.4 s each tile travels to its own letter in the wordmark (--x, --y, measured from the wordmark in this
   font) and shrinks away as the letter takes over in the same place: one logo, built from the tiles. */
@keyframes sp-drop{0%{transform:translateY(-640px) rotate(-14deg)}16.2%{transform:none}19.9%{transform:scale(1.06,.92)}23.6%,36.8%{transform:none;opacity:1}48%{transform:translate(var(--x),var(--y)) scale(.62);opacity:1}53%,100%{transform:translate(var(--x),var(--y)) scale(.5);opacity:0}}
@keyframes sp-rise{0%,10.3%{transform:translateY(600px) rotate(10deg)}26.5%{transform:none}30.2%{transform:scale(1.06,.92)}33.9%,36.8%{transform:none;opacity:1}48%{transform:translate(var(--x),var(--y)) scale(.62);opacity:1}53%,100%{transform:translate(var(--x),var(--y)) scale(.5);opacity:0}}
#splash .mark{position:absolute;left:0;right:0;top:146px;display:flex;flex-direction:column;align-items:center;line-height:.9;font-size:84px}
#splash .mark .lw,#splash .mark .lb{display:block;flex:none;gap:0;min-height:auto;white-space:nowrap}
#splash .mark .lw{font-weight:800;letter-spacing:-.02em;margin-right:.9em}
#splash .mark .lb{font-weight:200;margin-left:.2em}
#splash .mark i{display:inline-block;font-style:normal;animation:sp-ch 3.8s ease-out both}
@keyframes sp-ch{0%,45%{opacity:0;transform:scale(.8)}53%{opacity:1;transform:scale(1.05)}58%,100%{opacity:1;transform:none}}
#splash .spark{position:absolute;left:190px;top:240px;width:10px;height:10px;border-radius:2px;animation:sp-spark 3.8s ease-out both}
@keyframes sp-spark{0%,51%{opacity:0;transform:none}54%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(540deg)}}
@media (prefers-reduced-motion: reduce){#splash .tile,#splash .spark{display:none}#splash .mark i{animation:none}}