:root {
  --volu-cyan: #29f2ff;
  --volu-cyan-light: #8afbff;
  --volu-blue-deep: #07122b;
  --volu-blue-electric: #1c7dff;
  --volu-ease: cubic-bezier(.16, 1, .3, 1);
  --volu-glow: drop-shadow(0 16px 28px rgba(0, 0, 0, .24));
  --volu-glow-strong: drop-shadow(0 0 14px rgba(41, 242, 255, .22)) drop-shadow(0 20px 38px rgba(0, 0, 0, .3));
}

.volu-entity {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.volu-entity::before {
  display: none;
}

.volu-entity--bare::before {
  display: none;
}

.volu-entity__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: var(--volu-glow);
  transform-origin: 50% 56%;
  transition: opacity .18s ease, filter .35s ease, transform .5s var(--volu-ease);
}

.volu-entity.is-changing .volu-entity__image {
  opacity: .2;
  transform: scale(.94);
}

.volu-entity[data-volu-state="energized"] .volu-entity__image,
.volu-entity[data-volu-state="swarm"] .volu-entity__image,
.volu-entity[data-volu-state="lava"] .volu-entity__image {
  filter: var(--volu-glow-strong);
}

.volu-entity[data-volu-state="light"] .volu-entity__image {
  filter: drop-shadow(0 12px 24px rgba(7, 18, 43, .14));
}

.volu-entity[data-volu-state="flat"] .volu-entity__image,
.volu-entity[data-volu-state="mono"] .volu-entity__image {
  filter: none;
}

.volu-entity.is-inview[data-volu-state="neutral"] .volu-entity__image {
  animation: volu-float 4.2s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="curious"] .volu-entity__image {
  animation: volu-curious 4.8s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="attentive"] .volu-entity__image {
  animation: volu-attentive 3.8s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="energized"] .volu-entity__image {
  animation: volu-pulse 2.5s ease-in-out infinite;
}

.volu-entity.is-inview[data-volu-state="connected"] .volu-entity__image {
  animation: volu-connect 3.8s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="duo"] .volu-entity__image {
  animation: volu-connect 3.8s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="cluster"] .volu-entity__image {
  animation: volu-cluster 3.6s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="flow"] .volu-entity__image {
  animation: volu-flow 3.4s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="swarm"] .volu-entity__image {
  animation: volu-swarm 3.2s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="lava"] .volu-entity__image {
  animation: volu-lava 5.4s ease-in-out infinite alternate;
}

.volu-entity.is-inview[data-volu-state="light"] .volu-entity__image {
  animation: volu-float 4.2s ease-in-out infinite alternate;
}

.volu-paused .volu-entity__image,
.volu-paused .volu-entity::before {
  animation-play-state: paused !important;
}

@keyframes volu-float {
  from { transform: translate3d(0, 4px, 0) rotate(-.6deg); }
  to { transform: translate3d(0, -8px, 0) rotate(.8deg); }
}

@keyframes volu-curious {
  0% { transform: translate3d(-2px, 3px, 0) rotate(-1.4deg) scaleX(1.015) scaleY(.985); }
  100% { transform: translate3d(5px, -6px, 0) rotate(1.2deg) scaleX(.985) scaleY(1.018); }
}

@keyframes volu-attentive {
  from { transform: translate3d(-2px, 2px, 0) rotate(-.8deg) scale(.995); }
  to { transform: translate3d(2px, -5px, 0) rotate(.6deg) scale(1.012); }
}

@keyframes volu-pulse {
  0%, 100% { filter: var(--volu-glow); transform: scale(1); }
  50% { filter: var(--volu-glow-strong); transform: scale(1.035); }
}

@keyframes volu-connect {
  from { transform: translateX(-4px) scaleX(.99); }
  to { transform: translateX(4px) scaleX(1.015); }
}

@keyframes volu-cluster {
  from { transform: translate3d(-3px, 3px, 0) scale(.99); }
  to { transform: translate3d(3px, -4px, 0) scale(1.012); }
}

@keyframes volu-flow {
  from { transform: translateX(-7px) scaleX(.985); }
  to { transform: translateX(8px) scaleX(1.018); }
}

@keyframes volu-swarm {
  from { transform: translate3d(-3px, 4px, 0) scale(.99); }
  to { transform: translate3d(4px, -5px, 0) scale(1.018); }
}

@keyframes volu-lava {
  from { transform: translate3d(-5px, 3px, 0) scaleX(1.01) scaleY(.99); }
  to { transform: translate3d(6px, -4px, 0) scaleX(.99) scaleY(1.018); }
}

@media (prefers-reduced-motion: reduce) {
  .volu-entity__image,
  .volu-entity::before {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}