/* ═══════════════════════════════════════════════════════════════════════════
   Settlement Page Motion Design — SettlementRadar
   Covers: /settlements, /settlements/[slug], /settlements/closing-this-week,
           /settlements/categories, /settlements/[category]
   Brand blue: #2563eb  |  GPU-only (transform + opacity)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── prefers-reduced-motion: disable everything ─── */
@media (prefers-reduced-motion: reduce) {
  .sa-will-reveal,
  .sa-hero-anim,
  .sa-cta-pulse,
  .sa-urgency-pulse,
  .sa-urgency-pulse-blue,
  .sa-badge-popin,
  .sa-shimmer-last-day::before,
  .sa-count-glow,
  .sa-share-btn-anim,
  .sa-search-focus-ring,
  .sa-card-hover {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════ */

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

@keyframes saFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes saScaleUp {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes saPopIn {
  0%   { opacity: 0; transform: scale(0.72); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Brand-blue pulse glow — all "File Now" CTAs */
@keyframes saCtaPulse {
  0%,  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50%        { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18), 0 0 20px 4px rgba(37, 99, 235, 0.40); }
}

/* Red urgency pulse — legacy urgent badges on directory pages */
@keyframes saUrgencyPulse {
  0%,  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%        { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.18), 0 0 16px 3px rgba(220, 38, 38, 0.35); }
}

/* Blue urgency pulse — closing-this-week page (blue-themed) */
@keyframes saUrgencyPulseBlue {
  0%,  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50%        { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.20), 0 0 18px 4px rgba(37, 99, 235, 0.38); }
}

/* Shimmer border — "Last Day!" card highlight */
@keyframes saShimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}

/* Subtle glow pulse after payout count-up completes */
@keyframes saCountGlow {
  0%   { text-shadow: none; }
  40%  { text-shadow: 0 0 18px rgba(37, 99, 235, 0.55); }
  100% { text-shadow: none; }
}

/* Progress bar fill animation */
@keyframes saProgressFill {
  from { width: 0%; }
}

/* Search input focus ring expand */
@keyframes saSearchFocusRing {
  from { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  to   { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — base + triggered states
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-will-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.sa-will-reveal.sa-revealed {
  opacity: 1;
  transform: none;
}

/* Scale variant — for category cards */
.sa-will-reveal.sa-scale {
  transform: scale(0.96) translateY(14px);
}
.sa-will-reveal.sa-scale.sa-revealed {
  transform: none;
}

/* ─── Stagger delays (50ms apart — standard pages) ─── */
.sa-will-reveal.sa-sd-1  { transition-delay: 0.05s; }
.sa-will-reveal.sa-sd-2  { transition-delay: 0.10s; }
.sa-will-reveal.sa-sd-3  { transition-delay: 0.15s; }
.sa-will-reveal.sa-sd-4  { transition-delay: 0.20s; }
.sa-will-reveal.sa-sd-5  { transition-delay: 0.25s; }
.sa-will-reveal.sa-sd-6  { transition-delay: 0.30s; }
.sa-will-reveal.sa-sd-7  { transition-delay: 0.35s; }
.sa-will-reveal.sa-sd-8  { transition-delay: 0.40s; }
.sa-will-reveal.sa-sd-9  { transition-delay: 0.45s; }
.sa-will-reveal.sa-sd-10 { transition-delay: 0.50s; }
.sa-will-reveal.sa-sd-11 { transition-delay: 0.55s; }
.sa-will-reveal.sa-sd-12 { transition-delay: 0.60s; }

/* ─── Urgency stagger delays (150ms apart — closing-this-week) ─── */
.sa-will-reveal.sa-ctw-sd-1  { transition-delay: 0.15s; }
.sa-will-reveal.sa-ctw-sd-2  { transition-delay: 0.30s; }
.sa-will-reveal.sa-ctw-sd-3  { transition-delay: 0.45s; }
.sa-will-reveal.sa-ctw-sd-4  { transition-delay: 0.60s; }
.sa-will-reveal.sa-ctw-sd-5  { transition-delay: 0.75s; }
.sa-will-reveal.sa-ctw-sd-6  { transition-delay: 0.90s; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO LOAD ANIMATIONS — fire immediately, no scroll needed
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-hero-anim {
  opacity: 0;
  animation: saFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.sa-hero-anim.sa-d0 { animation-delay: 0.06s; }
.sa-hero-anim.sa-d1 { animation-delay: 0.16s; }
.sa-hero-anim.sa-d2 { animation-delay: 0.26s; }
.sa-hero-anim.sa-d3 { animation-delay: 0.36s; }
.sa-hero-anim.sa-d4 { animation-delay: 0.46s; }
.sa-hero-anim.sa-d5 { animation-delay: 0.56s; }

/* Scale-up variant — payout amount hero element */
.sa-hero-anim.sa-scale {
  animation-name: saScaleUp;
  animation-duration: 0.40s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA PULSE — brand blue glow on "File Now" buttons
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cta-pulse {
  animation: saCtaPulse 2.4s ease-in-out infinite;
  position: relative;
}

/* Hover: lift and scale */
.sa-cta-pulse:hover,
.sa-cta-hover:hover {
  transform: scale(1.03) translateY(-2px) !important;
  transition: transform 0.18s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   URGENCY BADGE PULSE — red glow on deadline elements
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-urgency-pulse {
  animation: saUrgencyPulse 1.8s ease-in-out infinite;
}

/* Blue variant — closing-this-week critical cards */
.sa-urgency-pulse-blue {
  animation: saUrgencyPulseBlue 1.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE POP-IN — "No Proof Required" and similar badges
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-badge-popin {
  opacity: 0;
  animation: saPopIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sa-badge-popin.sa-d0 { animation-delay: 0.50s; }
.sa-badge-popin.sa-d1 { animation-delay: 0.65s; }
.sa-badge-popin.sa-d2 { animation-delay: 0.80s; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHIMMER BORDER — "Last Day!" cards on closing-this-week
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-shimmer-last-day {
  position: relative;
  isolation: isolate;
}

.sa-shimmer-last-day::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.22) 0%,
    rgba(96, 165, 250, 0.82) 30%,
    rgba(147, 197, 253, 0.95) 50%,
    rgba(96, 165, 250, 0.82) 70%,
    rgba(37, 99, 235, 0.22) 100%
  );
  background-size: 300% 100%;
  animation: saShimmer 2.4s linear infinite;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYOUT COUNT GLOW — brief glow after count-up completes
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-count-glow {
  animation: saCountGlow 1.0s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD HOVER LIFT — settlement cards across all listing pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* Directory cards */
.sa-card-hover {
  transition:
    transform  0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  cursor: pointer;
}

.sa-card-hover:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(37, 99, 235, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH INPUT — focus glow + subtle width expand
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-search-input {
  transition: box-shadow 0.22s ease, width 0.22s ease !important;
}

.sa-search-input:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER PILL TRANSITIONS — category tabs, sort buttons
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-pill-transition {
  transition:
    background-color 0.18s ease,
    color            0.18s ease,
    border-color     0.18s ease,
    transform        0.15s ease !important;
}

.sa-pill-transition:hover {
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE ICONS — staggered fade-in
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-share-btn-anim {
  opacity: 0;
  animation: saFadeIn 0.28s ease forwards;
}

/* Share button delays */
.sa-share-btn-anim:nth-child(1)  { animation-delay: 0.55s; }
.sa-share-btn-anim:nth-child(2)  { animation-delay: 0.62s; }
.sa-share-btn-anim:nth-child(3)  { animation-delay: 0.69s; }
.sa-share-btn-anim:nth-child(4)  { animation-delay: 0.76s; }
.sa-share-btn-anim:nth-child(5)  { animation-delay: 0.83s; }
.sa-share-btn-anim:nth-child(6)  { animation-delay: 0.90s; }
.sa-share-btn-anim:nth-child(7)  { animation-delay: 0.97s; }
.sa-share-btn-anim:nth-child(8)  { animation-delay: 1.04s; }
.sa-share-btn-anim:nth-child(9)  { animation-delay: 1.11s; }
.sa-share-btn-anim:nth-child(10) { animation-delay: 1.18s; }
.sa-share-btn-anim:nth-child(11) { animation-delay: 1.25s; }

/* Share hover */
.sa-share-btn-anim {
  transition: transform 0.16s ease !important;
}
.sa-share-btn-anim:hover {
  transform: scale(1.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELIGIBILITY CHECKLIST — staggered slide-in from left
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-elig-item {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity   0.28s ease,
    transform 0.28s ease;
}

.sa-elig-item.sa-revealed {
  opacity: 1;
  transform: translateX(0);
}

.sa-elig-item:nth-child(1) { transition-delay: 0.00s; }
.sa-elig-item:nth-child(2) { transition-delay: 0.07s; }
.sa-elig-item:nth-child(3) { transition-delay: 0.14s; }
.sa-elig-item:nth-child(4) { transition-delay: 0.21s; }
.sa-elig-item:nth-child(5) { transition-delay: 0.28s; }
.sa-elig-item:nth-child(6) { transition-delay: 0.35s; }
.sa-elig-item:nth-child(7) { transition-delay: 0.42s; }
.sa-elig-item:nth-child(8) { transition-delay: 0.49s; }

/* ═══════════════════════════════════════════════════════════════════════════
   DEADLINE PROGRESS BAR — fills on scroll into view
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-progress-animate {
  animation: saProgressFill 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS BAR — count-up number reveal (handled by JS, styled here)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat numbers start invisible until JS kicks in */
.sa-stat-countup[data-sa-counted="true"] {
  animation: saScaleUp 0.30s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR RELATED SETTLEMENTS — scroll-reveal
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-sidebar-card {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-sidebar-card.sa-revealed {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOAD-MORE / PAGINATION — new cards fade-in from below
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-newcard-appear {
  animation: saFadeUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO DETAIL PAGE — title → subtitle → payout stagger
   ═══════════════════════════════════════════════════════════════════════════ */

/* Payout amount scale-up after count completes */
.sa-payout-done {
  animation: saCountGlow 1.2s ease-out forwards;
}