/* ============================================================
   MEDIFY - INTERACTIONS & MICRO-ANIMATIONS
   AI-grade CTAs, magnetic hover, cursor glow, card lift, scroll reveal.
   Import after components.css + landing.css.
   ============================================================ */

/* ------------------------------------------------------------------
   1. CURSOR GLOW (positioned by JS)
   ------------------------------------------------------------------ */
.cursor-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(38, 109, 240, 0.08) 0%, transparent 65%);
  transition: opacity 0.4s;
  will-change: transform;
}
[data-theme="dark"] .cursor-glow {
  background: radial-gradient(circle, rgba(100, 160, 255, 0.10) 0%, transparent 65%);
}

/* ------------------------------------------------------------------
   2. PRIMARY BUTTON - SHIMMER + GLOW
   ------------------------------------------------------------------ */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shimmer sweep */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.10),
    0 0 0 3px rgba(38, 109, 240, 0.12);
}

.btn-primary:hover::after {
  transform: translateX(100%);
  transition: transform 0.55s ease;
}

.btn-primary:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* Accent button - same shimmer */
.btn-accent {
  position: relative;
  overflow: hidden;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0s;
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(38, 109, 240, 0.30), 0 0 0 3px rgba(38, 109, 240, 0.15);
}
.btn-accent:hover::after {
  transform: translateX(100%);
  transition: transform 0.55s ease;
}
.btn-accent:active { transform: translateY(0) scale(0.98); }

/* ------------------------------------------------------------------
   3. SECONDARY BUTTON - LIFT + BORDER GLOW
   ------------------------------------------------------------------ */
.btn-secondary {
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 0 0 2px rgba(38, 109, 240, 0.18);
  border-color: var(--blue-300);
}
.btn-secondary:active { transform: translateY(0) scale(0.98); }

/* ------------------------------------------------------------------
   4. MAGNETIC BUTTON WRAPPER
   Wrapping elements get .magnetic class via JS.
   CSS reads --dx, --dy custom properties set by JS.
   ------------------------------------------------------------------ */
.magnetic {
  display: inline-block;
  --dx: 0px;
  --dy: 0px;
  transform: translate(var(--dx), var(--dy));
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.magnetic.snap {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------------
   5. CARD HOVER - LIFT + AURORA BORDER
   ------------------------------------------------------------------ */
.card, .feature-card, .metric-card, .process-card, .proof-card, .plan-card {
  transition:
    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s var(--ease-out),
    border-color 0.25s var(--ease-out);
  will-change: transform, box-shadow;
}
.card:hover, .feature-card:hover, .metric-card:hover, .process-card:hover, .proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(38, 109, 240, 0.18);
  border-color: rgba(38, 109, 240, 0.25);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .process-card:hover,
[data-theme="dark"] .proof-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(100, 160, 255, 0.22);
  border-color: rgba(100, 160, 255, 0.25);
}

/* Plan cards - extra pop */
.plan-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(38, 109, 240, 0.22);
}

/* ------------------------------------------------------------------
   6. SCROLL REVEAL
   Elements with [data-reveal] animate in when entering viewport.
   ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].revealed { opacity: 1; }

[data-reveal="left"]  { transform: translateX(-36px) translateY(0); }
[data-reveal="left"].revealed  { transform: translateX(0); opacity: 1; }

[data-reveal="right"] { transform: translateX(36px) translateY(0); }
[data-reveal="right"].revealed { transform: translateX(0); opacity: 1; }

[data-reveal="scale"] { transform: scale(0.92) translateY(16px); }
[data-reveal="scale"].revealed { transform: scale(1) translateY(0); opacity: 1; }

[data-reveal="up"] { transform: translateY(48px); }
[data-reveal="up"].revealed { transform: translateY(0); opacity: 1; }

/* Stagger delay utilities */
[data-delay="50"]  { transition-delay: 50ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="350"] { transition-delay: 350ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }

/* ------------------------------------------------------------------
   7. HERO CTA - AURORA BUTTON (large primary hero CTA)
   ------------------------------------------------------------------ */
