.fingers {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.finger {
  position: absolute;
  width: 55vh;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 5;
  object-fit: contain;
  overflow: visible;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base positions and transforms */
#finger-1 {
  top: -5%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px) rotate(-20deg);
  transform-origin: 50% 150%;
}

#finger-2 {
  top: 40%;
  right: -3%;
  margin-right: calc((5vw - 250px) * 1);
  transform: translateY(-60%) translateX(0) rotate(-5deg);
  transform-origin: -50% 50%;
}

#finger-3 {
  bottom: -10%;
  right: 5vw;
  margin-right: calc((19vw - 350px) * 1);
  transform: translateX(-5vw) translateY(-15%) rotate(1deg);
  transform-origin: -25% -100%;
}

#finger-4 {
  bottom: -5%;
  left: 10%;
  margin-left: calc((35% - 700px) * 0.35);
  transform: translateX(0) translateY(0) rotate(5deg);
  transform-origin: 125% -100%;
}

#finger-5 {
  top: 40%;
  left: 0;
  margin-left: calc((15% - 600px) * 0.3);
  transform: translateY(-70%) translateX(0) rotate(-1deg);
  transform-origin: 150% 50%;
}

/* Animation classes */
.finger.animated {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#finger-1.animated { animation-name: float1; animation-duration: 40s; }
#finger-2.animated { animation-name: float2; animation-duration: 14s; }
#finger-3.animated { animation-name: float3; animation-duration: 16s; }
#finger-4.animated { animation-name: float4; animation-duration: 15s; }
#finger-5.animated { animation-name: float5; animation-duration: 13s; }

/* Animation keyframes */
@keyframes float1 {
  0%, 100% { transform: translateX(-50%) translateY(-5px) rotate(-20deg); }
  50% { transform: translateX(-40%) translateY(15px) rotate(5deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(-60%) translateX(0) rotate(-5deg); }
  33% { transform: translateY(-55%) translateX(-10vmin) rotate(1deg); }
  66% { transform: translateY(-50%) translateX(-20vmin) rotate(10deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateX(-5vw) translateY(-15%) rotate(1deg); }
  50% { transform: translateX(0) translateY(0) rotate(-1deg); }
}

@keyframes float4 {
  0%, 100% { transform: translateX(0) translateY(0) rotate(5deg); }
  50% { transform: translateX(10px) translateY(-20px) rotate(-5deg); }
}

@keyframes float5 {
  0%, 100% { transform: translateY(-70%) translateX(0) rotate(-1deg); }
  33% { transform: translateY(-50%) translateX(10px) rotate(2deg); }
  66% { transform: translateY(-50%) translateX(30px) rotate(0deg); }
}

/* Paused state */
.fingers.paused .finger {
  animation: none;
}