/* ============================================================
   Big Helpers — Motion, Parallax & 3D Effects
   Version: 2026-07-11
   Dependency-free CSS only. Pairs with bh-motion.js
   ============================================================ */

/* ── Ensure trust-strip is visible (override bh-refresh.css) ── */
.bh-home .trust-strip { display: block !important; }

/* ── Scroll Progress Bar ── */
.bh-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #0B63CE 0%, #F5B301 50%, #0a2540 100%);
  z-index: 9999;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ── Scroll Reveal Animations ───────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1),
              transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px) scale(.97);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1),
              transform .55s cubic-bezier(.2,.7,.2,1);
}
[data-stagger].in-view > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-stagger].in-view > *:nth-child(1) { transition-delay: 60ms; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 140ms; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 220ms; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 300ms; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 380ms; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 460ms; }
[data-stagger].in-view > *:nth-child(7) { transition-delay: 540ms; }
[data-stagger].in-view > *:nth-child(8) { transition-delay: 620ms; }

/* ── 3D Card Tilt ───────────────────────────────────────── */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.2,.7,.2,1),
              box-shadow .18s ease;
  will-change: transform;
}
.tilt-3d .saas-shot,
.tilt-3d .saas-body {
  transform: translateZ(30px);
}
.tilt-3d .saas-body {
  transform: translateZ(20px);
}
.tilt-3d > .ic,
.tilt-3d > .num,
.tilt-3d > h2,
.tilt-3d > h3 {
  transform: translateZ(18px);
}
.tilt-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,.18) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 5;
}
.tilt-3d:hover::after {
  opacity: 1;
}

/* ── SaaS Card Hover Lift ───────────────────────────────── */
.saas-card {
  transition: transform .28s cubic-bezier(.2,.7,.2,1),
              box-shadow .28s ease;
}
.saas-card:hover {
  box-shadow: 0 20px 50px rgba(10,37,64,.15),
              0 6px 16px rgba(10,37,64,.08);
}
.svc-card:hover,
.ind-card:hover,
.bh-niche-card:hover,
.step:hover,
.box:hover {
  box-shadow: 0 18px 44px rgba(10,37,64,.13), 0 5px 14px rgba(10,37,64,.07);
}

/* ── Count-Up ───────────────────────────────────────────── */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ── Float Animation ────────────────────────────────────── */
@keyframes bh-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bh-float {
  animation: bh-float 4s ease-in-out infinite;
}
.bh-float-slow {
  animation: bh-float 7s ease-in-out infinite;
}

/* ── Gradient Shift ─────────────────────────────────────── */
@keyframes bh-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.bh-gradient-animate {
  background-size: 200% 200%;
  animation: bh-gradient-shift 8s ease infinite;
}

/* ── Hero Entrance ──────────────────────────────────────── */
@keyframes bh-hero-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1,
.hero .hero-lede,
.hero .hero-cta,
.hero .hero-trust {
  opacity: 0;
  animation: bh-hero-fade-up .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero h1 { animation-delay: .15s; }
.hero .hero-lede { animation-delay: .35s; }
.hero .hero-cta { animation-delay: .55s; }
.hero .hero-trust { animation-delay: .75s; }

/* ── Magnetic Button ────────────────────────────────────── */
.magnetic-btn {
  transition: transform .15s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* ── Parallax ───────────────────────────────────────────── */
[data-parallax] {
  will-change: transform;
}

/* ── 6-Card Responsive Grid ─────────────────────────────── */
.saas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Compact product proof used across marketing pages ── */
.bh-product-proof { padding: 64px 24px; background: linear-gradient(180deg,#f8fbff,#fff); border-top: 1px solid #e2e8f0; }
.bh-product-proof-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.bh-product-proof h2 { margin: 0 0 10px; color: #0a2540; font: 800 32px/1.15 Inter,system-ui,sans-serif; }
.bh-product-proof > .bh-product-proof-inner > p { max-width: 720px; margin: 0 auto 26px; color: #475569; }
.bh-product-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.bh-product-links a { display: block; padding: 18px; color: #0a2540; background: #fff; border: 1px solid #dbe7f6; border-radius: 16px; text-decoration: none; box-shadow: 0 8px 24px rgba(10,37,64,.06); }
.bh-product-links a:hover { border-color: #0B63CE; color: #0B63CE; }
.bh-product-links strong { display: block; font-size: 16px; }
.bh-product-links span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; }
@media (max-width: 760px) { .bh-product-links { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .saas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .saas-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bh-scroll-progress { display: none; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bh-float, .bh-float-slow, .bh-gradient-animate {
    animation: none !important;
  }
  .hero h1, .hero .hero-lede, .hero .hero-cta, .hero .hero-trust {
    opacity: 1 !important;
    animation: none !important;
  }
  .tilt-3d {
    transition: none !important;
  }
  .tilt-3d::after { display: none; }
  .magnetic-btn { transition: none !important; }
  [data-parallax] { transform: none !important; }
}