/* ============================================================
   joinsteer-sons-site — animations layer v2
   Compatible avec v2 statique (TOP 10 + quiz audio + 125 voitures).
   Pure CSS keyframes + transitions. Paired with animations.js.
   Respects prefers-reduced-motion.
   ============================================================ */

:root {
  --anim-fast: 220ms;
  --anim-med: 420ms;
  --anim-slow: 720ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* -- 1. Scroll progress bar (top of page) -- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-hover, var(--green)) 50%, var(--green) 100%);
  background-size: 200% 100%;
  transform: scaleX(var(--scroll, 0));
  transform-origin: 0 50%;
  z-index: 9999;
  pointer-events: none;
  animation: progressShimmer 4s linear infinite;
  box-shadow: 0 0 12px rgba(232, 255, 46, 0.6);
}
@keyframes progressShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* -- 2. Hero entry stagger -- */
.hero-body > .eyebrow,
.hero-body > .hero-signature,
.hero-body > h1,
.hero-body > .hero-tagline,
.hero-body > .hero-stats {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 900ms var(--ease-out, ease-out) forwards;
}
.hero-body > .eyebrow         { animation-delay: 80ms; }
.hero-body > .hero-signature  { animation-delay: 200ms; }
.hero-body > h1               { animation-delay: 320ms; animation-duration: 1100ms; }
.hero-body > .hero-tagline    { animation-delay: 540ms; }
.hero-body > .hero-stats      { animation-delay: 720ms; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* H1 accent shimmer pass on first load */
.hero h1 .accent {
  position: relative;
  background-image: linear-gradient(90deg, var(--green) 0%, var(--green) 45%, #fff 50%, var(--green) 55%, var(--green) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentShimmer 2.4s ease-out 1.4s 1 both;
}
@keyframes accentShimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: 0% 50%; -webkit-text-fill-color: var(--green); }
}

/* -- 3. Cards reveal on scroll (paired with IntersectionObserver) -- */
.card {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity var(--anim-med) var(--ease-soft),
              transform var(--anim-med) var(--ease-spring),
              background 0.3s var(--ease-out, ease-out),
              box-shadow 0.3s var(--ease-out, ease-out);
}
.card.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.card.hidden { opacity: 0 !important; }

.card:hover {
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.7),
              0 0 0 1px var(--border-strong);
}

/* Card image zoom on hover */
.card-media {
  transition: transform var(--anim-med) var(--ease-out, ease-out);
}
.card:hover .card-media {
  transform: scale(1.04);
}

/* Engine-tag attention pulse on hover */
.card:hover .engine-tag {
  animation: engineTagBounce 0.9s var(--ease-spring);
}
@keyframes engineTagBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* -- 4. Filter pill morph on activate -- */
.filter-pill {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.filter-pill::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--anim-fast) var(--ease-soft);
  z-index: -1;
}
.filter-pill.active::before {
  transform: scaleX(1);
}
.filter-pill:active {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}
.filter-pill em {
  transition: opacity 0.15s ease;
}

/* -- 5. Brand-section reveal stagger -- */
.brand-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft);
}
.brand-section.is-revealed { opacity: 1; transform: translateY(0); }
.brand-section.hidden { display: none; }

/* -- 6. Button ripple on click (added by animations.js) -- */
.btn,
.share-btn,
.filter-pill,
.quiz-cta-btn,
.quiz-option,
.quiz-next,
.vote-btn,
.difficulty-btn { position: relative; overflow: hidden; }

.btn .ripple,
.share-btn .ripple,
.filter-pill .ripple,
.quiz-cta-btn .ripple,
.quiz-option .ripple,
.quiz-next .ripple,
.vote-btn .ripple,
.difficulty-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  transform: scale(0);
  animation: rippleExpand 600ms var(--ease-out, ease-out);
  pointer-events: none;
}
.btn-secondary .ripple,
.share-btn .ripple,
.quiz-option .ripple,
.difficulty-btn .ripple { background: rgba(232, 255, 46, 0.42); }

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* -- 7. Magnetic hover for primary CTAs -- */
.btn-primary,
.quiz-cta-btn {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform 200ms var(--ease-out, ease-out), background 0.15s, box-shadow 0.2s;
}
.btn-primary:active { transform: translate(var(--mx, 0), var(--my, 0)) scale(0.97); }
.quiz-cta-btn:hover .arrow { transform: translateX(6px); }
.quiz-cta-btn:active { transform: translate(var(--mx, 0), var(--my, 0)) scale(0.96); }

/* -- 8. Audio playing state (active card glow + EQ bars) -- */
.card.is-playing {
  background: var(--surface-hover);
  box-shadow: 0 0 0 1px var(--green),
              0 0 30px rgba(232, 255, 46, 0.18);
}
.card.is-playing .engine-tag {
  animation: engineTagBounce 1.2s var(--ease-spring) infinite;
}
.sound-block .eq-bars {
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
  vertical-align: middle;
  height: 12px;
  align-items: flex-end;
}
.sound-block .eq-bars span {
  display: block;
  width: 2px;
  background: var(--green);
  height: 30%;
  border-radius: 1px;
  animation: eqBarBounce 800ms ease-in-out infinite;
  animation-play-state: paused;
}
.sound-block.is-playing .eq-bars span { animation-play-state: running; }
.sound-block .eq-bars span:nth-child(1) { animation-delay: 0ms;   }
.sound-block .eq-bars span:nth-child(2) { animation-delay: 120ms; }
.sound-block .eq-bars span:nth-child(3) { animation-delay: 240ms; }
.sound-block .eq-bars span:nth-child(4) { animation-delay: 80ms;  }
.sound-block .eq-bars span:nth-child(5) { animation-delay: 320ms; }
@keyframes eqBarBounce {
  0%, 100% { height: 25%; }
  50%      { height: 100%; }
}

