/* ==========================================================
   AHONIM — Hero Atmosphere System
   Goal: Warmth + Depth without tint overlay
   Scope: Hero band only
   ========================================================== */

/* ------------------------------------------
   Base hero band structure
------------------------------------------ */

.band-surface.hero{
  position: relative;
  overflow: hidden;
}

/* Default tokens (safe fallback) */
body.ahonim-card{
  --hero-depth: 0.06;
  --hero-atmo-a: rgba(0,0,0,0);
  --hero-atmo-b: rgba(0,0,0,0);
}

/* ------------------------------------------
   Hero atmosphere layer
------------------------------------------ */

.band-surface.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:

    /* Vertical depth */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,var(--hero-depth)) 100%
    ),

    /* Primary light source (top-left) */
    radial-gradient(
      160% 180% at 12% -10%,
      var(--hero-atmo-a) 0%,
      rgba(0,0,0,0) 62%
    ),

    /* Counter-balance softness (bottom-right) */
    radial-gradient(
      180% 200% at 105% 88%,
      var(--hero-atmo-b) 0%,
      rgba(0,0,0,0) 68%
    );

  opacity: 0.95;
}

/* Ensure hero content stays above atmosphere */
.band-surface.hero > *{
  position: relative;
  z-index: 1;
}


/* ==========================================================
   ELEMENT TUNING
   Emotional presence without recoloring UI
   ========================================================== */

/* ---------------- EARTH ---------------- */
body.theme--earth{
  --hero-depth: 0.095;
  --hero-atmo-a: rgba(212, 166, 79, 0.22);  /* mineral warmth */
  --hero-atmo-b: rgba(107, 127, 90, 0.06);  /* grounded calm */
}

/* ---------------- WATER ---------------- */
body.theme--water{
  --hero-depth: 0.085;
  --hero-atmo-a: rgba(90, 132, 155, 0.22);  /* cool lake light */
  --hero-atmo-b: rgba(140, 170, 190, 0.08);
}

/* ---------------- FIRE ---------------- */
body.theme--fire{
  --hero-depth: 0.105;
  --hero-atmo-a: rgba(212, 166, 79, 0.26);  /* ember warmth */
  --hero-atmo-b: rgba(180, 120, 70, 0.08);
}

/* ---------------- AIR ---------------- */
body.theme--air{
  --hero-depth: 0.075;
  --hero-atmo-a: rgba(190, 205, 215, 0.20); /* breathable lift */
  --hero-atmo-b: rgba(255, 255, 255, 0.16);
}

/* ==========================================================
   AHONIM — Hero Image Layer (forced)
   Put this at the VERY END of ahonim-themes.css
   ========================================================== */

/* Map element → image */
body.theme--earth{ --hero-image: url("/core/images/earth.png"); }
body.theme--water{ --hero-image: url("/core/images/water.png"); }
body.theme--fire { --hero-image: url("/core/images/fire.png"); }
body.theme--air  { --hero-image: url("/core/images/air.png"); }

/* Ensure the band can host a pseudo element */
body.ahonim-card .band-surface.hero{
  position: relative;
  overflow: hidden;
}

/* Force the hero image stack onto the band */
body.ahonim-card .band-surface.hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;

  /* Use background-image to avoid other rules overwriting background */
  background-image:
    linear-gradient(
      to bottom,
      rgba(247,248,245,0) 0%,
      rgba(247,248,245,0.35) 52%,
      rgba(247,248,245,0.92) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(247,248,245,0.42) 0%,
      rgba(247,248,245,0.42) 100%
    ),
    var(--hero-image) !important;

  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* Keep hero content above */
body.ahonim-card .band-surface.hero > *{
  position: relative;
  z-index: 1;
}