/**
 * hero-balls-fall.css — 인트로 공 낙하 테스트 (lime/mint SVG)
 */

.hero-balls-visual--static {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-balls-visual--fall .hero-balls-visual--static {
  display: none;
}

.hero-balls-fall {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-balls-fall__cluster {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  overflow: visible;
}

.hero-balls-fall__pile {
  position: absolute;
  --hero-ball-size: clamp(146px, 24.8vw, 265px);
  --hero-ball-row-step: calc(var(--hero-ball-size) * 0.855);
}

.hero-balls-fall__cluster--desk-left,
.hero-balls-fall__cluster--desk-right {
  display: none;
}

.hero-balls-fall__cluster--mobile {
  display: none;
}

.hero-ball {
  position: absolute;
  width: var(--hero-ball-size);
  height: var(--hero-ball-size);
  opacity: 0;
  will-change: transform, opacity;
  bottom: calc(var(--ball-row, 0) * var(--hero-ball-row-step));
  transform: translate3d(0, calc(-1 * clamp(70vh, 100vh, 120vh)), 0);
}

.hero-ball img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.hero-balls-visual.is-playing .hero-ball {
  animation: hero-ball-drop 1.15s cubic-bezier(0.33, 1.05, 0.42, 1) var(--drop-delay, 0ms) forwards;
}

@keyframes hero-ball-drop {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * clamp(70vh, 100vh, 120vh)), 0);
  }

  72% {
    transform: translate3d(0, 5px, 0);
  }

  86% {
    transform: translate3d(0, -2px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 769px) {
  .hero-balls-fall__cluster--desk-left,
  .hero-balls-fall__cluster--desk-right {
    display: block;
    bottom: var(--hero-ground-band);
    top: max(
      env(safe-area-inset-top, 0px),
      var(--process-header-height, var(--header-height, 64px)),
      56px
    );
  }

  .hero-balls-fall__cluster--desk-left {
    left: 0;
    width: min(var(--hero-balls-side-width, clamp(240px, 37vw, 560px)), calc(50vw - clamp(72px, 10vw, 140px)));
  }

  .hero-balls-fall__cluster--desk-left .hero-balls-fall__pile {
    right: clamp(2px, 0.8vw, 12px);
    bottom: clamp(0px, 0.4vw, 6px);
    left: auto;
  }

  .hero-balls-fall__cluster--desk-left .hero-ball {
    right: calc((var(--ball-col) + var(--ball-stagger, 0)) * var(--hero-ball-size));
    left: auto;
  }

  .hero-balls-fall__cluster--desk-right {
    right: 0;
    left: auto;
    width: min(var(--hero-balls-side-width, clamp(240px, 37vw, 560px)), calc(50vw - clamp(72px, 10vw, 140px)));
  }

  .hero-balls-fall__cluster--desk-right .hero-balls-fall__pile {
    left: clamp(2px, 0.8vw, 12px);
    bottom: clamp(0px, 0.4vw, 6px);
    right: auto;
  }

  .hero-balls-fall__cluster--desk-right .hero-ball {
    left: calc((var(--ball-col) + var(--ball-stagger, 0)) * var(--hero-ball-size));
    right: auto;
  }
}

@media (max-width: 768px) {
  .hero-balls-fall__cluster--mobile {
    display: block;
    left: 0;
    right: 0;
    bottom: var(--hero-ground-band);
    height: var(--hero-mobile-balls-visual-h, clamp(160px, 36vh, 400px));
  }

  .hero-balls-fall__cluster--mobile .hero-balls-fall__pile {
    left: 50%;
    bottom: clamp(0px, 0.6vw, 6px);
    transform: translateX(-50%);
    --hero-ball-size: clamp(113px, 31vw, 194px);
  }

  .hero-balls-fall__cluster--mobile .hero-ball {
    left: calc(
      (var(--ball-col) + var(--ball-stagger, 0)) * var(--hero-ball-size) - 2.75 * var(--hero-ball-size)
    );
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-balls-visual--fall .hero-balls-visual--static {
    display: block;
  }

  .hero-balls-fall {
    display: none;
  }
}