/*
  AyaSend Micro-Interactions & Motion System — v3.0
  ════════════════════════════════════════════════════════════════
  "Motion should feel invisible and elegant."

  Refinement principles (v3 → v2 diff):
  ✓ No spring overshoot on card entry (removed the -2px bounce)
  ✓ Pulse dots scale reduced: 1.25 not 1.55 (subtle, not dramatic)
  ✓ Best-card glow toned down: max 0.30 opacity (calm, not glaring)
  ✓ Card hover lift: -2px not -4px (refined, not conspicuous)
  ✓ Rank badge: spring not bounce (no game-feel)
  ✓ Stagger interval: 40ms not 55ms (snappier group entry)
  ✓ All durations reduced ~15% for more natural timing
  ✓ Reduced motion: complete suppression

  60fps contract: ONLY animate transform + opacity.
  ════════════════════════════════════════════════════════════════
*/

/* ═══════════════════════════════════════════════════════════════
   1. KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */

/* Card entry — clean fade + gentle rise, no overshoot */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Intelligence card — slightly faster, no transform scale */
@keyframes intelReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Best-value glow — calm breathing, not dramatic pulse */
@keyframes bestCardBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(59,130,246,0.22),
      0 6px 24px rgba(37,99,235,0.10),
      0 2px 6px rgba(37,99,235,0.06);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(59,130,246,0.30),
      0 10px 32px rgba(37,99,235,0.16),
      0 2px 8px rgba(37,99,235,0.08);
  }
}

