:root {
    --rack-width: min(calc(100vw - var(--body-padding) * 2), var(--content-max-width));
    --rack-hp: 74;
    --rack-rows: 1;

    --rack-plywood-width-mm: 12;
    --rack-row-width-mm: calc(var(--rack-hp) * 5.08);
    --rack-width-mm: calc(var(--rack-row-width-mm) + var(--rack-plywood-width-mm) * 2);
    --rack-from-mm: calc(var(--rack-width) / var(--rack-width-mm));
    --rack-from-hp: calc(5.08 * var(--rack-from-mm));

    --rack-plywood-width: calc(var(--rack-plywood-width-mm) * var(--rack-from-mm));
    --rack-row-width: calc(var(--rack-row-width-mm) * var(--rack-from-mm));
    --rack-row-height: calc(400 / 3 * var(--rack-from-mm));
    --rack-rows-height: calc(var(--rack-rows) * var(--rack-row-height));
    --rack-height: calc(var(--rack-rows-height) + var(--rack-plywood-width) * 2);

    --module-height: calc(128.5 * var(--rack-from-mm));
    --module-y-offset: calc(
        (var(--rack-row-height) - var(--module-height)) / 2 + var(--rack-plywood-width)
    );

    --img-plywood-top: url("images/plywood_top_74hp.webp");
    --img-plywood-bottom: url("images/plywood_bot_74hp.webp");
    --img-rackrow: url("images/rackrow_74hp.webp");
    --img-plywood-left: url("images/plywood_left.webp");
    --img-plywood-right: url("images/plywood_right.webp");
}

div.rack {
    margin: 3em auto;
    position: relative;
    width: var(--rack-width);
    height: var(--rack-height);
    box-shadow: 0 0 10vw -5vw var(--highlight-color0);
    border-radius: calc(var(--rack-plywood-width) * 0.6);
}
div.rack::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    box-shadow: 0 0 12.5vw -2.5vw var(--highlight-color1);
    border-radius: calc(var(--rack-plywood-width) * 0.6);
    transition: opacity 5s ease-in;
}
div.rack:hover::after {
    opacity: 1;
}

span.plywood-top {
    background-image: var(--img-plywood-top);
    background-size: 100% auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--rack-plywood-width);
}

span.plywood-bottom {
    background-image: var(--img-plywood-bottom);
    background-size: 100% auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rack-plywood-width);
}

span.plywood-left {
    background-image: var(--img-plywood-left);
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: var(--rack-plywood-width);
    bottom: var(--rack-plywood-width);
    width: var(--rack-plywood-width);
}

span.plywood-right {
    background-image: var(--img-plywood-right);
    background-size: 100% auto;
    position: absolute;
    right: 0;
    top: var(--rack-plywood-width);
    bottom: var(--rack-plywood-width);
    width: var(--rack-plywood-width);
}

span.rackrows {
    background-image: var(--img-rackrow);
    background-size: 100% auto;
    width: var(--rack-row-width);
    height: var(--rack-rows-height);
    position: absolute;
    left: var(--rack-plywood-width);
    top: var(--rack-plywood-width);
}

.modules a {
    z-index: 2;
    position: absolute;
    left: calc(var(--module-x) * var(--rack-from-hp) + var(--rack-plywood-width));
    top: calc(var(--module-y) * var(--rack-row-height) + var(--module-y-offset));
    transition: transform 0.35s;
}
.modules a:hover {
    z-index: 3;
    transform: scale(1.075);
}
.modules a img {
    margin: 0;
    height: var(--module-height);
    transition: border-radius 0.25s ease-out;
}
.modules a:hover img {
    border-radius: 0.2vw;
}
.modules a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    box-shadow: 0 0 0.4vw -0.2vw var(--highlight-color0);
    border-radius: 0.2vw;
    transition: opacity 0.4s ease 0.1s;
}
.modules a:hover::before {
    opacity: 1;
}

.modules a .module-hp {
    z-index: 4;
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: -0.9em;
    height: 0.75em;
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
}
.modules a:hover .module-hp {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
}

.module-hp span:nth-child(2) {
    align-self: flex-end;
    font-family: "#RobotoMono", "monospace";
    font-size: 0.6em;
    text-shadow: 2px 2px 1px var(--background0);
}
.module-hp span:nth-child(2)::after {
    content: "hp";
}

.module-hp span:nth-child(1), .module-hp span:nth-child(3) {
    height: 0.4em;
    border: 1px solid var(--highlight-color1);
    border-top: none;
    box-shadow: 1px 2px var(--background3);
}
.module-hp span:nth-child(1) {
    flex: 1;
    border-right: none;
    border-bottom-left-radius: 2px;
    box-shadow: 0px 2px var(--background3);
}
.module-hp span:nth-child(3) {
    flex: 30;
    border-left: none;
    border-bottom-right-radius: 2px;
}

.blinds span {
    pointer-events: none;
    background-size: auto 100%;
    position: absolute;
    left: calc(var(--blind-x) * var(--rack-from-hp) + var(--rack-plywood-width));
    top: calc(var(--blind-y) * var(--rack-row-height) + var(--module-y-offset));
    height: var(--module-height);
}
.blinds span.blind-2hp {
    z-index: 1;
    background-image: url("images/topdown_blind_2hp_shadow_19-6mm.webp");
    width: calc(19.6 * var(--rack-from-mm));
}
.blinds span.blind-2hp-left {
    z-index: 1;
    background-image: url("images/topdown_blind_2hp_left_11-8mm.webp");
    left: calc((var(--blind-x) * 5.08 - 2) * var(--rack-from-mm) + var(--rack-plywood-width));
    width: calc(11.8 * var(--rack-from-mm));
}
.blinds span.blind-4hp {
    background-image: url("images/topdown_blind_4hp.webp");
    width: calc(20 * var(--rack-from-mm));
}
.blinds span.blind-8hp {
    background-image: url("images/topdown_blind_8hp.webp");
    width: calc(40.3 * var(--rack-from-mm));
}

.spark-inducer {
    --module-x: 14;
    --module-y: 0;
}