/* =========================================================
   SAN ENGINEERING
   FIXED ENGINEERING BACKGROUND
   ---------------------------------------------------------
   STATIC - NO FLOATING
   STATIC - NO ROAMING
   STATIC - NO LAYOUT CHANGES
   CONTENT ALWAYS VISIBLE ABOVE BACKGROUND
========================================================= */


/* =========================================================
   FIXED ENGINEERING LAYER
========================================================= */

.engineering-fixed-layer {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 0 !important;

    transform: translateZ(0);

    isolation: isolate;
}


/* =========================================================
   WEBSITE CONTENT
   ---------------------------------------------------------
   IMPORTANT:
   Do NOT give every section/container a z-index.
   This prevents stacking problems with headings/content.
========================================================= */

body {
    position: relative;
    z-index: 0;
}

header,
main,
footer,
#site-footer {
    position: relative;
    z-index: 2;
}


/* Sections stay above background without creating
   unnecessary stacking layers */

section {
    position: relative;
    z-index: 2;
}


/* Containers should NOT create their own stacking layer */

.container {
    position: relative;
    z-index: auto;
}


/* =========================================================
   ENGINEERING COMPONENT
========================================================= */

.engineering-object {
    position: absolute !important;

    left: var(--tool-x);
    top: var(--tool-y);

    width: var(--tool-size);
    height: var(--tool-size);

    transform:
        translate(-50%, -50%)
        rotate(var(--tool-rotation));

    color: rgba(205, 218, 218, 0.16);

    opacity: 0.65 !important;

    pointer-events: none !important;

    z-index: 0;

    transition:
        color 0.25s ease,
        filter 0.25s ease,
        opacity 0.25s ease;

    will-change: filter;
}


/* =========================================================
   SVG
========================================================= */

.engineering-object svg {
    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    vector-effect: non-scaling-stroke;
}


/* =========================================================
   FILLED ENGINEERING AREAS
========================================================= */

.engineering-object .tool-fill {
    fill: rgba(190, 205, 205, 0.025);
    stroke: currentColor;
}

.engineering-object .tool-solid {
    fill: currentColor;
    stroke: currentColor;
}

.engineering-object .tool-detail {
    stroke-width: 1.25;
    opacity: 0.75;
}

.engineering-object .tool-center {
    fill: rgba(0, 0, 0, 0.035);
    stroke: currentColor;
    stroke-width: 1.7;
}

.engineering-object .tool-dash {
    stroke-dasharray: 5 6;
    opacity: 0.65;
}


/* =========================================================
   NORMAL VISIBLE STATE
   ---------------------------------------------------------
   Subtle enough that headings remain readable.
========================================================= */

.engineering-object.tool-01,
.engineering-object.tool-02,
.engineering-object.tool-03,
.engineering-object.tool-04,
.engineering-object.tool-05,
.engineering-object.tool-06,
.engineering-object.tool-07,
.engineering-object.tool-08,
.engineering-object.tool-09,
.engineering-object.tool-10,
.engineering-object.tool-11,
.engineering-object.tool-12,
.engineering-object.tool-13,
.engineering-object.tool-14,
.engineering-object.tool-15,
.engineering-object.tool-16,
.engineering-object.tool-17,
.engineering-object.tool-18,
.engineering-object.tool-19,
.engineering-object.tool-20,
.engineering-object.tool-21,
.engineering-object.tool-22,
.engineering-object.tool-23,
.engineering-object.tool-24,
.engineering-object.tool-25,
.engineering-object.tool-26,
.engineering-object.tool-27,
.engineering-object.tool-28,
.engineering-object.tool-29,
.engineering-object.tool-30,
.engineering-object.tool-31,
.engineering-object.tool-32,
.engineering-object.tool-33,
.engineering-object.tool-34,
.engineering-object.tool-35,
.engineering-object.tool-36 {
    opacity: 0.65;
}


/* =========================================================
   MOUSE NEAR
========================================================= */

.engineering-object.is-near {

    color: rgba(60, 220, 205, 0.52);

    opacity: 0.85 !important;

    filter:
        drop-shadow(0 0 4px rgba(40, 210, 195, 0.28))
        drop-shadow(0 0 9px rgba(40, 210, 195, 0.12));
}


/* =========================================================
   MOUSE VERY CLOSE
========================================================= */

.engineering-object.is-active {

    color: rgba(78, 238, 218, 0.78);

    opacity: 0.95 !important;

    filter:
        drop-shadow(0 0 5px rgba(50, 230, 210, 0.45))
        drop-shadow(0 0 12px rgba(40, 210, 195, 0.22));
}


/* =========================================================
   FIXED POSITIONS
========================================================= */


/* ---------- TOP ---------- */

.engineering-object.tool-01 {
    --tool-x: 4%;
    --tool-y: 10%;
    --tool-size: 62px;
    --tool-rotation: -12deg;
}

.engineering-object.tool-02 {
    --tool-x: 15%;
    --tool-y: 20%;
    --tool-size: 45px;
    --tool-rotation: 18deg;
}

.engineering-object.tool-03 {
    --tool-x: 28%;
    --tool-y: 8%;
    --tool-size: 55px;
    --tool-rotation: 7deg;
}

.engineering-object.tool-04 {
    --tool-x: 42%;
    --tool-y: 16%;
    --tool-size: 44px;
    --tool-rotation: -18deg;
}

.engineering-object.tool-05 {
    --tool-x: 56%;
    --tool-y: 8%;
    --tool-size: 64px;
    --tool-rotation: 10deg;
}

