:root {
  --asphalt: #101012;
  --violet: #2A1235;
  --cyan: #49F3FF;
  --red: #E3342F;
  --yellow: #F6C445;
  --bone: #F2E2BD;
  --rust: #7A3F1D;
  --green: #8CC63E;
  --glitch: 'Rubik Glitch', 'Inter', sans-serif;
  --comic: 'Bangers', 'Inter', sans-serif;
  --sign: 'Archivo Black', 'Inter', sans-serif;
  --mono: 'Chivo Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--asphalt); }
body {
  margin: 0;
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(73, 243, 255, .12), transparent 24rem),
    radial-gradient(circle at 70% 45%, rgba(42, 18, 53, .95), transparent 35rem),
    linear-gradient(180deg, var(--asphalt), #160b19 45%, var(--asphalt));
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  background-image:
    repeating-linear-gradient(90deg, rgba(242, 226, 189, .04) 0 1px, transparent 1px 5px),
    radial-gradient(circle, rgba(242,226,189,.16) 1px, transparent 1px);
  background-size: auto, 23px 23px;
  mix-blend-mode: overlay;
}

.cursor-light {
  position: fixed;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: .78;
  background: radial-gradient(circle, rgba(73,243,255,.34) 0 8%, rgba(246,196,69,.14) 22%, transparent 62%);
  mix-blend-mode: screen;
  transform: translate3d(-300px, -300px, 0) scale(.65);
  transition: transform .12s linear, opacity .25s ease;
}
.cursor-light.hot { opacity: 1; transform: translate3d(var(--x, -300px), var(--y, -300px), 0) scale(1.35); }

.rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: linear-gradient(115deg, transparent 0 42%, rgba(73,243,255,.25) 43% 44%, transparent 45% 100%);
  background-size: 90px 130px;
  animation: rain 1.1s linear infinite;
  opacity: .22;
}
@keyframes rain { to { background-position: -90px 130px; } }

.key-nav {
  position: fixed;
  top: 0;
  right: 5vw;
  z-index: 50;
  display: flex;
  gap: .7rem;
  transform-origin: top;
  filter: drop-shadow(0 16px 8px rgba(0,0,0,.45));
}
.key-nav a {
  position: relative;
  min-width: 72px;
  padding: 2.5rem .55rem .75rem;
  color: var(--asphalt);
  text-decoration: none;
  text-align: center;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  background: var(--yellow);
  border: 3px solid var(--rust);
  border-radius: 0 0 18px 18px;
  transform: rotate(var(--tilt, -4deg));
  transition: transform .25s ease, background .25s ease;
}
.key-nav a:nth-child(even) { --tilt: 5deg; background: var(--bone); }
.key-nav a:hover { transform: translateY(10px) rotate(0deg); background: var(--green); }
.key-nav span { display: block; font-family: var(--comic); font-size: 1.45rem; color: var(--red); }

