/* ══════════════════════════════════════════════════════════════════
   SETTLEMENTRADAR CELEBRATIONS CSS — Task #1295900
   Premium Micro-Celebrations: Every Win Gets a Firework

   COLOR CONSTRAINTS: white/blue/black/grey/gold/green ONLY.
   GPU-ONLY animations: transform + opacity exclusively.
   Respects prefers-reduced-motion throughout.
   All durations ≤ 800ms. No layout-property animation.
   Gold (#f5a623) + green (#16a34a) + white scheme for money theme.
   ══════════════════════════════════════════════════════════════════ */

/* ── Motion tokens ──────────────────────────────────────────────── */
:root {
  --sr-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring bounce */
  --sr-ease-apple:   cubic-bezier(0.16, 1, 0.3, 1);       /* Apple decelerate */
  --sr-dur-fast:     200ms;
  --sr-dur-base:     350ms;
  --sr-gold:         #f5a623;
  --sr-gold-light:   #fbbf24;
  --sr-green:        #16a34a;
  --sr-green-light:  #dcfce7;
  --sr-navy:         #0a2540;
}

/* ── Accessibility: disable all motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sr-hover-glow,
  .sr-hover-scale,
  .sr-hover-bounce,
  .sr-radar-pulse,
  .sr-badge-shimmer,
  .sr-shimmer,
  .sr-float,
  .sr-cta-glow,
  .sr-bell-pulse,
  .sr-money-float,
  .sr-toast-enter,
  .sr-streak-fire {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   1. HOVER MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════════════ */

/* Card hover glow — all interactive cards */
@media (hover: hover) and (pointer: fine) {
  .sr-hover-glow {
    transition:
      transform var(--sr-dur-base) var(--sr-ease-apple),
      box-shadow var(--sr-dur-base) var(--sr-ease-apple),
      border-color var(--sr-dur-base) ease;
    will-change: transform, box-shadow;
  }

  .sr-hover-glow:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 32px rgba(5, 112, 222, 0.18), 0 2px 8px rgba(245, 166, 35, 0.12);
    border-color: rgba(5, 112, 222, 0.35);
  }

  .sr-hover-glow:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 80ms;
  }

  /* Generic scale hover */
  .sr-hover-scale {
    transition:
      transform var(--sr-dur-base) var(--sr-ease-apple),
      box-shadow var(--sr-dur-base) ease,
      background-color var(--sr-dur-fast) ease;
    will-change: transform;
  }

  .sr-hover-scale:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  }

  .sr-hover-scale:active {
    transform: scale(0.97);
    transition-duration: 80ms;
  }

  /* Bounce on hover for dollar amounts */
  .sr-hover-bounce {
    transition: transform var(--sr-dur-fast) var(--sr-ease-spring);
    display: inline-block;
    will-change: transform;
  }

  .sr-hover-bounce:hover {
    transform: scale(1.12) rotate(-1deg);
  }

  /* CTA glow pulse — continuous when in viewport */
  .sr-cta-glow {
    transition: box-shadow 200ms ease;
  }

  .sr-cta-glow:hover {
    box-shadow: 0 4px 20px rgba(5, 112, 222, 0.35);
  }

  @keyframes sr-cta-gold-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(245, 166, 35, 0.2); }
    50%       { box-shadow: 0 4px 24px rgba(245, 166, 35, 0.45); }
  }

  .sr-cta-gold-glow {
    animation: sr-cta-gold-glow 2s ease-in-out infinite;
    animation-delay: 1s;
  }

  /* Settlement card radar pulse on hover */
  .sr-radar-wrap {
    position: relative;
    overflow: hidden;
  }

  .sr-radar-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 400ms ease;
    background: radial-gradient(circle at 50% 50%,
      rgba(5, 112, 222, 0.06) 0%,
      rgba(5, 112, 222, 0.02) 60%,
      transparent 80%);
    pointer-events: none;
  }

  @keyframes sr-radar-pulse {
    0%   { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  .sr-radar-wrap:hover::before {
    animation: sr-radar-pulse 1.2s ease-out forwards;
    opacity: 1;
  }

  /* Pro plan badge shimmer sweep */
  @keyframes sr-shimmer-sweep {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
  }

  .sr-badge-shimmer {
    position: relative;
    overflow: hidden;
  }

  .sr-badge-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 20%,
      rgba(255, 255, 255, 0.35) 45%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.35) 55%,
      transparent 80%
    );
    background-size: 200% 100%;
    animation: sr-shimmer-sweep 2.5s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
  }

  /* Most Popular / Best Value: rainbow shimmer */
  @keyframes sr-rainbow-shimmer {
    0%   { background-position: -200% center; filter: hue-rotate(0deg); }
    100% { background-position:  200% center; filter: hue-rotate(30deg); }
  }

  .sr-badge-rainbow-shimmer {
    position: relative;
    overflow: hidden;
  }

  .sr-badge-rainbow-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 15%,
      rgba(255,255,255,0.4) 40%,
      rgba(255,255,255,0.6) 50%,
      rgba(255,255,255,0.4) 60%,
      transparent 85%
    );
    background-size: 200% 100%;
    animation: sr-rainbow-shimmer 3s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
  }

  /* Dollar amount bounce */
  .sr-amount {
    display: inline-block;
    transition: transform 150ms var(--sr-ease-spring);
    will-change: transform;
  }

  .sr-amount:hover {
    transform: scale(1.08) translateY(-2px);
  }

  /* Pro badge gold sparkle on hover */
  @keyframes sr-gold-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50%       { opacity: 1; transform: scale(1.2); }
  }

  .sr-pro-badge:hover {
    animation: sr-gold-sparkle 0.6s ease 2;
  }
}


