.ambient-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* fine grain -- tiled SVG turbulence, very low opacity, so the charcoal
   reads as a material rather than a flat CSS fill */
.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.ambient-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ambient-lines line,
.ambient-lines path,
.ambient-lines rect,
.ambient-lines polyline {
  stroke-dasharray: var(--dash, 400);
  stroke-dashoffset: var(--dash, 400);
  transition: stroke-dashoffset 1.4s var(--ease-reveal);
}

.ambient-lines.is-drawn line,
.ambient-lines.is-drawn path,
.ambient-lines.is-drawn rect,
.ambient-lines.is-drawn polyline {
  stroke-dashoffset: 0;
}

.ambient-lines--drift {
  animation: ambientDrift 26s ease-in-out infinite;
}

@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  /* the icon field stays visible (static) under reduced motion -- only the
     animated canvas/grain/line layers are hidden entirely */
  .ambient-canvas,
  .ambient-grain,
  .ambient-lines { display: none; }
}

/* ---------- drifting equipment-icon field ---------- */

.ambient-icons {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ambient-icon {
  position: absolute;
  pointer-events: none;
  transition: transform 120ms linear;
}

.ambient-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: var(--sage);
  animation-name: iconDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ambient-icons.is-offscreen .ambient-icon__svg {
  animation-play-state: paused;
}

@keyframes iconDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--drift-x, 10px), var(--drift-y, -8px)) rotate(var(--drift-rot, 6deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-icon__svg { animation: none; }
}

/* content sits above the ambient layer */
.brush-reveal__inner,
.process__inner,
.gallery__inner {
  position: relative;
  z-index: 1;
}