#gbt-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  display: none;
  background: transparent;
}

/* show container */
#gbt-overlay.gbt-show { display: block; }

/* the ball */
.gbt-ball{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(1);
  will-change: transform, filter;
  box-shadow: 0 1vmin 2vmin rgba(0,0,0,.25);
  /* base color via CSS variable; use currentColor for gradients */
  color: var(--gbt-ball-color, #ffffff);
  background:
    /* highlight and shading overlay for any base color */
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.15) 60%, rgba(0,0,0,.10) 100%),
    /* dimples */
    radial-gradient(circle, rgba(0,0,0,.06) 20%, transparent 21%) 0 0/2.2vmin 2.2vmin,
    radial-gradient(circle, rgba(0,0,0,.06) 20%, transparent 21%) 1.1vmin 1.1vmin/2.2vmin 2.2vmin,
    currentColor;
}

/* exit (before nav): expand to full-screen */
.gbt-cover .gbt-ball { animation: gbtCover var(--gbt-cover-duration, .45s) ease-in forwards; }

/* entry (after load): start already covering screen */
.gbt-covered { display:block; }
.gbt-covered .gbt-ball { transform: translate(-50%,-50%) scale(40); }

/* tee shot: smoothly zooms out and continuously veers left into the distance */
.gbt-exit .gbt-ball { animation: gbtExit var(--gbt-exit-duration, 1.6s) cubic-bezier(.2,.8,.2,1) forwards; }

@keyframes gbtCover {
  0%   { transform: translate(-50%,-50%) scale(1);   filter: brightness(1); }
  100% { transform: translate(-50%,-50%) scale(40);  filter: brightness(1.02); }
}

@keyframes gbtExit {
  /* shrink into dead-center */
  0%   { transform: translate(-50%,-50%) scale(40) rotate(0deg); }
  35%  { transform: translate(-50%,-50%) scale(1)   rotate(360deg); }
  /* brief hold at center (~0.2s proportional) */
  48%  { transform: translate(-50%,-50%) scale(1)   rotate(540deg); }
  /* smooth continuous arc up-left like a realistic tee shot */
  100% { transform: translate(-120vw,-40vh) scale(0.8) rotate(1080deg); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  #gbt-overlay { display:none !important; }
}