/* ═══════════════════════════════════════════════════════════════════════════
   SETTLEMENTRADAR — Premium Elite Interactions
   Task #918980: Micro-animations, transitions, motion profile
   Motion profile: cubic-bezier(0.34, 1.56, 0.64, 1) for spring on interactive elements
   Content reveals: ease-out. All GPU-accelerated (transform + opacity + box-shadow).
   Respects prefers-reduced-motion throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   0. INTER-ONLY FONT ENFORCEMENT
   Single font stack — overrides any residual Space Grotesk or other
   font-family declarations in legacy CSS files. Task #918980.
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.nav-logo,
[class*="heading"],
[class*="-title"],
[class*="title-"],
.hero-title,
.section-title,
.card-title,
.display,
.eyebrow {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}
body, p, a, span, li, td, th, label, input, select, textarea, button {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLOBAL SMOOTH SCROLL
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BUTTON MICRO-ANIMATIONS
   All buttons: scale(1.02) on hover, 0.2s ease-out
   Active press: scale(0.98) for tactile feel
   ═══════════════════════════════════════════════════════════════════════════ */
button,
.btn,
[class*="btn-"],
[class*="-btn"],
[role="button"],
a[class*="cta"],
.cta-btn,
.bar-cta,
.hero-cta,
.go-pro-btn,
.pnb-cta,
#srProNudgeCta,
.claim-btn,
.file-btn,
.checkout-btn,
.sr-btn {
  transition: transform 0.2s ease-out,
              box-shadow 0.2s ease-out,
              background-color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}
button:hover,
.btn:hover,
[class*="btn-"]:hover,
[class*="-btn"]:hover,
[role="button"]:hover,
a[class*="cta"]:hover,
.cta-btn:hover,
.bar-cta:hover,
.hero-cta:hover,
.go-pro-btn:hover,
.claim-btn:hover,
.file-btn:hover,
.checkout-btn:hover,
.sr-btn:hover {
  transform: scale(1.02) !important;
}
button:active,
.btn:active,
[class*="btn-"]:active,
[class*="-btn"]:active,
[role="button"]:active,
a[class*="cta"]:active,
.cta-btn:active,
.bar-cta:active,
.hero-cta:active,
.go-pro-btn:active,
.claim-btn:active,
.file-btn:active,
.checkout-btn:active,
.sr-btn:active {
  transform: scale(0.98) !important;
  transition-duration: 0.1s !important;
}
/* Loading/disabled: no transform */
button:disabled,
.btn:disabled,
.sr-loading,
.sr-loading:hover {
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CTA BUTTON — EMERALD GREEN GLOW PULSE ON HOVER
   Primary green CTAs get a breathing glow on hover
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes sr-cta-glow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45), 0 4px 16px rgba(22, 163, 74, 0.25); }
  50%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.0), 0 4px 20px rgba(22, 163, 74, 0.40); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.0), 0 4px 16px rgba(22, 163, 74, 0.25); }
}
/* Target the primary green CTA buttons */
.btn-primary:hover,
.cta-primary:hover,
.hero-cta:hover,
.bar-cta:hover,
#srProNudgeCta:hover,
[class*="cta"]:hover[style*="#16a34a"],
[class*="cta"]:hover[style*="#15803d"],
[class*="cta"]:hover[style*="green"],
.go-pro-btn:hover,
.checkout-btn:hover,
.claim-btn:hover {
  animation: sr-cta-glow-pulse 1.5s ease-out infinite !important;
}
/* Ensure transform + animation coexist */
.btn-primary:hover,
.cta-primary:hover {
  transform: scale(1.02) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. CARD HOVER LIFT EFFECT
   translateY(-2px) + slight glow shadow on hover
   ═══════════════════════════════════════════════════════════════════════════ */
.card,
.ck-card,
.sr-card,
.detail-card,
.settlement-card,
.result-card,
.feature-card,
.pricing-card,
.dir-card,
.sp-card,
[class*="-card"]:not(.no-lift),
[class*="card-"]:not(.no-lift) {
  transition: transform 0.22s ease-out,
              box-shadow 0.22s ease-out !important;
}
.card:hover,
.ck-card:hover,
.sr-card:hover,
.detail-card:hover,
.settlement-card:hover,
.result-card:hover,
.feature-card:hover,
.pricing-card:hover,
.dir-card:hover,
.sp-card:hover,
[class*="-card"]:not(.no-lift):hover,
[class*="card-"]:not(.no-lift):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.10),
              0 4px 12px rgba(15, 23, 42, 0.10) !important;
}
/* Cards that are clickable links — enhanced feedback */
a.card:hover,
a.ck-card:hover,
a[class*="-card"]:hover,
a[class*="card-"]:hover {
  transform: translateY(-3px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. ANIMATED LINK UNDERLINES
   Width-based underline animation (0% → 100%) — NOT text-decoration
   Applies to nav links, body content links, footer links
   ═══════════════════════════════════════════════════════════════════════════ */
/* Body content links */
:where(main) a:not([class]),
:where(main) a.text-link,
:where(article) a:not([class]),
.prose a,
.body-copy a {
  position: relative;
  text-decoration: none !important;
}
:where(main) a:not([class])::after,
:where(main) a.text-link::after,
:where(article) a:not([class])::after,
.prose a::after,
.body-copy a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.2s ease-out;
}
:where(main) a:not([class]):hover::after,
:where(main) a.text-link:hover::after,
:where(article) a:not([class]):hover::after,
.prose a:hover::after,
.body-copy a:hover::after {
  width: 100%;
}
/* Nav link underlines — animated from center or left */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary, #16a34a);
  border-radius: 2px;
  transition: width 0.22s ease-out;
}
.nav-link:hover::after,
.nav-link.active::after,
.nav-link[aria-current]::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MODAL / OVERLAY SPRING TRANSITIONS
   cubic-bezier(0.34, 1.56, 0.64, 1) — spring feel, 300ms
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base modal backdrop */
.sr-modal-backdrop,
.modal-backdrop,
.overlay-backdrop,
.popup-backdrop,
[class*="backdrop"] {
  transition: opacity 0.25s ease-out !important;
}

