/* =====================================================================
   Pug IT Solution — background effects
   ---------------------------------------------------------------------
   Three fixed layers behind everything: a mesh of connected points, a
   circuit die drawn once as an SVG file, and a slow gold sheen. All of it
   is decoration — the markup that carries it is aria-hidden.
   ===================================================================== */
.fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 14% -6%, rgba(201, 162, 39, 0.13), transparent 62%),
    radial-gradient(760px 520px at 86% 6%, rgba(195, 203, 214, 0.06), transparent 60%),
    radial-gradient(1200px 820px at 50% 108%, rgba(138, 109, 28, 0.12), transparent 68%),
    var(--bg);
}

/* Network of points, with a wider net of lines drawn through them */
.fx__mesh {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(201, 162, 39, 0.34) 1px, transparent 1.4px),
    linear-gradient(to right, rgba(201, 162, 39, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 162, 39, 0.05) 1px, transparent 1px);
  background-size: 46px 46px, 184px 184px, 184px 184px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 120% 78% at 50% 10%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 120% 78% at 50% 10%, #000 0%, transparent 74%);
}

/* Processor die with its traces, anchored to the upper right */
.fx__circuit {
  position: absolute;
  top: -6vw;
  right: -14vw;
  width: min(1020px, 78vw);
  aspect-ratio: 1 / 1;
  background: url('../../img/circuit.svg') center / contain no-repeat;
  opacity: 0.5;
  mask-image: radial-gradient(circle at 52% 46%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 52% 46%, #000 30%, transparent 72%);
}

/* Slow sheen, the way light travels over a brushed metal surface */
.fx__sheen {
  position: absolute;
  top: -30%;
  left: -40%;
  width: 70%;
  height: 160%;
  transform: rotate(14deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(242, 220, 155, 0.05) 42%,
    rgba(242, 220, 155, 0.09) 50%,
    rgba(242, 220, 155, 0.05) 58%,
    transparent
  );
  filter: blur(24px);
  animation: sheen-travel 22s ease-in-out infinite alternate;
}

@keyframes sheen-travel {
  from { transform: translate3d(0, 0, 0) rotate(14deg); }
  to   { transform: translate3d(150vw, 4vh, 0) rotate(14deg); }
}

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


/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .fx__circuit { opacity: 0.32; }
}