/* ============================================================
   HB Battle — Marketing Site V20 "MEGA" (loads after v3 elite)
   Site-wide, real, visible upgrades across every marketing page:
     1) Animated aurora background (same signature look as the
        app's AI screen, for brand consistency)
     2) A header that compacts and solidifies once you scroll
     3) A top reading-progress bar
     4) A floating mobile "Open the App" CTA bar
     5) A subtle cursor-follow glow on the hero (desktop only)
   ============================================================ */

/* ---------- 1. Aurora background, whole page ---------- */
body{
  background:
    radial-gradient(900px 560px at 10% -8%, rgba(233,192,107,.10), transparent 60%),
    radial-gradient(760px 520px at 96% 10%, rgba(34,193,126,.14), transparent 58%),
    radial-gradient(820px 620px at 46% 120%, rgba(34,193,126,.10), transparent 62%),
    var(--ink,#070d0a) !important;
  background-size:220% 220%,220% 220%,220% 220%,auto !important;
  animation:mega-aurora-drift 26s ease-in-out infinite !important;
}
@keyframes mega-aurora-drift{
  0%,100%{background-position:0% 0%,100% 0%,50% 100%}
  50%{background-position:16% 26%,82% 36%,42% 74%}
}
@media (prefers-reduced-motion:reduce){ body{ animation:none !important; } }

/* ---------- 2. Header: compacts + solidifies on scroll ---------- */
header{
  transition:padding .35s cubic-bezier(.16,1,.3,1),background .35s ease,box-shadow .35s ease,border-color .35s ease !important;
}
header.mega-scrolled{
  padding-top:8px !important; padding-bottom:8px !important;
  background:rgba(7,13,10,.88) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 34px -18px rgba(0,0,0,.6) !important;
}

/* ---------- 3. Reading progress bar ---------- */
.mega-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%; z-index:60;
  background:linear-gradient(90deg,var(--el-gold,#e9c06b),var(--el-emerald,#22c17e));
  box-shadow:0 0 10px rgba(233,192,107,.6);
  transition:width .1s linear;
}

/* ---------- 4. Floating mobile CTA bar ---------- */
.mega-cta-bar{
  position:fixed; left:50%; bottom:16px; transform:translate(-50%,120%);
  display:none; align-items:center; gap:12px;
  padding:10px 10px 10px 18px; border-radius:99px; z-index:55;
  background:rgba(10,16,13,.92); border:1px solid rgba(233,192,107,.3);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  max-width:calc(100% - 28px);
}
.mega-cta-bar.show{ transform:translate(-50%,0); }
.mega-cta-bar span{ color:#eef4f0; font-size:12.5px; font-weight:600; white-space:nowrap; }
.mega-cta-bar a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:linear-gradient(135deg,var(--el-gold,#e9c06b),var(--el-gold2,#c99a3f));
  color:#1a1204; font-weight:800; font-size:12.5px; padding:9px 16px; border-radius:99px;
  box-shadow:0 10px 22px -8px rgba(233,192,107,.55);
}
@media (min-width:900px){ .mega-cta-bar{ display:none !important; } }
@media (max-width:899px){ .mega-cta-bar{ display:flex; } }

/* ---------- 5. Hero cursor-follow glow (desktop only) ---------- */
.hero{ position:relative; overflow:hidden; }
.hero .mega-cursor-glow{
  position:absolute; width:420px; height:420px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(233,192,107,.14),transparent 68%);
  left:var(--mx,50%); top:var(--my,20%); transform:translate(-50%,-50%);
  transition:left .25s ease-out,top .25s ease-out; z-index:0;
}
@media (max-width:899px){ .hero .mega-cursor-glow{ display:none; } }

/* ---------- Small polish: smoother section fade already handled by hc-reveal ---------- */
::selection{ background:rgba(233,192,107,.35); color:#fff; }