/* Ambient background
   A fixed layer behind the page. Each section has a "mood": a quiet arrangement of steel and ember light.
   When a section reaches the middle of the viewport, js/ambient.js sets it active and the layers crossfade.
   Only opacity animates, so it stays cheap on any device. */

.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* Base: brushed-steel tone at the top falling to forge black, so the page is never flat black */
  background:
    radial-gradient(120% 70% at 50% -10%, #1b1e23 0%, rgba(27,30,35,0) 60%),
    linear-gradient(180deg, #121417 0%, #0c0d0f 55%, #0a0a0b 100%);
}
.ambient > i {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 2.2s cubic-bezier(.4, 0, .2, 1);
}
.ambient > i.on { opacity: 1; }

/* Hero: warm forge glow behind the object, cool steel light from the top left */
.ambient .m-top {
  background:
    radial-gradient(55% 55% at 78% 40%, rgba(255,106,19,.12), transparent 70%),
    radial-gradient(50% 45% at 8% 6%, rgba(150,162,180,.12), transparent 70%);
}
/* Facts: light falls straight down from above, like a lamp over a bench */
.ambient .m-facts {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(160,170,186,.12), transparent 70%),
    radial-gradient(40% 40% at 92% 92%, rgba(255,106,19,.05), transparent 70%);
}
/* Services: steel side light from the left, a faint ember in the far corner */
.ambient .m-services {
  background:
    radial-gradient(55% 65% at 0% 35%, rgba(150,162,180,.13), transparent 70%),
    radial-gradient(45% 50% at 100% 100%, rgba(255,106,19,.07), transparent 70%),
    linear-gradient(160deg, rgba(26,30,36,.55), transparent 60%);
}
/* Industries: the side light swings to the right */
.ambient .m-industries {
  background:
    radial-gradient(55% 60% at 100% 25%, rgba(150,162,180,.12), transparent 70%),
    radial-gradient(40% 45% at 0% 100%, rgba(255,106,19,.06), transparent 70%);
}
/* Products: a centered showroom spotlight with a warm floor bounce */
.ambient .m-products {
  background:
    radial-gradient(45% 42% at 50% 42%, rgba(228,232,238,.09), transparent 72%),
    radial-gradient(70% 35% at 50% 100%, rgba(255,106,19,.07), transparent 70%);
}
/* Process: cooler engineering slate with a faint drafting grid */
.ambient .m-process {
  background:
    linear-gradient(rgba(170,182,200,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(170,182,200,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(60% 60% at 30% 45%, rgba(120,138,160,.10), transparent 70%),
    linear-gradient(180deg, #111419, #0c0e11);
  -webkit-mask-image: radial-gradient(85% 80% at 40% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(85% 80% at 40% 50%, #000 40%, transparent 100%);
}
/* About: low warm light rising from below, steel from the top right */
.ambient .m-about {
  background:
    radial-gradient(55% 50% at 18% 85%, rgba(255,106,19,.08), transparent 70%),
    radial-gradient(50% 50% at 88% 12%, rgba(150,162,180,.10), transparent 70%);
}
/* Contact: the forge is lit. The strongest ember of the page, still restrained */
.ambient .m-contact {
  background:
    radial-gradient(60% 55% at 86% 96%, rgba(255,106,19,.15), transparent 70%),
    radial-gradient(45% 40% at 8% 8%, rgba(150,162,180,.08), transparent 70%);
}

/* The ambient layer now carries the lighting, so the products band no longer needs its own opaque fill */
.products { background: none; }

@media (prefers-reduced-motion: reduce) {
  .ambient > i { transition: none; }
}