:root {
  --design-seed: "**mechanic stream**";
  --bay-dark: #090B0D;
  --metal: #2A3136;
  --flare: #FF5A1F;
  --paper: #EFE2C3;
  --rust: #6B3B1E;
  --coolant: #B9FF4A;
  --cyan: #19D3D1;
  --title: "Bebas Neue", Impact, sans-serif;
  --body: "Commissioner", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --poem: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bay-dark); }

body {
  margin: 0;
  color: var(--paper);
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 5%, rgba(255, 90, 31, .18), transparent 26rem),
    radial-gradient(circle at 85% 35%, rgba(25, 211, 209, .13), transparent 23rem),
    linear-gradient(90deg, #090B0D 0%, #14191d 48%, #090B0D 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(239, 226, 195, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 226, 195, .028) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
  z-index: 1;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .32;
  mix-blend-mode: soft-light;
  background:
    repeating-radial-gradient(circle at 12% 18%, rgba(239,226,195,.2) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(101deg, rgba(107,59,30,.2) 0 1px, transparent 1px 8px);
}

.fixed-gauge {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 30;
  display: grid;
  gap: 8px;
  place-items: end;
  font-family: var(--mono);
}

.gauge-face {
  position: relative;
  width: 94px;
  height: 58px;
  border: 2px solid var(--paper);
  border-bottom: 8px solid var(--rust);
  border-radius: 90px 90px 12px 12px;
  background: #11171b;
  box-shadow: inset 0 0 18px #000, 0 0 20px rgba(185,255,74,.16);
}

.gauge-face span { position: absolute; left: 12px; bottom: 8px; font-size: 11px; color: var(--coolant); }
.gauge-face i {
  position: absolute;
  left: 47px;
  bottom: 8px;
  width: 3px;
  height: 40px;
  background: var(--flare);
  transform-origin: bottom center;
  transform: rotate(-45deg);
  box-shadow: 0 0 12px var(--flare);
}

.odometer {
  padding: 7px 10px;
  color: var(--coolant);
  background: #040506;
  border: 1px solid #2A3136;
  letter-spacing: .18em;
  box-shadow: inset 0 0 10px #000;
}

.service-canal { position: relative; min-height: 500vh; }

.fluid-map {
  position: absolute;
  inset: 0 auto 0 50%;
  width: min(100vw, 1120px);
  height: 100%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.coolant-shadow, .coolant-path, .oil-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.coolant-shadow { stroke: rgba(0,0,0,.65); stroke-width: 72; filter: blur(10px); }
.coolant-path { stroke: var(--coolant); stroke-width: 34; stroke-dasharray: 24 18; filter: drop-shadow(0 0 16px rgba(185,255,74,.7)); animation: streamPulse 2.8s linear infinite; }
.oil-path { stroke: rgba(107,59,30,.78); stroke-width: 18; stroke-dasharray: 3 30; animation: streamPulse 4s linear infinite reverse; }

@keyframes streamPulse { to { stroke-dashoffset: -240; } }

.bay {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 9vh clamp(22px, 5vw, 80px);
  z-index: 5;
  overflow: hidden;
}

.bay:nth-child(even) { justify-items: end; }
.bay:nth-child(odd) { justify-items: start; }

.bay::after {
  content: "";
  position: absolute;
  inset: 8vh 6vw;
  border: 1px solid rgba(239,226,195,.16);
  clip-path: polygon(0 8%, 86% 0, 100% 18%, 92% 91%, 12% 100%, 0 76%);
  pointer-events: none;
}

.bay-number {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 { font-family: var(--title); font-weight: 400; margin: 0; letter-spacing: .03em; line-height: .86; }
h2 { font-size: clamp(70px, 11vw, 150px); color: var(--paper); text-shadow: 5px 5px 0 var(--rust); }
p { max-width: 560px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; }

.hero-bay { justify-items: center; text-align: center; }
.hero-machine { position: relative; width: min(980px, 96vw); min-height: 620px; display: grid; place-items: center; }
.wordmark { font-size: clamp(86px, 16vw, 220px); color: var(--paper); text-shadow: 8px 8px 0 var(--rust), 0 0 35px rgba(255,90,31,.32); z-index: 3; }
.lift-post { position: absolute; top: 4%; bottom: 12%; width: 28px; background: linear-gradient(#2A3136, #090B0D); border: 2px solid rgba(239,226,195,.22); }
.lift-post.left { left: 7%; } .lift-post.right { right: 7%; }
.lift-post::before { content: ""; position: absolute; top: 38%; width: 150px; height: 18px; background: var(--flare); opacity: .65; }
.lift-post.left::before { left: 0; } .lift-post.right::before { right: 0; }

.drain-pan {
  position: absolute;
  bottom: 76px;
  left: 50%;
  width: min(620px, 82vw);
  height: 118px;
  transform: translateX(-50%) perspective(360px) rotateX(58deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(25,211,209,.38), rgba(9,11,13,.98) 60%);
  border: 5px solid var(--metal);
  overflow: hidden;
  box-shadow: 0 26px 45px #000;
}

.drain-pan span { display: block; font-family: var(--title); font-size: 72px; color: rgba(239,226,195,.22); transform: scaleY(-1); filter: blur(.6px); animation: reflection 3.2s ease-in-out infinite; }
.ripple { position: absolute; inset: 18px 70px; border: 2px solid rgba(185,255,74,.55); border-radius: 50%; animation: ripple 2.6s linear infinite; }
.ripple.two { animation-delay: 1.25s; border-color: rgba(25,211,209,.55); }

@keyframes ripple { from { transform: scale(.35); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
@keyframes reflection { 50% { transform: scaleY(-1) skewX(7deg) translateX(12px); } }

.key-tag {
  position: absolute;
  right: 10%;
  top: 22%;
  width: 134px;
  height: 194px;
  border: 0;
  border-radius: 12px 12px 52px 52px;
  background: var(--coolant);
  color: #090B0D;
  font-family: var(--mono);
  text-transform: uppercase;
  box-shadow: 10px 12px 0 var(--rust), 0 0 22px rgba(185,255,74,.45);
  transform-origin: top center;
  animation: tagSwing 4s ease-in-out infinite;
  cursor: pointer;
}
.key-tag b { display: block; font-family: var(--title); font-size: 40px; line-height: .9; }
.key-tag small { font-size: 10px; }
.key-hole { display: block; width: 25px; height: 25px; border-radius: 50%; background: var(--bay-dark); margin: 14px auto 28px; }
.key-tag.cranked { animation: none; transform: rotate(18deg) translateY(8px); transition: transform .35s ease; }
@keyframes tagSwing { 50% { transform: rotate(6deg); } }

.tape-note { position: absolute; left: 8vw; bottom: 11vh; padding: 18px 24px; color: #090B0D; background: var(--paper); transform: rotate(-3deg); box-shadow: 0 8px 0 rgba(107,59,30,.8); }
.diagnostic-stack { position: absolute; right: 8vw; bottom: 11vh; display: grid; gap: 9px; font-family: var(--mono); color: var(--cyan); text-align: left; }
.diagnostic-stack span { background: rgba(9,11,13,.72); border-left: 5px solid var(--flare); padding: 8px 12px; }

.artifact { position: relative; z-index: 4; max-width: 660px; }
.stamped-panel { padding: 38px; background: rgba(42,49,54,.9); border: 2px solid rgba(239,226,195,.24); box-shadow: -18px 18px 0 var(--rust); }
.piston-bank { position: absolute; left: 5vw; width: min(560px, 70vw); height: 380px; display: flex; gap: 22px; transform: rotate(-8deg); opacity: .9; }
.cylinder { flex: 1; border: 6px solid var(--metal); background: linear-gradient(180deg, rgba(239,226,195,.12), rgba(9,11,13,.4)); border-radius: 18px; position: relative; overflow: hidden; }
.cylinder i { position: absolute; left: 10%; right: 10%; bottom: 18%; height: 90px; border-radius: 16px 16px 8px 8px; background: var(--paper); box-shadow: inset 0 -20px 0 var(--rust); animation: piston 1.6s ease-in-out infinite; }
.c2 i { animation-delay: .35s; } .c3 i { animation-delay: .7s; }
@keyframes piston { 50% { transform: translateY(-130px); } }
.torque-strip, .emissions-readout { font-family: var(--mono); color: var(--coolant); border-top: 1px dashed var(--paper); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 18px; }
.socket-cloud { position: absolute; right: 9vw; bottom: 13vh; font-family: var(--mono); color: var(--paper); }
.socket-cloud span { display: inline-grid; place-items: center; margin: 8px; width: 68px; height: 68px; border: 3px solid var(--metal); border-radius: 50%; background: #090B0D; box-shadow: inset 0 0 0 10px #151a1f; }

.masking-tape { margin-left: 8vw; padding: 32px 40px; background: linear-gradient(90deg, #EFE2C3, #dacaa5); color: #090B0D; transform: rotate(2deg); box-shadow: 16px 18px 0 rgba(107,59,30,.8); }
.masking-tape h2 { color: #090B0D; text-shadow: 4px 4px 0 rgba(255,90,31,.35); }
.spark-plug-row { position: absolute; right: 8vw; display: flex; gap: 24px; transform: rotate(8deg); }
.plug { position: relative; width: 66px; height: 270px; background: linear-gradient(#EFE2C3 0 28%, #2A3136 28% 64%, #090B0D 64%); border-radius: 26px 26px 8px 8px; border: 2px solid rgba(239,226,195,.3); }
.plug i { position: absolute; bottom: -38px; left: 29px; width: 8px; height: 48px; background: var(--cyan); box-shadow: 0 0 24px 8px var(--cyan); animation: spark 1.1s steps(2) infinite; }
.plug em { position: absolute; inset: 86px 0 auto; height: 14px; background: repeating-linear-gradient(90deg, var(--rust) 0 8px, var(--metal) 8px 16px); }
@keyframes spark { 50% { opacity: .25; transform: scaleY(.55); } }
.timing-wheel { position: absolute; left: 12vw; bottom: 10vh; width: 210px; height: 210px; border-radius: 50%; border: 12px solid var(--flare); display: grid; place-items: center; color: var(--paper); font-family: var(--mono); animation: rotateWheel 12s linear infinite; }
.timing-wheel span { position: absolute; } .timing-wheel span:nth-child(1){ top: 10px; } .timing-wheel span:nth-child(2){ right: 18px; } .timing-wheel span:nth-child(3){ bottom: 10px; } .timing-wheel span:nth-child(4){ left: 18px; }
@keyframes rotateWheel { to { transform: rotate(360deg); } }

.exhaust-bloom { position: absolute; left: 4vw; width: 55vw; height: 60vh; filter: blur(.3px); }
.exhaust-bloom span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,31,.7), rgba(107,59,30,.3) 45%, transparent 70%); animation: bloom 5s ease-in-out infinite; }
.exhaust-bloom span:nth-child(1){ inset: 20% 40% 25% 5%; } .exhaust-bloom span:nth-child(2){ inset: 5% 18% 38% 22%; animation-delay: .7s; } .exhaust-bloom span:nth-child(3){ inset: 35% 6% 8% 35%; animation-delay: 1.4s; } .exhaust-bloom span:nth-child(4){ inset: 50% 35% 0 0; animation-delay: 2s; }
@keyframes bloom { 50% { transform: scale(1.14) translateX(24px); opacity: .62; } }
.inspection-sticker { padding: 34px; background: #EFE2C3; color: #090B0D; border: 12px double var(--flare); transform: rotate(-2deg); }
.inspection-sticker h2 { color: #090B0D; text-shadow: 4px 4px 0 rgba(107,59,30,.35); }

.serpentine { position: absolute; left: 8vw; width: 470px; height: 430px; border: 24px solid var(--metal); border-radius: 44% 56% 42% 58%; box-shadow: inset 0 0 0 8px #090B0D, 0 0 25px rgba(25,211,209,.25); animation: belt 3s linear infinite; }
.pulley { position: absolute; width: 115px; height: 115px; border-radius: 50%; background: radial-gradient(circle, #090B0D 0 18%, var(--paper) 19% 27%, var(--metal) 28% 100%); border: 5px solid var(--rust); }
.p1 { left: 42px; top: 56px; } .p2 { right: 40px; top: 95px; } .p3 { left: 175px; bottom: 38px; }
@keyframes belt { 50% { border-radius: 56% 44% 58% 42%; } }
.final-tag { margin-right: 7vw; padding: 42px; background: rgba(9,11,13,.82); border: 2px solid var(--coolant); box-shadow: 0 0 0 12px rgba(42,49,54,.55), 0 0 45px rgba(185,255,74,.2); }
.fraunces-line { font-family: var(--poem); color: var(--cyan); font-size: clamp(24px, 3vw, 42px); line-height: 1.08; }
.idle-meter { height: 20px; background: #040506; border: 1px solid var(--paper); margin-top: 24px; overflow: hidden; }
.idle-meter span { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, var(--coolant), var(--cyan)); box-shadow: 0 0 18px var(--coolant); transition: width .25s ease; }

.bay-rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 9px; }
.bay-rail button { width: 92px; padding: 8px; border: 1px solid rgba(239,226,195,.35); background: rgba(9,11,13,.78); color: var(--paper); font-family: var(--mono); font-size: 11px; text-transform: uppercase; cursor: pointer; }
.bay-rail button.active { color: #090B0D; background: var(--coolant); border-color: var(--coolant); box-shadow: 0 0 18px rgba(185,255,74,.5); }

.bay.in-view .artifact { animation: artifactIn .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes artifactIn { from { opacity: .25; transform: translateY(42px) rotate(var(--rot, 0deg)); } }

@media (max-width: 760px) {
  .fixed-gauge { display: none; }
  .bay { min-height: 112vh; padding: 12vh 20px; justify-items: start !important; }
  .bay-rail { left: 8px; top: auto; bottom: 8px; transform: none; grid-template-columns: repeat(5, 1fr); width: calc(100% - 16px); }
  .bay-rail button { width: auto; font-size: 9px; }
  .spark-plug-row, .piston-bank, .exhaust-bloom, .serpentine { opacity: .38; left: 8vw; right: auto; transform: scale(.72); transform-origin: left center; }
  .diagnostic-stack, .tape-note { position: relative; left: auto; right: auto; bottom: auto; margin-top: 20px; }
  .key-tag { right: 3%; top: 12%; transform: scale(.82); }
}