/* ==========================================================================
   Callback Clone — Motion Layer
   Shared across index.html / pricing.html / demo.html
   Design rule: every element is VISIBLE BY DEFAULT. JS only hides + animates
   things in once GSAP has actually loaded, so a blocked/broken CDN request
   never leaves content stuck invisible.
   ========================================================================== */

/* ---------- Reveal targets (fade-in / how-step) ---------- */
.fade-in, .how-step { opacity: 1; }

/* ---------- Nav hide-on-scroll ---------- */
header.site-nav {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
header.site-nav.nav-hidden { transform: translateY(-140%); }
header.site-nav .glass { transition: background .35s ease, border-color .35s ease; }
header.site-nav .glass.nav-scrolled { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }

/* ---------- Mobile menu ---------- */
#mobileMenu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
#mobileMenu.open { max-height: 420px; opacity: 1; }

/* ---------- Floating gradient blobs ----------
   These now hold still by default. A B2B tool that answers business phones
   reads as more trustworthy calm than in perpetual motion — see the
   competitor sites this was benchmarked against (Smith.ai, Goodcall, Ruby),
   none of which animate their background decoration. Kept as CSS classes
   (not deleted) in case a specific section wants motion back deliberately. */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: .82;
  pointer-events: none;
  z-index: 0;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(16px, -20px) scale(1.06); }
}
.blob-float { animation: none; }

/* ---------- Card spotlight (mouse-follow glow) ---------- */
.card-glow { position: relative; }
.card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(62,232,184,0.16), transparent 70%);
  transition: opacity .4s ease;
  z-index: 1;
}
.card-glow:hover::before { opacity: 1; }
.card-glow > * { position: relative; z-index: 2; }

/* ---------- Card hover lift ---------- */
.hover-lift {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  border-color: rgba(62,232,184,0.35);
  box-shadow: 0 14px 28px -14px rgba(14,159,122,0.28);
}

/* ---------- Magnetic buttons ---------- */
.magnetic { will-change: transform; }

/* ---------- Hero line-mask text reveal ---------- */
.reveal-line { display: block; overflow: hidden; }
.reveal-line-inner { display: inline-block; will-change: transform; }

/* ---------- Ambient cursor glow (hero sections) ---------- */
.ambient-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(14,159,122,0.16), transparent 70%);
  pointer-events: none;
  will-change: transform;
  filter: blur(20px);
  z-index: 0;
}

/* ---------- Sticky panel helper ---------- */
.sticky-panel { align-self: start; }

/* ---------- How-it-works pin storytelling ---------- */
.step-progress-line {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.step-progress-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: #0E9F7A;
  border-radius: 2px;
}

/* ---------- Animated counters ---------- */
.counter-num { font-variant-numeric: tabular-nums; }

/* ---------- Price swap flip ---------- */
.price { display: inline-block; will-change: transform, opacity; }

/* ---------- Step transition (demo booking flow) ---------- */
.step-panel { will-change: transform, opacity; }

/* ---------- Blob variety: slow drift + breathing (held still, see above) ---------- */
.blob-drift { animation: none; }
@keyframes blobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(24px,-14px) scale(1.07); }
  66% { transform: translate(-18px,10px) scale(0.95); }
}
.blob-breathe { animation: none; }
@keyframes blobBreathe {
  0%,100% { transform: scale(1); opacity:.85; }
  50% { transform: scale(1.14); opacity:1; }
}

/* ---------- Logo / badge marquee ---------- */
.marquee { overflow: hidden; position: relative; }
.marquee-track {
  display: inline-flex; align-items: center; gap: 0;
  width: max-content;
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span { white-space: nowrap; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Text gradient treatment (no longer animated) ---------- */
.shine-text {
  background: linear-gradient(90deg, #141416 0%, #0E9F7A 38%, #3EE8B8 50%, #0E9F7A 62%, #141416 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: none;
  background-position: 38% center;
}
@keyframes shineMove { 0% { background-position: 0% center; } 100% { background-position: 220% center; } }

/* ---------- Hero card position (no longer bobbing) ---------- */
.float-y { animation: none; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- CTA section gradient (no longer pulsing) ---------- */
.glow-pulse { animation: none; opacity: .85; }
@keyframes glowPulse { 0%,100% { opacity:.65; } 50% { opacity:1; } }

/* ---------- Decorative ring (no longer rotating) ---------- */
.rotate-slow { animation: none; }
@keyframes rotateSlow { to { transform: rotate(360deg); } }

/* ---------- Add-on toggle chip states ---------- */
.addon-tile { cursor:pointer; transition: border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.addon-tile:hover { transform: translateY(-3px); }
.addon-tile.on { border-color:#0E9F7A !important; box-shadow:0 0 0 1px rgba(14,159,122,0.4), 0 16px 36px -18px rgba(14,159,122,0.55); }
.plan-tile { cursor:pointer; transition: border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.plan-tile:hover { transform: translateY(-3px); }
.plan-tile.on { border-color:#0E9F7A !important; box-shadow:0 0 0 1px rgba(14,159,122,0.45), 0 16px 36px -18px rgba(14,159,122,0.6); }

/* ---------- Live-call transcript: each line reveals in, not pops in ---------- */
@keyframes transcriptLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.transcript-line-in { animation: transcriptLineIn .45s ease-out both; }

/* ---------- Reduced motion ----------
   Most decorative animation is already off by default (see above). What's
   left to guard here is motion.js's JS-driven scroll/hover effects, which
   this stylesheet can't reach — this covers the CSS-only transitions. */
@media (prefers-reduced-motion: reduce) {
  header.site-nav, header.site-nav.nav-hidden { transition: none !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .transcript-line-in { animation: none !important; }
  .hover-lift, .card-glow::before, #mobileMenu { transition: none !important; }
}

/* ---------- Ensure content stays visible if JS never runs at all ---------- */
noscript ~ * { opacity: 1 !important; }