:root {
  --red: #e50012;
  --red-dark: #b9000d;
  --gray: #c6c6c8;
  --gray-dark: #97979b;
  --stage-ratio: 0.8026;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; }

body {
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
}

a { color: inherit; text-decoration: none; }

.site-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility .35s ease;
}

.loader-gear {
  display: block;
  color: var(--red);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(64px, 15vw, 116px);
  line-height: 1;
  animation: loader-spin 1.2s linear infinite;
}

.poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.is-loaded .site-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.is-loaded .poster {
  opacity: 1;
  visibility: visible;
}

.poster {
  --art-w: min(100vw, calc(100svh * var(--stage-ratio)));
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 100vw;
  height: 100svh;
  container-type: inline-size;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 54%, #fff 0 24%, rgba(255,255,255,.94) 48%, rgba(247,247,247,.96) 72%, #ededee 130%),
    #fff;
}

.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.22) 49%, transparent 57%);
  mix-blend-mode: screen;
}

.ambient { position: absolute; border-radius: 999px; filter: blur(60px); opacity: .65; }
.ambient-one { width: 44%; height: 28%; top: 34%; left: 26%; background: rgba(255,255,255,.9); }
.ambient-two { width: 32%; height: 18%; bottom: 7%; left: 30%; background: rgba(168,168,168,.16); }

.clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.clickable:hover { filter: none; }
.clickable:focus-visible { outline: 3px solid var(--red); outline-offset: 8px; border-radius: 6px; }

.exact-sprite {
  position: absolute;
  z-index: 3;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

.service-engine {
  left: 3vw;
  top: 3vh;
  width: calc(var(--art-w) * .3655);
  height: calc(var(--art-w) * .2406);
  background-image: url("assets/service-engine.png");
}
.service-transmission {
  right: 3vw;
  top: 4vh;
  width: calc(var(--art-w) * .4724);
  height: calc(var(--art-w) * .156);
  background-image: url("assets/service-transmission.png");
}
.headline {
  left: 50%;
  top: calc(50% - var(--art-w) * .56);
  width: calc(var(--art-w) * .84);
  height: calc(var(--art-w) * .3832);
  translate: -50% 0;
  background-image: url("assets/headline-red.png");
  background-image: image-set(
    url("assets/headline-red.webp") type("image/webp"),
    url("assets/headline-red.png") type("image/png")
  );
  background-position: 0 0;
  background-size: 100% 100%;
  mix-blend-mode: normal;
}
.feature-parts {
  left: 3vw;
  top: calc(50% - var(--art-w) * .3);
  width: calc(var(--art-w) * .2406);
  height: calc(var(--art-w) * .2184);
  background-image: none;
}
.feature-parts::before,
.feature-parts::after {
  content: "";
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: multiply;
}
.feature-parts::before {
  inset: 0 0 auto 0;
  height: 42.9%;
  background-image: url("assets/feature-parts-label.png");
}
.feature-parts::after {
  left: 16.7%;
  top: 44.9%;
  width: 61.1%;
  height: 55.1%;
  background-image: url("assets/feature-parts-icon.png");
}
.feature-mileage {
  right: 3vw;
  top: calc(50% - var(--art-w) * .3);
  width: calc(var(--art-w) * .2005);
  height: calc(var(--art-w) * .2139);
  background-image: url("assets/feature-mileage.png");
}
.feature-oil {
  right: 3vw;
  top: 72%;
  width: calc(var(--art-w) * .1961);
  height: calc(var(--art-w) * .1872);
  background-image: url("assets/feature-oil.png");
}

.engine {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(50% + var(--art-w) * .1);
  width: calc(var(--art-w) * .54);
  aspect-ratio: 1122 / 1402;
  translate: -50% 0;
}
.powertrain-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  opacity: 0;
  transform: scale(.93) rotate(-2deg);
  transform-origin: 50% 55%;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .75, .25, 1);
  will-change: opacity, transform;
}
.powertrain-frame.is-active {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.engine img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 13px rgba(0,0,0,.18)); user-select: none; }
.engine-shadow { position: absolute; z-index: 1; left: 9%; right: 4%; bottom: 5%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.2); filter: blur(18px); }

.action-buttons {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: calc(50% - var(--art-w) * .11);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--art-w) * .012);
  width: calc(var(--art-w) * .49);
  min-width: 230px;
}

.diagnostics-button {
  rotate: -2deg;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(var(--art-w) * .085);
  min-height: 44px;
  padding: 0 18px;
  border: 4px solid var(--red);
  border-radius: 7px;
  background: #a8ff00;
  color: #111;
  box-shadow: none;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  font-size: clamp(15px, calc(var(--art-w) * .034), 24px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, translate .18s ease, rotate .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.diagnostics-button:hover { background: #bdff32; translate: 0 -5px; rotate: -1deg; }
.diagnostics-button:active { background: #91e600; translate: 0 -1px; }
.diagnostics-button:focus-visible { outline: 4px solid var(--red); outline-offset: 5px; }
.diagnostics-button[hidden] { display: none; }
.rustore-button { background: #087bff; color: #fff; }
.rustore-button:hover { background: #278eff; }
.rustore-button:active { background: #0068dc; }

.note-left {
  left: 3vw;
  bottom: 4vh;
  width: calc(var(--art-w) * .1872);
  height: calc(var(--art-w) * .1248);
  background-image: url("assets/note-left.png");
}
.note-right {
  right: 3vw;
  bottom: 4vh;
  width: calc(var(--art-w) * .2228);
  height: calc(var(--art-w) * .1203);
  background-image: url("assets/note-right.png");
}

@media (max-width: 560px) {
  .service-engine { left: 2vw; }
  .service-transmission { right: 2vw; }
  .feature-parts { left: 2vw; }
  .feature-mileage, .feature-oil { right: 2vw; }
  .note-left { left: 2vw; }
  .note-right { right: 2vw; }
}

@keyframes title-float {
  0%, 100% { transform: translate3d(-5px, -7px, 0) rotate(-.25deg); }
  50% { transform: translate3d(5px, 7px, 0) rotate(.25deg); }
}

@keyframes engine-float {
  0%, 100% { transform: translate3d(5px, 8px, 0) rotate(.2deg); }
  50% { transform: translate3d(-5px, -8px, 0) rotate(-.2deg); }
}

@keyframes loader-spin {
  to { transform: rotate(1turn); }
}

.headline { animation: title-float 8s ease-in-out infinite; }
.engine { animation: engine-float 8s ease-in-out infinite; }

@media (max-width: 700px) {
  .feature-parts,
  .feature-mileage {
    top: calc(50% - var(--art-w) * .16);
  }

  .engine {
    top: calc(50% + var(--art-w) * .1);
    width: calc(var(--art-w) * .59);
  }
}

@media (min-width: 701px) {
  .headline {
    width: min(calc(var(--art-w) * .84), 67vw);
    height: auto;
    aspect-ratio: 2.192 / 1;
  }

  .engine {
    width: min(
      calc(var(--art-w) * .54),
      calc(37.6141svh - var(--art-w) * .08003)
    );
  }

  .has-three-actions .engine {
    width: min(
      calc(var(--art-w) * .54),
      calc(37.6141svh - var(--art-w) * .16006)
    );
  }
}

.has-three-actions .engine {
  top: calc(50% + var(--art-w) * .2);
}

@media (prefers-reduced-motion: reduce) {
  .headline, .engine { transform: none !important; animation: none !important; }
  .powertrain-frame { transform: none; transition-duration: .01s; }
  .loader-gear { animation-duration: 2.4s; }
}