/* 0101 loader component. Pair with loader0101.js.
   While loading, the zero's three stair blocks ride a wave. On done():
     square layout  - the zero fades out and a 1 fades in over it
     inline layout  - the zero settles and a 1 fades in beside it, reading "01"
   Themes: default is for dark grounds; add --light, --mono-white or --mono-black. */
.ld0101{display:inline-block;width:1.6em;height:auto;vertical-align:middle;--ld-zero:#4fb3e8;--ld-one:#e6f3ff}
.ld0101--light{--ld-zero:#0a1a38;--ld-one:#1769c7}
.ld0101--mono-white{--ld-zero:#ffffff;--ld-one:#ffffff}
.ld0101--mono-black{--ld-zero:#000000;--ld-one:#000000}
.ld0101 .ld-zero{fill:var(--ld-zero);transition:opacity .45s ease .25s}
.ld0101 .ld-one{fill:var(--ld-one);opacity:0;transition:opacity .6s ease .35s}
.ld0101 .ld-stair rect{transform-box:fill-box;animation:ld0101-wave .7s ease-in-out infinite alternate}
.ld0101 .ld-stair rect:nth-child(1){animation-delay:-1.4s}
.ld0101 .ld-stair rect:nth-child(2){animation-delay:-1.11s}
.ld0101 .ld-stair rect:nth-child(3){animation-delay:-.82s}
@keyframes ld0101-wave{from{transform:translateY(-10.45px)}to{transform:translateY(10.45px)}}

/* done: the wave stops and the blocks settle into the logo's half-step stair */
.ld0101.is-done .ld-stair rect{animation:none;transition:transform .35s ease}
.ld0101.is-done .ld-stair rect:nth-child(1){transform:translateY(5.5px)}
.ld0101.is-done .ld-stair rect:nth-child(2){transform:translateY(0)}
.ld0101.is-done .ld-stair rect:nth-child(3){transform:translateY(-5.5px)}
.ld0101.is-done .ld-one{opacity:1}
.ld0101--square.is-done .ld-zero{opacity:0}

@media (prefers-reduced-motion:reduce){
  .ld0101 .ld-stair rect{animation:none}
  .ld0101 .ld-stair rect:nth-child(1){transform:translateY(5.5px)}
  .ld0101 .ld-stair rect:nth-child(3){transform:translateY(-5.5px)}
  .ld0101 .ld-zero,.ld0101 .ld-one,.ld0101.is-done .ld-stair rect{transition-duration:.01s;transition-delay:0s}
}