:root {
  --ambient-zinc: #71717a;
  --ambient-zinc-dark: #3f3f46;
  --ambient-emerald: #34d399;
  --ambient-prop-opacity: .48;
  --ambient-prop-opacity-muted: .30;
}

html, body { max-width: 100%; overflow-x: clip; }

.ambient-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ambient-surface > :not(.ambient-layer) {
  position: relative;
  z-index: 1;
}

.ambient-surface::before,
.ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-surface::before {
  content: "";
  z-index: 0;
}

.ambient-surface--dark::before {
  background: url("/assets/grain.svg") repeat;
  opacity: .72;
  mix-blend-mode: soft-light;
}

.ambient-surface--light::before {
  background-image:
    linear-gradient(rgba(24, 24, 27, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 27, .18) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000);
}

.ambient-layer {
  z-index: 0;
  overflow: hidden;
}

.ambient-prop {
  display: none;
  position: absolute;
  width: var(--prop-size, 260px);
  height: auto;
  opacity: var(--prop-opacity, var(--ambient-prop-opacity));
  pointer-events: none;
  user-select: none;
}

.ambient-prop--muted { --prop-opacity: var(--ambient-prop-opacity-muted); }

.ambient-home-hero .ambient-prop--plc { --prop-size: 430px; top: 8%; right: -6%; transform: rotate(-4deg); }
.ambient-home-hero .ambient-prop--connector { --prop-size: 300px; top: 27%; left: -7%; transform: rotate(10deg); }
.ambient-solutions .ambient-prop--terminal { --prop-size: 360px; left: -7%; top: 19%; transform: rotate(-4deg); }
.ambient-solutions .ambient-prop--gland { --prop-size: 240px; right: -4%; bottom: 12%; transform: rotate(9deg); }
.ambient-diagnostic .ambient-prop--gauge { --prop-size: 410px; right: -7%; bottom: -12%; transform: rotate(4deg); }
.ambient-diagnostic .ambient-prop--selector { --prop-size: 210px; left: -3%; top: 17%; transform: rotate(-8deg); }
.ambient-insights .ambient-prop--blueprint { --prop-size: 410px; right: -7%; bottom: 0; transform: rotate(-6deg); }
.ambient-insights .ambient-prop--connector { --prop-size: 180px; left: -2%; top: 20%; transform: rotate(8deg); }
.ambient-pilot .ambient-prop--terminal-left { --prop-size: 190px; left: 2%; top: 36%; }
.ambient-pilot .ambient-prop--terminal-center { --prop-size: 190px; left: 50%; top: 36%; transform: translateX(-50%); }
.ambient-pilot .ambient-prop--terminal-right { --prop-size: 190px; right: 2%; top: 36%; }
.ambient-faq .ambient-prop--fastener-one { --prop-size: 110px; left: 2%; top: 17%; }
.ambient-faq .ambient-prop--fastener-two { --prop-size: 92px; right: 3%; bottom: 12%; transform: rotate(30deg); }
.ambient-booking .ambient-prop--dial { --prop-size: 620px; right: -8%; top: 50%; transform: translateY(-50%); }
.ambient-trust-hero .ambient-prop--cabinet { --prop-size: 500px; top: 6%; right: -3%; transform: rotate(2deg); }
.ambient-trust-catalogue .ambient-prop--terminal { --prop-size: 260px; left: -8%; top: 13%; transform: rotate(-8deg); }
.ambient-legal-hero .ambient-prop--document { --prop-size: 360px; right: 5%; top: -20%; transform: rotate(5deg); }
.ambient-404 .ambient-prop--broken { --prop-size: min(48vw, 640px); right: 3%; top: 50%; transform: translateY(-50%) rotate(-3deg); }

@media (max-width: 899px) {
  .ambient-surface--light::before {
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 42%, transparent 58%, #000);
    mask-image: linear-gradient(90deg, #000, transparent 42%, transparent 58%, #000);
    opacity: .82;
  }
  .ambient-prop { display: none; }
  .ambient-404 .ambient-prop--broken { --prop-size: 420px; right: -34%; top: 67%; --prop-opacity: .33; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-prop { transform: none; }
  .ambient-404 .ambient-prop--broken { transform: translateY(-50%); }
}