/*
Theme Name:   Brandforce 360
Description:  Child theme of Hello Elementor — provides the wave animation,
              custom cursor, smooth scroll and overlap-card scroll effect.
              All page content is edited through Elementor Pro.
Template:     hello-elementor
Version:      1.0.0
Author:       Brandforce 360
Text Domain:  brandforce360
*/

/* ── Google Fonts are enqueued via functions.php ─────────────────────── */

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: auto; }               /* Lenis owns smooth scroll */
body  {
  background: #000;
  color: #f0f0f0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;                                 /* custom cursor replaces it */
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
::selection { background: rgba(255,255,255,.12); color: #fff; }

/* ── Custom cursor ───────────────────────────────────────────────────────── */
#bf-cursor-dot {
  position: fixed; width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .15s, height .15s;
  mix-blend-mode: difference;
}
#bf-cursor-ring {
  position: fixed; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s;
}

/* ── Display font helper (used by Elementor heading widgets) ─────────────── */
.font-display,
.elementor-widget-heading .elementor-heading-title.display-font {
  font-family: 'Bebas Neue', sans-serif !important;
}

/* ── Glassmorphism (for navbar on scroll, applied via JS) ────────────────── */
.bf-header-scrolled {
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ── Gradient text utility ───────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg,#fff 0%,rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-stroke {
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ── Overlap / card-stack scroll panels ──────────────────────────────────── */
/*
   Add CSS class  overlap-panel  to every Elementor section EXCEPT the hero.
   (Advanced tab → CSS Classes field in Elementor editor)
*/
.overlap-panel {
  position: relative;
  border-radius: 26px 26px 0 0 !important;
  margin-top: -26px;
  overflow: hidden;
  will-change: transform;
}

/* ── Hero wave canvas ───────────────────────────────────────────────────── */
/*
   Add CSS class  hero-section  to the first (Hero) Elementor section.
   The wave JS automatically injects the canvas inside it.
*/
.hero-section {
  position: relative;
  overflow: hidden;
}
.hero-section > .elementor-container {
  position: relative;
  z-index: 2;
}

/* ── Hero scroll cue keyframe ────────────────────────────────────────────── */
@keyframes fadeDown {
  0%,100% { opacity: .2; transform: translateY(-3px); }
  50%      { opacity: .7; transform: translateY(3px);  }
}

/* ── Remove Hello Elementor default body padding ─────────────────────────── */
body.elementor-page { padding-top: 0 !important; }