/* Decorative machine hardware and interactive chrome */

.machine-hardware {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
}

.enigma-machine--reference-template .hardware-screw {
  display: none;
}

.hardware-rail,
.hardware-lid-hinge,
.hardware-slot,
.hardware-lever,
.hardware-clamp,
.hardware-bolt,
.hardware-port,
.hardware-serial,
.hardware-screw {
  position: absolute;
  display: block;
}

.hardware-control {
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border-style: solid;
  outline: 0;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  transition:
    transform 170ms cubic-bezier(0.25, 1, 0.5, 1),
    filter 170ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 170ms cubic-bezier(0.25, 1, 0.5, 1);
}

.hardware-control:hover {
  filter: brightness(1.1) contrast(1.02);
}

.hardware-control:focus-visible {
  box-shadow:
    0 0 0 2px rgba(245, 229, 164, 0.42),
    0 0 0 5px rgba(0, 0, 0, 0.62);
}

.hardware-control:active {
  filter: brightness(1.26);
}

.hardware-control.is-kicked {
  animation: hardware-kick 190ms cubic-bezier(0.25, 1, 0.5, 1);
}

.hardware-rail {
  display: none;
}

.enigma-machine--reference-template .hardware-slot,
.enigma-machine--reference-template .hardware-lid-hinge,
.enigma-machine--reference-template .hardware-bolt,
.enigma-machine--reference-template .hardware-screw {
  display: none;
}

.enigma-machine--reference-template .hardware-slot--left,
.enigma-machine--reference-template .hardware-slot--center {
  display: block;
}

.hardware-rail--left {
  left: 18px;
}

.hardware-rail--right {
  right: 18px;
}

.hardware-lid-hinge {
  display: none;
}

.hardware-slot {
  --hardware-angle: 0deg;
  --hardware-handle-x: 0px;
  --hardware-handle-angle: 0deg;
  --slot-width: 86px;
  --slot-height: 14px;
  width: var(--slot-width);
  height: var(--slot-height);
  border: 1px solid rgba(165, 148, 92, 0.56);
  border-radius: 7px;
  background:
    linear-gradient(180deg, #050505 0%, #202020 52%, #050505 100%);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.86),
    0 1px 2px rgba(199, 173, 102, 0.2);
  opacity: 0.92;
  transform:
    translate(var(--hardware-drag-x, 0), var(--hardware-drag-y, 0))
    rotate(var(--hardware-angle));
}

.hardware-slot::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 48px;
  width: 18px;
  height: 26px;
  border: 1px solid rgba(197, 176, 111, 0.54);
  border-radius: 5px;
  background:
    linear-gradient(90deg, #090909 0%, #5b4b2d 34%, #d2bd83 55%, #171717 100%);
  box-shadow:
    inset 0 1px rgba(255, 250, 207, 0.18),
    0 3px 4px rgba(0, 0, 0, 0.58);
  transform:
    translateX(var(--hardware-handle-x))
    rotate(var(--hardware-handle-angle));
  transition:
    transform 180ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.hardware-slot::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(230, 216, 155, 0.26);
}

.hardware-slot--left {
  --slot-left: 108px;
  --slot-top: 210px;
  --slot-width: 110px;
  --slot-height: 14px;
  --slot-angle: 12deg;
  --slot-handle-x: -6px;
  --slot-handle-angle: -4deg;
  display: block;
  top: var(--slot-top);
  left: var(--slot-left);
  --hardware-angle: var(--slot-angle);
  --hardware-handle-x: var(--slot-handle-x);
  --hardware-handle-angle: var(--slot-handle-angle);
}

.hardware-slot--center {
  --slot-left: 146px;
  --slot-top: 270px;
  --slot-width: 110px;
  --slot-height: 14px;
  --slot-angle: -2deg;
  --slot-handle-x: -2px;
  --slot-handle-angle: 2deg;
  display: block;
  top: var(--slot-top);
  left: var(--slot-left);
  --hardware-angle: var(--slot-angle);
  --hardware-handle-x: var(--slot-handle-x);
  --hardware-handle-angle: var(--slot-handle-angle);
}

.hardware-slot--right {
  top: 58px;
  right: 82px;
  --hardware-angle: -11deg;
}

.hardware-lever {
  --hardware-base-scale: 1;
  --lever-angle: 19deg;
  width: 50px;
  height: 32px;
  border: 1px solid rgba(148, 126, 72, 0.58);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.92) 0%, rgba(34, 33, 30, 0.92) 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 4px 7px rgba(0, 0, 0, 0.58);
  transform:
    translate(var(--hardware-drag-x, 0), var(--hardware-drag-y, 0))
    scale(var(--hardware-base-scale));
}

.hardware-lever::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 28px;
  height: 5px;
  border-radius: 4px;
  background: #111111;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.95);
}

.hardware-lever::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 5px;
  width: 10px;
  height: 24px;
  transform: rotate(var(--lever-angle));
  transform-origin: 50% 80%;
  border: 1px solid rgba(217, 194, 125, 0.58);
  border-radius: 5px;
  background:
    linear-gradient(90deg, #090909 0%, #6c5b34 41%, #ddc88b 58%, #171717 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.62);
  transition: transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
}

.hardware-lever--power {
  --lever-angle: 28deg;
  top: 185px;
  right: 80px;
  width: 150px;
  height: 80px;
  border-color: rgba(174, 154, 91, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12, 12, 11, 0.96) 0%, rgba(31, 30, 26, 0.96) 48%, rgba(5, 5, 5, 0.96) 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -12px 18px rgba(0, 0, 0, 0.58),
    0 7px 12px rgba(0, 0, 0, 0.68);
}

