/* The ETHOS square at work: spins, puts on glasses and headphones, opens a laptop and types.
   Use:  <span class="sqb" aria-hidden="true"><b class="sq"></b><u class="gear"><u class="gl"><s></s><s></s></u><u class="hp"></u><u class="lp"><b></b></u></u></span>
   Size it with font-size (the figure is about 0.23em wide). Animations start when the element is shown. */
.sqb{ position:relative; display:inline-block; width:.234em; height:.3em; font-size:150px; line-height:1; vertical-align:middle; transform-origin:.117em 100%;
  animation:sqbSpin .9s ease-in-out 1, sqbNod .46s 2.9s ease-in-out infinite; }
.sqb .sq{ position:absolute; left:.042em; bottom:.12em; width:.15em; height:.122em; background:#d6e630; }
.sqb u{ position:absolute; text-decoration:none; pointer-events:none; }
.sqb .gear{ left:0; right:0; bottom:.07em; height:.9em; }
.sqb .gl{ left:.042em; bottom:.1em; width:.15em; height:.07em; animation:sqbPop .45s .9s cubic-bezier(.3,1.6,.5,1) both; }
.sqb .gl s{ position:absolute; top:0; width:.064em; height:.064em; box-sizing:border-box; box-shadow:inset 0 0 0 .012em #0b1017; border-radius:50%; background:rgba(255,255,255,.8); text-decoration:none; }
.sqb .gl s:first-child{ left:0; } .sqb .gl s:last-child{ right:0; }
.sqb .gl s:after{ content:''; position:absolute; right:.009em; bottom:.007em; width:.019em; height:.019em; border-radius:50%; background:#0b1017; }
.sqb .gl:before{ content:''; position:absolute; left:.06em; top:.024em; width:.03em; height:.012em; background:#0b1017; }
.sqb .hp{ left:.007em; bottom:.1em; width:.22em; height:.12em; animation:sqbDrop .5s 1.5s cubic-bezier(.3,1.4,.5,1) both; }
.sqb .hp:before{ content:''; position:absolute; left:.012em; right:.012em; top:0; bottom:.02em; box-sizing:border-box; border:.016em solid #f2efe6; border-bottom:0; border-radius:.11em .11em 0 0; }
.sqb .hp:after{ content:''; position:absolute; left:0; right:0; bottom:-.035em; height:.07em; background:linear-gradient(90deg,#f2efe6 0 .04em,transparent .04em calc(100% - .04em),#f2efe6 calc(100% - .04em)); border-radius:.015em; }
/* the laptop sits in front of the square, seen from behind: the screen faces the square */
.sqb .lp{ z-index:2; left:.05em; bottom:-.012em; width:.14em; height:.09em; animation:sqbRise .6s 2.1s cubic-bezier(.2,.9,.3,1.2) both; }
.sqb .lp:before{ content:''; position:absolute; left:.012em; right:.012em; top:0; height:.07em; background:linear-gradient(160deg,#aeb6c2,#7d8795); border-radius:.008em; box-shadow:0 -.02em .05em rgba(214,230,48,.5); animation:sqbGlow 1.1s 2.7s ease-in-out infinite; }
.sqb .lp:after{ content:''; position:absolute; left:0; right:0; bottom:.008em; height:.016em; background:#c7cdd6; border-radius:0 0 .012em .012em; }
.sqb .lp b{ position:absolute; left:.062em; top:.027em; width:.016em; height:.016em; background:#d6e630; border-radius:50%; }
@keyframes sqbSpin{ from{ transform:perspective(.7em) rotateY(0); } to{ transform:perspective(.7em) rotateY(360deg); } }
@keyframes sqbNod{ 0%,100%{ translate:0 0; rotate:0deg; } 50%{ translate:0 .01em; rotate:2deg; } }
@keyframes sqbPop{ from{ transform:scale(0); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sqbDrop{ from{ transform:translateY(-.45em); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sqbRise{ from{ transform:translateY(.35em) scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sqbGlow{ 0%,100%{ box-shadow:0 -.015em .04em rgba(214,230,48,.3); } 50%{ box-shadow:0 -.025em .06em rgba(214,230,48,.65); } }
@media (prefers-reduced-motion:reduce){ .sqb,.sqb u,.sqb .lp:before{ animation:none !important; } }