/* ===========================================================
   Helium Locator — hl-polish.css (Home-first polish layer)
   Loads AFTER /assets/hl.css
   Goal: add “alive” lighting + card sheen + optional hero bg image
   without rewriting HTML or breaking other pages.
   Inspired by CO2’s polish approach. 
   =========================================================== */

/* Optional: if you upload a hero background image later,
   set this variable to enable it (no other edits needed).
   Example path:
   /assets/helium/img/home/hero-bg.png
*/
:root{
  /* Leave unset until you actually upload an image */
  /* --hl-hero-bg: url('/assets/helium/img/home/hero-bg.png'); */

  /* subtle card border + glows (uses your existing Helium tokens too) */
  --hl-polish-card-border: rgba(255,255,255,.10);
  --hl-polish-glow-a: rgba(106,209,255,.10);  /* matches --accent */
  --hl-polish-glow-b: rgba(55,224,194,.08);   /* matches --accent-2 */
}

/* ==========================================
   Global vibe: add “lighting” to the canvas
   ========================================== */

/* WP pages that use body.hl-page */
body.hl-page{
  background:
    radial-gradient(900px 420px at 12% 8%, var(--hl-polish-glow-b), transparent 60%),
    radial-gradient(900px 520px at 92% 10%, var(--hl-polish-glow-a), transparent 58%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%) !important;
}

/* If the homepage isn’t using body.hl-page, still get the vibe */
.hl-fullbleed{
  background:
    radial-gradient(900px 420px at 12% 8%, var(--hl-polish-glow-b), transparent 60%),
    radial-gradient(900px 520px at 92% 10%, var(--hl-polish-glow-a), transparent 58%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%);
}

/* ==========================================
   Homepage hero panel (no HTML rewrite)
   ========================================== */
.hl-home .hl-wrap{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  /* gradient overlay + optional image layer */
  background:
    linear-gradient(180deg, rgba(7,10,18,.62), rgba(7,10,18,.82)),
    var(--hl-hero-bg, none);
  background-position: center;
  background-size: cover;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* a little extra “life” without screaming neon */
.hl-home .hl-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 18% 0%, rgba(106,209,255,.14), transparent 60%),
    radial-gradient(900px 280px at 82% 18%, rgba(55,224,194,.12), transparent 60%),
    radial-gradient(900px 320px at 50% 120%, rgba(66,255,120,.06), transparent 55%);
  opacity:.95;
}

/* keep hero content above the overlay */
.hl-home .hl-wrap > *{ position: relative; }

/* ==========================================
   Cards: add glow overlay + nicer hover
   (keeps your existing hl.css look, just upgrades feel)
   ========================================== */
.hl-card{
  position: relative;
  overflow: hidden;
  border-color: var(--hl-polish-card-border);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
}

/* Soft glow on top of the existing card background */
.hl-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(106,209,255,.12), transparent 60%),
    radial-gradient(900px 280px at 80% 20%, rgba(55,224,194,.10), transparent 60%);
  opacity:.9;
}

/* keep card content above glow */
.hl-card > *{ position: relative; }

@media (hover:hover){
  .hl-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.16);
    box-shadow:
      0 18px 46px rgba(0,0,0,.46),
      0 0 28px rgba(106,209,255,.10);
  }
}
@media (prefers-reduced-motion: no-preference){
  .hl-card{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
}

/* ==========================================
   Wrap-bg sections: auto “mesh” finish (guides block etc)
   ========================================== */
.hl-wrap-bg{
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(800px 240px at 15% 10%, rgba(55,224,194,.14), transparent 60%),
    radial-gradient(700px 220px at 80% 15%, rgba(106,209,255,.12), transparent 62%),
    radial-gradient(900px 300px at 50% 120%, rgba(66,255,120,.07), transparent 55%),
    linear-gradient(180deg, rgba(9,16,24,.94), rgba(9,16,24,.86));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ==========================================
   Buttons: slightly richer hover for primary
   ========================================== */
.hl-btn{ text-decoration:none !important; }

.hl-btn.primary{
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
@media (hover:hover){
  .hl-btn.primary:hover{
    transform: translateY(-1px);
    box-shadow:
      0 14px 34px rgba(0,0,0,.50),
      0 0 0 1px rgba(106,209,255,.28),
      0 0 26px rgba(106,209,255,.20),
      0 0 18px rgba(55,224,194,.10);
  }
}
@media (prefers-reduced-motion: no-preference){
  .hl-btn.primary{ transition: box-shadow .18s ease, transform .18s ease; }
}