/* ============================================================
   DIA v6 — ambient system background
   ------------------------------------------------------------
   One reusable decorative background for LIGHT sections, in the
   same visual family as the hero (css/hero.css): a fine 68px
   technical grid plus a few soft signal curves, masked so they
   fade out well before they reach the content.

   Usage — put the base class plus one intensity on a section:

     <section class="section amb amb--soft">   ordinary light content
     <section class="section amb amb--medium"> showcase sections
     <section class="section amb amb--strong"> high impact only

   The hero keeps its own richer layer stack; amb--strong is the
   same language at hero-like intensity for future sections.

   Rules this file follows:
     - decorative only: pointer-events none, z-index below content
     - transform-only animation, very long durations
     - masked so nothing runs behind headlines or cards at full strength
     - quieter on mobile, motionless when the user asks for less motion
   ============================================================ */

.amb {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* intensity knobs — every variant only changes these */
  --amb-grid: 0.026;          /* alpha of the grid hairlines   */
  --amb-lines: 0.16;          /* opacity of the signal curves  */
  --amb-glow: 0;              /* opacity of the soft colour wash */
  --amb-grid-size: 68px;      /* same module as the hero grid  */
  --amb-drift: 140s;          /* grid travel                   */
  --amb-float: 90s;           /* curve travel                  */
  --amb-mask: radial-gradient(78% 88% at 50% 42%, transparent 18%, #000 82%);
}

/* ---------- 1. technical grid ---------- */
.amb::before {
  content: "";
  position: absolute;
  inset: -80px -6%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(16, 24, 32, var(--amb-grid)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 24, 32, var(--amb-grid)) 1px, transparent 1px);
  background-size: var(--amb-grid-size) var(--amb-grid-size);
  -webkit-mask-image: var(--amb-mask);
  mask-image: var(--amb-mask);
  animation: amb-grid var(--amb-drift) linear infinite;
  will-change: transform;
}

/* ---------- 2. signal curves + optional colour wash ---------- */
.amb::after {
  content: "";
  position: absolute;
  inset: -10% -12%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--amb-lines);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 300 C 220 300, 300 170, 520 170 S 900 96, 1220 96' stroke='%23155EEF' stroke-width='1.2'/%3E%3Cpath d='M-20 366 C 260 366, 360 256, 620 256 S 980 196, 1220 196' stroke='%2306B6D4' stroke-width='1' opacity='.75'/%3E%3Cpath d='M-20 150 C 200 150, 320 66, 560 66 S 940 26, 1220 26' stroke='%23155EEF' stroke-width='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 118% 100%;
  background-position: 0% 50%;
  -webkit-mask-image: var(--amb-mask);
  mask-image: var(--amb-mask);
  animation: amb-float var(--amb-float) ease-in-out infinite alternate;
  will-change: transform;
}

/* the colour wash rides along with the curves, off by default */
.amb--medium::after,
.amb--strong::after {
  background-image:
    radial-gradient(60% 70% at 78% 12%, rgba(21, 94, 239, var(--amb-glow)), rgba(21, 94, 239, 0) 70%),
    radial-gradient(50% 60% at 14% 8%, rgba(6, 182, 212, var(--amb-glow)), rgba(6, 182, 212, 0) 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 300 C 220 300, 300 170, 520 170 S 900 96, 1220 96' stroke='%23155EEF' stroke-width='1.2'/%3E%3Cpath d='M-20 366 C 260 366, 360 256, 620 256 S 980 196, 1220 196' stroke='%2306B6D4' stroke-width='1' opacity='.75'/%3E%3Cpath d='M-20 150 C 200 150, 320 66, 560 66 S 940 26, 1220 26' stroke='%23155EEF' stroke-width='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 118% 100%;
  background-position: 0 0, 0 0, 0% 50%;
}

/* ---------- intensities ---------- */
.amb--soft {
  --amb-grid: 0.022;
  --amb-lines: 0.11;
  --amb-float: 110s;
}
.amb--medium {
  --amb-grid: 0.032;
  --amb-lines: 0.18;
  --amb-glow: 0.09;
  --amb-mask: radial-gradient(74% 92% at 50% 46%, transparent 14%, #000 78%);
}
.amb--strong {
  --amb-grid: 0.05;
  --amb-lines: 0.36;
  --amb-glow: 0.16;
  --amb-drift: 90s;
  --amb-float: 70s;
  --amb-mask: radial-gradient(86% 96% at 52% 44%, transparent 6%, #000 74%);
}

/* fade the pattern out at the bottom edge so two stacked ambient
   sections never meet on a hard line */
.amb--fade-b {
  --amb-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 62%, transparent 100%);
}

@keyframes amb-grid {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(var(--amb-grid-size) * -1), calc(var(--amb-grid-size) * -1), 0); }
}
@keyframes amb-float {
  0%   { transform: translate3d(-1.4%, 0, 0) scale(1); }
  100% { transform: translate3d(1.4%, -1.2%, 0) scale(1.03); }
}

/* ---------- mobile: quieter, and no animation ---------- */
@media (max-width: 860px) {
  .amb {
    --amb-grid: 0.018;
    --amb-lines: 0.10;
    --amb-glow: 0.06;
    --amb-grid-size: 56px;
  }
  .amb--medium { --amb-grid: 0.024; --amb-lines: 0.16; }
  .amb--strong { --amb-grid: 0.032; --amb-lines: 0.24; }
  .amb::before,
  .amb::after { animation: none; will-change: auto; }
}

/* ---------- respect the user's motion setting ---------- */
@media (prefers-reduced-motion: reduce) {
  .amb::before,
  .amb::after { animation: none !important; will-change: auto; }
}

/* no JS: keep the pattern, drop the motion */
html.no-js .amb::before,
html.no-js .amb::after { animation: none; }