#sx-loader{
  position:fixed;inset:0;z-index:2147483600;
  display:flex;align-items:center;justify-content:center;
  background:#eceef2;
  transition:opacity .32s ease, visibility .32s ease;
}
#sx-loader.sx-done{opacity:0;visibility:hidden;pointer-events:none}

#sx-loader .sx-stage{
  position:relative;width:190px;height:64px;
  display:flex;align-items:center;justify-content:center;
}

/* Symbol grows in first, then hands over to the wordmark at roughly the size
   it settles at, so the two reads as one mark rather than a swap. */
#sx-loader .sx-sym{
  position:absolute;width:52px;height:52px;object-fit:contain;
  opacity:0;transform:scale(.45);
  animation:sxSymIn .62s cubic-bezier(.22,.9,.3,1) forwards,
            sxSymOut .34s ease .82s forwards;
}
#sx-loader .sx-word{
  position:absolute;max-width:186px;height:auto;object-fit:contain;
  opacity:0;transform:scale(.9);
  animation:sxWordIn .42s cubic-bezier(.22,.9,.3,1) 1.02s forwards;
}

@keyframes sxSymIn{ from{opacity:0;transform:scale(.45)} to{opacity:1;transform:scale(1)} }
@keyframes sxSymOut{ from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.18)} }
@keyframes sxWordIn{ from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

/* Grey in both schemes on purpose: the wordmark is navy artwork with no light
   variant, so a dark backdrop makes it almost invisible. */

/* Respect users who ask for less motion: show the wordmark, skip the sequence. */
@media (prefers-reduced-motion:reduce){
  #sx-loader .sx-sym{display:none}
  #sx-loader .sx-word{opacity:1;transform:none;animation:none}
}