/* ════════════════════════════════════════════════════════════
   AL MILLENNIUM — app.css
   Shared mood layers + cross-area helpers, loaded AFTER style.css
   on every page. Keeps style.css (the design-system source of
   truth) pristine. See DESIGN_SYSTEM.md §5.
   ════════════════════════════════════════════════════════════ */

/* ── Mandatory ambient color washes on every page ─────────── */
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(147,115,65,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(60,30,20,0.18), transparent 70%),
    radial-gradient(ellipse 70% 50% at 0% 70%, rgba(40,30,50,0.12), transparent 70%),
    var(--bg);
  min-height: 100vh;
}

/* ── Mandatory film-grain overlay (<div class="grain"></div>) ─ */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 300;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Optional per-page cinematic backdrop ─────────────────────
   Set in Studio → Appearance → Backgrounds; emitted by <x-page-bg>.
   Sits beneath all content (z-index:-1) and beneath the mandatory grain
   (z-index:300), above the body ambient wash. Renders only when the owner
   uploads an image, so the default look is unchanged. The image is heavily
   scrimmed + graded (DESIGN_SYSTEM §6.2) so gold text stays readable, with a
   faint gold top-glow echoing the brand ambience and a fade down to --bg. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(147,115,65,0.12), transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,0.74) 0%, rgba(10,10,12,0.80) 55%, var(--bg) 100%),
    var(--page-bg-img);
  background-size: cover, cover, cover;
  background-position: center top, center, center;
  background-repeat: no-repeat;
  filter: saturate(0.9) brightness(0.92) contrast(1.02);
  opacity: 0;
  animation: page-bg-fade 1.4s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}
@keyframes page-bg-fade { to { opacity: 1; } }

/* ── Homeland-coloured mood (<x-ambient :accent>) ─────────── */
/* A fixed accent wash a detail page can take on. Above the base body
   gradient, below content; the heroes carry the stronger tint. */
.alm-ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 46% at 50% -6%, color-mix(in srgb, var(--at, var(--gold-light)) 11%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 50% at 12% 92%, color-mix(in srgb, var(--at, var(--gold-light)) 7%, transparent), transparent 64%);
}

/* Respect reduced motion (DESIGN_SYSTEM §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .page-bg { opacity: 1; }
}