.cravio-logo {
  --logo-width: 4.459em;
  --logo-reveal: 1;
  --logo-collapse-duration: 300ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: calc(1.16em + (var(--logo-width) - 1.16em) * var(--logo-reveal));
  height: 1.16em;
  color: #000;
  font: 400 28px / 1 "Inter", sans-serif;
  text-decoration: none;
}

.cravio-logo__content {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--logo-width);
  display: flex;
  align-items: center;
  padding-inline: .16em;
  gap: .175em;
}


.cravio-logo:focus-visible {
  outline: 2px solid var(--sv-amber);
  outline-offset: 5px;
}

.cravio-logo__text {
  font-size: .84em;
  opacity: var(--logo-reveal);
}

.cravio-logo .cravio-logo__symbol {
  width: .84em;
  height: .7em;
  flex: none;
}

.cravio-logo canvas {
  position: absolute;
  inset: 0;
  width: var(--logo-width);
  height: 100%;
  pointer-events: none;
}

.cravio-logo[data-canvas-ready] .cravio-logo__text,
.cravio-logo[data-canvas-ready] .cravio-logo__symbol {
  visibility: hidden;
}