/* =========================================================
   Dimplez Golf — animations
   Text: blur + translateY + opacity
   Phones: horizontal rotateY 360°
   Hero: golf ball path into hole, then phone reveal
   ========================================================= */

:root {
  --reveal-duration: 0.85s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --flip-duration: 0.9s;
}

/* ---------- Text reveal (global) ---------- */

.reveal-text {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, filter, transform;
}

.reveal-text.is-revealed,
.revealed .reveal-text {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.reveal-text:nth-child(1) { transition-delay: 0.05s; }
.reveal-text:nth-child(2) { transition-delay: 0.12s; }
.reveal-text:nth-child(3) { transition-delay: 0.2s; }
.reveal-text:nth-child(4) { transition-delay: 0.28s; }
.reveal-text:nth-child(5) { transition-delay: 0.36s; }

.step-copy .reveal-text:nth-child(1) { transition-delay: 0.05s; }
.step-copy .reveal-text:nth-child(2) { transition-delay: 0.14s; }
.step-copy .reveal-text:nth-child(3) { transition-delay: 0.22s; }

/* ---------- Phone 360° Y-spin ---------- */

.phone-flip .phone-inner {
  transform: rotateY(0deg);
}

.phone-flip.is-flipping .phone-inner,
.phone-flip.is-revealed .phone-inner {
  animation: phoneSpinY var(--flip-duration) cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

@keyframes phoneSpinY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Hero phone starts hidden, then spins in */
.phone--hero {
  opacity: 0;
  transform: scale(0.86) translateY(1.5rem);
  transition:
    opacity 0.55s var(--reveal-ease) 0.15s,
    transform 0.55s var(--reveal-ease) 0.15s;
}

.hero.is-ready .phone--hero {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.hero.is-ready .phone--hero.is-flipping .phone-inner,
.hero.is-ready .phone--hero.is-revealed .phone-inner {
  animation: phoneSpinY 1.05s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}

/* ---------- Golf ball → hole ---------- */

.hero .golf-ball {
  animation: none;
  opacity: 0;
}

.hero.is-ready .golf-ball {
  animation: ballToHole 1.55s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}

@keyframes ballToHole {
  0% {
    opacity: 1;
    left: 58%;
    bottom: 70%;
    transform: rotate(0deg) scale(1);
  }
  40% {
    opacity: 1;
    left: 42%;
    bottom: 78%;
    transform: rotate(200deg) scale(1);
  }
  68% {
    opacity: 1;
    left: 26%;
    bottom: 36%;
    transform: rotate(420deg) scale(0.92);
  }
  86% {
    opacity: 1;
    left: 22%;
    bottom: 26%;
    transform: rotate(520deg) scale(0.55);
  }
  100% {
    opacity: 0;
    left: 22%;
    bottom: 22%;
    transform: rotate(600deg) scale(0.18);
  }
}

/* ---------- Focus section pulse ---------- */

@keyframes focusPulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

/* ---------- Counter twitch ---------- */

.time-value.is-twitching {
  animation: counterTwitch 0.12s ease-out;
}

@keyframes counterTwitch {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1.5px, -1px) rotate(-0.6deg);
  }
  50% {
    transform: translate(-1.5px, 1px) rotate(0.6deg);
  }
  75% {
    transform: translate(1px, 0.5px) rotate(-0.3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal-text {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .hero-stage {
    --hero-drop: 1;
    --hero-phone: 1;
  }

  .hero-stage__ball,
  .hero-stage__phone,
  .hero-media-line {
    transition: none;
  }

  .phone--hero {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .phone-flip.is-flipping .phone-inner,
  .phone-flip.is-revealed .phone-inner,
  .hero.is-ready .phone--hero.is-flipping .phone-inner {
    animation: none;
  }

  .focus-glow {
    animation: none;
  }

  .time-value.is-twitching {
    animation: none;
  }
}