/* Kodivo Footer Signature 12.B — compact, self-contained component. */
.kodivo-signature[data-kodivo-signature] {
  --kodivo-signature-color: #f5f7fb;
  --kodivo-signature-accent: #6ce7ff;
  --kodivo-signature-muted: rgba(217, 222, 234, 0.68);
  --kodivo-signature-size: 0.68rem;
  --kodivo-signature-gap: 0.38rem;
  --kodivo-signature-font: system-ui, -apple-system, "Segoe UI", sans-serif;

  --kodivo-signature-copy-clip: inset(0 100% 0 0);
  --kodivo-signature-copy-offset: -0.32rem;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-width: 0;
  min-height: 1.87rem;
  align-items: center;
  gap: var(--kodivo-signature-gap);
  padding: 0.1rem 0.05rem;
  color: var(--kodivo-signature-color);
  font-family: var(--kodivo-signature-font);
  font-size: var(--kodivo-signature-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Reveal the text outward from the mascot in either layout. */
.kodivo-signature--right[data-kodivo-signature] {
  --kodivo-signature-copy-clip: inset(0 0 0 100%);
  --kodivo-signature-copy-offset: 0.32rem;
}

.kodivo-signature--right .kodivo-signature__mark {
  order: 1;
}

.kodivo-signature *,
.kodivo-signature *::before,
.kodivo-signature *::after {
  box-sizing: border-box;
}

.kodivo-signature:focus-visible {
  border-radius: 0.3rem;
  outline: 2px solid var(--kodivo-signature-accent);
  outline-offset: 4px;
}

.kodivo-signature__mark {
  /* Optical alignment: exclude the antenna from the face center. */
  position: relative;
  top: -0.18rem;
  display: block;
  width: 2.35rem;
  flex: 0 0 2.35rem;
  color: var(--kodivo-signature-color);
}

.kodivo-signature__robot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: inherit;
}

.kodivo-signature__face {
  transform-box: view-box;
  transform-origin: 50% 65%;
}

.kodivo-signature__head {
  fill: none;
  stroke: var(--kodivo-signature-muted);
  stroke-width: 13.5;
  stroke-miterlimit: 10;
}

.kodivo-signature__eye,
.kodivo-signature__code,
.kodivo-signature__antenna {
  color: var(--kodivo-signature-accent);
  fill: currentColor;
}

.kodivo-signature__eye,
.kodivo-signature__eye circle,
.kodivo-signature__wink {
  transform-box: fill-box;
  transform-origin: center;
}

.kodivo-signature__antenna {
  stroke: currentColor;
  stroke-width: 6;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 55% 100%;
}

.kodivo-signature__code {
  transform-box: view-box;
  transform-origin: center;
}

.kodivo-signature__copy {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  white-space: nowrap;
}

.kodivo-signature__prefix {
  color: var(--kodivo-signature-muted);
  font-weight: 400;
}

.kodivo-signature__brand {
  position: relative;
  color: var(--kodivo-signature-color);
  font-weight: 700;
  transition: color 180ms ease;
}

.kodivo-signature__brand::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.25em;
  left: 0;
  height: 1px;
  background: var(--kodivo-signature-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.kodivo-signature:hover .kodivo-signature__brand,
.kodivo-signature:focus-visible .kodivo-signature__brand {
  color: var(--kodivo-signature-accent);
}

.kodivo-signature:hover .kodivo-signature__brand::after,
.kodivo-signature:focus-visible .kodivo-signature__brand::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Entrance state exists only when the optional script enables enhancement. */
.kodivo-signature-ready .kodivo-signature.is-pending .kodivo-signature__code--left {
  opacity: 0;
  transform: rotate(-155deg) scale(0.68);
}

.kodivo-signature-ready .kodivo-signature.is-pending .kodivo-signature__code--right {
  opacity: 0;
  transform: rotate(155deg) scale(0.68);
}

.kodivo-signature-ready .kodivo-signature.is-pending .kodivo-signature__face,
.kodivo-signature-ready .kodivo-signature.is-pending .kodivo-signature__copy {
  opacity: 0;
}

.kodivo-signature-ready .kodivo-signature.is-pending .kodivo-signature__copy {
  clip-path: var(--kodivo-signature-copy-clip);
  transform: translateX(var(--kodivo-signature-copy-offset));
}

.kodivo-signature.is-entered .kodivo-signature__code--left {
  animation: kodivo-signature-soft-left 900ms cubic-bezier(0.2, 0.76, 0.22, 1) both;
}

.kodivo-signature.is-entered .kodivo-signature__code--right {
  animation: kodivo-signature-soft-right 900ms cubic-bezier(0.2, 0.76, 0.22, 1) both;
}

.kodivo-signature.is-entered .kodivo-signature__face {
  animation: kodivo-signature-lift 760ms 100ms cubic-bezier(0.22, 0.75, 0.3, 1) both,
    kodivo-signature-idle-head 20s 1400ms ease-in-out infinite;
}

.kodivo-signature.is-entered .kodivo-signature__antenna {
  animation: kodivo-signature-antenna 500ms 470ms ease-out both;
}

.kodivo-signature.is-entered .kodivo-signature__eye {
  animation: kodivo-signature-eyes 300ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
    kodivo-signature-idle-look-x 20s 1400ms cubic-bezier(0, 0, 0.3, 1) infinite,
    kodivo-signature-idle-look-y 20s 1400ms cubic-bezier(0.7, 0, 1, 1) infinite;
}

.kodivo-signature.is-entered .kodivo-signature__copy {
  animation: kodivo-signature-copy 460ms 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.kodivo-signature.is-entered .kodivo-signature__wink {
  animation: kodivo-signature-wink 220ms 1160ms ease-in-out both;
}

/* Alternate a brief blink and a curious look-around, with long rests.
   All idle tracks share a clock and start after the entrance has settled. */
.kodivo-signature.is-entered .kodivo-signature__eye circle {
  animation: kodivo-signature-idle-blink 20s 1400ms ease-in-out infinite;
}

.kodivo-signature[data-kodivo-signature]:hover .kodivo-signature__eye circle,
.kodivo-signature[data-kodivo-signature]:focus-visible .kodivo-signature__eye circle {
  animation: kodivo-signature-blink 300ms ease-out both;
}

@keyframes kodivo-signature-soft-left {
  0% { opacity: 0; transform: rotate(-155deg) scale(0.68); }
  18% { opacity: 0.08; }
  48% { opacity: 0.7; }
  72% { opacity: 1; transform: rotate(7deg) scale(1.03); }
  88% { transform: rotate(-2deg) scale(1); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes kodivo-signature-soft-right {
  0% { opacity: 0; transform: rotate(155deg) scale(0.68); }
  18% { opacity: 0.08; }
  48% { opacity: 0.7; }
  72% { opacity: 1; transform: rotate(-7deg) scale(1.03); }
  88% { transform: rotate(2deg) scale(1); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes kodivo-signature-lift {
  0% { opacity: 0; transform: translateY(94px) rotate(2.6deg) scale(0.93); }
  54% { opacity: 1; transform: translateY(-15px) rotate(-1.3deg) scale(1.01); }
  78% { transform: translateY(5px) rotate(0.45deg) scale(1); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes kodivo-signature-antenna {
  0%, 100% { transform: rotate(0); }
  27% { transform: rotate(-10deg); }
  55% { transform: rotate(5deg); }
  79% { transform: rotate(-1.8deg); }
}

@keyframes kodivo-signature-eyes {
  from { opacity: 0; transform: scale(0.25); }
  72% { opacity: 1; transform: scale(1.12); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kodivo-signature-copy {
  from { opacity: 0; clip-path: var(--kodivo-signature-copy-clip); transform: translateX(var(--kodivo-signature-copy-offset)); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes kodivo-signature-wink {
  0%, 100% { transform: scaleY(1); }
  40%, 56% { transform: scaleY(0.1); }
}

@keyframes kodivo-signature-idle-blink {
  0%, 48.5%, 50%, 100% { transform: scaleY(1); }
  49.25% { transform: scaleY(0.13); }
}

/* Horizontal ease-out + vertical ease-in creates a curved gaze:
   first sideways, then upward. Eye groups move; circles can still blink. */
@keyframes kodivo-signature-idle-look-x {
  0%, 80%, 90%, 100% { transform: translateX(0); }
  84%, 87% { transform: translateX(-34px); }
  94%, 97% { transform: translateX(34px); }
}

@keyframes kodivo-signature-idle-look-y {
  0%, 80%, 90%, 100% { translate: 0 0; }
  84%, 87%, 94%, 97% { translate: 0 -26px; }
}

/* The face follows the eyes with a slight delay, then settles back. */
@keyframes kodivo-signature-idle-head {
  0%, 80.5%, 90.5%, 100% { translate: 0 0; rotate: 0deg; }
  85%, 87% { translate: -9px -7px; rotate: -2.5deg; }
  95%, 97% { translate: 9px -7px; rotate: 2.5deg; }
}

@keyframes kodivo-signature-blink {
  0%, 100% { transform: scaleY(1); }
  48% { transform: scaleY(0.13); }
}

@media (prefers-reduced-motion: reduce) {
  .kodivo-signature,
  .kodivo-signature *,
  .kodivo-signature *::before,
  .kodivo-signature *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .kodivo-signature,
  .kodivo-signature__face,
  .kodivo-signature__copy,
  .kodivo-signature__eye,
  .kodivo-signature__eye circle,
  .kodivo-signature__wink,
  .kodivo-signature__antenna,
  .kodivo-signature__code {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
  }
}