/* ══════════════════════════════════════════════════════════════════
   2. PREMIUM TRANSITIONS
   ══════════════════════════════════════════════════════════════════ */

/* Page transitions: fade + slight zoom */
@keyframes sr-page-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97); }
}

@keyframes sr-page-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

.sr-page-enter {
  animation: sr-page-in 300ms var(--sr-ease-apple) both;
}

.sr-page-exit {
  animation: sr-page-out 200ms ease-in both;
}

/* Modal open: scale from 0.95 + fade */
@keyframes sr-modal-enter {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes sr-modal-leave {
  from { opacity: 1; transform: scale(1);    translateY(0); }
  to   { opacity: 0; transform: scale(0.95) translateY(8px); }
}

.sr-modal-enter {
  animation: sr-modal-enter 350ms var(--sr-ease-spring) both;
  transform-origin: center center;
}

.sr-modal-leave {
  animation: sr-modal-leave 200ms ease-in both;
}

/* Drawer slide: top-to-bottom with shadow depth */
@keyframes sr-drawer-enter {
  from { transform: translateY(-100%); opacity: 0.7; }
  to   { transform: translateY(0);      opacity: 1; }
}

@keyframes sr-drawer-leave {
  from { transform: translateY(0);      opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

.sr-drawer-enter {
  animation: sr-drawer-enter 380ms var(--sr-ease-apple) both;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}

.sr-drawer-leave {
  animation: sr-drawer-leave 250ms ease-in both;
}

/* Side drawer (right-to-left) */
@keyframes sr-side-enter {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes sr-side-leave {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

.sr-side-enter {
  animation: sr-side-enter 380ms var(--sr-ease-apple) both;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.15);
}

.sr-side-leave {
  animation: sr-side-leave 250ms ease-in both;
}


/* ══════════════════════════════════════════════════════════════════
   3. NOTIFICATION PULSE
   ══════════════════════════════════════════════════════════════════ */

@keyframes sr-bell-pulse {
  0%, 100% { transform: scale(1); }
  15%       { transform: scale(1.25) rotate(-8deg); }
  30%       { transform: scale(1.15) rotate(8deg); }
  45%       { transform: scale(1.1); }
}

@keyframes sr-bell-ring {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(15deg); }
  20%  { transform: rotate(-12deg); }
  30%  { transform: rotate(10deg); }
  40%  { transform: rotate(-7deg); }
  50%  { transform: rotate(5deg); }
  60%  { transform: rotate(0deg); }
}

.sr-bell-pulse {
  display: inline-block;
  animation: sr-bell-pulse 1.2s var(--sr-ease-spring) both;
}

.sr-bell-ring {
  display: inline-block;
  animation: sr-bell-ring 0.8s ease-in-out 2;
  transform-origin: top center;
}

/* Toast notification slide-in with confetti edge particles */
@keyframes sr-toast-enter {
  from { opacity: 0; transform: translateX(110%) scale(0.92); }
  to   { opacity: 1; transform: translateX(0)      scale(1); }
}

@keyframes sr-toast-leave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

.sr-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.sr-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 12px;
  min-width: 280px;
  max-width: 380px;
  background: linear-gradient(135deg, var(--sr-navy) 0%, #003561 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255,255,255,0.1) inset;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  animation: sr-toast-enter 400ms var(--sr-ease-spring) both;
  cursor: default;
}

.sr-toast.sr-toast-leaving {
  animation: sr-toast-leave 250ms ease-in both;
}

.sr-toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.sr-toast-content {
  flex: 1;
  min-width: 0;
}

.sr-toast-headline {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.sr-toast-body {
  font-size: 0.8rem;
  opacity: 0.82;
  line-height: 1.4;
  margin: 0;
}

.sr-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  transition: color 150ms ease;
  pointer-events: auto;
}

.sr-toast-close:hover {
  color: rgba(255,255,255,0.9);
}

/* Gold gradient toast variant */
.sr-toast-gold {
  background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
  box-shadow: 0 8px 32px rgba(245, 166, 35, 0.3), 0 1px 0 rgba(255,255,255,0.15) inset;
}

/* Radar sweep toast */
@keyframes sr-radar-sweep {
  0%   { background-position: -100% 50%; }
  100% { background-position: 200% 50%; }
}

.sr-toast-radar {
  background: linear-gradient(135deg, var(--sr-navy) 0%, #003561 100%, #1e3a5f 100%);
  background-size: 200% 100%;
  animation: sr-toast-enter 400ms var(--sr-ease-spring) both, sr-radar-sweep 2s linear infinite;
}


/* ══════════════════════════════════════════════════════════════════
   4. STREAK FIRE EFFECT
   ══════════════════════════════════════════════════════════════════ */

/* Flame particles around streak badge */
.sr-streak-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@keyframes sr-flame-flicker {
  0%, 100% { transform: scaleY(1)   rotate(-2deg); opacity: 0.9; }
  25%       { transform: scaleY(1.1) rotate(1deg);  opacity: 1; }
  50%       { transform: scaleY(0.95) rotate(-1deg); opacity: 0.85; }
  75%       { transform: scaleY(1.05) rotate(2deg); opacity: 0.95; }
}

.sr-flame {
  display: inline-block;
  animation: sr-flame-flicker 0.6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* 7+ day streak: small flame */
.sr-streak-fire-7 {
  position: relative;
}

.sr-streak-fire-7::before,
.sr-streak-fire-7::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 12px;
  background: radial-gradient(ellipse at 50% 100%, #f5a623 0%, #ef4444 60%, transparent 100%);
  border-radius: 50% 50% 30% 30%;
  animation: sr-flame-flicker 0.5s ease-in-out infinite;
  pointer-events: none;
}

.sr-streak-fire-7::before {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  animation-delay: 0.15s;
}

.sr-streak-fire-7::after {
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  animation-delay: 0.3s;
}

/* 30+ day streak: larger flame + gold particle trail */
.sr-streak-fire-30 {
  position: relative;
}

.sr-streak-fire-30::before,
.sr-streak-fire-30::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 16px;
  background: radial-gradient(ellipse at 50% 100%, #fbbf24 0%, #f5a623 40%, #ef4444 70%, transparent 100%);
  border-radius: 50% 50% 30% 30%;
  animation: sr-flame-flicker 0.45s ease-in-out infinite;
  pointer-events: none;
}

.sr-streak-fire-30::before {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 0.1s;
}

.sr-streak-fire-30::after {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 0.25s;
}

/* Gold particle trail for 30+ streak */
@keyframes sr-particle-drift {
  0%   { opacity: 1;   transform: translateY(0)    scale(1); }
  100% { opacity: 0;   transform: translateY(-20px) scale(0.2); }
}

.sr-streak-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fbbf24;
  border-radius: 50%;
  pointer-events: none;
  animation: sr-particle-drift 1.5s ease-in infinite;
}


/* ══════════════════════════════════════════════════════════════════
   5. MONEY ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

/* Float-up animation for money amounts */
@keyframes sr-money-float-up {
  0%   { opacity: 1;   transform: translateY(0)    scale(1); }
  60%  { opacity: 1;   transform: translateY(-24px) scale(1.05); }
  100% { opacity: 0;   transform: translateY(-48px) scale(0.9); }
}

.sr-money-float {
  animation: sr-money-float-up 1.4s ease-out forwards;
  display: inline-block;
  font-weight: 700;
  color: var(--sr-gold);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Referral coin stack animation */
@keyframes sr-coin-stack {
  0%   { transform: scale(0.5) translateY(10px); opacity: 0; }
  50%  { transform: scale(1.1) translateY(-2px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}

.sr-coin-stack {
  display: inline-block;
  animation: sr-coin-stack 0.5s var(--sr-ease-spring) both;
  will-change: transform, opacity;
}

/* Count-up placeholder — JS animates numbers */
.sr-countup {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}

.sr-countup.bumping {
  color: var(--sr-green);
}


/* ══════════════════════════════════════════════════════════════════
   6. EMAIL CAPTURE PREMIUM POLISH
   ══════════════════════════════════════════════════════════════════ */

/* Gold border glow on focus */
.sr-email-input-wrap {
  position: relative;
}

.sr-email-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2);
  border-radius: inherit;
}

/* Valid email: green checkmark fade-in */
.sr-email-valid {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--sr-green);
  font-size: 0.75rem;
  font-weight: 600;
  animation: sr-fade-in 250ms ease both;
}

@keyframes sr-fade-in {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Submit button morph states */
@keyframes sr-btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sr-btn-spinning {
  pointer-events: none;
}

.sr-btn-spinning::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  animation: sr-btn-spin 0.7s linear infinite;
}

/* Duplicate submit: gentle shake */
@keyframes sr-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.sr-shake {
  animation: sr-shake 0.4s ease-in-out;
  will-change: transform;
}

/* Already subscribed tooltip */
.sr-subscribed-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: sr-fade-in 200ms ease both;
}

.sr-subscribed-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1f2937;
}


/* ══════════════════════════════════════════════════════════════════
   7. FLOATING PARTICLES AMBIENT LAYER
   ══════════════════════════════════════════════════════════════════ */

/* Particles wrapper for ambient gold sparkles */
.sr-particle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sr-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(251,191,36,0.8) 0%, rgba(245,166,35,0) 100%);
  border-radius: 50%;
  animation: sr-particle-float var(--sr-float-dur, 8s) var(--sr-float-delay, 0s) ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes sr-particle-float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-16px) translateX(8px) scale(1.2);
    opacity: 0.7;
  }
  66% {
    transform: translateY(-8px) translateX(-6px) scale(0.9);
    opacity: 0.5;
  }
}

