/* ============================================================================
   background.css — The signature Dubai animated-monument background system
   ----------------------------------------------------------------------------
   A fixed, full-viewport layered stage behind ALL content. Monuments are SVG
   silhouettes rendered as luminous gold/green "ghosts" at low opacity, plus a
   drifting sand-particle field and a film-grain + vignette overlay.
   JS (assets/js/background.js) places the silhouettes and drives parallax.
   ========================================================================== */

/* The fixed stage sits behind content. */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
}

/* Radial mood lighting on the deep-green canvas (also the fallback if the photo
   is absent). */
.bg-stage .bg-glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(60% 50% at 75% 18%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(50% 45% at 18% 80%, rgba(30,122,87,.18), transparent 60%),
    linear-gradient(180deg, var(--green-900), var(--green-800) 45%, var(--green-900));
}

/* The golden Dubai photograph — feathered into the canvas (no hard photo edge),
   anchored toward the top so the skyline sits behind the hero, then dissolving
   into deep green further down. A slow Ken-Burns drift keeps it alive. */
.bg-stage .bg-scene {
  position: absolute; inset: 0;
  /* Transparent golden Dubai scene (its own soft oval edge blends already). */
  background: url("../img/bg/dubai-scene.webp") center 24% / cover no-repeat;
  opacity: .68;
  filter: saturate(1.05) contrast(1.02);
  /* Radial feather: fully visible around the upper-centre, melting to nothing
     at the edges so the rectangular photo never shows a seam. */
  -webkit-mask-image: radial-gradient(118% 92% at 50% 30%, #000 42%, rgba(0,0,0,.45) 68%, transparent 100%);
  mask-image: radial-gradient(118% 92% at 50% 30%, #000 42%, rgba(0,0,0,.45) 68%, transparent 100%);
  animation: scene-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes scene-drift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.12) translateY(-1.4%); }
}

/* Green veil + bottom scrim: brand cohesion + keeps cream/gold text legible.
   Lighter over the upper third (let the gold glow), deep green toward the base. */
.bg-stage .bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(95% 65% at 50% 20%, rgba(8,41,30,.05), rgba(8,41,30,.42) 60%, rgba(8,41,30,.72) 100%),
    linear-gradient(180deg, rgba(8,41,30,.18) 0%, rgba(12,59,46,.40) 42%, rgba(8,41,30,.86) 100%);
}

/* Per-section golden monument accents (Burj / camel / museum). They live INSIDE
   their section (so they scroll with the page), peeking from the left or right
   edge, feathered + blurred + low opacity so they read as luminous golden
   ghosts. They slide + fade in as the section enters view. Section content sits
   above them via the .container z-index rule below. */
.section > .container,
.section > .container--narrow { position: relative; z-index: 2; }

.side-accent {
  position: absolute; z-index: 0; pointer-events: none;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  filter: blur(.7px) drop-shadow(0 8px 28px rgba(201,162,75,.16));
  -webkit-mask-image: radial-gradient(76% 76% at 50% 50%, #000 50%, transparent 100%);
          mask-image: radial-gradient(76% 76% at 50% 50%, #000 50%, transparent 100%);
  opacity: 0;
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  will-change: opacity, transform;
}
.side-accent.left  { left: 0;  transform: translate(-42%, -50%); }
.side-accent.right { right: 0; transform: translate(42%, -50%); }
.side-accent.is-in        { opacity: var(--acc-op, .15); }
.side-accent.is-in.left   { transform: translate(-30%, -50%); }
.side-accent.is-in.right  { transform: translate(30%, -50%); }

/* No photo, no problem: a missing CSS background simply paints nothing over the
   green canvas — the site degrades gracefully. */

@media (prefers-reduced-motion: reduce) {
  .bg-stage .bg-scene { animation: none; transform: scale(1.05); }
  .side-accent { transition: opacity .3s; }
  .side-accent.is-in.left  { transform: translate(-30%, -50%); }
  .side-accent.is-in.right { transform: translate(30%, -50%); }
}

/* On smaller screens the side art crowds the text AND, since it's anchored to the
   section edge and pushed outward, it would widen the page (horizontal scroll).
   Remove it from layout entirely on mobile — not just opacity:0. */
@media (max-width: 760px) {
  .side-accent { display: none !important; }
}

/* Each parallax layer; JS sets data-depth (0.15 / 0.4 / 0.7). */
.bg-layer { position: absolute; inset: 0; }

/* A single monument silhouette. */
.monument {
  position: absolute;
  opacity: 0;                      /* fades up when its section enters */
  color: var(--gold-500);          /* currentColor drives the SVG fill */
  filter: blur(.4px) drop-shadow(0 0 24px rgba(201,162,75,.18));
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
}
.monument svg { width: 100%; height: 100%; display: block; }
.monument.is-in { opacity: var(--mon-opacity, .14); }  /* 8–18% target */

/* Gentle continuous float (very slow sine-like bob). */
.monument.float { animation: mon-float 14s ease-in-out infinite; }
.monument.float--slow { animation-duration: 22s; }
@keyframes mon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Drifting golden sand-particle field (canvas drawn by JS, styled here). */
.bg-particles { position: absolute; inset: 0; opacity: .5; }

/* Film grain + gold vignette overlay ties the whole canvas together. */
.bg-grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-vignette {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(8,41,30,.55) 100%);
}

/* Reduced motion: freeze floats; keep a tasteful static arrangement. */
@media (prefers-reduced-motion: reduce) {
  .monument.float, .monument.float--slow { animation: none; }
  .monument { opacity: var(--mon-opacity, .12); }  /* show static frame */
  .bg-particles { display: none; }
}