.navi-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  cursor: pointer;
  left: -13px;
}
.speech-bubble {
  position: absolute;
  right: calc(100% - 18px);
  top: 45%;
  background: #fffbe8;
  border: 2px solid #111;
  border-radius: 16px;
  padding: 8px 14px;
  font-family: 'Comic Sans MS', 'Marker Felt', 'Chalkboard SE', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #111;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.7) translateX(20px);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 10;
  box-shadow: 3px 3px 0 #111;
}
.speech-bubble::before {
  content: '';
  position: absolute;
  right: -16px;
  bottom: 10px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 17px solid #111;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  right: -10px;
  bottom: 13px;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 13px solid #fffbe8;
}
.navi-wrapper:hover .speech-bubble { opacity: 1; transform: scale(1) translateX(0); }

.wing {
  transform-origin: 130px 130px;
  transform-box: view-box;
}
.wing-tl { --d: 1; animation: flap-top 1.4s ease-in-out infinite; }
.wing-tr { --d: -1; animation: flap-top 1.4s ease-in-out infinite; }
.wing-bl { --d: -1; animation: flap-bottom 2.1s ease-in-out infinite; }
.wing-br { --d: 1; animation: flap-bottom 2.1s ease-in-out infinite; }

@keyframes flap-top {
  0%, 100% { transform: rotate(calc(14deg * var(--d))); }
  50% { transform: rotate(calc(-10deg * var(--d))); }
}
@keyframes flap-bottom {
  0%, 100% { transform: rotate(calc(-12deg * var(--d))); }
  50% { transform: rotate(calc(8deg * var(--d))); }
}

.core-pulse {
  transform-origin: 130px 130px;
  transform-box: view-box;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.halo-pulse {
  transform-origin: 130px 130px;
  transform-box: view-box;
  animation: halo 2.2s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { opacity: 0.8; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.12); }
}
.float { animation: float 3.5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}