/* Mobile: scroll-triggered burst particles */
@keyframes sr-particle-burst-up {
  0%   { transform: translateY(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-80px) scale(0.3); opacity: 0; }
}

.sr-particle-burst {
  animation: sr-particle-burst-up 1.2s ease-out forwards;
}


/* ══════════════════════════════════════════════════════════════════
   8. PURCHASE SUCCESS — Gold Shimmer Ripple
   ══════════════════════════════════════════════════════════════════ */

@keyframes sr-shimmer-ripple {
  0%   { transform: scale(0.3); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0; }
}

.sr-shimmer-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.4) 0%, rgba(245,166,35,0.1) 60%, transparent 100%);
  pointer-events: none;
  animation: sr-shimmer-ripple 1.2s ease-out forwards;
  will-change: transform, opacity;
}

/* Full-width gold banner for claim success */
@keyframes sr-banner-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.sr-claim-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100002;
  background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
  color: #fff;
  padding: 0.875rem 1.5rem;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(245, 166, 35, 0.3);
  animation: sr-banner-slide-down 400ms var(--sr-ease-spring) both;
  pointer-events: none;
}

.sr-claim-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.sr-claim-banner-icon {
  font-size: 1.25rem;
}

@keyframes sr-banner-slide-up {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

.sr-claim-banner.sr-dismiss {
  animation: sr-banner-slide-up 300ms ease-in both;
}