/* Launchpad room: coming soon. A rocket being built at its tower (index.html #launch): the crane lowers the nose
 * cone, panels of the upper stage fill in, a welder sparks at the joint, a drone brings the next panel, the
 * searchlights sweep and the stars twinkle. Everything is CSS animation on the inline SVG; still for reduced motion. */

.launch {
  width: min(820px, 100%); margin-top: 18px;
  display: grid; justify-items: center; gap: 14px;
}
.launch-art {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--edge); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 62, 165, .15), 0 18px 50px rgba(10, 2, 24, .6), 0 0 40px rgba(255, 62, 165, .18);
}
.launch-art * { transform-box: fill-box; }

.launch-text { display: grid; justify-items: center; gap: 8px; max-width: 560px; }
.launch-text p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.5; }
.launch-text small { color: var(--muted); font-family: var(--head); letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.launch-soon {
  margin: 0; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 8px;
  font-size: clamp(32px, 6vw, 56px); line-height: 1; transform: skewX(-6deg);
  color: #fff; text-shadow: 0 0 10px #ff3ea5, 0 0 28px #ff3ea5, 0 0 48px rgba(255, 106, 92, .8);
  animation: lp-neon 6s infinite;
}
.launch-bar {
  width: min(360px, 80vw); height: 10px; border-radius: 10px; overflow: hidden;
  background: rgba(18, 6, 31, .8); border: 1px solid var(--edge);
}
.launch-bar span {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(-45deg, #ffb347 0 10px, #ff3ea5 10px 20px);
  background-size: 28px 100%;
  animation: lp-stripes .9s linear infinite;
}

/* stars, beacons, searchlights */
.lp-stars circle { animation: lp-twinkle 3.2s ease-in-out infinite; }
.lp-stars circle:nth-child(3n) { animation-delay: -1.1s; }
.lp-stars circle:nth-child(3n + 1) { animation-delay: -2.2s; animation-duration: 4.1s; }
.lp-beacon { animation: lp-blink 1.4s steps(1) infinite; }
.lp-beam { transform-origin: 50% 100%; animation: lp-sweep 7s ease-in-out infinite alternate; }
.lp-beam-b { animation-delay: -3.5s; }

/* the crane lowers the nose cone onto the frame and lifts it again; the cable pays out with it */
.lp-hook { animation: lp-lower 6s ease-in-out infinite; }
.lp-cable { transform-origin: 50% 0; animation: lp-cable 6s ease-in-out infinite; }

/* upper stage panels fill in from the bottom, then the cycle starts again */
.lp-panel { opacity: 0; animation: lp-panel 10s ease-out infinite; }
.lp-panel.b { animation-delay: 1.6s; }
.lp-panel.c { animation-delay: 3.2s; }
.lp-panel.d { animation-delay: 4.8s; }
.lp-blueprint { animation: lp-dash 1.6s linear infinite; }

/* welding */
.lp-flash { animation: lp-flash .5s steps(2) infinite; transform-origin: center; }
.lp-sparks circle { animation: lp-spark .9s ease-out infinite; }

/* the drone shuttles next to the rocket with a panel */
.lp-drone { animation: lp-drone 9s ease-in-out infinite; }
.lp-prop { transform-origin: center; animation: lp-prop .12s linear infinite; }

/* steam at the base */
.lp-puff { transform-origin: center; animation: lp-puff 4.5s ease-out infinite; }
.lp-puff.p2 { animation-delay: -1.5s; }
.lp-puff.p3 { animation-delay: -3s; }

@keyframes lp-twinkle { 50% { opacity: .25; } }
@keyframes lp-blink { 50% { opacity: .15; } }
@keyframes lp-sweep { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes lp-lower { 0%, 12% { transform: translateY(-13px); } 45%, 62% { transform: translateY(0); } 100% { transform: translateY(-13px); } }
@keyframes lp-cable { 0%, 12% { transform: scaleY(.19); } 45%, 62% { transform: scaleY(1); } 100% { transform: scaleY(.19); } }
@keyframes lp-panel { 0% { opacity: 0; transform: translateX(-10px); } 6% { opacity: 1; transform: none; } 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes lp-dash { to { stroke-dashoffset: -22; } }
@keyframes lp-flash { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes lp-spark {
  0% { transform: translate(0, 0); opacity: 1; }
  60% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.35), calc(var(--dy) + 26px)); opacity: 0; }
}
@keyframes lp-drone {
  0% { transform: translate(470px, 150px); }
  35% { transform: translate(400px, 132px); }
  50% { transform: translate(392px, 140px); }
  85% { transform: translate(480px, 170px); }
  100% { transform: translate(470px, 150px); }
}
@keyframes lp-prop { 50% { transform: scaleX(.3); } }
@keyframes lp-puff { 0% { transform: scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0, -26px) scale(1.6); opacity: 0; } }
@keyframes lp-neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
@keyframes lp-stripes { to { background-position: 28px 0; } }

@media (prefers-reduced-motion: reduce) {
  .launch *, .launch-soon { animation: none !important; }
  .lp-panel { opacity: 1; }
  .lp-drone { transform: translate(470px, 150px); }
}