.visualizer {
  background:
    linear-gradient(90deg, #0204079c 0, transparent 46%, #02040748 100%),
    linear-gradient(180deg, #02040724 0, #02040714 55%, #020407bf 100%),
    url('garage-bg-v1.png') center center / cover no-repeat;
}

.visualizer::before {
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 53%, transparent 22%, #02030524 58%, #020305a8 100%);
  background-size: auto;
  mask-image: none;
  opacity: 1;
}

.stage-copy {
  top: 4.5%;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.stage-copy span {
  font: 700 9px Inter, sans-serif;
  letter-spacing: .32em;
  color: var(--blue);
  text-shadow: 0 2px 12px #000;
}

.stage-copy h1 {
  margin: 13px 0 0;
  padding-left: .14em;
  font: 900 clamp(58px, 6vw, 96px)/.8 'Barlow Condensed', sans-serif;
  letter-spacing: .14em;
  color: #f6f7f8;
  text-shadow: 0 4px 28px #000, 0 0 22px #00d9ff36;
}

.horizon {
  opacity: .38;
}

@media (max-width: 560px) {
  .stage-copy {
    top: 4%;
  }

  .stage-copy h1 {
    font-size: 50px;
  }
}

/* Vehicle delivery: animate the real background shutter directly below RACER. */
.garage-door-frame {
  position: absolute;
  top: 26%;
  left: 32%;
  width: 34%;
  height: 29%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  border: 1px solid #222a32;
  background: #02050a;
  box-shadow: 0 0 0 4px #080b10, 0 12px 28px #000b, inset 0 0 38px #00bfff14;
}

.garage-tunnel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #00d9ff1f 0 1px, transparent 1px 18%, #00d9ff1a 18% 18.2%, transparent 18.2% 82%, #00d9ff1a 82% 82.2%, transparent 82.2%),
    linear-gradient(180deg, #010206 0, #07111c 56%, #111b24 57%, #020407 100%);
}

.garage-tunnel::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 43%;
  background: repeating-linear-gradient(90deg, transparent 0 15%, #00d9ff28 15% 15.6%), linear-gradient(165deg, transparent 49.5%, #a7ecff48 50%, transparent 50.5%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  opacity: .8;
}

.garage-shutter {
  position: absolute;
  inset: 0;
  transform: translateY(-103%);
  background: repeating-linear-gradient(180deg, #313943 0 5px, #151a21 5px 13px, #58616c 13px 14px);
  border-bottom: 7px solid #030507;
  box-shadow: 0 12px 25px #000d;
}

.garage-shutter::before,
.garage-shutter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #00d9ff;
  box-shadow: 0 0 18px #00d9ff;
  opacity: .65;
}

.garage-shutter::before { left: 4%; }
.garage-shutter::after { right: 4%; }
.garage-shutter i { position: absolute; left: 42%; right: 42%; bottom: 7%; height: 5px; background: #ff5a00; box-shadow: 0 0 15px #ff5a00; }

body.vehicle-changing .garage-door-frame,
body.vehicle-revealing .garage-door-frame { opacity: 1; }
body.vehicle-changing .garage-shutter { animation: shutter-close .68s cubic-bezier(.55, 0, .25, 1) both; }
body.vehicle-revealing .garage-door-frame { animation: door-frame-out 2.55s ease both; }
body.vehicle-revealing .garage-shutter { transform: translateY(0); animation: shutter-cycle 2.48s .04s cubic-bezier(.62, 0, .2, 1) both; }
body.vehicle-changing #car3d { opacity: 0; transition: opacity .22s .3s; }
body.vehicle-revealing .orbit-hint { opacity: 0; }
body.vehicle-revealing #car3d {
  transform-origin: 50% 58%;
  animation: vehicle-rollout 2.18s .08s cubic-bezier(.16, .72, .16, 1) both;
}

@keyframes shutter-close { from { transform: translateY(-103%); } to { transform: translateY(0); } }
@keyframes shutter-cycle {
  0%, 10% { transform: translateY(0); }
  38%, 78% { transform: translateY(-103%); }
  100% { transform: translateY(0); }
}
@keyframes door-frame-out { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vehicle-rollout {
  0%, 10% {
    opacity: 0;
    transform: translateY(-14%) scale(.07);
    filter: brightness(.16) blur(2px);
  }
  17% {
    opacity: .62;
    transform: translateY(-13.5%) scale(.1);
    filter: brightness(.32) blur(1px);
  }
  34% {
    opacity: 1;
    transform: translateY(-12%) scale(.18);
    filter: brightness(.52) blur(0);
  }
  58% {
    opacity: 1;
    transform: translateY(-8%) scale(.42);
    filter: brightness(.72);
  }
  79% {
    opacity: 1;
    transform: translateY(-3%) scale(.74);
    filter: brightness(.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.garage-action {
  position: absolute;
  top: 31%;
  left: 50%;
  z-index: 16;
  transform: translateX(-50%);
  padding: 7px 13px;
  border: 1px solid #00d9ff66;
  background: #02060bd9;
  color: #dffaff;
  font: 800 9px Inter, sans-serif;
  letter-spacing: .22em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 24px #00d9ff28;
}

body.vehicle-changing .garage-action::before { content: 'VEHICLE TRANSFER // GARAGE CLOSED'; }
body.vehicle-revealing .garage-action::before { content: 'ARRIVO DAL FONDO // DRIVE OUT'; }
body.painting .garage-action::before { content: 'PAINT CREW // MANUAL REFINISH'; }
body.wheel-changing .garage-action::before { content: 'PIT CREW // WHEEL CHANGE'; }
body.vehicle-changing .garage-action,
body.vehicle-revealing .garage-action,
body.painting .garage-action { animation: action-label 1.5s ease both; }
body.wheel-changing .garage-action { animation: action-label 2.7s ease both; }
@keyframes action-label { 0% { opacity: 0; transform: translate(-50%, -8px); } 18%, 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Four-person manual paint crew: two mechanics enter from each side. */
.paint-crew { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.mechanic {
  position: absolute;
  bottom: 10%;
  width: 42px;
  height: 116px;
  opacity: 0;
  filter: drop-shadow(0 8px 7px #000c);
  transform-origin: 50% 100%;
}
.mechanic.l1 { left: 18%; }
.mechanic.l2 { left: 27%; transform: scale(.88); }
.mechanic.r1 { right: 27%; transform: scale(.9); }
.mechanic.r2 { right: 18%; }
.mechanic .head {
  position: absolute;
  left: 11px;
  top: 0;
  width: 21px;
  height: 24px;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(180deg, #f36b24 0 35%, #131b24 36% 64%, #b9d4e7 65% 69%, #202832 70%);
  border: 1px solid #65717d;
}
.mechanic .torso {
  position: absolute;
  left: 6px;
  top: 22px;
  width: 31px;
  height: 56px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(90deg, #12171e, #39434e 48%, #151b22);
  border: 1px solid #59636d;
  box-shadow: inset 0 15px 0 #ff5a001d;
}
.mechanic .torso::before { content: ''; position: absolute; left: 4px; right: 4px; top: 18px; height: 2px; background: #00d9ff; box-shadow: 0 0 7px #00d9ff; }
.mechanic .torso::after { content: ''; position: absolute; left: 3px; top: 51px; width: 9px; height: 38px; border-radius: 0 0 5px 5px; background: #171d25; box-shadow: 16px 0 #171d25; }
.mechanic .arm { position: absolute; top: 33px; width: 28px; height: 9px; border-radius: 8px; background: #303944; transform-origin: 5px 50%; }
.mechanic.left .arm { left: 27px; transform: rotate(-12deg); }
.mechanic.right .arm { right: 27px; transform: rotate(12deg); }
.mechanic .tool { position: absolute; top: 29px; width: 12px; height: 17px; border-radius: 2px; background: #b9c6d1; border: 2px solid #1b222a; }
.mechanic.left .tool { left: 49px; transform: rotate(-9deg); }
.mechanic.right .tool { right: 49px; transform: rotate(9deg); }
.mechanic .mist { position: absolute; top: 24px; width: 102px; height: 47px; opacity: 0; filter: blur(4px); background: linear-gradient(90deg, color-mix(in srgb, var(--paint-spray) 74%, transparent), transparent); clip-path: polygon(0 43%, 100% 0, 100% 100%); }
.mechanic.left .mist { left: 58px; }
.mechanic.right .mist { right: 58px; transform: scaleX(-1); }
.mechanic .spare-wheel {
  position: absolute;
  top: 61px;
  width: 38px;
  height: 38px;
  z-index: 3;
  border: 9px solid #050609;
  border-radius: 50%;
  background: radial-gradient(circle, #00d9ff 0 8%, #9ca7b3 9% 18%, #252b32 19% 43%, #08090b 44%);
  box-shadow: inset 0 0 0 2px #5f6872, 0 5px 10px #000c;
  opacity: 0;
}
.mechanic.left .spare-wheel { left: 40px; }
.mechanic.right .spare-wheel { right: 40px; }
.mechanic .wheel-wrench {
  position: absolute;
  top: 55px;
  width: 32px;
  height: 5px;
  z-index: 4;
  border-radius: 4px;
  background: linear-gradient(90deg, #78838e, #e9f4ff 45%, #5d6873);
  box-shadow: 0 0 6px #bcecff88;
  opacity: 0;
  transform-origin: 4px 50%;
}
.mechanic.left .wheel-wrench { left: 32px; }
.mechanic.right .wheel-wrench { right: 32px; }

body.painting .mechanic.left { animation: crew-enter-left 2.35s ease-in-out both; }
body.painting .mechanic.right { animation: crew-enter-right 2.35s ease-in-out both; }
body.painting .mechanic.l2 { animation-delay: .1s; }
body.painting .mechanic.r1 { animation-delay: .08s; }
body.painting .mechanic.r2 { animation-delay: .16s; }
body.painting .mechanic .arm { animation: spray-arm .28s .48s ease-in-out 5 alternate; }
body.painting .mechanic .mist { animation: spray-mist 1.35s .47s ease-in-out both; }

body.wheel-changing .orbit-hint { opacity: 0; }
body.wheel-changing .mechanic.left { animation: wheel-crew-left 2.72s ease-in-out both; }
body.wheel-changing .mechanic.right { animation: wheel-crew-right 2.72s ease-in-out both; }
body.wheel-changing .mechanic.l2 { animation-delay: .08s; }
body.wheel-changing .mechanic.r1 { animation-delay: .1s; }
body.wheel-changing .mechanic.r2 { animation-delay: .16s; }
body.wheel-changing .mechanic.left .spare-wheel { animation: wheel-swap-left 1.72s .4s ease-in-out both; }
body.wheel-changing .mechanic.right .spare-wheel { animation: wheel-swap-right 1.72s .4s ease-in-out both; }
body.wheel-changing .mechanic .wheel-wrench { animation: pit-wrench .2s .72s ease-in-out 7 alternate both; }

@keyframes crew-enter-left {
  0% { opacity: 0; translate: -145px 0; }
  18%, 78% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: -145px 0; }
}
@keyframes crew-enter-right {
  0% { opacity: 0; translate: 145px 0; }
  18%, 78% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 145px 0; }
}
@keyframes spray-arm { to { rotate: -8deg; } }
@keyframes spray-mist { 0%, 100% { opacity: 0; } 18%, 78% { opacity: .82; } }
@keyframes wheel-crew-left {
  0% { opacity: 0; translate: -155px 0; scale: 1; }
  16%, 34% { opacity: 1; translate: 0 0; scale: 1; }
  43%, 72% { opacity: 1; translate: 0 18px; scale: 1 .82; }
  82% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: -155px 0; scale: 1; }
}
@keyframes wheel-crew-right {
  0% { opacity: 0; translate: 155px 0; scale: 1; }
  16%, 34% { opacity: 1; translate: 0 0; scale: 1; }
  43%, 72% { opacity: 1; translate: 0 18px; scale: 1 .82; }
  82% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 155px 0; scale: 1; }
}
@keyframes wheel-swap-left {
  0% { opacity: 0; transform: translateX(-30px) rotate(0) scale(.7); }
  18% { opacity: 1; }
  52%, 78% { opacity: 1; transform: translateX(28px) rotate(540deg) scale(1); }
  100% { opacity: 0; transform: translateX(28px) rotate(720deg) scale(.45); }
}
@keyframes wheel-swap-right {
  0% { opacity: 0; transform: translateX(30px) rotate(0) scale(.7); }
  18% { opacity: 1; }
  52%, 78% { opacity: 1; transform: translateX(-28px) rotate(-540deg) scale(1); }
  100% { opacity: 0; transform: translateX(-28px) rotate(-720deg) scale(.45); }
}
@keyframes pit-wrench {
  0% { opacity: 1; rotate: -22deg; }
  100% { opacity: 1; rotate: 24deg; }
}

@media (max-width: 700px) {
  .garage-door-frame { top: 27%; left: 24%; width: 52%; height: 30%; }
  .paint-crew { transform: scale(.75); transform-origin: 50% 84%; }
  .mechanic.l1 { left: 12%; }
  .mechanic.l2 { left: 24%; }
  .mechanic.r1 { right: 24%; }
  .mechanic.r2 { right: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  body.vehicle-changing .garage-shutter,
  body.vehicle-revealing .garage-shutter,
  body.vehicle-revealing #car3d,
  body.painting .mechanic,
  body.painting .mechanic .arm,
  body.painting .mechanic .mist,
  body.wheel-changing .mechanic,
  body.wheel-changing .spare-wheel,
  body.wheel-changing .wheel-wrench { animation-duration: .01ms !important; }
}