/* bg-split.css
   World continuity (SOLID COLOR + FIXED OVERLAY):
   - HERO: unchanged (bg-hero image + black base)
   - FOOTER: keeps its own visuals
   - From PHASE section onward (.section--mars-surface): solid brown base + fixed overlay pattern (layer.png)
   - FAQ/QNA: keeps its own background image BUT now ALSO gets the same fixed overlay pattern on top
   NOTE: This file should be loaded LAST.
*/

:root{
  /* HERO asset (unchanged) */
  --bg-hero:  url("../img/bg/mainbg.webp");

  /* Overlay pattern (NEW) */
  --bg-overlay-pattern: url("../img/bg/layer.webp");
  --bg-overlay-opacity: 0.18; /* tweak 0.10 ~ 0.25 */
  --bg-overlay-size: 980px auto; /* tweak pattern scale */

  /* Space control */
  --hero-min-h: min(980px, 92vh);

  /* ✅ Requested fixed color (NO gradients) */
  --world-solid: rgb(130,83,44);

  /* Root */
  --root-fallback: #000000;
  --hero-fallback: #000000;

  /* tiny overlap to kill 1px seam if needed */
  --seam-overlap: 3px;
}

.header{ background:#050507 !important; backdrop-filter:none !important; }

/* ---------------------------
   ROOT: always black
---------------------------- */
html, body{ background: var(--root-fallback) !important; }
body{ position: relative; }

/* ---------------------------
   DEFAULT: all sections are solid brown
   (hero/footer override below; faq gets its own image but keeps brown fallback)
---------------------------- */
.section{
  background-color: var(--world-solid) !important;
  background-image: none !important;
}

/* If any wrapper has its own bg elsewhere, kill it */
.mars-surface{
  background: transparent !important;
}

/* ---------------------------
   HERO (UNCHANGED)
---------------------------- */
.section--hero.bg-hero{
  position: relative;
  min-height: var(--hero-min-h);
  isolation: isolate;
  background: var(--hero-fallback) !important;
}

/* Hero artwork layer (1.webp) */
.section--hero.bg-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2; /* stars(1) < hero image(2) < UI(3) */
  pointer-events:none;

  background-color: transparent;
  background-image: var(--bg-hero);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;

  opacity: 1 !important;
}

.section--hero.bg-hero .section__inner{
  position: relative;
  z-index: 3;
}

/* ---------------------------
   Bridge base color (no overlay)
---------------------------- */
.section--seam.bg-seam{
  margin-top: calc(var(--seam-overlap) * -1);
  padding-top: var(--seam-overlap);

  background-color: var(--world-solid) !important;
  background-image: none !important;
}

/* ---------------------------
   WORLD (Phase -> before FAQ)
   - Solid brown base + FIXED overlay pattern
---------------------------- */
.section--mars-surface{
  position: relative;
  isolation: isolate;

  margin-top: calc(var(--seam-overlap) * -1);
  padding-top: var(--seam-overlap);

  background-color: var(--world-solid) !important;
  background-image: none !important; /* base only; overlay handled by ::before */
}

/* Fixed overlay layer (applies to WORLD + FAQ) */
.section--mars-surface::before,
#faq::after, #qna::after, .section--faq::after, .section--qna::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image: var(--bg-overlay-pattern);
  background-repeat: repeat;
  background-size: var(--bg-overlay-size);
  background-position: center top;

  /* Key: fixed to viewport */
  background-attachment: fixed;

  opacity: var(--bg-overlay-opacity);
}

/* For WORLD: overlay sits behind content */
.section--mars-surface::before{
  z-index: 0;
}

/* Ensure WORLD content stays above overlay */
.section--mars-surface > *{
  position: relative;
  z-index: 1;
}

@media (hover: none) and (pointer: coarse){
  .section--mars-surface::before,
  #faq::after, #qna::after, .section--faq::after, .section--qna::after{
    background-attachment: scroll !important;
    background-position: center var(--fake-fixed-y, 0px) !important;
    will-change: background-position;
  }

  .top-tap-zone{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: max(28px, env(safe-area-inset-top));
    z-index: 10050;
    background: transparent;
    border: 0;
    display: block;
  }
}
.top-tap-zone{ display:none; }