/* ═══════════════════════════════════════════════════════════════════════════
   Premium Animations & Micro-Interactions — Phase 17
   GPU-accelerated (transform + opacity only). Every motion < 400ms.
   Respects prefers-reduced-motion. No layout-triggering properties.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Smooth scroll behavior ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
/* ── 2. Scroll-triggered fade-in system ─────────────────────────────────── */
/* Elements with [data-animate] start invisible and slide up when observed. */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-animate].sr-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children for cascade effect */
[data-animate-stagger] > [data-animate]:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger] > [data-animate]:nth-child(2) { transition-delay: 60ms; }
[data-animate-stagger] > [data-animate]:nth-child(3) { transition-delay: 120ms; }
[data-animate-stagger] > [data-animate]:nth-child(4) { transition-delay: 180ms; }
[data-animate-stagger] > [data-animate]:nth-child(5) { transition-delay: 240ms; }
[data-animate-stagger] > [data-animate]:nth-child(6) { transition-delay: 300ms; }
/* Fade-in only (no vertical slide) */
[data-animate="fade"] {
  transform: none;
}
/* Scale-up entry */
[data-animate="scale"] {
  transform: scale(0.95);
}
[data-animate="scale"].sr-visible {
  transform: scale(1);
}
/* ── 3. Settlement cards — smooth lift + shadow on hover ─────────────────── */
.settlement-card,
.rs-settlement-card,
.ch-settlement-card,
.bl-settlement-card {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease !important;
}
.settlement-card:hover,
.rs-settlement-card:hover,
.ch-settlement-card:hover,
.bl-settlement-card:hover {
  transform: translateY(-3px) !important;
}
/* ── 4. Button press feedback — scale-down on active ────────────────────── */
.btn,
.rs-btn-primary,
.rs-btn-primary-dominant,
.rs-btn-ghost-redesigned,
.bar-cta,
.sr-newsletter-cta-btn,
.ei-pro-cta-btn,
.hm-banner-cta,
.cfb-go-btn,
button[type="submit"],
.card-cta,
.sp-cta-btn,
.sp-plan-cta {
  transition: transform 0.1s ease,
              box-shadow 0.2s ease,
              background 0.2s ease,
              color 0.2s ease,
              opacity 0.2s ease,
              border-color 0.2s ease !important;
}
.btn:active,
.rs-btn-primary:active,
.rs-btn-primary-dominant:active,
.rs-btn-ghost-redesigned:active,
.bar-cta:active,
.sr-newsletter-cta-btn:active,
.ei-pro-cta-btn:active,
.hm-banner-cta:active,
.cfb-go-btn:active,
button[type="submit"]:active,
.card-cta:active,
.sp-cta-btn:active,
.sp-plan-cta:active {
  transform: scale(0.97) !important;
}
/* Subtle hover lift on primary CTAs */
.rs-btn-primary-dominant:hover,
.rs-btn-primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-1px);
}
.rs-btn-primary-dominant:active,
.rs-btn-primary:active,
.btn.btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
}
/* ── 5. Nav link hover underline animation ──────────────────────────────── */
.mega-btn,
.nav-link,
.nav-more-btn {
  position: relative;
  transition: color 0.15s ease !important;
}
.mega-btn::after,
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary, #22c55e);
  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 1px;
}
.mega-btn:hover::after,
.nav-link:hover::after {
  width: 80%;
  left: 10%;
}
/* ── 6. Footer link hover transitions ───────────────────────────────────── */
.sr-ft-col-links a {
  transition: color 0.15s ease, transform 0.15s ease !important;
}
.sr-ft-col-links a:hover {
  transform: translateX(3px);
}
/* ── 7. Form input focus transitions ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select,
.sr-newsletter-cta-input,
.nav-search-input {
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              background 0.2s ease !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.sr-newsletter-cta-input:focus,
.nav-search-input:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}
/* ── 8. Pricing card hover state ────────────────────────────────────────── */
.sp-plan-card,
.sp-pricing-card,
.pricing-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease !important;
}
.sp-plan-card:hover,
.sp-pricing-card:hover,
.pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
/* "Popular" / featured pricing card gets a subtle elevated ring */
.sp-plan-card.featured,
.sp-plan-card.popular,
.sp-pricing-card--popular,
.sp-pricing-card--recommended,
.pricing-card.featured {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15),
              0 8px 32px rgba(0, 0, 0, 0.08) !important;
}
.sp-plan-card.featured:hover,
.sp-plan-card.popular:hover,
.sp-pricing-card--popular:hover,
.sp-pricing-card--recommended:hover,
.pricing-card.featured:hover {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.30),
              0 16px 48px rgba(0, 0, 0, 0.12) !important;
}
/* ── 9. Trust badge hover ───────────────────────────────────────────────── */
.rs-trust-badge {
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.rs-trust-badge:hover {
  transform: translateY(-1px);
  background: rgba(34, 197, 94, 0.04);
}
/* ── 10. Stats bar number highlight on hover ────────────────────────────── */
.rs-stat {
  transition: transform 0.2s ease !important;
}
.rs-stat:hover {
  transform: scale(1.04);
}
.rs-stat:hover .rs-stat-number {
  color: #16a34a;
}
/* ── 11. Announce bar dismiss — smooth slide up ─────────────────────────── */
.announce-bar-dismiss {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease !important;
}
.announce-bar-dismiss.sr-dismissing {
  transform: translateY(-100%);
  opacity: 0;
}
/* ── 12. Sticky filing bar entrance ─────────────────────────────────────── */
.sticky-filing-bar {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease !important;
}
/* ── 13. Badge / pill hover ─────────────────────────────────────────────── */
.no-proof-badge,
.new-badge,
.card-category,
.rs-card-category {
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}
.no-proof-badge:hover,
.card-category:hover,
.rs-card-category:hover {
  transform: scale(1.05);
}
/* ── 14. Card eligibility nudge slide-in ────────────────────────────────── */
.card-eligibility-nudge {
  transition: color 0.2s ease, opacity 0.2s ease !important;
  opacity: 0.75;
}
.settlement-card:hover .card-eligibility-nudge {
  opacity: 1;
}
/* ── 15. Compare chip entrance ──────────────────────────────────────────── */
.cfb-chip {
  animation: sr-chip-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sr-chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
/* ── 16. Image/logo smooth load ─────────────────────────────────────────── */
.card-logo,
.rs-hero img {
  transition: opacity 0.3s ease !important;
}
/* ── 17. Accordion smooth expand (mobile nav + FAQ) ─────────────────────── */
.nav-mobile-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease !important;
  opacity: 0;
}
.nav-mobile-accordion-body.open {
  max-height: 600px;
  opacity: 1;
}
/* ── 18. Tooltip / toast entrance ───────────────────────────────────────── */
@keyframes sr-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sr-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
/* ── 19. Back-to-top button ─────────────────────────────────────────────── */
.sr-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-dark, #15803d);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease,
              visibility 0s linear 0.25s,
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.15s ease !important;
  z-index: 90;
}
.sr-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease,
              visibility 0s linear 0s,
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.15s ease !important;
}
.sr-back-to-top:hover {
  background: var(--primary, #22c55e);
  transform: translateY(-2px);
}
.sr-back-to-top:active {
  transform: scale(0.93);
}
/* Push up above sticky filing bar if present */
.sticky-filing-bar ~ .sr-back-to-top,
body:has(.sticky-filing-bar[style*="display"]:not([style*="display:none"])) .sr-back-to-top {
  bottom: 5rem;
}
@media (max-width: 600px) {
  .sr-back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
/* ── 20. Link hover transitions (global) ────────────────────────────────── */
a {
  transition: color 0.15s ease;
}
/* ── 21. Loading skeleton shimmer ───────────────────────────────────────── */
@keyframes sr-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.sr-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: sr-shimmer 1.5s infinite linear;
  border-radius: 8px;
}
/* ── 22. Urgency deadline pulse (enhanced) ──────────────────────────────── */
.card-deadline.urgent .urgency-item-days.urgent {
  animation: sr-urgency-glow 2s ease-in-out infinite;
}
@keyframes sr-urgency-glow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 6px rgba(239, 68, 68, 0.3); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — Disable ALL animations for accessibility
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sr-back-to-top {
    transition: none !important;
  }
}
