/* ErCAD — procedural CAD workspace background (SVG layers) */

.cad-bg {
  --cad-bg: #0c1016;
  --cad-line: #5a9fd4;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--cad-bg);
  contain: strict;
}

.cad-bg__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.cad-bg__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cad-bg__svg * {
  vector-effect: non-scaling-stroke;
}

/* One faint wash — keep layers equally soft */
.cad-bg__layer--grid { opacity: 0.06; }
.cad-bg__layer--geometry { opacity: 0.085; }
.cad-bg__layer--motifs { opacity: 0.12; }
.cad-bg__layer--dimensions { opacity: 0.1; }
.cad-bg__layer--points { opacity: 0.04; }

.cad-bg__svg :is(path, line, circle, polygon, polyline, rect) {
  fill: none;
  stroke: var(--cad-line);
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cad-bg .cad-w04,
.cad-bg .cad-w06,
.cad-bg .cad-w1 {
  stroke-width: 0.85;
  stroke: var(--cad-line);
  fill: none;
}

.cad-bg .cad-plate-hatch line {
  stroke-width: 0.75;
  opacity: 0.85;
}

.cad-bg .cad-beam {
  opacity: 0.4;
}

.cad-bg .cad-beam-img {
  opacity: 0.9;
}

.cad-bg .cad-dash-fine { stroke-dasharray: 2 5; }
.cad-bg .cad-centerline { stroke-dasharray: 10 4 2 4; }

.cad-bg .cad-point {
  fill: var(--cad-line);
  stroke: none;
  opacity: 0.7;
}

.cad-bg .cad-dim-text {
  fill: var(--cad-line);
  stroke: none;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.9;
  user-select: none;
}

.cad-bg.is-drawing .cad-draw {
  stroke-dasharray: var(--cad-len, 400);
  stroke-dashoffset: var(--cad-len, 400);
}

.cad-bg.is-drawn .cad-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--cad-draw-ms, 2200ms) cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--cad-delay, 0ms);
}

.cad-bg.is-drawing .cad-point,
.cad-bg.is-drawing .cad-fade {
  opacity: 0;
}

.cad-bg.is-drawn .cad-fade {
  opacity: 1;
  transition: opacity 800ms ease-out;
  transition-delay: var(--cad-delay, 400ms);
}

.cad-bg.is-drawn .cad-point {
  opacity: 0.7;
  transition: opacity 800ms ease-out;
  transition-delay: var(--cad-delay, 400ms);
}

@media (max-width: 720px) {
  .cad-bg__layer--geometry { opacity: 0.04; }
  .cad-bg__layer--motifs { opacity: 0.035; }
  .cad-bg__layer--dimensions { opacity: 0.05; }
  .cad-bg__layer--points { opacity: 0.03; }

  .cad-bg .cad-dim-text {
    font-size: 8px;
    font-weight: 400;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cad-bg.is-drawing .cad-draw,
  .cad-bg.is-drawn .cad-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .cad-bg.is-drawing .cad-point,
  .cad-bg.is-drawing .cad-fade,
  .cad-bg.is-drawn .cad-point,
  .cad-bg.is-drawn .cad-fade {
    opacity: 0.7;
    transition: none;
  }

  .cad-bg.is-drawn .cad-fade {
    opacity: 1;
  }
}

body.cad-bg-ready > .header {
  z-index: 20;
}

body.cad-bg-ready > main,
body.cad-bg-ready > #site-footer {
  position: relative;
  z-index: 1;
}

body.cad-bg-ready > .media-lightbox {
  position: fixed;
  z-index: 1200;
}

body.cad-bg-ready {
  background: transparent;
}

body.cad-bg-ready.page-home {
  background: radial-gradient(
    ellipse 90% 55% at 50% -15%,
    var(--accent-dim),
    transparent
  );
}