@layer components {
  .donkey-pet {
    position: absolute;
    inset: 0 auto auto 0;
    width: 96px;
    height: 96px;
    z-index: 55;
    pointer-events: none;
    user-select: none;
    contain: layout style;
    will-change: transform;
    perspective: 600px;
    perspective-origin: 50% 70%;
  }
  .donkey-facing {
    width: 100%;
    height: 100%;
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .donkey-visual {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 76%;
    will-change: transform;
    transform-style: preserve-3d;
    rotate: x var(--pitch, 0deg);
    transition: opacity 240ms ease;
  }
  .donkey-ground {
    position: absolute;
    width: 64px;
    height: 15px;
    left: 16px;
    bottom: 0;
    background: radial-gradient(
      ellipse,
      rgb(0 0 0 / 65%),
      rgb(0 16 28 / 35%) 45%,
      transparent 72%
    );
    filter: blur(2px);
    transform: rotateX(32deg);
    opacity: 0.8;
    pointer-events: none;
  }
  .donkey-orbit {
    position: absolute;
    inset: 16px 10px 4px;
    border: 1px dashed rgb(67 216 242 / 28%);
    border-top-color: rgb(155 237 255 / 75%);
    border-radius: 50%;
    box-shadow: 0 0 18px rgb(0 180 230 / 9%);
    animation: donkey-orbit 6s linear infinite;
    opacity: 0.55;
  }
  .donkey-orbit::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-bottom: 1px solid rgb(67 216 242 / 50%);
    border-radius: inherit;
  }
  .donkey-sprite {
    width: 100%;
    height: 100%;
    background-image: url("../assets/donkey-3d-sprite.webp");
    background-size: 400% 200%;
    background-position: 0 0;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgb(84 214 246 / 22%))
      drop-shadow(2px 5px 3px rgb(0 0 0 / 45%));
    transform: translateZ(8px);
  }
  .donkey-pet[data-state="chasing"] .donkey-sprite {
    animation: donkey-trot 560ms steps(1, end) infinite;
    filter: drop-shadow(0 0 5px rgb(84 214 246 / 55%))
      drop-shadow(0 3px 3px rgb(0 0 0 / 35%));
  }
  .donkey-pet[data-state="chasing"] .donkey-visual {
    animation: donkey-gallop 560ms ease-in-out infinite;
  }
  .donkey-pet[data-state="waiting"] .donkey-sprite {
    animation: donkey-trot 1080ms steps(1, end) infinite;
  }
  .donkey-pet[data-state="waiting"] .donkey-visual {
    animation: donkey-wander 1080ms ease-in-out infinite;
  }
  .donkey-pet[data-state="yielding"] .donkey-sprite {
    animation: donkey-trot 1080ms steps(1, end) infinite;
  }
  .donkey-pet[data-state="yielding"] .donkey-visual {
    opacity: 0.72;
    animation: donkey-wander 1080ms ease-in-out infinite;
  }
  .donkey-pet[data-state="yielding"] .donkey-orbit {
    animation-play-state: paused;
    opacity: 0.15;
  }
  .donkey-pet[data-state="yielding"][data-moving="false"] .donkey-sprite {
    animation: none;
  }
  .donkey-pet[data-state="yielding"][data-moving="false"] .donkey-visual {
    animation: donkey-breathe 3200ms ease-in-out infinite;
  }
  .donkey-pet:is([data-state="idle"], [data-state="corrupting"])
    .donkey-visual {
    animation:
      donkey-settle 360ms ease-out both,
      donkey-breathe 2400ms 360ms ease-in-out infinite;
  }
  .donkey-pet[data-state="corrupting"] .donkey-orbit {
    border-color: rgb(255 113 128 / 35%);
    border-top-color: #ff7180;
    animation-duration: 2.5s;
  }
  .donkey-trail {
    position: absolute;
    inset: 37px auto auto 9px;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .donkey-pet[data-state="chasing"] .donkey-trail {
    opacity: var(--pace, 0);
  }
  .donkey-trail i {
    position: absolute;
    top: calc(var(--spark) * 8px);
    width: 3px;
    height: 2px;
    background: #87edff;
    box-shadow: 0 0 6px rgb(67 216 242 / 60%);
    animation: donkey-trace 900ms linear infinite;
    animation-delay: calc(var(--spark) * -260ms);
  }
  .donkey-pet[data-state="dismissing"] .donkey-visual,
  .donkey-pet[data-state="dismissing"] .donkey-orbit {
    animation: donkey-offline 460ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .donkey-status {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    white-space: nowrap;
    font: 7px/1.5 var(--mono);
    letter-spacing: 1px;
    color: var(--cyan);
    background: rgb(5 13 24 / 85%);
    border: 1px solid rgb(67 216 242 / 30%);
    padding: 3px 5px;
    opacity: 0;
  }
  .donkey-pet[data-state="corrupting"] .donkey-status {
    opacity: 1;
  }
  .donkey-pet[data-intro="true"]:is(
      [data-state="waiting"],
      [data-state="chasing"]
    )
    .donkey-status,
  .donkey-pet[data-state="yielding"] .donkey-status {
    opacity: 0.8;
  }
  .donkey-prompt {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 56;
    width: min(224px, calc(100vw - 24px));
    padding: 11px 14px 12px;
    text-align: left;
    color: #e5faff;
    background: linear-gradient(
      135deg,
      rgb(20 49 66 / 96%),
      rgb(8 20 31 / 96%)
    );
    border: 1px solid rgb(94 225 249 / 70%);
    border-radius: 12px;
    box-shadow:
      inset 0 1px 0 rgb(227 251 255 / 13%),
      0 0 22px rgb(0 180 230 / 12%),
      0 8px 26px rgb(0 0 0 / 30%);
    backdrop-filter: blur(8px);
    cursor: pointer;
    animation: donkey-prompt-in 240ms ease-out both;
  }
  .donkey-prompt:hover {
    border-color: #c5f6ff;
    box-shadow: 0 0 25px rgb(0 180 230 / 22%);
  }
  .donkey-prompt[data-keyboard="true"] {
    animation: none;
  }
  .donkey-prompt :is(span, strong) {
    display: block;
  }
  .donkey-prompt-kicker {
    color: #69ddf3;
    font: 8px/1.5 var(--mono);
    letter-spacing: 0.8px;
  }
  .donkey-prompt strong {
    margin-top: 5px;
    font: 600 13px/1.4 var(--sans);
    letter-spacing: 0.1px;
  }
  .donkey-prompt-meta {
    margin-top: 4px;
    color: #a9bdca;
    font: 8px/1.4 var(--mono);
  }
  @keyframes donkey-prompt-in {
    from {
      opacity: 0;
      scale: 0.94;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
  @keyframes donkey-gallop {
    0%,
    100% {
      transform: translateY(1px) rotate(var(--lean, 0deg));
    }
    50% {
      transform: translateY(-3px) rotate(-1deg);
    }
  }
  @keyframes donkey-wander {
    0%,
    100% {
      transform: translateY(0) rotate(-1deg);
    }
    50% {
      transform: translateY(-1.5px) rotate(1deg);
    }
  }
  @keyframes donkey-settle {
    0% {
      transform: translateY(-3px) scale(1.02, 0.98);
    }
    55% {
      transform: translateY(2px) scale(1.04, 0.95);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
  @keyframes donkey-breathe {
    0%,
    100% {
      transform: translateY(0) rotate(-1deg);
    }
    50% {
      transform: translateY(-2px) rotate(1deg);
    }
  }
  @keyframes donkey-orbit {
    from {
      transform: rotate(-25deg) scale(0.94);
    }
    to {
      transform: rotate(335deg) scale(0.94);
    }
  }
  @keyframes donkey-trace {
    from {
      opacity: 0.7;
      transform: translateX(0) scaleX(2);
    }
    to {
      opacity: 0;
      transform: translateX(-28px) scaleX(0.5);
    }
  }
  @keyframes donkey-offline {
    0% {
      opacity: 1;
      transform: scale(1);
      filter: brightness(1.3);
    }
    35% {
      opacity: 0.8;
      transform: translateY(-5px) scale(1.08, 0.94);
    }
    100% {
      opacity: 0;
      transform: translateY(-16px) scale(0.65);
      filter: brightness(1.6) blur(3px);
    }
  }
  @keyframes donkey-trot {
    0% {
      background-position: 0 0;
    }
    12.5% {
      background-position: 33.3333% 0;
    }
    25% {
      background-position: 66.6667% 0;
    }
    37.5% {
      background-position: 100% 0;
    }
    50% {
      background-position: 0 100%;
    }
    62.5% {
      background-position: 33.3333% 100%;
    }
    75% {
      background-position: 66.6667% 100%;
    }
    87.5% {
      background-position: 100% 100%;
    }
  }
  #signal-corruption {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    pointer-events: none;
  }
  .signal-char.is-corrupt {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
  }
  .signal-corrupted .ticker-track {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce), (any-hover: none) {
    .donkey-pet,
    .donkey-prompt,
    #signal-corruption {
      display: none !important;
    }
  }
}