/* Modal content / dialog panels */
.sr-modal,
.sr-modal-wrap,
.modal,
.modal-content,
.popup,
.popup-content,
.dialog,
[role="dialog"],
[class*="modal-"]:not([class*="backdrop"]) {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease-out !important;
}

/* Entry state — modals start slightly scaled down */
.sr-modal:not(.sr-modal-visible),
.modal:not(.modal-open):not(.modal-visible) {
  transform: scale(0.95) translateY(8px);
  opacity: 0;
  pointer-events: none;
}
.sr-modal.sr-modal-visible,
.modal.modal-open,
.modal.modal-visible {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Drawer / slide-in panels from bottom */
.drawer,
.sheet,
.bottom-sheet,
[class*="drawer-"],
[class*="-drawer"] {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ACCORDION / DRAWER HEIGHT ANIMATIONS
   250ms ease-out with height animation — smooth expand/collapse
   ═══════════════════════════════════════════════════════════════════════════ */
.accordion-content,
.collapsible-content,
.expandable,
[class*="accordion-body"],
[class*="collapse-body"],
details > *:not(summary) {
  overflow: hidden;
  transition: max-height 0.25s ease-out,
              opacity 0.2s ease-out !important;
}
/* Summary (accordion trigger) */
details > summary {
  cursor: pointer;
  transition: color 0.2s ease-out !important;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::marker {
  display: none;
}
/* FAQ-style accordions */
.faq-item,
.accordion-item {
  transition: box-shadow 0.2s ease-out !important;
}
.faq-item.open,
.accordion-item.active {
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SKELETON LOADING STATES — SHIMMER ANIMATION
   Replace content flicker with smooth shimmer
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes sr-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.sr-skeleton,
.skeleton,
[class*="skeleton-"],
[data-skeleton],
.loading-placeholder {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 800px 100%;
  animation: sr-skeleton-shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--radius, 8px);
  color: transparent !important;
}
/* Skeleton text lines */
.sr-skeleton-text,
.skeleton-text {
  height: 1em;
  border-radius: 4px;
  margin-bottom: 0.5em;
}
.sr-skeleton-text:last-child,
.skeleton-text:last-child {
  width: 70%;
}
/* Skeleton card */
.sr-skeleton-card,
.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg, 16px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. FOCUS TRANSITIONS
   Smooth focus ring appearance — spring feel
   ═══════════════════════════════════════════════════════════════════════════ */
a, button, input, select, textarea, [tabindex] {
  transition: outline-offset 0.12s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}
:focus-visible {
  outline-offset: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. TAG / PILL / BADGE HOVER
   Existing: scale(1.04) + green tint. Keeping and refining.
   ═══════════════════════════════════════════════════════════════════════════ */
.tag,
.badge,
.pill,
.chip,
[class*="badge-"],
[class*="-badge"],
[class*="tag-"],
[class*="-tag"],
.nav-tag,
.sr-badge {
  transition: transform 0.18s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              background-color 0.18s ease-out,
              box-shadow 0.18s ease-out !important;
}
.tag:hover,
.badge:hover,
.pill:hover,
.chip:hover,
[class*="badge-"]:hover,
[class*="-badge"]:hover,
[class*="tag-"]:hover,
[class*="-tag"]:hover,
.nav-tag:hover,
.sr-badge:hover {
  transform: scale(1.04) !important;
  background-color: rgba(22, 163, 74, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. ICON HOVER ANIMATIONS
   Subtle rotation / scale on interactive icons
   ═══════════════════════════════════════════════════════════════════════════ */
.icon-btn,
.social-icon,
.share-btn {
  transition: transform 0.2s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}
.icon-btn:hover,
.social-icon:hover,
.share-btn:hover {
  transform: scale(1.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. PREFERS-REDUCED-MOTION — DISABLE ALL ANIMATIONS
   Critical accessibility rule. Must be last so it overrides everything.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}