/* ============================================================================
   background.css — The signature "Delta to the World" animated background
   ----------------------------------------------------------------------------
   A fixed, full-viewport layered stage behind ALL content:

     .bg-glow      radial mood lighting on the majestic-blue canvas
     .bg-scene     a golden Bengal-delta panorama (SVG mask -> gold gradient)
     .bg-waves     two slow ocean currents drifting across the base
     .bg-veil      blue veil + scrim that keeps frost/gold text legible
     .bg-particles drifting golden particle field (canvas, drawn by JS)
     .side-accent  per-section golden silhouettes that scroll with the page
     .bg-grain / .bg-vignette   film grain + vignette that tie it together

   All art is authored SVG used as a CSS MASK, so a single gold gradient tints
   every silhouette — no photography required, and nothing to go stale.
   JS (assets/js/background.js) places the accents and drives the particles.
   ========================================================================== */

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

/* ---- Liquid silk ------------------------------------------------------
   The base is not a flat gradient: it is four coloured blooms drifting slowly
   past each other on different periods, so the indigo never sits still. The
   periods are deliberately coprime (37/53/71/89s) — they never resync, so the
   canvas never visibly repeats. Pure transform/opacity on gradients: no canvas,
   no JS, no cost.
   This is the single move that makes the page feel alive rather than printed. */
.bg-stage .bg-glow {
  position: absolute; inset: -10%;
  background: linear-gradient(180deg, var(--indigo-900), var(--indigo-950) 46%, var(--indigo-950));
}
.bg-stage .bg-glow::before,
.bg-stage .bg-glow::after {
  content: ""; position: absolute; inset: -20%;
  will-change: transform;
}
/* Gold bloom drifting top-right + a royal bloom crossing it. */
.bg-stage .bg-glow::before {
  background:
    radial-gradient(38% 32% at 74% 16%, rgba(201,162,75,.16), transparent 64%),
    radial-gradient(34% 30% at 30% 62%, rgba(30,79,216,.16), transparent 66%);
  animation: silk-a 37s ease-in-out infinite alternate;
}
/* Ocean current low-left + a soft indigo lift through the middle. */
.bg-stage .bg-glow::after {
  background:
    radial-gradient(40% 34% at 16% 80%, rgba(18,121,196,.20), transparent 64%),
    radial-gradient(30% 26% at 62% 46%, rgba(20,31,85,.5), transparent 70%);
  animation: silk-b 53s ease-in-out infinite alternate;
}
@keyframes silk-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.03); }
}
@keyframes silk-b {
  0%   { transform: translate3d(0,0,0) scale(1.05); }
  50%  { transform: translate3d(-4%, -3%, 0) scale(1); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.09); }
}

/* ---- The woven ground (replaces the starfield) -----------------------
   Over Midnight Navy, a very faint Bengali cloth: a Jamdani buti lattice as the
   weave, a larger lotus floral drifting through it as the "rice-grain" watermark,
   and — on its own layer — a light terracotta floral bloom. Everything is kept
   FAR under 20% (a radial mask fades it out toward the edges), so it reads as
   texture in the fabric, never as busy wallpaper. This is what makes the dark
   chapters look woven and expensive instead of flat. */
.bg-stage .bg-weave {
  position: absolute; inset: 0; pointer-events: none;
  /* Larger, sparser motifs at a lower whisper: the couture rule — when the
     engravings are the jewellery, the cloth must never compete. */
  background:
    url("../img/patterns/jamdani-gold.svg") 0 0 / 210px repeat,
    url("../img/patterns/lotus-gold.svg") 80px 60px / 560px repeat;
  opacity: .08;
  /* the cloth breathes — a 90s candlelight swell, never a flicker */
  animation: weave-breathe 90s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 26%, #000 34%, rgba(0,0,0,.45) 70%, transparent 100%);
          mask-image: radial-gradient(125% 105% at 50% 26%, #000 34%, rgba(0,0,0,.45) 70%, transparent 100%);
}
/* A light terracotta floral, the fired-clay warmth of a temple panel, pooled low
   and even fainter — the rare spark the brand rule reserves for terracotta. */
.bg-stage .bg-weave::after {
  content: ""; position: absolute; inset: 0;
  background: var(--clay-600);
  -webkit-mask: url("../img/patterns/kantha-gold.svg") center 30% / 340px repeat;
          mask: url("../img/patterns/kantha-gold.svg") center 30% / 340px repeat;
  opacity: .05;
}

/* The golden delta panorama — a container ship, gantry cranes, a Bengali sampan
   under sail and date/coconut palms along the waterline. The SVG is a MASK, so
   the gold gradient beneath shows through the shapes. Anchored to the bottom so
   the horizon sits under the hero; a slow drift keeps it alive. */
.bg-stage .bg-scene {
  position: absolute;
  left: -4%; right: -4%; bottom: 0;
  height: 72%;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 45%, var(--gold-700));
  -webkit-mask: url("../img/bg/delta-scene.svg") center bottom / cover no-repeat;
          mask: url("../img/bg/delta-scene.svg") center bottom / cover no-repeat;
  opacity: .17;
  filter: blur(.3px);
  animation: scene-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes scene-drift {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.2%); }
}

