/* ============================================
  CarVerdict — Global Enhancement Layer
   Adds animations, transitions, polish
   Import this AFTER style.css on every page
============================================ */

/* Page load fade in */
body { animation: pageFade 0.5s ease; }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ---- Animated gradient border on cards ---- */
.checker-card,
.fuel-card,
.value-card,
.roast-card,
.quiz-card,
.tip-main-card,
.streak-card,
.battle-inputs .car-input-card,
.leaderboard-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.checker-card:hover,
.fuel-card:hover,
.value-card:hover,
.roast-card:hover,
.tip-main-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

/* ---- Icon styles ---- */
.cl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.cl-icon svg {
  stroke-width: 1.75;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

/* Animated icon on button hover */
button:hover .cl-icon svg,
a:hover .cl-icon svg {
  transform: scale(1.15);
}

/* ---- Nav icon labels ---- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}

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

/* ---- Hero tag pulse ---- */
.hero-tag {
  animation: pulse-border 3s ease infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(255,255,255,0.07); }
  50%       { border-color: rgba(232,255,71,0.2); }
}

/* ---- Floating orbs animate ---- */
.orb1 { animation: orbFloat1 8s ease-in-out infinite; }
.orb2 { animation: orbFloat2 10s ease-in-out infinite; }

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, 20px) scale(1.05); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, -30px) scale(1.08); }
}

/* ---- Button shine effect ---- */
#check-btn, #diagnose-btn, #battle-btn, #roast-btn,
#fuel-btn, #value-btn, .start-btn, .got-it-btn, .plan-btn-pro {
  overflow: hidden;
  position: relative;
}

#check-btn::after, #diagnose-btn::after, #battle-btn::after,
#roast-btn::after, #fuel-btn::after, #value-btn::after,
.start-btn::after, .got-it-btn::after, .plan-btn-pro::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

#check-btn:hover::after, #diagnose-btn:hover::after, #battle-btn:hover::after,
#roast-btn:hover::after, #fuel-btn:hover::after, #value-btn:hover::after,
.start-btn:hover::after, .got-it-btn:hover::after, .plan-btn-pro:hover::after {
  left: 125%;
}

/* ---- Input focus ---- */
input:focus, textarea:focus, select:focus {
  outline: none;
}

/* ---- Stagger animation for grids ---- */
.features-grid .feature-card,
.steps-grid .step-card,
.stats-row .stat-box,
.cost-grid .cost-tile,
.factors-grid .factor-box,
.testimonials-grid .testimonial-card {
  animation: staggerUp 0.5s ease both;
}

.features-grid .feature-card:nth-child(1) { animation-delay: 0.05s; }
.features-grid .feature-card:nth-child(2) { animation-delay: 0.10s; }
.features-grid .feature-card:nth-child(3) { animation-delay: 0.15s; }
.features-grid .feature-card:nth-child(4) { animation-delay: 0.20s; }
.features-grid .feature-card:nth-child(5) { animation-delay: 0.25s; }
.features-grid .feature-card:nth-child(6) { animation-delay: 0.30s; }
.features-grid .feature-card:nth-child(7) { animation-delay: 0.35s; }
.features-grid .feature-card:nth-child(8) { animation-delay: 0.40s; }

@keyframes staggerUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Result cards animate in ---- */
.result-card, .diagnosis-card, .battle-result-card,
.roast-result-card, .fuel-result-card, .value-result-card {
  animation: resultPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultPop {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Streak fire wiggle ---- */
.streak-fire { display: inline-block; animation: wiggle 2s ease infinite; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

/* ---- Winner banner glow pulse ---- */
.winner-name {
  animation: glowPulse 2s ease infinite;
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(232,255,71,0.2); }
  50%       { text-shadow: 0 0 40px rgba(232,255,71,0.5); }
}

/* ---- Roast score bar animate ---- */
.roast-rating-fill {
  animation: fillBar 1.2s ease both;
}

@keyframes fillBar {
  from { width: 0 !important; }
}

/* ---- Quick-pick & option buttons ---- */
.quick-btn, .option-btn, .cat-pill, .level-pill, .diff-pill {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-btn:hover  { transform: translateY(-2px); }
.option-btn:hover:not(:disabled) { transform: translateX(4px); }

/* ---- Leaderboard rows ---- */
.lb-row {
  transition: background 0.2s;
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
}

.lb-row:hover { background: var(--surface2); }

/* ---- Scrollbar glow ---- */
::-webkit-scrollbar-thumb:hover {
  background: rgba(232,255,71,0.3);
}

/* ---- Mobile tap feedback ---- */
@media (max-width: 768px) {
  button:active, a:active {
    transform: scale(0.97) !important;
    opacity: 0.9;
  }
}

/* ---- Verdict label animate ---- */
.verdict-label, .diagnosis-title {
  animation: slideInLeft 0.4s ease both;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Tip content animate ---- */
.tip-content { animation: fadeUp 0.5s ease both; }

/* ---- Score bars fill animation ---- */
.bar-fill {
  animation: fillBar 1s ease both;
}

/* ---- Meter fill animate ---- */
.meter-fill {
  animation: fillBar 1.2s ease both;
}

/* ---- Value amount count up feel ---- */
.value-amount {
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Quiz score big pop ---- */
.result-score-big {
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

/* ---- Progress bar smooth ---- */
.progress-fill {
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ---- Correct answer bounce ---- */
.option-btn.correct {
  animation: correctBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes correctBounce {
  0%  { transform: scale(1); }
  50% { transform: scale(1.03); }
  100%{ transform: scale(1); }
}

/* ---- Wrong answer shake ---- */
.option-btn.wrong {
  animation: wrongShake 0.4s ease;
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ---- Professional Share Button ---- */
.share-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-dim), rgba(232, 255, 71, 0.08));
  border: 1px solid rgba(232, 255, 71, 0.3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 20px;
  margin-bottom: 8px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(232, 255, 71, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.share-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.share-btn:hover {
  background: linear-gradient(135deg, rgba(232, 255, 71, 0.18), rgba(232, 255, 71, 0.12));
  border-color: rgba(232, 255, 71, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232, 255, 71, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.share-btn:hover::before {
  opacity: 1;
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(232, 255, 71, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}