.btn-aurora {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  height: 52px;
  background: var(--black-100);
  color: var(--white-100);
  border: 1px solid var(--black-100);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  letter-spacing: var(--ls-sm);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s var(--ease-out);
  z-index: 1;
}

/* Animated aurora background layer */
.btn-aurora::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    135deg,
    #266df0 0%,
    #3b5bdb 25%,
    #0f172a 50%,
    #3b5bdb 75%,
    #266df0 100%
  );
  background-size: 300% 300%;
  border-radius: inherit;
  animation: aurora-shift 4s ease infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s;
}

/* Shimmer sweep */
.btn-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0s;
  border-radius: inherit;
}

.btn-aurora:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 35px rgba(38, 109, 240, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.20),
    0 0 0 3px rgba(38, 109, 240, 0.15);
}
.btn-aurora:hover::before { opacity: 1; }
.btn-aurora:hover::after {
  transform: translateX(110%);
  transition: transform 0.6s ease;
}
.btn-aurora:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(38, 109, 240, 0.25);
}

@keyframes aurora-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------------------
   8. PULSING RING on primary hero CTA (behind it)
   ------------------------------------------------------------------ */
.cta-pulse-ring {
  position: relative;
  display: inline-flex;
}
.cta-pulse-ring::before,
.cta-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 1.5px solid rgba(38, 109, 240, 0.35);
  animation: pulse-ring 2.8s ease-out infinite;
  pointer-events: none;
}
.cta-pulse-ring::after {
  inset: -12px;
  border-radius: 22px;
  border-color: rgba(38, 109, 240, 0.18);
  animation-delay: 0.5s;
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  60%  { transform: scale(1.04); opacity: 0; }
  100% { transform: scale(1.04); opacity: 0; }
}

/* ------------------------------------------------------------------
   9. ANIMATED COUNTER (numbers count up via JS)
   ------------------------------------------------------------------ */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   10. PARTICLE CANVAS (absolute, injected over CTA sections)
   ------------------------------------------------------------------ */
.particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* ------------------------------------------------------------------
   11. NAV LINKS - underline slide
   ------------------------------------------------------------------ */
.topbar-nav a,
.landing-header a:not(.btn) {
  position: relative;
}
.topbar-nav a::after,
.landing-header a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: width 0.25s var(--ease-out);
  border-radius: 2px;
}
.topbar-nav a:hover::after,
.landing-header a:not(.btn):hover::after {
  width: 100%;
}

/* ------------------------------------------------------------------
   12. FAQ ITEM - hover accent bar
   ------------------------------------------------------------------ */
.faq-item {
  transition: border-color 0.2s var(--ease-out);
}
.faq-item:hover {
  border-color: rgba(38, 109, 240, 0.30);
}

/* ------------------------------------------------------------------
   13. PLAN CARD ACCENT GLOW (featured plan)
   ------------------------------------------------------------------ */
.plan-card.featured,
.plan-card[data-featured] {
  position: relative;
}
.plan-card.featured::before,
.plan-card[data-featured]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(38,109,240,0.35) 0%, transparent 50%, rgba(59,91,219,0.25) 100%);
  z-index: -1;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.plan-card.featured:hover::before,
.plan-card[data-featured]:hover::before {
  opacity: 1;
}

/* ------------------------------------------------------------------
   14. ICON / BADGE HOVER SPIN
   ------------------------------------------------------------------ */
.icon-spin-hover {
  display: inline-flex;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon-spin-hover:hover {
  transform: rotate(15deg) scale(1.15);
}

/* ------------------------------------------------------------------
   15. TOPBAR - glassmorphism scroll refinement
   ------------------------------------------------------------------ */
.landing-header .topbar {
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.landing-header .topbar.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .landing-header .topbar.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
}

/* ------------------------------------------------------------------
   16. INTERACTIVE ARROW (CTA link arrows)
   ------------------------------------------------------------------ */
.arrow-anim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s var(--ease-out);
}
.arrow-anim:hover { gap: 10px; }
.arrow-anim .arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}
.arrow-anim:hover .arrow { transform: translateX(3px); }