/* assets/css/custom.css
   Home background + glass panel + footer image strip
   Single source of truth (paste this whole file)
*/

/* ---------- Global sanity ---------- */
html, body { height: 100%; }
body { margin: 0; }

/* If you previously experimented with a body overlay, disable it */
body::before { display: none !important; }

/* ---------- HOME: full-bleed stage (background lives here) ---------- */
/* IMPORTANT: This assumes your home layout wraps content like:
   <div class="home-stage">
     <div class="home-glass-wrap"> ... </div>
     <div class="home-footer-img"></div>
   </div>
*/
.home-stage{
  position: relative;
  isolation: isolate;

  /* full-bleed */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;

  /* ONE continuous image */
  background-image: url("/assets/img/home-bg.jpg");
  background-repeat: no-repeat;

  /* key: image scrolls with page */
  background-attachment: scroll;

  /* show the top at the top */
  background-position: center top;

  /* crucial: allow the image to be taller than viewport */
  background-size: 100% auto;

  /* give enough scroll space to reveal the bottom artwork */
  min-height: 900vh;  /* adjust later */
}


/* Optional: VERY subtle readability tint.
   Set to transparent if you want the background EXACTLY as the file. */
.home-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Keep this near-transparent to avoid changing the image appearance */
  background: rgba(0,0,0,0.05);
}

/* Everything inside stage sits above the background + tint */
.home-stage > *{
  position: relative;
  z-index: 1;
}

/* ---------- Glass panel wrapper (centered) ---------- */
.home-glass-wrap{
  width: min(1100px, calc(100% - 48px));
  margin: 48px auto 0;
  padding: 22px;
  border-radius: 34px;

  /* Glass look */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);

  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  position: relative;
  z-index: 2;

  /* Let the footer "cut" into it */
  margin-bottom: -70px;
}

/* Optional inner highlight */
.home-glass-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.14), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 85%, rgba(80,255,210,0.08), rgba(255,255,255,0) 60%);
}

.home-glass-wrap > *{
  position: relative;
  z-index: 1;
}

.home-stage{ min-height: 100vh; overflow-y: visible; }
.home-footer-img{ z-index: 50; }

/* ---------- Make sure theme hero overlays never w*

/* ===== DEBUG: FORCE footer strip to be visible ===== */