/* The self-drawing Solicorp logo (solicorp-logo.js). Everything scales with the font-size set on
   .solilogo: the mark is 2.5em tall (the PNG's 2.45 cap heights), the word 1em. Timings are
   offset by --t0, which the "Powered by" line uses to go first. Same rules as SoliVoice's
   AnimatedLogo.css, with this site's theme selector. */
.solilogo {
  --logo-orange: #f57c00;
  --logo-mark: #323232;
  --t0: 0s;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  color: var(--logo-mark);
}
html[data-theme="dark"] .solilogo { --logo-mark: #ffffff; }
/* on the charcoal bars the charcoal half and the word are white, like the light PNG was */
.topbar .solilogo, .dl-head .solilogo { --logo-mark: #ffffff; }
.solilogo.powered { --t0: 0.25s; }

.solilogo-powered {
  font-size: 0.5em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted, #6d6d6d);
  opacity: 0;
  transform: translateY(0.4em);
  animation: solilogo-powered 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.solilogo-row { display: flex; align-items: center; gap: 0.5em; }
.solilogo-mark { height: 2.5em; width: auto; flex: 0 0 auto; display: block; overflow: visible; }

.solilogo-word {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
}
.solilogo-s { display: block; flex: 0 0 auto; width: auto; height: 0.72em; margin: 0 0.1em 0.14em 0; overflow: visible; }
.solilogo-l { display: inline-block; position: relative; }
.solilogo-l .g { display: inline-block; }
.solilogo-l .bl { display: inline-block; width: 0; height: 0; }
.solilogo-l .dot {
  position: absolute;
  left: 0.3em;
  top: 0.2em;
  width: 0.085em;
  height: 0.085em;
  background: var(--logo-orange);
  transform: translateX(-50%);
}

/* the mark: two copies of one outline, each revealed by a thick stroke drawn along its centreline */
.solilogo-half.top { fill: var(--logo-orange); }
.solilogo-half.bottom { fill: var(--logo-mark); }
.solilogo-draw {
  fill: none;
  stroke: #fff;
  stroke-width: 170;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: solilogo-draw 0.75s cubic-bezier(0.55, 0, 0.25, 1) forwards;
  animation-delay: var(--t0);
}
.solilogo-draw.bottom { animation-delay: calc(var(--t0) + 0.05s); }

/* the letter S: orange from the top terminal, charcoal from the bottom, once the mark is nearly done */
.solilogo-stroke {
  fill: none;
  stroke-width: 14;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: solilogo-draw 0.65s cubic-bezier(0.55, 0, 0.25, 1) forwards;
  animation-delay: calc(var(--t0) + 0.5s);
}
.solilogo-stroke.top { stroke: var(--logo-orange); }
.solilogo-stroke.bottom { stroke: var(--logo-mark); animation-delay: calc(var(--t0) + 0.55s); }

/* the letters, one every 75 ms, each arriving the way its shape suggests */
.solilogo-l {
  animation-duration: 0.35s;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--t0) + 0.9s + var(--i) * 0.075s);
}
/* o: an iris opens from the centre, the one entrance that suits a perfect circle */
.solilogo-l.o1 { clip-path: circle(0% at 50% 62%); animation-name: solilogo-iris; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
/* l: a bar dropped from above that lands with a small bounce */
.solilogo-l.el { opacity: 0; transform: translateY(-0.8em); animation-name: solilogo-drop; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
/* i: the stem grows up from the baseline, the dot falls onto it afterwards */
.solilogo-l.i .g { clip-path: inset(100% 0 0 0); animation: solilogo-rise-clip 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; animation-delay: inherit; }
.solilogo-l.i .dot {
  opacity: 0;
  transform: translate(-50%, -1em);
  animation: solilogo-dot-fall 0.3s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  animation-delay: calc(var(--t0) + 0.9s + var(--i) * 0.075s + 0.18s);
}
/* c: turns open like a mouth, pivoting on its centre */
.solilogo-l.c { opacity: 0; transform: rotate(-150deg) scale(0.5); transform-origin: 50% 60%; animation-name: solilogo-fade-settle; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.15); }
/* second o: lands from below and squashes, so it moves differently from the first */
.solilogo-l.o2 { opacity: 0; transform: translateY(0.5em) scale(0.6, 1.3); transform-origin: 50% 100%; animation-name: solilogo-squash; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
/* r: slides in from the right and springs back */
.solilogo-l.r { opacity: 0; transform: translateX(0.6em); animation-name: solilogo-fade-settle; animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1.2); }
/* p: rises from its own descender, overshooting a hair */
.solilogo-l.p { opacity: 0; transform: translateY(0.7em); animation-name: solilogo-fade-settle; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.1); }

@keyframes solilogo-powered { to { opacity: 1; transform: none; letter-spacing: 0.2em; } }
@keyframes solilogo-draw { to { stroke-dashoffset: 0; } }
@keyframes solilogo-iris { to { clip-path: circle(75% at 50% 62%); } }
@keyframes solilogo-drop {
  0% { opacity: 0; transform: translateY(-0.8em); }
  55% { opacity: 1; transform: translateY(0.07em); }
  78% { transform: translateY(-0.03em); }
  100% { opacity: 1; transform: none; }
}
@keyframes solilogo-rise-clip { to { clip-path: inset(0 0 0 0); } }
@keyframes solilogo-dot-fall {
  0% { opacity: 0; transform: translate(-50%, -1em); }
  20% { opacity: 1; }
  65% { transform: translate(-50%, 0.08em); }
  82% { transform: translate(-50%, -0.04em); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes solilogo-fade-settle { to { opacity: 1; transform: none; } }
@keyframes solilogo-squash {
  0% { opacity: 0; transform: translateY(0.5em) scale(0.6, 1.3); }
  60% { opacity: 1; transform: translateY(0) scale(1.15, 0.85); }
  80% { transform: scale(0.96, 1.04); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .solilogo-powered, .solilogo-draw, .solilogo-stroke, .solilogo-l, .solilogo-l .g, .solilogo-l .dot {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
}

/* data-static: the finished logo, no motion (the topbar brand, the error page) */
.solilogo.static .solilogo-powered { animation: none; opacity: 1; transform: none; }
.solilogo.static .solilogo-draw,
.solilogo.static .solilogo-stroke { animation: none; stroke-dashoffset: 0; }
.solilogo.static .solilogo-l,
.solilogo.static .solilogo-l .g { animation: none; opacity: 1; transform: none; clip-path: none; }
.solilogo.static .solilogo-l .dot { animation: none; opacity: 1; transform: translateX(-50%); }