.engineering-object.tool-06 {
    --tool-x: 70%;
    --tool-y: 18%;
    --tool-size: 46px;
    --tool-rotation: -14deg;
}

.engineering-object.tool-07 {
    --tool-x: 84%;
    --tool-y: 9%;
    --tool-size: 58px;
    --tool-rotation: 12deg;
}

.engineering-object.tool-08 {
    --tool-x: 96%;
    --tool-y: 21%;
    --tool-size: 44px;
    --tool-rotation: -8deg;
}


/* ---------- MIDDLE ---------- */

.engineering-object.tool-09 {
    --tool-x: 6%;
    --tool-y: 38%;
    --tool-size: 48px;
    --tool-rotation: 17deg;
}

.engineering-object.tool-10 {
    --tool-x: 20%;
    --tool-y: 32%;
    --tool-size: 68px;
    --tool-rotation: -9deg;
}

.engineering-object.tool-11 {
    --tool-x: 35%;
    --tool-y: 40%;
    --tool-size: 45px;
    --tool-rotation: 14deg;
}

.engineering-object.tool-12 {
    --tool-x: 50%;
    --tool-y: 31%;
    --tool-size: 54px;
    --tool-rotation: -12deg;
}

.engineering-object.tool-13 {
    --tool-x: 65%;
    --tool-y: 39%;
    --tool-size: 46px;
    --tool-rotation: 18deg;
}

.engineering-object.tool-14 {
    --tool-x: 80%;
    --tool-y: 31%;
    --tool-size: 64px;
    --tool-rotation: -7deg;
}

.engineering-object.tool-15 {
    --tool-x: 94%;
    --tool-y: 40%;
    --tool-size: 48px;
    --tool-rotation: 8deg;
}


/* ---------- LOWER ---------- */

.engineering-object.tool-16 {
    --tool-x: 5%;
    --tool-y: 57%;
    --tool-size: 58px;
    --tool-rotation: -14deg;
}

.engineering-object.tool-17 {
    --tool-x: 19%;
    --tool-y: 51%;
    --tool-size: 44px;
    --tool-rotation: 12deg;
}

.engineering-object.tool-18 {
    --tool-x: 34%;
    --tool-y: 58%;
    --tool-size: 54px;
    --tool-rotation: -8deg;
}

.engineering-object.tool-19 {
    --tool-x: 49%;
    --tool-y: 50%;
    --tool-size: 44px;
    --tool-rotation: 18deg;
}

.engineering-object.tool-20 {
    --tool-x: 64%;
    --tool-y: 58%;
    --tool-size: 62px;
    --tool-rotation: 10deg;
}

.engineering-object.tool-21 {
    --tool-x: 79%;
    --tool-y: 51%;
    --tool-size: 44px;
    --tool-rotation: -15deg;
}

.engineering-object.tool-22 {
    --tool-x: 94%;
    --tool-y: 59%;
    --tool-size: 58px;
    --tool-rotation: 7deg;
}


/* ---------- BOTTOM ---------- */

.engineering-object.tool-23 {
    --tool-x: 8%;
    --tool-y: 78%;
    --tool-size: 52px;
    --tool-rotation: 15deg;
}

.engineering-object.tool-24 {
    --tool-x: 23%;
    --tool-y: 72%;
    --tool-size: 42px;
    --tool-rotation: -13deg;
}

.engineering-object.tool-25 {
    --tool-x: 38%;
    --tool-y: 83%;
    --tool-size: 62px;
    --tool-rotation: 8deg;
}

.engineering-object.tool-26 {
    --tool-x: 53%;
    --tool-y: 74%;
    --tool-size: 46px;
    --tool-rotation: -17deg;
}

.engineering-object.tool-27 {
    --tool-x: 68%;
    --tool-y: 84%;
    --tool-size: 56px;
    --tool-rotation: 14deg;
}

.engineering-object.tool-28 {
    --tool-x: 83%;
    --tool-y: 73%;
    --tool-size: 44px;
    --tool-rotation: -10deg;
}

.engineering-object.tool-29 {
    --tool-x: 95%;
    --tool-y: 84%;
    --tool-size: 60px;
    --tool-rotation: 12deg;
}

.engineering-object.tool-30 {
    --tool-x: 12%;
    --tool-y: 92%;
    --tool-size: 42px;
    --tool-rotation: -16deg;
}

.engineering-object.tool-31 {
    --tool-x: 36%;
    --tool-y: 94%;
    --tool-size: 48px;
    --tool-rotation: 10deg;
}

.engineering-object.tool-32 {
    --tool-x: 62%;
    --tool-y: 94%;
    --tool-size: 44px;
    --tool-rotation: -8deg;
}

.engineering-object.tool-33 {
    --tool-x: 88%;
    --tool-y: 94%;
    --tool-size: 52px;
    --tool-rotation: 15deg;
}

.engineering-object.tool-34,
.engineering-object.tool-35,
.engineering-object.tool-36 {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .engineering-fixed-layer {
        opacity: 0.65;
    }

    .engineering-object {
        color: rgba(205, 218, 218, 0.12);

        opacity: 0.45 !important;
    }

    .engineering-object:nth-child(3n) {
        display: none;
    }

    .engineering-object.is-near {
        color: rgba(60, 220, 205, 0.42);

        opacity: 0.70 !important;
    }

    .engineering-object.is-active {
        color: rgba(78, 238, 218, 0.65);

        opacity: 0.82 !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .engineering-object {
        transition: none;
    }
}