.bay {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 14px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--yellow) 0 34px, var(--asphalt) 34px 68px) 14;
}
.bay::after {
  content: attr(data-bay);
  position: absolute;
  left: 2rem;
  top: 1.2rem;
  font: .8rem var(--mono);
  color: rgba(242,226,189,.65);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.bay-door { min-height: 132vh; background: linear-gradient(#08090c, var(--asphalt) 72%); }
.moon-haze { position: absolute; inset: -20% 0 auto 45%; height: 45rem; background: radial-gradient(circle, rgba(73,243,255,.2), transparent 55%); }
.facade { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.enamel-sign {
  position: absolute;
  top: 7vh;
  z-index: 8;
  padding: .35rem 1.5rem .7rem;
  color: var(--bone);
  font-family: var(--glitch);
  font-size: clamp(2.4rem, 7vw, 7.8rem);
  letter-spacing: .04em;
  background: linear-gradient(135deg, var(--red), #8e1715 65%, var(--rust));
  border: 7px solid var(--bone);
  border-radius: 24px 7px 18px 9px;
  box-shadow: 0 0 0 8px var(--asphalt), 0 18px 40px rgba(0,0,0,.65), inset 0 0 35px rgba(246,196,69,.2);
  transform: rotate(-1.4deg);
}
.flicker { animation: flicker 3.8s infinite steps(1); }
@keyframes flicker { 0%, 89%, 95%, 100% { filter: brightness(1.2); } 90%, 93% { filter: brightness(.42); } }
.tube { position: absolute; top: 22vh; width: 28vw; height: 10px; border-radius: 10px; background: var(--cyan); box-shadow: 0 0 25px var(--cyan); opacity: .7; }
.tube-a { left: 7vw; transform: rotate(9deg); } .tube-b { right: 8vw; transform: rotate(-7deg); }

.jaw-frame {
  position: relative;
  width: min(80vw, 980px);
  height: 62vh;
  margin-top: 17vh;
  background: linear-gradient(180deg, var(--rust), #2c160e);
  border: 16px solid #0a0708;
  border-radius: 48% 48% 20px 20px / 12% 12% 20px 20px;
  box-shadow: 0 38px 80px rgba(0,0,0,.8), inset 0 0 0 8px rgba(242,226,189,.12);
}
.door {
  position: absolute;
  inset: 8% 7% 7%;
  z-index: 4;
  overflow: hidden;
  transform: translateY(calc(var(--door-open, 0) * -58%));
  transition: transform .08s linear;
}
.slat { height: 12.5%; border: 2px solid rgba(16,16,18,.7); background: linear-gradient(90deg, #3b1b10, var(--rust), #24100b); box-shadow: inset 0 8px 0 rgba(242,226,189,.05), inset 0 -8px 0 rgba(0,0,0,.28); }
.inside-glow { position: absolute; inset: 13% 10% 9%; background: radial-gradient(circle at center, rgba(140,198,62,.42), transparent 30%), radial-gradient(circle at 65% 70%, rgba(246,196,69,.36), transparent 32%), #070607; }
.monster-eyes { position: absolute; z-index: 5; top: 45%; left: 50%; display: flex; gap: 6vw; transform: translate(-50%,-50%); }
.monster-eyes span, .eye { display: block; width: clamp(42px, 6vw, 86px); height: clamp(22px, 3vw, 42px); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 28px var(--cyan), 0 0 60px rgba(73,243,255,.55); animation: blink 5.2s infinite; }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
.caution-teeth { position: absolute; left: 0; right: 0; height: 38px; z-index: 6; background: repeating-linear-gradient(135deg, var(--yellow) 0 24px, var(--asphalt) 24px 48px); clip-path: polygon(0 0, 100% 0, 98% 100%, 94% 0, 90% 100%, 86% 0, 82% 100%, 78% 0, 74% 100%, 70% 0, 66% 100%, 62% 0, 58% 100%, 54% 0, 50% 100%, 46% 0, 42% 100%, 38% 0, 34% 100%, 30% 0, 26% 100%, 22% 0, 18% 100%, 14% 0, 10% 100%, 6% 0, 2% 100%, 0 0); }
.top-teeth { top: 0; } .bottom-teeth { bottom: 0; transform: rotate(180deg); }
.asphalt { position: absolute; left: 5vw; right: 5vw; bottom: 5vh; z-index: 10; }
.asphalt h1 { margin: .2rem 0; max-width: 10ch; font-family: var(--glitch); font-size: clamp(4rem, 13vw, 13rem); line-height: .78; color: var(--bone); text-shadow: 8px 8px 0 var(--red), 16px 16px 0 var(--violet); }
.mono-tag { display: inline-block; padding: .45rem .8rem; background: rgba(242,226,189,.9); color: var(--asphalt); font-family: var(--mono); font-weight: 700; transform: rotate(-2deg); }
.speech { display: inline-block; max-width: 34rem; padding: 1rem 1.4rem; color: var(--asphalt); background: var(--bone); border: 5px solid var(--asphalt); border-radius: 24px 24px 24px 3px; font-family: var(--sign); box-shadow: 10px 10px 0 var(--red); }

.chain { position: absolute; top: -5px; z-index: 20; transform-origin: top; animation: sway 3.4s ease-in-out infinite; }
.chain-left { left: 10vw; } .chain-right { right: 13vw; animation-delay: -1.2s; }
.chain i { display: block; width: 26px; height: 42px; margin-top: -8px; border: 6px solid var(--bone); border-radius: 18px; transform: rotate(90deg); background: rgba(16,16,18,.5); }
@keyframes sway { 50% { transform: rotate(5deg); } }

.bay-label { position: absolute; top: 6rem; left: 5vw; z-index: 5; padding: .3rem 1.1rem; font-family: var(--comic); color: var(--yellow); font-size: clamp(2.6rem, 7vw, 7rem); text-shadow: 5px 5px 0 var(--red), 9px 9px 0 var(--asphalt); transform: rotate(-4deg); }
.diagnosis { background: radial-gradient(circle at 46% 47%, rgba(140,198,62,.16), transparent 25rem), linear-gradient(135deg, var(--violet), var(--asphalt) 70%); }
.monster-stage { position: absolute; left: 8vw; bottom: 4vh; width: min(56vw, 700px); height: 72vh; }
.monster-shadow { position: absolute; inset: 20% 8% 0; background: var(--violet); border-radius: 45% 45% 18% 18%; box-shadow: 0 0 90px rgba(42,18,53,.9); }
.monster-head { position: absolute; top: 5%; left: 32%; width: 36%; height: 22%; background: linear-gradient(var(--rust), var(--violet)); border: 8px solid var(--asphalt); border-radius: 44% 44% 32% 32%; display: flex; align-items: center; justify-content: center; gap: 18%; }
.horn { position: absolute; top: 2%; width: 24%; height: 14%; border: 20px solid var(--bone); border-bottom: 0; border-radius: 50% 50% 0 0; z-index: 2; }
.horn-left { left: 20%; transform: rotate(-33deg); } .horn-right { right: 20%; transform: rotate(33deg); }
.grin { position: absolute; bottom: 14%; width: 48%; height: 12px; border-bottom: 6px solid var(--green); border-radius: 50%; }
.monster-body { position: absolute; left: 18%; bottom: 8%; width: 64%; height: 58%; border-radius: 42% 42% 22% 22%; background: linear-gradient(120deg, var(--rust), var(--violet)); border: 10px solid var(--asphalt); }
.belly-window { position: absolute; inset: 22% 14%; padding: 1rem; overflow: hidden; border: 4px solid var(--cyan); border-radius: 32px; background: rgba(73,243,255,.12); box-shadow: inset 0 0 30px rgba(73,243,255,.24), 0 0 35px rgba(73,243,255,.35); font: .7rem var(--mono); color: var(--cyan); }
.belly-window span { display: block; margin: .6rem 0; }
.scan-line { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: rgba(73,243,255,.45); animation: scan 2.2s linear infinite; }
@keyframes scan { to { top: 100%; } }
.arm { position: absolute; top: 42%; width: 26%; height: 14%; background: repeating-linear-gradient(90deg, var(--bone) 0 16px, var(--rust) 16px 32px); border: 7px solid var(--asphalt); border-radius: 30px; }
.arm-left { left: 0; transform: rotate(31deg); } .arm-right { right: -2%; transform: rotate(-27deg); }
.workbench { position: absolute; left: 5%; right: 0; bottom: 3%; height: 11%; background: var(--rust); border-top: 8px solid var(--yellow); transform: skewX(-11deg); }
.xray-panels { position: absolute; right: 5vw; top: 22vh; width: min(33vw, 430px); display: grid; gap: 1rem; }
.xray-card { padding: 1rem; border: 3px solid var(--cyan); color: var(--cyan); background: linear-gradient(90deg, rgba(73,243,255,.12), rgba(16,16,18,.7)); font-family: var(--mono); transform: rotate(var(--r, 2deg)); box-shadow: 0 0 30px rgba(73,243,255,.14); }
.xray-card:nth-child(2) { --r: -3deg; color: var(--green); border-color: var(--green); } .xray-card:nth-child(3) { --r: 4deg; color: var(--yellow); border-color: var(--yellow); }
.xray-card b { display: block; font-family: var(--sign); font-size: 1.4rem; }
.gauge-bank { position: absolute; right: 7vw; bottom: 12vh; display: flex; gap: 1rem; }
.gauge { position: relative; width: 118px; height: 118px; border: 8px solid var(--bone); border-radius: 50%; background: radial-gradient(circle, var(--asphalt) 45%, var(--rust)); box-shadow: inset 0 0 20px #000; }
.gauge .needle { position: absolute; left: 50%; top: 50%; width: 5px; height: 43%; background: var(--red); transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--needle, -45deg)); border-radius: 4px; }
.gauge em { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: .7rem var(--mono); color: var(--yellow); }
.comic-pop { position: absolute; right: 14vw; top: 11vh; margin: 0; font-family: var(--comic); font-size: clamp(4rem, 10vw, 10rem); color: var(--yellow); text-shadow: 7px 7px 0 var(--red), 12px 12px 0 var(--asphalt); transform: rotate(13deg) scale(var(--pop, .8)); transition: transform .2s ease; }

.tool-chorus { background: linear-gradient(160deg, var(--asphalt), #21101a 55%, var(--rust)); }
.lift-platform { position: absolute; left: -12vw; right: -12vw; bottom: 20vh; height: 26vh; background: repeating-linear-gradient(90deg, rgba(246,196,69,.32) 0 4px, transparent 4px 42px), linear-gradient(135deg, var(--yellow), var(--rust)); border: 10px solid var(--asphalt); transform: rotate(-8deg); box-shadow: 0 35px 0 rgba(0,0,0,.35); }
.tool-track { position: absolute; top: 33vh; left: 0; display: flex; gap: 3vw; padding: 0 8vw; transform: translateX(var(--tool-x, 0)); transition: transform .08s linear; }
.tool-card { flex: 0 0 clamp(260px, 28vw, 420px); height: 280px; padding: 1.2rem; border: 7px solid var(--asphalt); color: var(--asphalt); background: var(--bone); box-shadow: 14px 18px 0 rgba(0,0,0,.45); transform: rotate(var(--tool-r, -5deg)); font-family: var(--mono); }
.tool-card b { display: block; font: 2.2rem var(--sign); color: var(--red); }
.tool-card::after { content: ""; display: block; width: 70%; height: 80px; margin: 2rem auto; background: var(--rust); clip-path: polygon(0 40%, 68% 40%, 78% 0, 100% 22%, 84% 51%, 100% 80%, 78% 100%, 68% 60%, 0 60%); }
.torque { --tool-r: 4deg; background: var(--yellow); } .sockets { --tool-r: -2deg; background: var(--cyan); } .rag { --tool-r: 7deg; background: var(--green); } .goblin { --tool-r: -7deg; background: var(--red); color: var(--bone); }
.sound-row { position: absolute; left: 8vw; right: 8vw; bottom: 8vh; display: flex; justify-content: space-between; font: clamp(2.6rem, 8vw, 8rem) var(--comic); color: var(--bone); }
.sound-row span { animation: bounce 1.2s infinite ease-in-out; text-shadow: 6px 6px var(--violet); } .sound-row span:nth-child(2) { animation-delay: .2s; } .sound-row span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 50% { transform: translateY(-22px) rotate(-4deg); } }

.weld-bloom { background: radial-gradient(circle at 60% 45%, rgba(227,52,47,.45), transparent 18rem), linear-gradient(180deg, #050404, var(--asphalt)); }
.seam { position: absolute; inset: 28vh 7vw auto; height: 280px; filter: drop-shadow(0 0 22px var(--yellow)); }
.seam svg { width: 100%; height: 100%; overflow: visible; }
.seam path { fill: none; stroke: var(--yellow); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1250; stroke-dashoffset: var(--spark-offset, 1250); }
.lava-veins { position: absolute; inset: 42% 2% auto; height: 30px; background: linear-gradient(90deg, transparent, var(--red), var(--yellow), var(--cyan), transparent); filter: blur(7px); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scaleY(2.2); } }
.spark-field { position: absolute; inset: 0; pointer-events: none; }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); animation: spark .85s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; } }
.smoke { position: absolute; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient(circle, rgba(242,226,189,.08), transparent 63%); filter: blur(18px); animation: smoke 10s infinite alternate ease-in-out; }
.smoke-one { left: -15vw; top: 16vh; } .smoke-two { right: -20vw; bottom: 0; animation-delay: -4s; }
@keyframes smoke { to { transform: translate(8vw, -8vh) scale(1.25); } }
.roar { left: 8vw; right: auto; top: auto; bottom: 10vh; color: var(--cyan); }
.weld-note { position: absolute; right: 8vw; bottom: 12vh; max-width: 27rem; padding: 1rem; background: rgba(16,16,18,.78); border: 3px dashed var(--bone); color: var(--bone); font: 1rem/1.55 var(--mono); transform: rotate(2deg); }

.ignition-yard { background: linear-gradient(180deg, #180d10, var(--asphalt)); }
.sodium-lights { position: absolute; inset: 0; background: radial-gradient(circle at 24% 0, rgba(246,196,69,.45), transparent 22rem), radial-gradient(circle at 78% 0, rgba(246,196,69,.32), transparent 20rem); }
.yard-door { position: absolute; left: 8vw; right: 8vw; bottom: 28vh; height: 36vh; border: 9px solid var(--rust); background: repeating-linear-gradient(90deg, #22100b 0 28px, #34180e 28px 56px); transform: perspective(600px) rotateX(12deg); }
.repaired-machine { position: absolute; left: 18vw; bottom: 20vh; width: 48vw; height: 18vh; animation: shudder 1.6s infinite; }
.car-body { position: absolute; inset: 10% 0 30%; background: linear-gradient(90deg, var(--red), var(--rust)); border: 8px solid var(--asphalt); border-radius: 60% 28% 18px 18px; box-shadow: inset 0 0 0 6px rgba(242,226,189,.18), 0 0 35px rgba(227,52,47,.45); }
.wheel { position: absolute; bottom: 0; width: 110px; height: 110px; border: 18px solid var(--asphalt); border-radius: 50%; background: radial-gradient(circle, var(--cyan) 0 14%, #222 15% 45%, #050505 46%); }
.wheel-a { left: 10%; } .wheel-b { right: 15%; }
.tail-light { position: absolute; right: -12px; top: 40%; width: 40px; height: 30px; background: var(--red); box-shadow: 0 0 30px var(--red); }
@keyframes shudder { 45% { transform: translateX(8px) rotate(.5deg); } 50% { transform: translateX(-5px); } }
.monster-salute { position: absolute; right: 5vw; bottom: 13vh; width: 25vw; height: 54vh; background: linear-gradient(var(--violet), #09060a); border-radius: 50% 50% 0 0; box-shadow: -20px 0 0 var(--rust); opacity: .9; }
.monster-salute::before { content: ""; position: absolute; left: -35%; top: 18%; width: 55%; height: 14%; background: repeating-linear-gradient(90deg, var(--bone) 0 14px, var(--rust) 14px 28px); border-radius: 40px; transform: rotate(-45deg); }
.oil-prints { position: absolute; left: 8vw; bottom: 7vh; display: flex; gap: 1rem; }
.oil-prints a { width: 92px; height: 64px; display: grid; place-items: center; color: var(--green); text-decoration: none; font: .72rem var(--mono); background: radial-gradient(ellipse, #030303 0 55%, transparent 58%); transform: rotate(var(--p, -8deg)); }
.oil-prints a:nth-child(even) { --p: 8deg; }
.ignition-yard h2 { position: absolute; left: 7vw; top: 9vh; margin: 0; font: clamp(5rem, 16vw, 16rem)/.75 var(--glitch); color: var(--yellow); text-shadow: 10px 10px 0 var(--red), 18px 18px 0 var(--violet); }
.final { position: absolute; right: 9vw; top: 21vh; max-width: 24rem; }

@media (max-width: 820px) {
  .key-nav { right: 1vw; transform: scale(.75); }
  .jaw-frame { width: 94vw; height: 55vh; }
  .monster-stage { width: 88vw; left: 3vw; opacity: .75; }
  .xray-panels, .gauge-bank { right: 4vw; width: 88vw; }
  .xray-panels { top: 28vh; }
  .gauge-bank { bottom: 6vh; transform: scale(.78); transform-origin: right bottom; }
  .tool-track { top: 39vh; }
  .weld-note { left: 8vw; right: 8vw; bottom: 8vh; }
  .repaired-machine { width: 76vw; left: 5vw; }
  .monster-salute { opacity: .45; width: 40vw; }
}