/* ═══════════════════════════════════════════════════════════════
   Rating Badge Animations
   Micro-interactions for rating badges across the site
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   Entrance Animation: Scale-up with subtle bounce
   ─────────────────────────────────────────────────────────────── */

@keyframes rating-entrance {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}

/* ───────────────────────────────────────────────────────────────
   Exceptional Tier: Golden Shimmer/Pulse
   ─────────────────────────────────────────────────────────────── */

@keyframes gold-shimmer {
  0% {
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.4), inset 0 0 0 rgba(201, 169, 110, 0);
  }
  50% {
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.8), inset 0 0 12px rgba(201, 169, 110, 0.3);
  }
  100% {
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.4), inset 0 0 0 rgba(201, 169, 110, 0);
  }
}

/* ───────────────────────────────────────────────────────────────
   Hover Effect: Glow and scale
   ─────────────────────────────────────────────────────────────── */

@keyframes rating-hover-glow {
  0% {
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.5);
  }
}

/* ───────────────────────────────────────────────────────────────
   Rating Badge Base Styles
   ─────────────────────────────────────────────────────────────── */

.rating-badge {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: all 0.25s ease;
}

/* Hover state for all rating badges */
.rating-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.25);
}

/* Exceptional (9.0+) - Gold/Champagne tier with shimmer */
.rating-badge--exceptional {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both,
             gold-shimmer 2s ease-in-out 0.3s 1;
}

/* Excellent (8.0–8.9) - Emerald tier */
.rating-badge--excellent {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rating-badge--excellent:hover {
  box-shadow: 0 8px 24px rgba(58, 175, 118, 0.25);
}

/* Good (7.0–7.9) - Blue tier */
.rating-badge--good {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rating-badge--good:hover {
  box-shadow: 0 8px 24px rgba(74, 142, 196, 0.25);
}

/* Average (6.0–6.9) - Amber tier */
.rating-badge--average {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rating-badge--average:hover {
  box-shadow: 0 8px 24px rgba(212, 168, 67, 0.25);
}

/* Below Average - Red tier */
.rating-badge--below {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rating-badge--below:hover {
  box-shadow: 0 8px 24px rgba(196, 75, 75, 0.25);
}

/* ───────────────────────────────────────────────────────────────
   Inline Rating Badges (Smaller versions)
   ─────────────────────────────────────────────────────────────── */

.rating-badge--sm {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rating-badge--sm:hover {
  transform: scale(1.08);
}

/* ───────────────────────────────────────────────────────────────
   Badge Component (Bonus/Feature badges)
   ─────────────────────────────────────────────────────────────── */

.badge {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: all 0.2s ease;
}

.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ───────────────────────────────────────────────────────────────
   Staggered Animation for Multiple Badges
   ─────────────────────────────────────────────────────────────── */

.rating-container > .rating-badge:nth-child(1) {
  animation-delay: 0s;
}

.rating-container > .rating-badge:nth-child(2) {
  animation-delay: 0.05s;
}

.rating-container > .rating-badge:nth-child(3) {
  animation-delay: 0.1s;
}

.rating-container > .rating-badge:nth-child(4) {
  animation-delay: 0.15s;
}

.rating-container > .rating-badge:nth-child(5) {
  animation-delay: 0.2s;
}

/* ───────────────────────────────────────────────────────────────
   Accessibility: Respect prefers-reduced-motion
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rating-badge,
  .rating-badge--exceptional,
  .rating-badge--excellent,
  .rating-badge--good,
  .rating-badge--average,
  .rating-badge--below,
  .rating-badge--sm,
  .badge {
    animation: none;
    transition: none;
  }

  .rating-badge:hover,
  .rating-badge--sm:hover,
  .badge:hover {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────
   Focus States for Keyboard Navigation
   ─────────────────────────────────────────────────────────────── */

.rating-badge:focus-visible,
.badge:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────
   Dark Mode Adjustments (already in dark theme, but for clarity)
   ─────────────────────────────────────────────────────────────── */

:root {
  --rating-animation-duration: 0.3s;
  --rating-hover-duration: 0.25s;
  --rating-shimmer-duration: 2s;
}

/* ───────────────────────────────────────────────────────────────
   Advanced: Pulse effect for new/featured ratings
   ─────────────────────────────────────────────────────────────── */

@keyframes rating-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.rating-badge.new,
.rating-badge.featured {
  animation: rating-entrance 0.3s cubic-bezier(0.22, 1, 0.36, 1) both,
             rating-pulse 2s ease-in-out 0.5s infinite;
}

/* ───────────────────────────────────────────────────────────────
   Responsive Adjustments for Mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .rating-badge:hover {
    transform: scale(1.03);
  }

  .rating-badge--sm:hover {
    transform: scale(1.05);
  }

  .badge:hover {
    transform: translateY(-1px);
  }

  /* Reduce animation duration on mobile for performance */
  .rating-badge {
    animation-duration: 0.25s;
  }
}