/* scenes/rocketstack.js -- the rocket put together, fuelled and launched */
.gscene-rocketstack .gscroll-sticky { background: #6fa6e8; }
.gscene-rocketstack .gscene-stage { background: none; }
.rs-sky { position: absolute; inset: 0; pointer-events: none; }
.rs-sky i { position: absolute; inset: 0; }
.rs-day { background: linear-gradient(180deg, #3d7fd6 0%, #6fa6e8 45%, #b9dcf7 78%, #e9f4ff 100%); }
.rs-space {
  opacity: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, #dfe8ff 50%, transparent 51%), radial-gradient(1px 1px at 61% 38%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 79% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 91% 58%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 82%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 53% 80%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #02040a 0%, #071027 60%, #1b3566 100%);
}
.rs-label {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; max-width: min(46vw, 320px);
  display: flex; flex-direction: column; gap: 2px; padding: 9px 14px 10px; border-radius: 14px;
  background: rgba(8, 12, 24, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transition: opacity 0.25s;
}
.rs-label.on { opacity: 1; }
.rs-label.pop { animation: rs-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.rs-label b { font: 800 1.02rem/1.2 var(--display); color: #fff; }
.rs-label span { font: 700 0.86rem/1.35 var(--display); color: var(--sky); font-variant-numeric: tabular-nums; }
.rs-bar { display: none; height: 7px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fd3ff, #e8f6ff); transform-origin: left; transform: scaleX(0); transition: transform 0.2s; }
.rs-label.has-bar .rs-bar { display: block; }
@keyframes rs-pop { from { scale: 0.86; } to { scale: 1; } }
@media (max-width: 560px) { .rs-label { max-width: calc(100vw - 48px); align-items: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .rs-label.pop { animation: none; } }
