:root{
  --bg: #446747;
  --line: #76b586;
  --dist: 520px;             /* JS 會覆寫 */
  --roll-delay: .6s;
  --roll-dur: 2.2s;
  --sink-dur: .6s;
  --ball-size: clamp(10px, 4vw, 28px);         /* 球圖會依此縮放 */
  --club-width: clamp(10px, 4vw, 30px);        /* 桿圖寬度（等比縮放） */
  --flag-width: clamp(10px, 6vw, 45px);        /* 旗幟圖寬度（等比縮放） */
  --pad: 1%;
}

#golf-preloader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: grid; place-items: center;
  contain: layout paint; /* 降低重排外溢 */
}

#golf-preloader .scene{
  width: clamp(280px, 60vw, 600px);
  aspect-ratio: 9/2;
  position: relative;
  display: grid; 
  place-items: center;
  user-select: none;
  left: clamp(10px, 6vw, 30px);
}

#golf-preloader .track{
  position: absolute; left: var(--pad); right: var(--pad); top: 52%;
  transform: translateY(-50%);
  height: 10px;
  background:
    linear-gradient(to bottom,
      transparent 0 2px,
      var(--line) 2px 8px,
      transparent 8px 100%);
  border-radius: 999px;
}

/* 球洞 + 旗幟 */
#golf-preloader .hole-wrap{
  position: absolute; right: var(--pad); top: 52%; transform: translateY(-50%);
}
#golf-preloader .hole{
  width: 30px; height: 10px; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 60%, #000 0 45%, #111 45% 70%, #000 70%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.05));
}
#golf-preloader .flag{
  position: absolute; left: 90%; transform: translateX(-50%); bottom: 0;
  width: var(--flag-width); height: auto; transform-origin: bottom center;
  will-change: transform;
}

/* 球 */
#golf-preloader .ball{
  position: absolute; left: var(--pad); top: 52%;
  transform: translate(-50%,-50%);
  width: var(--ball-size); height: var(--ball-size); object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  will-change: transform;
  /* 預設不播放，等 JS 設好 --dist 後再開啟 */
  animation: none;
}

/* 桿 */
#golf-preloader .club{
  position: absolute; left: calc(var(--pad) - 34px);
  transform: translateY(-50%) rotate(18deg);
  width: var(--club-width); height: auto; transform-origin: left center;
  will-change: transform;
  animation: none;
}

/* 啟動動畫：JS 會加上 .run */
#golf-preloader.run .club{
  animation: swing .9s ease-in-out .4s both;
}
#golf-preloader.run .ball{
  animation: roll var(--roll-dur) cubic-bezier(.33,.02,.17,.99) var(--roll-delay) both;
}

@keyframes swing{
  0% { transform: translateY(-50%) rotate(30deg); }
  50%{ transform: translateY(-50%) rotate(-12deg); }
  100%{ transform: translateY(-50%) rotate(6deg); }
}

/* 滾動與進洞 */
@keyframes roll{
  from { transform: translate(-50%,-50%) translateX(0) rotate(0turn); }
  to   { transform: translate(-50%,-50%) translateX(var(--dist)) rotate(6turn); }
}
#golf-preloader .ball.sink{
  animation: sink var(--sink-dur) ease-in-out forwards;
}
@keyframes sink{
  0%   { transform: translate(-50%,-50%) translateX(var(--dist)) scale(1); opacity: 1; }
  50%  { transform: translate(-50%,calc(-50% + 6px)) translateX(var(--dist)) scale(.55); }
  100% { transform: translate(-50%,calc(-50% + 8px)) translateX(var(--dist)) scale(.15); opacity: 0; }
}

/* 提示字 */
#golf-preloader .hint{
  position: absolute; bottom: 70%; color: var(--line);
  font-size: clamp(24px, 9vw, 100px);
  font-weight: 800; 
  letter-spacing: .4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* 載入器淡出 */
#golf-preloader.fade-out{
  pointer-events: none;
  animation: preloader-fade .35s ease forwards;
}
#golf-preloader.fast-fade{ animation-duration: .2s; }
@keyframes preloader-fade{ to{ opacity: 0; visibility: hidden; } }

/* 只淡出（無球動畫），給 reduced motion 或快速完成時 */
#golf-preloader.fade-only .scene{ opacity: 0; }
#golf-preloader.fade-only :where(.ball,.club,.flag){ animation: none !important; }

/* 進場的頁面內容動效（和第 3 節的跨頁轉場共用） */
#app{
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.page-enter #app{
  opacity: 1; transform: none;
}

/* 無動畫偏好：整體快速淡入/淡出 */
@media (prefers-reduced-motion: reduce){
  #golf-preloader.run .club, #golf-preloader.run .ball,
  #golf-preloader .ball.sink{ animation: none !important; }
  #golf-preloader{ transition: opacity .15s ease; }
  #app{ transition: opacity .15s ease !important; transform: none !important; }
}