/*
  YellowOrGreen — animations.css
  All keyframes and transition rules live here. Every animation is muted
  or removed under prefers-reduced-motion at the bottom of this file.
*/

/* Entrance ------------------------------------------------------------ */

.hero-copy,
.ball-stage,
.poll-card {
  animation: enter-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-copy   { animation-delay: 0.05s; }
.ball-stage  { animation-delay: 0.15s; }
.poll-card   { animation-delay: 0.28s; }

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating ball --------------------------------------------------------
   The float and its shadow are driven by the SAME cycle so the shadow
   compresses as the ball rises and relaxes as it falls, reinforcing the
   ball's depth without changing its color. */

.ball-img {
  animation: float 4.2s ease-in-out infinite;
  transform-origin: 50% 85%;
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-14px) scale(1.01); }
}

/* Progress bars ---------------------------------------------------------*/

.progress-bar {
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Percentage change pulse ---------------------------------------------- */

.option-percent.pulse {
  animation: pulse-scale 0.4s ease-out;
}

@keyframes pulse-scale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Vote confirmation ------------------------------------------------------ */

.poll-option.voted .vote-confirmation {
  animation: confirm-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes confirm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Total vote counter bump ------------------------------------------------ */

.poll-total.bump #total-votes {
  animation: pulse-scale 0.4s ease-out;
}

/* Button press ----------------------------------------------------------- */

.vote-btn {
  transition: transform 0.12s ease, filter 0.12s ease;
}

/* Loading shimmer --------------------------------------------------------- */

[data-loading] {
  position: relative;
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(12, 32, 39, 0.08) 25%,
    rgba(12, 32, 39, 0.16) 37%,
    rgba(12, 32, 39, 0.08) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

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

@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .ball-stage,
  .poll-card,
  .ball-img,
  .option-percent.pulse,
  .poll-option.voted .vote-confirmation,
  .poll-total.bump #total-votes,
  [data-loading] {
    animation: none !important;
  }

  .progress-bar,
  .vote-btn {
    transition: none !important;
  }

  .ball-img {
    transform: none !important;
  }
}