/* ============================================================
   GOLF GREEN SCENE  (replaces hero__photo on the home page)
   ============================================================ */

.hero__golf-scene {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55%;                /* widened to contain the larger green */
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  background: linear-gradient(160deg, #0c2614 0%, #163b21 55%, #1c4a28 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ── The Green ─────────────────────────────────────────────── */
.golf-green {
  position: relative;
  width: 640px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 36%,
    #6ed06e 0%,
    #4ab44a 22%,
    #2e8e2e 52%,
    #1a5c1a 100%
  );
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    inset 0 -14px 40px rgba(0, 0, 0, 0.42),
    inset 0 6px 18px rgba(255, 255, 255, 0.07);
}

/* Subtle mowing stripes */
.golf-green::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    -28deg,
    transparent 0px,
    transparent 20px,
    rgba(0, 0, 0, 0.05) 20px,
    rgba(0, 0, 0, 0.05) 40px
  );
}

/* ── The Hole (half the original size) ─────────────────────── */
.golf-hole {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #1a1a1a 0%, #000 100%);
  top: 52%;
  left: 56%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 1),
    0 2px 5px rgba(0, 0, 0, 0.65);
}

/* ── Flagstick (twice as tall) ─────────────────────────────── */
.golf-pin {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 140px;
  background: linear-gradient(to bottom, #FFD700 0%, #c8a800 100%);
}

/* ── Flag (twice as large) ─────────────────────────────────── */
.golf-flag {
  position: absolute;
  top: 0;
  left: 3px;
  width: 52px;
  height: 34px;
  background: linear-gradient(135deg, #FFD700 0%, #e2c000 100%);
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
  transform-origin: left center;
  animation: flag-wave 2.2s ease-in-out infinite;
}

@keyframes flag-wave {
  0%,  100% { transform: skewY(0deg)  scaleX(1);    }
  30%        { transform: skewY(5deg)  scaleX(1.07); }
  65%        { transform: skewY(-3deg) scaleX(0.94); }
}


/* ============================================================
   GOLF BALL  —  true parabolic arc via nested elements
   ============================================================

   True parabola technique — X and Y animated independently:

     .golf-ball-wrap  →  horizontal motion only  (linear timing)
     .golf-ball       →  vertical  motion only
                         ease-out going up  (fights gravity)
                         ease-in  going down (pulled by gravity)

   Because horizontal speed is constant and vertical speed follows
   a gravity curve, the combined path is a genuine parabola.

   Timeline (after the 2 s load delay):
     0  – 63%   parabolic flight arc over the hero text
    63  – 78%   landing + bounce settle
    78  – 90%   roll to hole
    90  – 100%  drop / disappear
   ============================================================ */

/* Outer wrapper — horizontal position only */
.golf-ball-wrap {
  position: absolute;
  right:  29%;
  top:    calc(50% + 2px);
  z-index: 10;
  opacity: 0;
  animation: ball-x 4.6s linear 2s forwards;
}

@keyframes ball-x {
  0%  { transform: translateX(-88vw); opacity: 1; }
  63% { transform: translateX(0);     opacity: 1; }
  78% { transform: translateX(0);     opacity: 1; animation-timing-function: ease-out; }
  100%{ transform: translateX(44px);  opacity: 1; }
}

/* Inner ball — vertical position + spin + squish */
.golf-ball {
  width:  20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%,
    #ffffff 0%,
    #eeeeee 40%,
    #d2d2d2 100%
  );
  box-shadow:
    2px 3px 7px rgba(0, 0, 0, 0.55),
    inset -1px -1px 3px rgba(0, 0, 0, 0.18);
  animation: ball-y 4.6s linear 2s forwards;
}

@keyframes ball-y {

  /* Below landing height — ease-out decelerates as it climbs */
  0% {
    transform: translateY(6vh) rotate(0deg);
    animation-timing-function: ease-out;
  }

  /* APEX over "Swing Into Something Great" */
  31% {
    transform: translateY(-24vh) rotate(220deg);
    animation-timing-function: ease-in;   /* accelerates downward */
  }

  /* Lands at anchor height */
  63% {
    transform: translateY(0) rotate(500deg);
    animation-timing-function: linear;
  }

  /* IMPACT squish */
  68% {
    transform: translateY(12px) rotate(515deg) scale(1.5, 0.58);
    animation-timing-function: ease-out;
  }

  /* Bounce */
  73% {
    transform: translateY(-6px) rotate(530deg) scale(0.88, 1.14);
    animation-timing-function: ease-in;
  }

  /* Settle */
  78% {
    transform: translateY(0) rotate(545deg) scale(1);
    animation-timing-function: linear;
  }

  /* Roll to a stop next to the hole */
  100% {
    transform: translateY(5px) rotate(600deg) scale(1);
  }
}


/* ============================================================
   RESPONSIVE — hide scene + ball on small screens
   ============================================================ */
@media (max-width: 899px) {
  .hero__golf-scene,
  .golf-ball-wrap {
    display: none;
  }
}