.salvo-missile-layer {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.salvo-scroll-missile {
  --missile-size: 250px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--missile-size);
  opacity: 0;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .78));
  transform-origin: center;
  will-change: transform, opacity;
}

.salvo-scroll-missile img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.salvo-scroll-missile::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 93%;
  top: 41%;
  width: 88%;
  height: 18%;
  border-radius: 50%;
  background: linear-gradient(90deg,
    rgba(255, 244, 204, .92) 0%,
    rgba(244, 166, 42, .7) 13%,
    rgba(212, 96, 16, .34) 35%,
    rgba(100, 100, 96, .12) 68%,
    transparent 100%);
  filter: blur(3px);
  transform-origin: left center;
  animation: salvo-exhaust-pulse 90ms steps(2, end) infinite;
}

.salvo-scroll-missile::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 92%;
  top: 37%;
  width: 20%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at left,
    #fffbe0 0 13%,
    #ffc94e 27%,
    rgba(239, 90, 16, .82) 52%,
    transparent 74%);
  filter: blur(1px);
  transform-origin: left center;
  animation: salvo-flame-pulse 75ms ease-in-out infinite alternate;
}

@keyframes salvo-exhaust-pulse {
  from { transform: scaleX(.82) scaleY(.8); opacity: .65; }
  to { transform: scaleX(1.06) scaleY(1.15); opacity: .9; }
}

@keyframes salvo-flame-pulse {
  from { transform: scaleX(.75) scaleY(.82); opacity: .82; }
  to { transform: scaleX(1.08) scaleY(1.08); opacity: 1; }
}

@media (max-width: 640px) {
  .salvo-scroll-missile {
    filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .72));
  }

  .salvo-scroll-missile::before { width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .salvo-missile-layer { display: none !important; }
}