/* ShrimpWeb — Twin Crest animation (Med 10)
   Transform-only · crisp vectors · no SVG filters */

.shrimp-twin-crest-stage {
  --shrimp-size: 160px;
  position: relative;
  width: var(--shrimp-size);
  height: var(--shrimp-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.shrimp-twin-crest {
  --shrimp-logo-width: calc(var(--shrimp-size) * 0.92);
  position: relative;
  width: var(--shrimp-logo-width);
  transform-origin: 44% 56%;
  will-change: transform;
  backface-visibility: hidden;
}

.shrimp-twin-crest-liquid {
  display: block;
  width: 100%;
  transform-origin: 44% 56%;
  animation: shrimp-twin-liquid 9s ease-in-out infinite;
  will-change: transform;
}

.shrimp-twin-crest-liquid img,
.shrimp-twin-crest-liquid svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* GSAP drives .shrimp-twin-crest — disable CSS motion when active */
.shrimp-twin-crest.is-gsap {
  animation: none;
}

/* Fallback if GSAP is unavailable */
@keyframes shrimp-twin-crest-fallback {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  18% {
    transform: translate3d(0, -20px, 0) rotate(-5deg) scale(1.02, 0.98);
  }
  32% {
    transform: translate3d(0, 4px, 0) rotate(3deg) scale(0.99, 1.01);
  }
  48% {
    transform: translate3d(0, -14px, 0) rotate(-3deg) scale(1.015, 0.985);
  }
  64% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.shrimp-twin-crest:not(.is-gsap) {
  animation: shrimp-twin-crest-fallback 5.1s ease-in-out infinite;
}

@keyframes shrimp-twin-liquid {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg) scale(1);
  }
  50% {
    transform: translate3d(-1px, 1px, 0) rotate(-0.4deg) skewX(-0.25deg) scale(0.996, 1.006);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shrimp-twin-crest,
  .shrimp-twin-crest-liquid {
    animation: none !important;
  }

  .shrimp-twin-crest.is-gsap {
    transform: none !important;
  }
}