/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — Akshit's Question
   Keyframes, micro-interactions, and SVG transitions
   ═══════════════════════════════════════════════════════════════ */

/* ── Ambient Background Floats ── */
@keyframes ambientFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 30px) scale(1.08); }
  66%      { transform: translate(20px, -20px) scale(0.95); }
}

@keyframes ambientFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -40px) scale(1.1); }
}

@keyframes ambientFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}

/* ── Entry Animations ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeScaleUp {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Shimmer Gradient ── */
@keyframes shimmerGradient {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Pulse Ring ── */
@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(217,119,87,0.3);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(217,119,87,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217,119,87,0);
  }
}

/* ── Gentle Breathing Pulse ── */
@keyframes breathePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ── Vote Button Ripple ── */
@keyframes voteRipple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.vote-btn .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  pointer-events: none;
  animation: voteRipple 0.6s var(--ease-out-expo) forwards;
}

/* ── Checkmark Draw ── */
@keyframes drawCheck {
  0%   { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

.voted-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.vote-btn--selected .voted-check path {
  animation: drawCheck 0.5s var(--ease-out-quart) 0.2s forwards;
}

/* ── Number Counter Tween (JS-driven, this is the spring container) ── */
.count-animate {
  display: inline-block;
  transition: transform 0.15s var(--ease-spring);
}

.count-animate.is-bumping {
  transform: scale(1.15);
}

/* ── Modal Entrance Sequence ── */
@keyframes modalIllustrationPop {
  0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.modal-overlay.is-active .modal-illustration,
.modal-overlay.is-active .modal-emoji {
  animation: modalIllustrationPop 0.7s var(--ease-spring) 0.15s both;
}

.modal-overlay.is-active .modal-title {
  animation: fadeSlideUp 0.5s var(--ease-out-expo) 0.3s both;
}

.modal-overlay.is-active .modal-message {
  animation: fadeSlideUp 0.5s var(--ease-out-expo) 0.4s both;
}

.modal-overlay.is-active .modal-actions {
  animation: fadeSlideUp 0.5s var(--ease-out-expo) 0.5s both;
}

/* ── Floating Hearts (Yes celebration) ── */
@keyframes floatHeart {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  15% {
    transform: translateY(-20px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(0.5) rotate(20deg);
    opacity: 0;
  }
}

/* ── Falling Teardrops (No sadness) ── */
@keyframes fallTear {
  0% {
    transform: translateY(-50px) scale(0);
    opacity: 0;
  }
  20% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(300px) scale(0.3);
    opacity: 0;
  }
}

/* ── Logo Spin (Easter Egg on hover) ── */
.app-logo:hover {
  animation: pulseRing 1.2s ease infinite;
}

/* ── Progress Bar Shimmer ── */
@keyframes progressShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: progressShimmer 2s ease-in-out infinite;
  border-radius: inherit;
}

.progress-fill {
  position: relative;
}

/* ── Stagger Children ── */
.vote-actions .vote-btn:nth-child(1) {
  animation: fadeScaleUp 0.6s var(--ease-out-expo) 0.5s both;
}

.vote-actions .vote-btn:nth-child(2) {
  animation: fadeScaleUp 0.6s var(--ease-out-expo) 0.65s both;
}

/* ── Hover Glow on Poll Card ── */
.poll-card {
  transition: box-shadow var(--duration-slow) var(--ease-smooth);
}

.poll-card:hover {
  box-shadow: 0 20px 60px rgba(25,25,25,0.10),
              0 6px 20px rgba(25,25,25,0.06);
}

/* ── Reduce Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}