.dolphin-contact-wrap {
  position: fixed;
  right: 12px;
  bottom: 86px;
  z-index: 120;
}

@media (min-width: 769px) {
  .dolphin-contact-wrap {
    bottom: 22px;
  }
}

.dolphin-contact-btn {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.dolphin-contact-btn:focus-visible {
  outline: 2px solid rgba(14, 165, 233, .5);
  outline-offset: 4px;
  border-radius: 12px;
}

.dolphin-scene {
  position: relative;
  width: 88px;
  height: 58px;
  overflow: visible;
  background: transparent;
}

.dolphin-sprite {
  position: relative;
  z-index: 2;
  transform-origin: 52% 58%;
  animation: dolphin-idle-float 3.6s ease-in-out infinite;
}

.dolphin-sprite.is-diving {
  animation: dolphin-dive-once 2.4s ease-in-out 1 forwards;
}

.dolphin-sprite.is-spitting {
  animation: dolphin-spit-lunge .65s ease-out 1 forwards;
}

.dolphin-sprite img {
  display: block;
  width: 88px;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, .75))
    drop-shadow(0 0 2px rgba(186, 230, 253, .55))
    drop-shadow(0 5px 10px rgba(0, 80, 130, .16));
}

.dolphin-water {
  position: absolute;
  left: 4%;
  top: 34%;
  width: 44px;
  height: 32px;
  z-index: 3;
  pointer-events: none;
}

.water-spray {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #bae6fd 35%, #38bdf8 70%, #0284c7 100%);
  opacity: 0;
  transform: translate(0, 0) scale(.4);
}

.water-jet {
  position: absolute;
  left: -2px;
  top: 1px;
  width: 14px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(56, 189, 248, .9), rgba(186, 230, 253, .2));
  opacity: 0;
  filter: blur(.4px);
}

.dolphin-contact-btn.is-spitting .water-jet,
.dolphin-contact-btn.spitting .water-jet {
  animation: dolphin-water-jet .55s ease-out forwards;
}

.dolphin-contact-btn.is-spitting .water-spray,
.dolphin-contact-btn.spitting .water-spray {
  animation: dolphin-water-spit .75s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

.dolphin-contact-tip {
  position: absolute;
  right: calc(100% + 8px);
  top: 44%;
  transform: translateY(-50%) scale(.9);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: #00aeef;
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 120, 180, .24);
  transition: opacity .22s ease, transform .22s ease;
}

.dolphin-contact-tip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #00aeef;
}

.dolphin-contact-btn:hover .dolphin-contact-tip,
.dolphin-contact-btn:focus .dolphin-contact-tip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

@keyframes dolphin-idle-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes dolphin-dive-once {
  0% { transform: translateY(0) rotate(-4deg); }
  25% { transform: translateY(6px) rotate(10deg); }
  50% { transform: translateY(14px) rotate(16deg); }
  75% { transform: translateY(2px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

@keyframes dolphin-spit-lunge {
  0% { transform: translateY(-2px) rotate(0deg) scale(1); }
  35% { transform: translateY(0) rotate(-10deg) scale(1.06); }
  100% { transform: translateY(-2px) rotate(2deg) scale(1); }
}

@keyframes dolphin-water-jet {
  0% { opacity: 0; transform: scaleX(.2); }
  25% { opacity: .95; transform: scaleX(1.15); }
  100% { opacity: 0; transform: translateX(-20px) scaleX(1.5); }
}

@keyframes dolphin-water-spit {
  0% { opacity: 1; transform: translate(0, 0) scale(.5); }
  100% {
    opacity: 0;
    transform: translate(var(--tx, -30px), var(--ty, -4px)) scale(1.1);
  }
}

@media (max-width: 480px) {
  .dolphin-scene,
  .dolphin-sprite img {
    width: 76px;
  }

  .dolphin-scene {
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dolphin-sprite {
    animation: none;
    transform: translateY(-2px);
  }
}