.dotuu-brand-glyph,
.dotuu-brand-u {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.dotuu-brand-dot {
  transform-box: fill-box;
  transform-origin: center;
}
.dotuu-brand-u {
  opacity: 0;
}

/* Names switch from none only when active, so hover/focus replays the greeting. */
[data-slot='brand-mark'][data-motion='loading'],
[data-slot='brand-mark'][data-motion='intro'],
:is(button, a):focus-visible
  > [data-slot='brand-mark'][data-motion='interactive'] {
  --dotuu-left-motion: dotuu-brand-left;
  --dotuu-right-motion: dotuu-brand-right;
  --dotuu-dot-motion: dotuu-brand-dot;
  --dotuu-joined-motion: dotuu-brand-joined;
  --dotuu-split-motion: dotuu-brand-split;
}
@media (hover: hover) {
  :is(button, a):hover > [data-slot='brand-mark'][data-motion='interactive'] {
    --dotuu-left-motion: dotuu-brand-left;
    --dotuu-right-motion: dotuu-brand-right;
    --dotuu-dot-motion: dotuu-brand-dot;
    --dotuu-joined-motion: dotuu-brand-joined;
    --dotuu-split-motion: dotuu-brand-split;
  }
}
[data-slot='brand-mark'][data-motion='intro'] {
  --dotuu-motion-duration: 1.2s;
  --dotuu-motion-repeat: 1;
}
[data-slot='brand-mark'][data-motion='interactive'] {
  --dotuu-motion-duration: 1.05s;
  --dotuu-motion-repeat: 1;
}

[data-slot='brand-mark']
  :is(.dotuu-brand-glyph, .dotuu-brand-u, .dotuu-brand-dot) {
  animation-duration: var(--dotuu-motion-duration, 3.2s);
  animation-iteration-count: var(--dotuu-motion-repeat, infinite);
  animation-timing-function: ease-in-out, step-end;
}
.dotuu-brand-glyph {
  animation-name: var(--dotuu-joined-motion, none);
  animation-timing-function: step-end;
}
.dotuu-brand-u-left {
  animation-name:
    var(--dotuu-left-motion, none), var(--dotuu-split-motion, none);
}
.dotuu-brand-u-right {
  animation-name:
    var(--dotuu-right-motion, none), var(--dotuu-split-motion, none);
}
.dotuu-brand-dot {
  animation-name: var(--dotuu-dot-motion, none);
}
.dotuu-loading[data-paused='true']
  :is(.dotuu-brand-glyph, .dotuu-brand-u, .dotuu-brand-dot) {
  animation-play-state: paused;
}

/* The joined outline is painted once at rest, preserving the exact static mark. */
@keyframes dotuu-brand-joined {
  0%,
  5%,
  82%,
  100% {
    opacity: 1;
  }
  6%,
  81% {
    opacity: 0;
  }
}
@keyframes dotuu-brand-split {
  0%,
  5%,
  82%,
  100% {
    opacity: 0;
  }
  6%,
  81% {
    opacity: 1;
  }
}

/* Two U characters separate, take turns hopping, then meet and settle together. */
@keyframes dotuu-brand-left {
  0%,
  6%,
  82%,
  100% {
    transform: none;
  }
  16% {
    transform: translate(-3px, 1.5px) scale(0.88, 0.88) rotate(-6deg);
  }
  28% {
    transform: translate(-3px, -4px) scale(0.88, 1.05) rotate(-8deg);
  }
  40% {
    transform: translate(-3px, 1.5px) scale(0.9, 0.9) rotate(-5deg);
  }
  52% {
    transform: translate(-2px, -1px) scale(0.9, 0.98) rotate(4deg);
  }
  64% {
    transform: scale(1, 0.9);
  }
  74% {
    transform: translateY(-1px) scale(1, 1.04);
  }
}
@keyframes dotuu-brand-right {
  0%,
  6%,
  82%,
  100% {
    transform: none;
  }
  16% {
    transform: translate(3px, 1.5px) scale(0.88, 0.88) rotate(6deg);
  }
  28% {
    transform: translate(3px, 1.5px) scale(0.9, 0.9) rotate(5deg);
  }
  40% {
    transform: translate(3px, -4px) scale(0.88, 1.05) rotate(8deg);
  }
  52% {
    transform: translate(2px, -1px) scale(0.9, 0.98) rotate(-4deg);
  }
  64% {
    transform: scale(1, 0.9);
  }
  74% {
    transform: translateY(-1px) scale(1, 1.04);
  }
}
@keyframes dotuu-brand-dot {
  0%,
  6%,
  82%,
  100% {
    transform: none;
  }
  16% {
    transform: translate(-4px, 1px) scale(1.1, 0.9);
  }
  28% {
    transform: translate(-6px, -3.5px) scale(0.95, 1.05);
  }
  40% {
    transform: translate(6px, -3.5px) scale(0.95, 1.05);
  }
  52% {
    transform: translateY(-1px);
  }
  64% {
    transform: translateY(2px) scale(1.12, 0.85);
  }
  74% {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot='brand-mark']
    :is(.dotuu-brand-glyph, .dotuu-brand-u, .dotuu-brand-dot) {
    animation: none !important;
    transform: none !important;
  }
  [data-slot='brand-mark'] .dotuu-brand-glyph {
    opacity: 1 !important;
  }
  [data-slot='brand-mark'] .dotuu-brand-u {
    opacity: 0 !important;
  }
}