.a24-smm-wrap {
  width: 100%;
  max-width: var(--a24-smm-max-width, 900px);
}
.a24-smm-align-center { margin-left: auto; margin-right: auto; }
.a24-smm-align-left { margin-left: 0; margin-right: auto; }
.a24-smm-align-right { margin-left: auto; margin-right: 0; }

.a24-smm-stage {
  position: relative;
  width: 100%;
  height: var(--a24-smm-height-desktop, 540px);
  background: var(--a24-smm-bg, transparent);
  overflow: hidden;
}

.a24-smm-canvas,
.a24-smm-static,
.a24-smm-icons-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.a24-smm-canvas {
  display: block;
  z-index: 1;
}

.a24-smm-static {
  display: none;
  object-fit: contain;
  z-index: 1;
}

.a24-smm-icons-layer {
  z-index: 2;
  pointer-events: none;
  opacity: var(--a24-smm-icons-opacity, 1);
}

.a24-smm-icons-layer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.a24-smm-icon-item {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: var(--a24-icon-origin-x, 50%) var(--a24-icon-origin-y, 50%);
  animation: a24SmmMotion var(--a24-icon-float-duration, 6s) ease-in-out var(--a24-icon-float-delay, 0s) infinite alternate;
  will-change: transform, opacity;
}

.a24-smm-icon-item.is-visible {
  opacity: 1;
}

@keyframes a24SmmMotion {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--a24-icon-base-scale, 1));
  }
  25% {
    transform: translate3d(calc(var(--a24-icon-float-x, 8px) * 0.35), calc(var(--a24-icon-float-y, 8px) * -0.2), 0) rotate(calc(var(--a24-icon-rotate, 0deg) * 0.35)) scale(calc(var(--a24-icon-base-scale, 1) * (1 + (var(--a24-icon-pulse-scale, 0.08) * 0.45))));
  }
  50% {
    transform: translate3d(calc(var(--a24-icon-float-x, 8px) * 0.7), calc(var(--a24-icon-float-y, 8px) * 0.1), 0) rotate(calc(var(--a24-icon-rotate, 0deg) * 0.8)) scale(calc(var(--a24-icon-base-scale, 1) * (1 + var(--a24-icon-pulse-scale, 0.08))));
  }
  75% {
    transform: translate3d(calc(var(--a24-icon-float-x, 8px) * 0.45), calc(var(--a24-icon-float-y, 8px) * 0.75), 0) rotate(calc(var(--a24-icon-rotate, 0deg) * 0.55)) scale(calc(var(--a24-icon-base-scale, 1) * (1 + (var(--a24-icon-pulse-scale, 0.08) * 0.3))));
  }
  100% {
    transform: translate3d(var(--a24-icon-float-x, 8px), var(--a24-icon-float-y, 8px), 0) rotate(var(--a24-icon-rotate, 0deg)) scale(var(--a24-icon-base-scale, 1));
  }
}

.a24-smm-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--a24-smm-center-width, 240px), 80%);
  max-width: 80%;
  height: auto;
  opacity: var(--a24-smm-center-opacity, 1);
  pointer-events: none;
  z-index: 3;
}

.a24-smm-mobile-static .a24-smm-canvas { display: none; }
.a24-smm-mobile-static .a24-smm-static { display: block; }

@media (max-width: 767px) {
  .a24-smm-stage {
    height: var(--a24-smm-height-mobile, 360px);
  }

  .a24-smm-center {
    width: min(var(--a24-smm-center-width-mobile, 160px), 72%);
    max-width: 72%;
  }
}