/* Source: aeolus-design-system/src/components/Background.tsx + AuroraBackground.tsx */

/*
  Static markup contract:
  <div class="bg-night" aria-hidden="true">
    <div class="bg-aurora"></div><div class="bg-weave"></div>
    <div class="bg-vignette"></div><div class="bg-noise"></div>
    <div class="bg-sky"></div>
  </div>
  The root is the absolute background layer. Keep section content in a sibling
  above it, as SectionNight/Cream/Gold place content at z-index 2.
*/

/* The deck's cream weave is authored at 13px on a 1920px canvas. Preserve
   its exact five stops while scaling only the tile period at desktop display
   widths, so a fitted deck and the web surface have the same visual density. */
:root {
  --v11-sailcloth-cream-scalable: linear-gradient(90deg,
    rgba(255, 255, 255, 0.60) 0%,
    rgba(255, 255, 255, 0) 30.7692%,
    rgba(26, 25, 22, 0.06) 69.2308%,
    rgba(255, 255, 255, 0) 92.3077%,
    rgba(255, 255, 255, 0.60) 100%);
  --v11-light-weave-period: 13px;
}

@media (min-width: 1024px) {
  :root { --v11-light-weave-period: clamp(10px, 0.677083vw, 13px); }
}

.bg-night,
.bg-nightHero,
.bg-nightCool,
.bg-cream,
.bg-gold {
  --bg-base: var(--aeolus-night-950);
  --bg-aurora: var(--aeolus-aurora-dark);
  --bg-aurora-filter: var(--aeolus-aurora-blur);
  --bg-weave: var(--aeolus-sailcloth-dark-soft);
  --bg-weave-blend: overlay;
  --bg-vignette: var(--aeolus-vignette-dense);
  --bg-noise-opacity: 0.10;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  border-radius: inherit;
  background: var(--bg-base);
}

.bg-nightHero {
  /* hero uses the top-right rust arrangement — owner ruling 2026-08-25 */
  --bg-aurora: var(--aeolus-aurora-dark-hero);
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-vignette: var(--aeolus-vignette-hero);
  --bg-noise-opacity: 0.15;
}

.bg-nightCool {
  --bg-aurora: var(--aeolus-aurora-dark-cool);
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-vignette: var(--aeolus-vignette-tight);
  --bg-noise-opacity: 0.13;
}

.bg-cream {
  --bg-base: var(--aeolus-cream);
  --bg-aurora: var(--aeolus-aurora-cream);
  --bg-aurora-filter: var(--aeolus-aurora-blur-light);
  --bg-weave: var(--v11-sailcloth-cream-scalable);
  --bg-weave-size: var(--v11-light-weave-period) 100%;
  --bg-weave-blend: soft-light;
  --bg-vignette: none;
  --bg-noise-opacity: 0;
}

.bg-gold {
  --bg-base: var(--aeolus-gold-400);
  --bg-aurora: var(--aeolus-aurora-gold);
  --bg-aurora-filter: var(--aeolus-aurora-blur-gold);
  --bg-weave: var(--aeolus-sailcloth-gold);
  --bg-weave-blend: soft-light;
  --bg-vignette: none;
  --bg-noise-opacity: 0;
}

.bg-aurora {
  position: absolute;
  inset: -14%;
  background: var(--bg-aurora);
  filter: var(--bg-aurora-filter);
}

.bg-weave {
  position: absolute;
  inset: 0;
  background-image: var(--bg-weave);
  background-size: var(--bg-weave-size, auto);
  background-repeat: repeat;
  mix-blend-mode: var(--bg-weave-blend);
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: var(--bg-vignette);
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: var(--bg-noise-opacity);
  mix-blend-mode: overlay;
  background-image: var(--aeolus-noise-image);
}

.bg-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.bg-cream > .bg-vignette,
.bg-cream > .bg-noise,
.bg-gold > .bg-vignette,
.bg-gold > .bg-noise {
  display: none;
}

/* Optional sky host helpers used by constellation-setup.js. */
.bg-sky-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.bg-sky-host--mirrored {
  transform: scale(-1, 1);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 52%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 52%, #000 100%);
}

.bg-sky-host--sail {
  inset: auto;
  border-radius: 10px;
}