* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; }
body { display: grid; place-items: center; height: 100dvh; }
#scene { width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; background: #fff; cursor: default; outline: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#scene > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.heroFlight { animation: flight 2.4s ease-in-out infinite; }
.wind path { animation: wind var(--speed) linear var(--delay) infinite; }
.target, .lasers, .impact, #fragments { visibility: hidden; }
[data-phase="arriving"] .target[data-active],
[data-phase="ready"] .target[data-active],
[data-phase="firing"] .target[data-active] { visibility: visible; }
[data-phase="arriving"] .target[data-active] { animation: arrive .65s ease-out both; transform-origin: 1290px 590px; }
.jetFlight { animation: flight 1.8s ease-in-out infinite reverse; }
[data-phase="firing"] .lasers { visibility: visible; animation: beam .18s ease-out both; }
[data-phase="firing"] .impact { visibility: visible; }
[data-phase="breaking"] .impact { visibility: visible; animation: fade .5s ease-out both; }
[data-phase="firing"] .burst { animation: burst .6s ease-out both; }
[data-phase="breaking"] #fragments { visibility: visible; }
[data-phase="breaking"] .fragment { animation: scatter 1.35s cubic-bezier(.15,.45,.45,1) both; }
[data-phase="breaking"] .fragment use { animation: tumble 1.35s ease-out both; }
@keyframes flight { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes wind { from { transform: translateX(200px); opacity: 0; } 15%,80% { opacity: .8; } to { transform: translateX(-1550px); opacity: 0; } }
@keyframes arrive { from { transform: translateX(180px) scale(.12); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes beam { from { stroke-dasharray: 0 1200; } to { stroke-dasharray: 1200 0; } }
@keyframes burst { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes fade { to { opacity: 0; } }
@keyframes scatter { 0% { transform: translate(0,0); opacity: 1; } 55% { transform: translate(var(--dx),var(--dy)); opacity: 1; } 100% { transform: translate(var(--end-x),var(--end-y)); opacity: 0; } }
@keyframes tumble { to { transform: rotate(var(--turn)); } }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .heroFlight, .jetFlight, .wind path { animation: none; }
  .wind { display: none; }
  [data-phase="arriving"] .target[data-active] { animation: none; }
  [data-phase="breaking"] .fragment { animation: fade .4s both; }
  [data-phase="breaking"] .fragment use, [data-phase="firing"] .burst { animation: none; }
}