/* -- 9. Stat counter highlight when animation done -- */
.hero-stat-value {
  transition: text-shadow 0.4s ease;
}
.hero-stat-value.counter-done {
  text-shadow: 0 0 18px rgba(232, 255, 46, 0.45);
}

/* -- 10. Filter row edge fade mask -- */
.filter-row {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* -- 11. TOP 10 reveal stagger + row interactions -- */
.top10-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
}
.top10-section.is-revealed { opacity: 1; transform: translateY(0); }

.top10-row {
  opacity: 0;
  transform: translateX(-12px);
  animation: top10RowIn 500ms var(--ease-soft) forwards;
}
.top10-section.is-revealed .top10-row:nth-child(1)  { animation-delay: 80ms;  }
.top10-section.is-revealed .top10-row:nth-child(2)  { animation-delay: 130ms; }
.top10-section.is-revealed .top10-row:nth-child(3)  { animation-delay: 180ms; }
.top10-section.is-revealed .top10-row:nth-child(4)  { animation-delay: 230ms; }
.top10-section.is-revealed .top10-row:nth-child(5)  { animation-delay: 280ms; }
.top10-section.is-revealed .top10-row:nth-child(6)  { animation-delay: 330ms; }
.top10-section.is-revealed .top10-row:nth-child(7)  { animation-delay: 380ms; }
.top10-section.is-revealed .top10-row:nth-child(8)  { animation-delay: 430ms; }
.top10-section.is-revealed .top10-row:nth-child(9)  { animation-delay: 480ms; }
.top10-section.is-revealed .top10-row:nth-child(10) { animation-delay: 530ms; }
@keyframes top10RowIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Top 3 podium glow */
.top10-rank.r1 { animation: rankGoldGlow 2.6s ease-in-out infinite; }
.top10-rank.r2 { animation: rankSilverGlow 3.2s ease-in-out infinite; }
.top10-rank.r3 { animation: rankBronzeGlow 3.6s ease-in-out infinite; }
@keyframes rankGoldGlow   { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 12px rgba(255,213,74,0.7); } }
@keyframes rankSilverGlow { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 10px rgba(216,216,216,0.5); } }
@keyframes rankBronzeGlow { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 10px rgba(209,142,88,0.5); } }

/* -- 12. Quiz CTA block magnetism + idle pulse -- */
.quiz-cta-block {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft);
  position: relative;
}
.quiz-cta-block.is-revealed { opacity: 1; transform: translateY(0); }
.quiz-cta-block::after {
  content: '';
  position: absolute; inset: -1px;
  border: 1px solid var(--green);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  animation: ctaIdleHalo 4s ease-in-out infinite;
}
@keyframes ctaIdleHalo {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(1.005); }
}

/* -- 13. Quiz modal entrance / exit -- */
.quiz-modal {
  transition: opacity 300ms var(--ease-soft);
}
.quiz-modal:not(.active) { opacity: 0; pointer-events: none; }
.quiz-modal.active        { opacity: 1; }

.quiz-modal.active .quiz-card {
  animation: quizCardIn 480ms var(--ease-spring) both;
}
@keyframes quizCardIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.quiz-close {
  transition: transform 0.18s var(--ease-spring), color 0.15s ease;
}
.quiz-close:hover { transform: rotate(90deg) scale(1.12); }

/* -- 14. Quiz options stagger reveal + correct/wrong feedback -- */
.quiz-options .quiz-option {
  opacity: 0;
  transform: translateY(8px);
  animation: optionIn 380ms var(--ease-soft) forwards;
}
.quiz-options .quiz-option:nth-child(1) { animation-delay: 80ms;  }
.quiz-options .quiz-option:nth-child(2) { animation-delay: 160ms; }
.quiz-options .quiz-option:nth-child(3) { animation-delay: 240ms; }
.quiz-options .quiz-option:nth-child(4) { animation-delay: 320ms; }
@keyframes optionIn {
  to { opacity: 1; transform: translateY(0); }
}

.quiz-option.correct  { animation: pulseCorrect 0.5s var(--ease-spring); border-color: var(--green) !important; }
.quiz-option.wrong    { animation: pulseWrong   0.5s var(--ease-spring); }
@keyframes pulseCorrect {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(232,255,46,0.5); }
  50%  { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(232,255,46,0); }
  100% { transform: scale(1); }
}
@keyframes pulseWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Quiz feedback bounce-in */
.quiz-feedback {
  animation: feedbackIn 380ms var(--ease-spring) both;
}
@keyframes feedbackIn {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Quiz final score number count-up effect */
.quiz-final-score {
  transition: text-shadow 0.4s ease;
}
.quiz-final-score.counter-done {
  text-shadow: 0 0 24px rgba(232, 255, 46, 0.6);
}

/* -- 15. View Transitions API named transitions -- */
@supports (view-transition-name: x) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 360ms;
    animation-timing-function: var(--ease-soft);
  }
  .card[data-vt] {
    view-transition-name: var(--vt-name);
  }
}

/* -- 16. Motion safety -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-body > * { opacity: 1; transform: none; }
  .card { opacity: 1; transform: none; }
  .brand-section { opacity: 1; transform: none; }
  .top10-section { opacity: 1; transform: none; }
  .top10-row { opacity: 1; transform: none; }
  .quiz-cta-block { opacity: 1; transform: none; }
}