.cbc-signature-logo {
  --cbc-signature-duration: 1.7s;
  --cbc-signature-ink: #d71920;
  --cbc-signature-glow: rgb(215 25 32 / 48%);
  position: relative;
  isolation: isolate;
}

.cbc-signature-logo .brand-logo__final {
  opacity: 1 !important;
  transition: none !important;
}

.cbc-signature-logo .brand-logo__svg {
  display: none !important;
}

.cbc-signature-logo.cbc-is-writing .brand-logo__final,
.cbc-signature-logo.cbc-is-writing .brand-logo-img {
  animation: cbc-signature-reveal var(--cbc-signature-duration)
    cubic-bezier(.2, .72, .18, 1) forwards !important;
}

.cbc-signature-logo::after {
  position: absolute;
  z-index: 3;
  top: 68%;
  left: 0;
  width: clamp(15px, 6%, 19px);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    #fff 0 16%,
    #ff6b70 17% 38%,
    var(--cbc-signature-ink) 39% 100%
  );
  clip-path: polygon(
    50% 0,
    61% 36%,
    100% 50%,
    61% 64%,
    50% 100%,
    39% 64%,
    0 50%,
    39% 36%
  );
  content: "";
  filter:
    drop-shadow(0 0 1px #8e080d)
    drop-shadow(0 0 4px var(--cbc-signature-ink))
    drop-shadow(0 0 9px var(--cbc-signature-glow));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cbc-signature-logo.cbc-is-writing::after {
  animation: cbc-signature-pen var(--cbc-signature-duration)
    cubic-bezier(.2, .72, .18, 1) forwards;
}

@keyframes cbc-signature-reveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  45% {
    clip-path: inset(0 48% 0 0);
  }
  100% {
    clip-path: inset(0);
  }
}

@keyframes cbc-signature-pen {
  0% {
    top: 66%;
    left: 0;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(.55);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(22deg) scale(1);
  }
  23% {
    top: 13%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(90deg) scale(.82);
  }
  44% {
    top: 69%;
    left: 43%;
    transform: translate(-50%, -50%) rotate(174deg) scale(1.12);
  }
  66% {
    top: 27%;
    left: 67%;
    transform: translate(-50%, -50%) rotate(254deg) scale(.88);
  }
  92% {
    top: 69%;
    left: 97%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(338deg) scale(1.15);
  }
  100% {
    top: 69%;
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(360deg) scale(.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cbc-signature-logo .brand-logo__final,
  .cbc-signature-logo .brand-logo-img {
    animation: none !important;
    clip-path: none !important;
  }

  .cbc-signature-logo::after {
    display: none;
  }
}