/* =========================================================
   Round Ball Gimmick (하단 + 버튼 유도 골프공 낙하 연출)
   - 화면 좌측에서 골프공이 낙하 → 하단 네비 상단 선에서
     바운스 2회 → 구름 → 초록 + 원 중심으로 낙하 → 팡! + 라벨
   - 좌표/타이밍은 ballDrop.js가 물리식으로 계산해 인라인 주입.
     이 파일은 순수 프레젠테이션(모양/이펙트)만 담당.
   ========================================================= */

.ar-ball-layer {
  position: fixed;
  inset: 0;
  z-index: 60;              /* 하단 네비(z=50) 위에서 공이 굴러/떨어지도록 */
  pointer-events: none;     /* 탭 차단 금지 */
  overflow: hidden;
  contain: strict;
}

/* 지면(네비 상단 선)에 드리우는 그림자. 공이 높이 뜰수록 옅고 작아짐. */
.ar-ball-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 7px;
  margin: -3.5px 0 0 -11px;   /* 중심 정렬 */
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(36, 34, 29, 0.30) 0%,
              rgba(36, 34, 29, 0.18) 45%,
              rgba(36, 34, 29, 0) 72%);
  will-change: transform, opacity;
  opacity: 0;
}

/* 골프공 본체 */
.ar-ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;      /* 중심을 (x,y)에 맞춤 */
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%,
      #ffffff 0%,
      #f4f6f4 38%,
      #d9e0da 78%,
      #c2cbc3 100%);
  box-shadow:
    inset -2px -2px 3px rgba(120, 130, 120, 0.45),
    inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(36, 34, 29, 0.25);
  will-change: transform;
  opacity: 0;
}

/* 딤플(골프공 표면 질감) — 아주 은은하게 */
.ar-ball::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle, rgba(150,160,150,0.35) 0.7px, transparent 1px),
    radial-gradient(circle, rgba(150,160,150,0.30) 0.7px, transparent 1px);
  background-size: 5px 5px, 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  opacity: 0.6;
}

/* 팡! 터짐 링 이펙트 */
.ar-ball-burst {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2.5px solid var(--grass-500, #4F865D);
  opacity: 0;
  will-change: transform, opacity;
}

.ar-ball-burst.is-pop {
  animation: ar-ball-burst-pop 460ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ar-ball-burst-pop {
  0%   { opacity: 0.9; transform: scale(0.3); border-width: 3px; }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: scale(2.6); border-width: 0.5px; }
}

/* 파편 입자 */
.ar-ball-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  opacity: 0;
  will-change: transform, opacity;
}

.ar-ball-spark.is-pop {
  animation: ar-ball-spark-fly 480ms ease-out forwards;
}

@keyframes ar-ball-spark-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(0.4); }
}

/* "라운드 등록!" 라벨 — 살짝 떴다 즉시 사라짐 */
.ar-ball-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  padding: 5px 12px;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(180deg, var(--grass-500, #4F865D), var(--grass-600, #315F40));
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(49, 95, 64, 0.35);
  opacity: 0;
  will-change: transform, opacity;
}

.ar-ball-label.is-pop {
  animation: ar-ball-label-rise 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ar-ball-label-rise {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -80%) scale(1); }
  62%  { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.95); }
}

/* 접근성: 모션 최소화 선호 시 연출 비활성화 (JS에서도 가드) */
@media (prefers-reduced-motion: reduce) {
  .ar-ball-layer { display: none !important; }
}