/* Live pulse — subtle ring, scale 1.25 */
@keyframes liveDot {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.25); opacity: 0.6; }
}
@keyframes scrapedDot {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%       { transform: scale(1.2);  opacity: 0.55; }
}
@keyframes estimatedFade {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* CTA ripple */
@keyframes ctaRipple {
  from { transform: scale(0);   opacity: 0.28; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* Skeleton shimmer */
@keyframes shimmerScan {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Badge entry — spring, no bounce overshoot */
@keyframes badgeIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Savings bar */
@keyframes savingsReveal {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Page reveal */
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Amount update flash — very subtle */
@keyframes amountIn {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* Rate change feedback */
@keyframes flashGreen {
  0%   { background: rgba(220,252,231,0.7); }
  100% { background: transparent; }
}
@keyframes flashAmber {
  0%   { background: rgba(254,243,199,0.7); }
  100% { background: transparent; }
}

/* Notification */
@keyframes notifDown {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 120px; }
}

/* Insight card reveal */
@keyframes insightReveal {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   2. PROVIDER CARD — ENTRANCE STAGGER
   Refined: clean rise, no overshoot, 40ms intervals
   ═══════════════════════════════════════════════════════════════ */

.rate-card-premium {
  animation: cardFadeUp 280ms cubic-bezier(0.22,1,0.36,1) both;
  transition:
    transform  180ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 180ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.rate-card-premium:nth-child(1) { animation-delay:  0ms; }
.rate-card-premium:nth-child(2) { animation-delay: 40ms; }
.rate-card-premium:nth-child(3) { animation-delay: 80ms; }
.rate-card-premium:nth-child(4) { animation-delay:120ms; }
.rate-card-premium:nth-child(5) { animation-delay:160ms; }
.rate-card-premium:nth-child(6) { animation-delay:200ms; }
.rate-card-premium:nth-child(7) { animation-delay:240ms; }
.rate-card-premium:nth-child(8) { animation-delay:280ms; }
.rate-card-premium:nth-child(9) { animation-delay:320ms; }

/* Hover: -2px lift (refined, not conspicuous) */
.rate-card-premium:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(15,23,42,0.09),
    0 3px 8px rgba(15,23,42,0.05) !important;
}
.rate-card-premium:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 60ms;
}

/* ═══════════════════════════════════════════════════════════════
   3. BEST-VALUE CARD — CALM BREATHING GLOW
   Starts 3s after entry so it doesn't compete with entrance
   ═══════════════════════════════════════════════════════════════ */

.rate-card-best {
  animation:
    cardFadeUp    280ms cubic-bezier(0.22,1,0.36,1) both,
    bestCardBreath  4s  ease-in-out              3s  infinite;
  border: 1.5px solid rgba(59,130,246,0.22) !important;
}
.rate-card-best:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 2px rgba(59,130,246,0.32),
    0 14px 36px rgba(37,99,235,0.15),
    0 4px 12px rgba(37,99,235,0.09) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. LIVE PULSE DOTS — subtle, not dramatic
   ═══════════════════════════════════════════════════════════════ */

.rate-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: liveDot 2.8s ease-in-out infinite;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.15);
}
.rate-live-dot.dot-scraped {
  background: #3b82f6;
  animation: scrapedDot 3.2s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.rate-live-dot.dot-estimated {
  background: #f59e0b;
  animation: estimatedFade 3.8s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
.rate-live-dot.dot-inactive {
  background: #94a3b8;
  animation: none;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   5. RANKING BADGES — spring, no gamey bounce
   ═══════════════════════════════════════════════════════════════ */

.provider-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -0.3px;
  animation: badgeIn 260ms cubic-bezier(0.22,1,0.36,1) 60ms both;
}
.provider-rank-1 {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  box-shadow: 0 2px 6px rgba(37,99,235,0.30);
}
.provider-rank-2 {
  background: rgba(219,234,254,0.9);
  color: #2563eb;
}
.provider-rank-3 {
  background: rgba(241,245,249,0.95);
  color: #64748b;
}
.provider-rank-n {
  background: rgba(248,250,252,0.8);
  color: #94a3b8;
  font-size: 8px;
}
.dark .provider-rank-2 { background: rgba(30,58,138,0.5); color: #93c5fd; }
.dark .provider-rank-3,
.dark .provider-rank-n { background: rgba(30,41,59,0.7); }

/* ═══════════════════════════════════════════════════════════════
   6. CTA BUTTON — ripple + gloss + arrow nudge
   ═══════════════════════════════════════════════════════════════ */

.aya-cta-btn,
.send-now-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform     150ms cubic-bezier(0.22,1,0.36,1),
    box-shadow    150ms cubic-bezier(0.22,1,0.36,1),
    filter        150ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* Gloss */
.aya-cta-btn::before,
.send-now-btn::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
/* Ripple */
.aya-cta-btn::after,
.send-now-btn::after {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%);
  transform: scale(0); opacity: 0;
  border-radius: inherit;
  pointer-events: none;
}
.aya-cta-btn:active::after,
.send-now-btn:active::after {
  animation: ctaRipple 380ms cubic-bezier(0.4,0,0.2,1) forwards;
}
.aya-cta-btn:hover,
.send-now-btn:hover {
  transform: translateY(-1px) scale(1.012);
  box-shadow:
    0 7px 20px rgba(37,99,235,0.44),
    0 2px 7px rgba(37,99,235,0.22) !important;
  filter: brightness(1.04);
}
.aya-cta-btn:active,
.send-now-btn:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 6px rgba(37,99,235,0.22) !important;
  filter: brightness(0.97);
  transition-duration: 55ms;
}
/* Arrow nudge */
.aya-cta-arrow {
  display: inline-flex;
  transition: transform 150ms cubic-bezier(0.22,1,0.36,1);
}
.aya-cta-btn:hover .aya-cta-arrow,
.send-now-btn:hover .aya-cta-arrow { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════
   7. SHIMMER / SKELETON
   ═══════════════════════════════════════════════════════════════ */

.shimmer, .aya-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 1200px 100%;
  animation: shimmerScan 1.6s ease-in-out infinite;
  border-radius: 6px;
}
.dark .shimmer, .dark .aya-shimmer {
  background: linear-gradient(90deg,rgba(30,41,59,0.6) 25%,rgba(51,65,85,0.6) 50%,rgba(30,41,59,0.6) 75%);
  background-size: 1200px 100%;
}

/* ═══════════════════════════════════════════════════════════════
   8. MONEY AMOUNT TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.rc-amount, .aya-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}
.rc-amount.aya-amount-updating,
.aya-amount.aya-amount-updating {
  animation: amountIn 240ms ease both;
}
.rc-amount.aya-amount-improved { animation: flashGreen 1.2s ease-out; }
.rc-amount.aya-amount-worsened { animation: flashAmber 1.2s ease-out; }

/* ═══════════════════════════════════════════════════════════════
   9. INTELLIGENCE CARD
   ═══════════════════════════════════════════════════════════════ */

.aya-intelligence-card {
  animation: intelReveal 240ms cubic-bezier(0.22,1,0.36,1) both;
  transition:
    transform  180ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 180ms cubic-bezier(0.22,1,0.36,1);
}
.aya-intelligence-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59,130,246,0.11), 0 2px 6px rgba(59,130,246,0.06);
}

/* ═══════════════════════════════════════════════════════════════
   10. SAVINGS BAR
   ═══════════════════════════════════════════════════════════════ */

.best-savings-msg {
  animation: savingsReveal 280ms cubic-bezier(0.22,1,0.36,1) 160ms both;
}

/* ═══════════════════════════════════════════════════════════════
   11. INSIGHT FEED CARDS
   ═══════════════════════════════════════════════════════════════ */

.aya-insight-card {
  animation: insightReveal 260ms cubic-bezier(0.22,1,0.36,1) both;
  transition:
    transform  180ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 180ms cubic-bezier(0.22,1,0.36,1);
}
.aya-insight-card:nth-child(1) { animation-delay: 20ms; }
.aya-insight-card:nth-child(2) { animation-delay: 60ms; }
.aya-insight-card:nth-child(3) { animation-delay:100ms; }
.aya-insight-card:nth-child(4) { animation-delay:140ms; }
.aya-insight-card:nth-child(5) { animation-delay:180ms; }
.aya-insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
}

/* ═══════════════════════════════════════════════════════════════
   12. PAGE TRANSITION
   ═══════════════════════════════════════════════════════════════ */

.page-content { animation: pageReveal 200ms cubic-bezier(0.22,1,0.36,1) both; }

/* ═══════════════════════════════════════════════════════════════
   13. BADGE POP (generic)
   ═══════════════════════════════════════════════════════════════ */

.badge-pop { animation: badgeIn 260ms cubic-bezier(0.22,1,0.36,1) both; }

/* ═══════════════════════════════════════════════════════════════
   14. RATE FEEDBACK
   ═══════════════════════════════════════════════════════════════ */

.rate-improved { animation: flashGreen 1.2s ease-out; }
.rate-worsened { animation: flashAmber 1.2s ease-out; }

/* ═══════════════════════════════════════════════════════════════
   15. NOTIFICATION
   ═══════════════════════════════════════════════════════════════ */

.aya-notif-reveal {
  animation: notifDown 240ms cubic-bezier(0.22,1,0.36,1) both;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   16. AMOUNT INPUT STABILITY
   ═══════════════════════════════════════════════════════════════ */

.amount-display-value { transition: opacity 140ms ease, transform 140ms cubic-bezier(0.22,1,0.36,1); }
.amount-display-value.updating { opacity: 0.4; transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════
   17. FOCUS — WCAG AA
   ═══════════════════════════════════════════════════════════════ */

.aya-cta-btn:focus-visible,
.send-now-btn:focus-visible,
.rate-card-premium:focus-visible,
a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   18. SUCCESS DRAW
   ═══════════════════════════════════════════════════════════════ */

@keyframes checkDraw       { from { stroke-dashoffset:40; } to { stroke-dashoffset:0; } }
@keyframes checkCircleDraw { from { stroke-dashoffset:60; } to { stroke-dashoffset:0; } }
.aya-success-check  { stroke-dasharray:40; animation: checkDraw       300ms cubic-bezier(0.22,1,0.36,1) both; }
.aya-success-circle { stroke-dasharray:60; animation: checkCircleDraw 250ms cubic-bezier(0.22,1,0.36,1) both; }

/* ═══════════════════════════════════════════════════════════════
   19. REDUCED MOTION — complete suppression
   ═══════════════════════════════════════════════════════════════ */

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