.hardware-lever--power::before {
  left: 18px;
  right: 18px;
  top: 33px;
  width: auto;
  height: 10px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #030303 0%, #171717 48%, #050505 100%);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.94),
    0 1px rgba(220, 200, 130, 0.1);
}

.hardware-lever--power::after {
  left: 56px;
  top: 10px;
  width: 18px;
  height: 56px;
  border-radius: 9px;
  background:
    linear-gradient(90deg, #090807 0%, #5c4d2f 24%, #d8c58d 49%, #8d7748 68%, #11100d 100%);
  box-shadow:
    inset 0 1px rgba(255, 247, 190, 0.22),
    inset 0 -5px 7px rgba(0, 0, 0, 0.45),
    0 4px 6px rgba(0, 0, 0, 0.66);
}

.hardware-lever--filter {
  top: 184px;
  right: 36px;
  --hardware-base-scale: 0.82;
  --lever-angle: -22deg;
}

.hardware-lever--filter::after {
  left: 15px;
}

.hardware-clamp {
  width: 42px;
  height: 46px;
  border: 1px solid rgba(130, 130, 130, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, #050505 0%, #303030 48%, #090909 100%);
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.42),
    0 5px 8px rgba(0, 0, 0, 0.6);
  opacity: 0.86;
  transform:
    translate(var(--hardware-drag-x, 0), var(--hardware-drag-y, 0))
    rotate(var(--clamp-angle, 0deg));
  transform-origin: 50% 8px;
}

.hardware-clamp::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 17px;
  height: 8px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #8a8a8a 0%, #2b2b2b 100%);
  transform:
    translateY(var(--clamp-bar-y, 0))
    rotate(var(--clamp-bar-angle, 0deg));
  transition: transform 170ms cubic-bezier(0.25, 1, 0.5, 1);
}

.hardware-clamp--left {
  top: 248px;
  left: 34px;
}

.hardware-clamp--right {
  top: 248px;
  right: 34px;
}

.hardware-bolt {
  display: none;
}

.hardware-port {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(184, 164, 101, 0.56);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #050505 0 31%, #4c4c4c 32% 52%, #111111 53% 100%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.18),
    0 4px 6px rgba(0, 0, 0, 0.6);
  transform:
    translate(var(--hardware-drag-x, 0), var(--hardware-drag-y, 0))
    rotate(var(--port-angle, 0deg));
}

.hardware-port--power {
  top: 260px;
  left: 44px;
}

.hardware-serial {
  --serial-offset-x: 0px;
  --serial-offset-y: 120px;
  --serial-width: 118px;
  --serial-height: 28px;
  top: 810px;
  left: 50%;
  width: var(--serial-width);
  height: var(--serial-height);
  transform: translateX(-50%) translate(var(--serial-offset-x), var(--serial-offset-y));
  border: 1px solid rgba(178, 155, 92, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(146, 128, 75, 0.74) 0%, rgba(60, 50, 30, 0.86) 100%);
  color: rgba(234, 216, 154, 0.78);
  font-family: Tahoma, sans-serif;
  font-size: 0.84rem;
  line-height: var(--serial-height);
  text-align: center;
  text-shadow: 0 1px #000000;
  box-shadow:
    inset 0 1px rgba(255, 245, 190, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.54);
}

.hardware-screw {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(205, 184, 118, 0.4);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #9c8b62 0 14%, #39352a 15% 54%, #080808 55% 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 2px 3px rgba(0, 0, 0, 0.58);
}

.hardware-screw::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 8px;
  height: 1px;
  transform: rotate(-22deg);
  background: rgba(0, 0, 0, 0.82);
}

.hardware-screw--tl {
  top: 32px;
  left: 38px;
}

.hardware-screw--tr {
  top: 32px;
  right: 38px;
}

.hardware-screw--ml {
  top: 636px;
  left: 40px;
}

.hardware-screw--mr {
  top: 636px;
  right: 40px;
}

.hardware-screw--bl {
  top: 1144px;
  left: 38px;
}

.hardware-screw--br {
  top: 1144px;
  right: 38px;
}

.hardware-slot.is-on {
  --hardware-handle-x: -34px;
  --hardware-handle-angle: -7deg;
}

.hardware-slot--center.is-on {
  --hardware-handle-x: -27px;
  --hardware-handle-angle: 9deg;
}

.hardware-slot--right.is-on {
  --hardware-handle-x: -38px;
  --hardware-handle-angle: 8deg;
}

.hardware-lever--power.is-on {
  --lever-angle: -28deg;
}

.hardware-lever--filter.is-on {
  --lever-angle: 18deg;
}

.hardware-clamp--left.is-on {
  --clamp-angle: -8deg;
  --clamp-bar-y: -9px;
  --clamp-bar-angle: -16deg;
}

.hardware-clamp--right.is-on {
  --clamp-angle: 8deg;
  --clamp-bar-y: -9px;
  --clamp-bar-angle: 16deg;
}

.hardware-bolt--left.is-on {
  --bolt-knob-x: 16px;
}

.hardware-bolt--right.is-on {
  --bolt-knob-x: -16px;
}

.hardware-port.is-on {
  --port-angle: 38deg;
  box-shadow:
    inset 0 1px 4px rgba(255, 242, 171, 0.26),
    0 0 0 2px rgba(208, 188, 111, 0.18),
    0 5px 8px rgba(0, 0, 0, 0.64);
}

@keyframes hardware-kick {
  0% {
    filter: brightness(1.42) contrast(1.08);
  }

  45% {
    filter: brightness(1.18) contrast(1.04);
  }

  100% {
    filter: none;
  }
}