/* Silver iridescent background — trial on work.html only.
   Same layer geometry as nocturnal-bg.css, but the texture runs through
   grayscale() and a multiply blend instead of a color tint, so it reads
   as a faint tonal pattern on the light surface instead of a saturated
   purple/teal wash that would compete with the content. */

/* Keep real content above the fixed background layers. */
body.professional > header.masthead,
body.professional > main,
body.professional > .wrap {
  position: relative;
  z-index: 1;
}

.site-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-background__ambient,
.site-background__reveal,
.site-background__veil,
.site-background__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-background__ambient {
  z-index: 0;
  background-image: url("../professional/texture-iridescent-master.png");
  background-repeat: no-repeat;
  background-position: 60% 54%;
  background-size: 200vw;
  opacity: 0.06;
  filter: grayscale(1) contrast(1.05) brightness(1.35) blur(0.4px);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 42% 66% at 12% 52%, #000 0 40%, rgba(0, 0, 0, 0.8) 56%, transparent 76%);
  mask-image: radial-gradient(ellipse 42% 66% at 12% 52%, #000 0 40%, rgba(0, 0, 0, 0.8) 56%, transparent 76%);
  transform: scale(1.04);
}

.site-background__reveal {
  z-index: 1;
  background-image: url("../professional/texture-iridescent-master.png");
  background-repeat: no-repeat;
  background-position: 60% 54%;
  background-size: 200vw;
  opacity: 0.13;
  filter: grayscale(1) contrast(1.05) brightness(1.15);
  mix-blend-mode: multiply;
  -webkit-mask-image:
    radial-gradient(circle 230px at var(--mx) var(--my), #000 0 18%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.28) 67%, transparent 100%),
    linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, 0.38) 46%, transparent 60%);
  mask-image:
    radial-gradient(circle 230px at var(--mx) var(--my), #000 0 18%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.28) 67%, transparent 100%),
    linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, 0.38) 46%, transparent 60%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: opacity 0.6s ease;
}

.site-background__veil {
  z-index: 2;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 42% 15% at 28% 18%, rgba(48, 58, 69, 0.05), transparent 68%),
    radial-gradient(ellipse 38% 13% at 37% 73%, rgba(48, 58, 69, 0.045), transparent 66%),
    linear-gradient(75deg, transparent 12%, rgba(48, 58, 69, 0.015) 38%, rgba(48, 58, 69, 0.03) 52%, transparent 86%);
  filter: blur(3px);
}

.site-background__veil::before,
.site-background__veil::after {
  position: absolute;
  width: 62vw;
  height: 18vw;
  min-height: 130px;
  border: 1px solid rgba(48, 58, 69, 0.06);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(48, 58, 69, 0.02), rgba(48, 58, 69, 0.03));
  content: "";
  filter: blur(0.6px);
  transform: rotate(-15deg) skewX(-16deg);
}

.site-background__veil::before {
  top: 12vh;
  left: -10vw;
}

.site-background__veil::after {
  bottom: 7vh;
  left: 5vw;
  opacity: 0.68;
  transform: rotate(11deg) skewX(18deg);
}

.site-background__grain {
  z-index: 3;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

@media (max-width: 860px) {
  .site-background__ambient,
  .site-background__reveal {
    background-position: 60% 88%;
    background-size: 240vw;
    opacity: 0.07;
  }

  .site-background__reveal {
    opacity: 0.14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background__reveal {
    display: none;
  }
}