* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
}

.scene {
  position: fixed;
  inset: 0;
  background: url("destruction-bg.jpg") center center / cover no-repeat;
}

.warehouse {
  position: fixed;
  top: 46%;
  left: 24%;
  width: 130px;
  height: 130px;
  z-index: 5;
  filter: drop-shadow(2px 8px 6px rgba(0, 0, 0, 0.4));
}

.warehouse.hit {
  animation: shake 0.4s ease;
}

.missile {
  position: fixed;
  top: 6%;
  right: -100px;
  z-index: 6;
  transform: rotate(-32deg);
}

.missile.fly {
  animation: missileFly 3.2s linear forwards;
}

@keyframes missileFly {
  from {
    right: -100px;
    top: 6%;
    transform: rotate(-32deg);
  }
  to {
    right: 71%;
    top: 54%;
    transform: rotate(-32deg);
  }
}

.explosion {
  position: fixed;
  top: 54%;
  left: 29%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d5 0%, #ffb347 30%, #ff5f2f 55%, rgba(255, 95, 47, 0) 75%);
  opacity: 0;
  z-index: 7;
  pointer-events: none;
}

.explosion.boom {
  animation: boom 0.6s ease-out forwards;
}

@keyframes boom {
  0% {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    opacity: 1;
  }
  60% {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    opacity: 1;
  }
  100% {
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    opacity: 0;
  }
}

.debris-field {
  position: fixed;
  top: 54%;
  left: 29%;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
}

.debris-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  opacity: 0;
  animation: debrisPop 1s ease-out forwards;
}

@keyframes debrisPop {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.3);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 60px)) rotate(var(--rot)) scale(0.9);
    opacity: 0;
  }
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}