/* ══════════════════════════════════════════════════
   FOLLOWDOC — ANIMATIONS & EFFECTS (shared)
   ══════════════════════════════════════════════════ */

/* ── Page entrance ───────────────────────────────── */
body { animation: pageFadeIn .45s ease both; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll-reveal upgrades ──────────────────────── */
.reveal        { opacity: 0; transform: translateY(48px);  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal-left   { opacity: 0; transform: translateX(-56px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal-right  { opacity: 0; transform: translateX(56px);  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal-scale  { opacity: 0; transform: scale(.88);        transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1; transform: translate(0) scale(1);
}
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .32s; }
.delay-4 { transition-delay: .44s; }

/* ── Animated gradient text shimmer ─────────────── */
.text-gradient {
  background: linear-gradient(90deg, #C026D3, #E879F9, #FF6B35, #C026D3);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}

/* ── Floating background orbs (legal pages) ─────── */
.page-orbs {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.page-orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .12;
  animation: orbDrift 18s ease-in-out infinite;
}
.page-orb:nth-child(1) { width: 500px; height: 500px; background: #C026D3; top: -100px; right: -120px; animation-delay: 0s; }
.page-orb:nth-child(2) { width: 380px; height: 380px; background: #7C3AED; bottom: 5%;  left: -80px;  animation-delay: -6s; }
.page-orb:nth-child(3) { width: 260px; height: 260px; background: #FF6B35; top: 45%;   left: 55%;    animation-delay: -12s; }
@keyframes orbDrift {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%     { transform: translate(20px, -28px) scale(1.06); }
  66%     { transform: translate(-18px, 18px) scale(.94); }
}

/* ── Card hover lift ─────────────────────────────── */
.problem-card, .pillar-card, .pricing-card, .flujo-card, .legal-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.problem-card:hover, .pillar-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 60px rgba(192,38,211,.16);
}
.pricing-card:not(.pricing-card--featured):hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 60px rgba(192,38,211,.16);
}
.pricing-card--featured {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.pricing-card--featured:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 32px 70px rgba(192,38,211,.35);
}

/* ── Button press + glow ─────────────────────────── */
.btn-primary, .btn-plan, .nav-cta, .btn-ghost, .btn-ghost-light, .btn-ghost-dark {
  position: relative; overflow: hidden;
}
.btn-primary::after, .nav-cta::after, .btn-plan--featured::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28) 0%, transparent 65%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.btn-primary:hover::after, .nav-cta:hover::after, .btn-plan--featured:hover::after { opacity: 1; }
.btn-primary:active, .nav-cta:active, .btn-plan--featured:active {
  transform: translateY(-1px) scale(.97);
}

/* ── Ripple on click ─────────────────────────────── */
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35);
  width: 10px; height: 10px;
  transform: scale(0);
  animation: rippleAnim .55s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(28); opacity: 0; }
}

/* ── Navbar link underline slide ────────────────── */
.nav-links a::after {
  background: linear-gradient(90deg, #C026D3, #FF6B35) !important;
  height: 2px !important;
  transition: width .3s cubic-bezier(.22,1,.36,1) !important;
}

/* ── Pricing badge pulse ─────────────────────────── */
.pricing-featured-badge {
  animation: badgePop .6s cubic-bezier(.34,1.56,.64,1) both, badgeGlow 2.5s ease-in-out 1s infinite;
}
@keyframes badgePop {
  from { transform: translateX(-50%) scale(.6); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);  opacity: 1; }
}
@keyframes badgeGlow {
  0%,100% { box-shadow: 0 2px 12px rgba(255,107,53,.4); }
  50%     { box-shadow: 0 4px 24px rgba(255,107,53,.75); }
}

/* ── Step dot animated ring ──────────────────────── */
.step-dot {
  position: relative;
}
.step-dot::after {
  content: '';
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.18);
  animation: ringPulse 2.8s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100% { transform: scale(1);   opacity: .5; }
  50%     { transform: scale(1.35); opacity: 0; }
}

/* ── Section wave subtle animation ──────────────── */
.section-wave path {
  animation: waveFlow 14s ease-in-out infinite;
}
.section-wave path:nth-child(2) { animation-duration: 11s; animation-direction: reverse; }
.section-wave path:nth-child(3) { animation-duration: 9s;  animation-delay: -2s; }

/* ── Smooth underline for footer links ───────────── */
.footer-links a {
  position: relative;
}
.footer-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: #F0ABFC;
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.footer-links a:hover::after { width: 100%; }

/* ── Cursor glow trail (hero/legal hero bg) ──────── */
.cursor-glow {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,38,211,.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: left .12s ease, top .12s ease;
  mix-blend-mode: screen;
}

/* ── Legal hero entrance ─────────────────────────── */
.legal-hero h1 { animation: fadeUp .85s cubic-bezier(.22,1,.36,1) .2s both; }
.legal-hero p  { animation: fadeUp .85s cubic-bezier(.22,1,.36,1) .35s both; }
.legal-back    { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .45s both; }
.legal-card    { animation: fadeUp .8s cubic-bezier(.22,1,.36,1) .55s both; }

/* ── Counter number animation ────────────────────── */
.stat-num { transition: color .3s; }
.stat-item:hover .stat-num { color: #F0ABFC; }

/* ── Solution banner shimmer border ─────────────── */
.solution-banner {
  position: relative; overflow: hidden;
}
.solution-banner::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
  animation: bannerShine 4s linear infinite;
  pointer-events: none;
}
@keyframes bannerShine {
  0%   { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%)  rotate(45deg); }
}

/* ── Flujo divider icon spin-on-hover ────────────── */
.flujo-divider-icon {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.flujo-divider-icon:hover {
  transform: rotate(180deg) scale(1.15);
  background: rgba(192,38,211,.25);
}

/* ── Label accent animation ──────────────────────── */
.label {
  animation: fadeDown .6s cubic-bezier(.22,1,.36,1) both;
}