/**
 * Grok Imagine — surface-specific visual layer (v2)
 * Activated via body[data-lvl-surface] set by site-nav.js
 */
:root {
  --imagine-scrim: linear-gradient(180deg, rgba(6, 9, 18, 0.78) 0%, rgba(6, 9, 18, 0.92) 55%, rgba(6, 9, 18, 0.97) 100%);
}

/* Banner strip used under page titles */
.lvl-imagine-banner {
  display: block;
  width: 100%;
  min-height: 140px;
  max-height: 220px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  margin: 0 0 1.25rem;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.lvl-imagine-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(6, 9, 18, 0.15), rgba(6, 9, 18, 0.72));
  pointer-events: none;
}
.lvl-imagine-banner--market {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.65)),
    url("/assets/imagine/hero-market.jpg");
}
.lvl-imagine-banner--store {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.65)),
    url("/assets/imagine/hero-store.jpg");
}
.lvl-imagine-banner--merch {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.65)),
    url("/assets/imagine/hero-merch.jpg");
}
.lvl-imagine-banner--hub {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.15), rgba(6, 9, 18, 0.7)),
    url("/assets/imagine/hero-hub.jpg");
}
.lvl-imagine-banner--learn {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.7)),
    url("/assets/imagine/hero-learn.jpg");
}
.lvl-imagine-banner--music {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.25), rgba(6, 9, 18, 0.75)),
    url("/assets/imagine/hero-music.jpg");
}
.lvl-imagine-banner--trek {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.7)),
    url("/assets/imagine/hero-trek.jpg");
}
.lvl-imagine-banner--brain {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.72)),
    url("/assets/imagine/hero-brain.jpg");
}
.lvl-imagine-banner--trust {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.72)),
    url("/assets/imagine/hero-trust.jpg");
}
.lvl-imagine-banner--edge {
  background-image: linear-gradient(120deg, rgba(6, 9, 18, 0.25), rgba(6, 9, 18, 0.75)),
    url("/assets/imagine/hero-edge.jpg");
}

/* Path-aware full-page atmospheres */
body[data-lvl-surface="merch"],
body.merch-page {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-merch.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="hub"],
body[data-lvl-surface="marketplace"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-hub.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="learn"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-learn.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="music"],
body[data-lvl-surface="studio"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-music.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="brain"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-brain.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="trust"],
body[data-lvl-surface="status"],
body[data-lvl-surface="proof"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-trust.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="store"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-store.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="trek"],
body[data-lvl-surface="ar"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/hero-trek.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}
body[data-lvl-surface="about"],
body[data-lvl-surface="docs"],
body[data-lvl-surface="home"] {
  background-color: #060912 !important;
  background-image: var(--imagine-scrim), url("/assets/imagine/bg-mesh.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-lvl-surface] {
    background-attachment: scroll !important;
  }
}

/* Section band with soft divider art */
.band-soft,
.band,
section.band-soft {
  background-image:
    linear-gradient(180deg, rgba(6, 9, 18, 0.55), rgba(6, 9, 18, 0.85)),
    url("/assets/imagine/section-divider.jpg");
  background-size: cover;
  background-position: center;
}

/* Hub shell cards slightly glassier */
.hub .main,
.hub .content {
  position: relative;
  z-index: 1;
}
.hub .glass,
.hub .panel,
.hub .card,
body[data-lvl-surface] .card,
body[data-lvl-surface] .panel,
body[data-lvl-surface] .glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Merch hero art strip */
.merch-hero-art {
  width: 100%;
  min-height: 160px;
  border-radius: 16px;
  margin: 0 0 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(120deg, rgba(6, 9, 18, 0.2), rgba(6, 9, 18, 0.7)),
    url("/assets/imagine/hero-merch.jpg") center / cover no-repeat;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

/* Hub marketplace top art */
.hub-imagine-hero {
  width: 100%;
  min-height: 120px;
  border-radius: 14px;
  margin-bottom: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(120deg, rgba(6, 9, 18, 0.25), rgba(6, 9, 18, 0.75)),
    url("/assets/imagine/hero-hub.jpg") center / cover no-repeat;
}