/* ═══════════════════════════════════════════════════════════════════
   SettlementRadar — Pricing Conversion Animations  (Task #1007073)
   Brand blue: #2563eb  |  200-400ms  |  GPU-only (transform/opacity)
   prefers-reduced-motion respected throughout
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 0. Reduced-motion guard ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .prc-card-enter,
  .prc-card-entered,
  .sr-badge-bounce,
  .sr-saving-pop,
  .sr-stagger-child,
  .sr-stagger-child.sr-stagger-visible,
  .sr-fadeup,
  .sr-fadeup.sr-fadeup-visible,
  .sr-slide-modal,
  .sr-slide-modal.sr-slide-modal-open,
  .sr-checkmark-draw,
  .sr-confetti-canvas { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .prc-card-entered { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   1. PRICING PAGE — plan card staggered entrance
   ════════════════════════════════════════════════════════════════════ */

/* Initial hidden state — applied via JS after DOM ready */
.prc-card-enter {
  opacity: 0;
  transform: translateY(28px);
}
.prc-card-entered {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ════════════════════════════════════════════════════════════════════
   2. BILLING TOGGLE — smooth slide + label transitions
   ════════════════════════════════════════════════════════════════════ */

/* Pricing-page tabs */
.sp-billing-tab {
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}

/* Pro / Pro+ / Family toggle slider */
.pro-toggle-slider,
.pp-toggle-slider {
  transition: background 0.22s ease !important;
}
.pro-toggle-switch input:checked ~ .pro-toggle-slider,
.pp-toggle-switch input:checked ~ .pp-toggle-slider {
  background: #2563eb !important;
}
.pro-toggle-slider::before,
.pp-toggle-slider::before {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Family button-style toggle */
.fam-billing-toggle button {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* ════════════════════════════════════════════════════════════════════
   3. SAVINGS BADGE — bounce/pop when annual is activated
   ════════════════════════════════════════════════════════════════════ */

@keyframes srBadgePop {
  0%   { transform: scale(0.6);  opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes srBadgeBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.12); }
  60%       { transform: scale(0.96); }
}

/* Applied via JS when annual toggled */
.sr-badge-pop {
  animation: srBadgePop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.sr-badge-bounce {
  animation: srBadgeBounce 0.4s ease both !important;
}

/* ════════════════════════════════════════════════════════════════════
   4. DOLLAR SAVINGS — scale-up + fade-in when annual toggled
   ════════════════════════════════════════════════════════════════════ */

@keyframes srSavingReveal {
  0%   { opacity: 0; transform: scale(0.75) translateY(6px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);   }
}

.saving-annual,
[class*="saving-annual"],
.annual-savings-badge {
  /* animation triggered when .annual-active is on a parent — see JS */
}

.sr-saving-pop {
  animation: srSavingReveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* ════════════════════════════════════════════════════════════════════
   5. RECOMMENDED PLAN — persistent glow / shimmer border
   ════════════════════════════════════════════════════════════════════ */

@keyframes srProGlow {
  0%,  100% { box-shadow: 0 4px 12px rgba(37,99,235,0.18), 0 0 0 1.5px rgba(37,99,235,0.45); }
  50%        { box-shadow: 0 6px 24px rgba(37,99,235,0.32), 0 0 0 2px   rgba(37,99,235,0.70); }
}

@keyframes srShimmerBorder {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Pricing-page Pro card (most recommended) */
.prc-card--pro {
  animation: srProGlow 2.8s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════════
   6. CTA BUTTON — pulse/glow on recommended plan
   ════════════════════════════════════════════════════════════════════ */

@keyframes srCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(37,99,235,0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(37,99,235,0);    }
}

/* Recommended-plan CTA on pricing page */
.prc-card--pro .prc-cta--primary,
.pro-cta-primary,
.proplus-cta-primary,
.fam-cta-primary {
  animation: srCtaPulse 2.2s ease-in-out infinite !important;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease !important;
}
.prc-card--pro .prc-cta--primary:hover,
.pro-cta-primary:hover,
.proplus-cta-primary:hover,
.fam-cta-primary:hover {
  animation: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,0.38) !important;
}

/* ════════════════════════════════════════════════════════════════════
   7. CARD HOVER — lift + deepen shadow
   ════════════════════════════════════════════════════════════════════ */

.prc-card:not(.prc-card--pro):hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Pro card hover already defined in pricing.ejs — just reinforce transition */
.prc-card {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
}

/* ════════════════════════════════════════════════════════════════════
   8. COMPARE-PLANS — checkmark staggered fade-in on scroll
   ════════════════════════════════════════════════════════════════════ */

@keyframes srCheckIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-15deg); }
  70%  { transform: scale(1.15) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.cp-yes,
.cp-yes-indigo,
.cp-yes-gold {
  opacity: 0;
  display: inline-block;
  transition: opacity 0.01s; /* avoid FOUC */
}
.cp-yes.sr-check-visible,
.cp-yes-indigo.sr-check-visible,
.cp-yes-gold.sr-check-visible {
  animation: srCheckIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  opacity: 1;
}

/* Row stagger handled via JS delay attribute */

/* ════════════════════════════════════════════════════════════════════
   9. STICKY CTA BAR — slide-down entrance (compare-plans)
   ════════════════════════════════════════════════════════════════════ */

@keyframes srSlideDown {
  0%   { transform: translateY(-110%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

.cp-header-strip[style*="position:sticky"],
.cp-header-strip[style*="position: sticky"],
.cp-header-strip.is-sticky {
  animation: srSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* ════════════════════════════════════════════════════════════════════
   10. FEATURE LISTS — staggered scroll reveal
        Used on /pro, /pro-plus, /family, /compare-plans
   ════════════════════════════════════════════════════════════════════ */

.sr-stagger-child {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-stagger-child.sr-stagger-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   11. TESTIMONIALS / SOCIAL PROOF — fade-up on scroll
   ════════════════════════════════════════════════════════════════════ */

.sr-fadeup {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-fadeup.sr-fadeup-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   12. CHECKOUT NUDGE MODAL — slide-up entrance with backdrop fade
   ════════════════════════════════════════════════════════════════════ */

@keyframes srModalSlideUp {
  0%   { transform: translateY(40px) scale(0.97); opacity: 0; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes srBackdropIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.sr-nudge-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9100;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0;
  animation: srBackdropIn 0.25s ease both;
}
.sr-nudge-backdrop.sr-nudge-hidden {
  display: none !important;
}
.sr-nudge-modal {
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 28px 24px 32px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.12);
  animation: srModalSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  position: relative;
}
.sr-nudge-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: #9ca3af;
  padding: 4px; line-height: 1;
}
.sr-nudge-close:hover { color: #374151; }
.sr-nudge-badge {
  display: inline-block;
  background: #dbeafe; color: #1d4ed8;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.sr-nudge-heading {
  font-size: 1.15rem; font-weight: 700; color: #111827;
  margin: 0 0 6px;
}
.sr-nudge-sub {
  font-size: 0.9rem; color: #6b7280;
  margin: 0 0 18px;
}
.sr-nudge-savings {
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 0.88rem; color: #1e40af; font-weight: 600;
}
.sr-nudge-cta {
  display: block; width: 100%;
  background: #2563eb; color: #ffffff;
  font-size: 0.95rem; font-weight: 700;
  padding: 13px 20px; border-radius: 10px;
  text-align: center; text-decoration: none;
  border: none; cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  animation: srCtaPulse 2.2s ease-in-out infinite;
}
.sr-nudge-cta:hover {
  background: #1d4ed8; transform: translateY(-1px);
  animation: none;
  box-shadow: 0 6px 20px rgba(37,99,235,0.38);
}
.sr-nudge-skip {
  display: block; text-align: center;
  margin-top: 12px; font-size: 0.82rem; color: #9ca3af;
  cursor: pointer; text-decoration: underline;
  background: none; border: none; width: 100%;
}
.sr-nudge-skip:hover { color: #6b7280; }

/* ════════════════════════════════════════════════════════════════════
   13. STRIPE BUTTON LOADING STATE — spinner after click
   ════════════════════════════════════════════════════════════════════ */

@keyframes srSpinnerRing {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Applied via JS on checkout click */
.sr-btn-loading {
  pointer-events: none !important;
  position: relative !important;
  color: transparent !important;
}
.sr-btn-loading::after {
  content: '';
  position: absolute;
  inset: 0; margin: auto;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: srSpinnerRing 0.65s linear infinite !important;
}

/* ════════════════════════════════════════════════════════════════════
   14. SUCCESS PAGES — confetti canvas overlay + checkmark draw
   ════════════════════════════════════════════════════════════════════ */

/* Confetti canvas — injected via JS */
#sr-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  width: 100%; height: 100%;
}

/* Checkmark SVG draw animation */
@keyframes srCheckDraw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  30%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}
@keyframes srCircleDraw {
  0%   { stroke-dashoffset: 200; opacity: 0.4; }
  100% { stroke-dashoffset: 0;   opacity: 1;   }
}
@keyframes srSuccessScale {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.ff-success-icon {
  animation: srSuccessScale 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
/* SVG paths inside success icon — targeted via JS class injection */
.ff-success-icon .sr-check-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: srCheckDraw 0.4s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.ff-success-icon .sr-circle-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: srCircleDraw 0.5s 0.05s ease both !important;
}

/* ════════════════════════════════════════════════════════════════════
   15. COMPARE-PLANS sticky CTA trigger class
   ════════════════════════════════════════════════════════════════════ */

/* JS adds .is-sticky when header strip becomes sticky */
.cp-header-strip {
  transition: box-shadow 0.2s ease;
}
.cp-header-strip.is-sticky {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

/* ════════════════════════════════════════════════════════════════════
   16. GENERAL utility — section fade-up on scroll (all plan pages)
   ════════════════════════════════════════════════════════════════════ */

.sr-section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-section-reveal.sr-section-visible {
  opacity: 1;
  transform: translateY(0);
}