/* Per-section background treatments: flat, low-contrast, on-brand (steel-blue ramp). Every layer is a ::before/::after
   behind the content; content never depends on them. Parallax (--bgy) is driven by js/scroll-motion.js only when
   motion is allowed, and the agents wash changes colour with the active agent (js/agents-stage.js). */

/* overflow: clip keeps decor inside its section without creating a scroll container (the agents mini-nav is sticky) */
.hero, .sec { overflow: clip; --bgy: 0px; }
.hero::before, .sec:not(.manifesto-sec)::before { content: ""; position: absolute; inset: -48px 0; pointer-events: none; transform: translate3d(0, var(--bgy), 0); }
.hero::before { z-index: -2; } /* the hero is its own stacking context (isolation), towers sit at -1 */

/* Dot grid: hero, solutions, partners */
.hero::before, .solutions::before, #doi-tac::before {
  background-image: radial-gradient(var(--line-2) 1px, transparent 1.3px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 15%, transparent 78%);
  opacity: 1;
}

/* Process: fine diagonal hairlines, fading toward the edges */
.process::before {
  background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* Stepped block corners (brand motif) as ::after: team top-right, results bottom-left, contact bottom-left */
#doi-ngu::after, .results::after, .contact::after { content: ""; position: absolute; pointer-events: none; opacity: 0.5; }
#doi-ngu::after {
  top: 0; right: 0; width: clamp(120px, 16vw, 240px); height: clamp(80px, 11vw, 160px);
  background:
    linear-gradient(var(--block-1), var(--block-1)) 100% 0 / 25% 100% no-repeat,
    linear-gradient(var(--block-1), var(--block-1)) 75% 0 / 25% 66% no-repeat,
    linear-gradient(var(--block-1), var(--block-1)) 50% 0 / 25% 40% no-repeat,
    linear-gradient(var(--block-1), var(--block-1)) 25% 0 / 25% 20% no-repeat;
}
.results::after, .contact::after {
  left: 0; bottom: 0; width: clamp(140px, 18vw, 280px); height: clamp(80px, 12vw, 180px);
  background:
    linear-gradient(var(--block-1), var(--block-1)) 0 100% / 20% 28% no-repeat,
    linear-gradient(var(--block-1), var(--block-1)) 20% 100% / 20% 50% no-repeat,
    linear-gradient(var(--block-1), var(--block-1)) 40% 100% / 20% 72% no-repeat,
    linear-gradient(var(--block-1), var(--block-1)) 60% 100% / 20% 100% no-repeat;
}
.contact::after { opacity: 0.6; }

/* Agents: a flat colour wash on both edges that follows the active agent (cause-effect, not decoration) */
@property --agent-tint { syntax: "<color>"; inherits: true; initial-value: rgba(30, 58, 138, 0); }
#agents { --agent-tint: rgba(30, 58, 138, 0.4); transition: --agent-tint 0.6s var(--ease); }
#agents[data-agent="0"] { --agent-tint: rgba(30, 58, 138, 0.5); }
#agents[data-agent="1"] { --agent-tint: rgba(79, 134, 240, 0.28); }
#agents[data-agent="2"] { --agent-tint: rgba(143, 184, 255, 0.18); }
#agents[data-agent="3"] { --agent-tint: rgba(47, 95, 196, 0.4); }
#agents[data-agent="4"] { --agent-tint: rgba(197, 204, 216, 0.14); }
#agents::before { background: linear-gradient(90deg, var(--agent-tint), transparent 26%, transparent 74%, var(--agent-tint)); transform: none; }

/* Narrow screens: the wash only edges the section so copy never sits on a saturated field */
@media (max-width: 900px) {
  #agents::before { background: linear-gradient(90deg, var(--agent-tint), transparent 10%, transparent 90%, var(--agent-tint)); opacity: 0.7; }
}