/* The live [cruxdata] wordmark: IBM Plex Mono, aurora gradient and glow, typed
   in between the brackets once on page load. Same look as cruxdata.io's header
   and /brand/cruxdata-wordmark*.png (see CRUXDATA_BRAND.md section 1).

   Markup (size it with font-size on the element):
     <span class="cx-logo" role="img" aria-label="cruxdata"><span>[</span><i>c</i><i>r</i><i>u</i><i>x</i><i>d</i><i>a</i><i>t</i><i>a</i><span>]</span></span>
   Add cx-logo-dark on dark surfaces, cx-logo-auto to follow the OS theme, and
   cx-logo-still for the still logo (no typing, no gradient). html.dark (the dashboards' dark mode) switches
   it automatically. Reduced motion shows the still logo. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=block');

.cx-logo{
  --cx-logo-fill:radial-gradient(ellipse at 20% 50%,rgba(168,85,247,.9) 0%,transparent 50%),radial-gradient(ellipse at 80% 25%,rgba(6,182,212,.8) 0%,transparent 48%),radial-gradient(ellipse at 55% 85%,rgba(234,179,8,.75) 0%,transparent 48%),radial-gradient(ellipse at 38% 20%,rgba(59,130,246,.75) 0%,transparent 52%),hsl(245,65%,28%);
  --cx-logo-glow:hsla(265,85%,55%,.45);
  --cx-logo-ink:#0b0712;--cx-logo-l:#7c3aed;--cx-logo-r:#0e7490;
  display:inline-flex;justify-content:center;align-items:baseline;box-sizing:border-box;width:5.78em;padding:0 .04em;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-style:normal;letter-spacing:-.03em;line-height:1.15;white-space:nowrap;vertical-align:middle;
  background:var(--cx-logo-fill);background-size:160% 160%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 .1em var(--cx-logo-glow));animation:cx-logo-drift 9s ease-in-out infinite;
}
.cx-logo-dark,html.dark .cx-logo{
  --cx-logo-fill:radial-gradient(ellipse at 20% 50%,rgba(192,132,252,1) 0%,transparent 55%),radial-gradient(ellipse at 80% 25%,rgba(34,211,238,1) 0%,transparent 50%),radial-gradient(ellipse at 55% 85%,rgba(250,204,21,.95) 0%,transparent 50%),radial-gradient(ellipse at 38% 20%,rgba(96,165,250,1) 0%,transparent 55%),hsl(262,85%,72%);
  --cx-logo-glow:hsla(265,85%,60%,.6);
  --cx-logo-ink:#fff;--cx-logo-l:#a78bfa;--cx-logo-r:#22d3ee;
}
@media (prefers-color-scheme:dark){
  .cx-logo-auto{
    --cx-logo-fill:radial-gradient(ellipse at 20% 50%,rgba(192,132,252,1) 0%,transparent 55%),radial-gradient(ellipse at 80% 25%,rgba(34,211,238,1) 0%,transparent 50%),radial-gradient(ellipse at 55% 85%,rgba(250,204,21,.95) 0%,transparent 50%),radial-gradient(ellipse at 38% 20%,rgba(96,165,250,1) 0%,transparent 55%),hsl(262,85%,72%);
    --cx-logo-glow:hsla(265,85%,60%,.6);
    --cx-logo-ink:#fff;--cx-logo-l:#a78bfa;--cx-logo-r:#22d3ee;
  }
}
.cx-logo>span{font-weight:500;flex:none}
/* Each letter appears in turn: no width and not painted until its moment. */
.cx-logo>i{display:inline-block;flex:none;font-style:normal;animation:cx-logo-key .05s linear both}
.cx-logo>i:nth-child(2){animation-delay:.75s}
.cx-logo>i:nth-child(3){animation-delay:.88s}
.cx-logo>i:nth-child(4){animation-delay:1.01s}
.cx-logo>i:nth-child(5){animation-delay:1.14s}
.cx-logo>i:nth-child(6){animation-delay:1.27s}
.cx-logo>i:nth-child(7){animation-delay:1.4s}
.cx-logo>i:nth-child(8){animation-delay:1.53s}
.cx-logo>i:nth-child(9){animation-delay:1.66s}
@keyframes cx-logo-key{0%{max-width:0;visibility:hidden}1%,100%{max-width:1em;visibility:visible}}
@keyframes cx-logo-drift{0%,100%{background-position:0% 50%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}}
/* Where it can't animate (cx-logo-still, reduced motion): ink text with a violet [ and a teal ]. */
.cx-logo-still{background:none;-webkit-text-fill-color:currentColor;color:var(--cx-logo-ink);filter:none;animation:none}
.cx-logo-still>i{animation:none}
.cx-logo-still>span:first-child{color:var(--cx-logo-l)}
.cx-logo-still>span:last-child{color:var(--cx-logo-r)}
@media (prefers-reduced-motion:reduce){
  .cx-logo{background:none;-webkit-text-fill-color:currentColor;color:var(--cx-logo-ink);filter:none;animation:none}
  .cx-logo>i{animation:none}
  .cx-logo>span:first-child{color:var(--cx-logo-l)}
  .cx-logo>span:last-child{color:var(--cx-logo-r)}
}