/* ---- The river --------------------------------------------------------
   Two ocean currents drifting past each other along the base, plus a band of
   gold CAUSTICS on the waterline — the light a river actually throws. The
   caustics are a repeating-linear-gradient sheared and slid sideways forever;
   because the pattern repeats on exactly its own width, the loop is seamless.
   A delta site whose water doesn't move is a poster of a delta. */
.bg-stage .bg-waves {
  position: absolute;
  left: -50%; right: -50%; bottom: -2%;
  height: 46%;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(52,163,224,.16), transparent 70%),
    radial-gradient(60% 100% at 70% 100%, rgba(30,79,216,.14), transparent 70%);
  animation: current-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
.bg-stage .bg-waves::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 100% at 45% 100%, rgba(169,207,234,.10), transparent 72%);
  animation: current-drift 52s ease-in-out infinite alternate-reverse;
  will-change: transform;
}
/* Caustics: fine gold streaks skimming the water. */
.bg-stage .bg-waves::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 38px,
    rgba(201,162,75,.16) 38px 40px,
    transparent 40px 74px,
    rgba(169,207,234,.10) 74px 75px,
    transparent 75px 120px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 60%, transparent);
  opacity: .55;
  animation: caustics 26s linear infinite;
  will-change: transform;
}
@keyframes current-drift {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}
/* Exactly one pattern period (120px) — so the restart is invisible. */
@keyframes caustics {
  from { transform: translateX(0); }
  to   { transform: translateX(120px); }
}

/* Blue veil + bottom scrim: brand cohesion + keeps frost/gold text legible.
   Lighter over the upper third (let the gold glow), deep navy toward the base. */
.bg-stage .bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(95% 65% at 50% 18%, rgba(2,7,26,.04), rgba(2,7,26,.38) 62%, rgba(2,7,26,.66) 100%),
    linear-gradient(180deg, rgba(4,16,49,.14) 0%, rgba(7,28,77,.36) 44%, rgba(2,7,26,.82) 100%);
}

/* Per-section golden silhouette accents (tiger / sampan / lily / ship / …).
   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 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: linear-gradient(160deg, var(--gold-300), var(--gold-500) 55%, var(--gold-700));
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  filter: blur(.6px) drop-shadow(0 8px 28px rgba(201,162,75,.16));
  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(-26%, -50%); }
.side-accent.is-in.right  { transform: translate(26%, -50%); }
/* mirrored variant — for symmetric pairs (the twin shaplas at trust) */
.side-accent.flip.left        { transform: translate(-42%, -50%) scaleX(-1); }
.side-accent.flip.right       { transform: translate(42%, -50%) scaleX(-1); }
.side-accent.flip.is-in.left  { transform: translate(-26%, -50%) scaleX(-1); }
.side-accent.flip.is-in.right { transform: translate(26%, -50%) scaleX(-1); }
/* ground-anchored variant — the artwork stands on the section floor
   (no vertical centering; it rises into place as it enters view) */
.side-accent.ground.left         { transform: translate(-30%, 4%); }
.side-accent.ground.right        { transform: translate(30%, 4%); }
.side-accent.ground.is-in.left   { transform: translate(-14%, 0); }
.side-accent.ground.is-in.right  { transform: translate(14%, 0); }

/* A missing SVG simply masks to nothing — the site degrades gracefully to the
   glow canvas alone. */

@keyframes weave-breathe {
  0%, 100% { opacity: .07; }
  50%      { opacity: .095; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-stage .bg-weave { animation: none; }
  .bg-stage .bg-scene { animation: none; transform: scale(1.03); }
  .bg-stage .bg-waves,
  .bg-stage .bg-waves::before,
  .bg-stage .bg-waves::after,
  .bg-stage .bg-glow::before,
  .bg-stage .bg-glow::after { animation: none; }
  .side-accent { transition: opacity .3s; }
  .side-accent.is-in.left  { transform: translate(-26%, -50%); }
  .side-accent.is-in.right { transform: translate(26%, -50%); }
  .side-accent.flip.is-in.left  { transform: translate(-26%, -50%) scaleX(-1); }
  .side-accent.flip.is-in.right { transform: translate(26%, -50%) scaleX(-1); }
}

/* 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; }
}

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

/* Film grain + 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 54%, rgba(2,7,26,.62) 100%);
}

/* Reduced motion: no particles, static scene. */
@media (prefers-reduced-motion: reduce) {
  .bg-particles { display: none; }
}