/* Nepturnal Proxima2 – scena "razzo verso Marte".
   Scena di riferimento 1600x900: 1 px = 0.0625cqw (container query units sul riquadro .scene). */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #02040c; color: #e8edf5; font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: grid; place-items: center; overflow: hidden; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* riquadro 16:9 adattato alla finestra */
.stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); }
.view { position: absolute; inset: 0; overflow: hidden; background: #02040c; }
.view-svg object { display: block; width: 100%; height: 100%; }
#svg { display: none; }
#svg:target { display: block; }
#svg:target ~ #css { display: none; }

.scene { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.scene > * { position: absolute; }

.sky { inset: 0; background: linear-gradient(to bottom, #030716 0%, #101f4d 45%, #3b2f63 72%, #b0475a 88%, #ff8f3f 100%); }
.dawn { inset: 0; background: linear-gradient(to bottom, rgba(255,150,70,0) 40%, rgba(255,170,90,.75) 100%); opacity: .7; animation: dawn 14s linear infinite; }

.stars { left: 0; top: 0; width: .125cqw; height: .125cqw; border-radius: 50%; background: transparent; }
.stars-a { animation: twinkle 2.6s ease-in-out infinite alternate; box-shadow:
    12.8625cqw 18.0562cqw 0 0.0544cqw #fff,
    59.85cqw 19.8938cqw 0 0.08cqw #fff,
    61.1375cqw 4.7125cqw 0 0.0831cqw #fff,
    67.4875cqw 8.1cqw 0 0.03cqw #fff,
    98.7188cqw 18.4312cqw 0 0.0131cqw #fff,
    45.85cqw 30.7937cqw 0 0.0725cqw #fff,
    36.6938cqw 15.3187cqw 0 0.0437cqw #fff,
    50.6187cqw 26.4875cqw 0 0.0625cqw #fff,
    42.1938cqw 32.4875cqw 0 0.0513cqw #fff,
    87.7125cqw 4.4313cqw 0 0.0644cqw #fff,
    47.0187cqw 32.6cqw 0 0.0988cqw #fff,
    31.2437cqw 28.1812cqw 0 0.0531cqw #fff,
    29.95cqw 10.1cqw 0 0.0094cqw #fff,
    52.2313cqw 17.6125cqw 0 0.0925cqw #fff,
    81.8cqw 28.4563cqw 0 0.0587cqw #fff,
    90.6375cqw 4.2875cqw 0 0.0706cqw #fff,
    47.9688cqw 3.125cqw 0 0.0312cqw #fff,
    41.35cqw 16.2437cqw 0 0.0075cqw #fff; }
.stars-b { animation: twinkle 2.6s ease-in-out -1.3s infinite alternate; box-shadow:
    85.1cqw 4.4313cqw 0 0.0269cqw #fff,
    54.6625cqw 25.8188cqw 0 0.0781cqw #fff,
    45.0938cqw 28.6875cqw 0 0.0706cqw #fff,
    96.7938cqw 32.5938cqw 0 0.0819cqw #fff,
    34.4375cqw 19.925cqw 0 0.0338cqw #fff,
    57.55cqw 1.7812cqw 0 0.0731cqw #fff,
    58.3563cqw 17.9187cqw 0 0.0169cqw #fff,
    49.125cqw 32.1625cqw 0 0.0306cqw #fff,
    51.7563cqw 1.8cqw 0 0.0275cqw #fff,
    47.0812cqw 17.3625cqw 0 0.0275cqw #fff,
    54.45cqw 20.0063cqw 0 0.0688cqw #fff,
    47.9438cqw 31.0625cqw 0 0.0469cqw #fff,
    65.175cqw 21.2812cqw 0 0.0494cqw #fff,
    26.6125cqw 17.475cqw 0 0.0544cqw #fff,
    89.7062cqw 29.2563cqw 0 0.0356cqw #fff,
    95.3625cqw 33.8875cqw 0 0.085cqw #fff,
    49.8438cqw 4.2313cqw 0 0.0763cqw #fff,
    1.2688cqw 20.7125cqw 0 0.0938cqw #fff; }

.sun { left: 69.375cqw; top: 45.625cqw; width: 8.75cqw; height: 8.75cqw; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fff8dc 0%, #ffc45c 55%, #ff8a3a 100%);
  box-shadow: 0 0 3cqw 1cqw rgba(255,170,90,.5), 0 0 10cqw 3cqw rgba(255,120,60,.25);
  transform: translate(0, -6.875cqw); animation: sunrise 14s linear infinite; }

.earth { left: -200cqw; top: 47cqw; width: 500cqw; height: 500cqw; border-radius: 50%;
  background: linear-gradient(to bottom, #1a5f70 0%, #0d2e3f 1.2%, #061224 2.6%);
  box-shadow: 0 0 1.5cqw .2cqw rgba(95,224,255,.45), inset 0 .2cqw .3cqw 0 rgba(95,224,255,.6); }

.tower { left: 20.625cqw; top: 35cqw; width: .625cqw; height: 13.125cqw; background: #26303f; }
.tower::after { content: ""; position: absolute; left: 100%; top: 2.5cqw; width: 2.125cqw; height: 7.875cqw;
  background: repeating-linear-gradient(to bottom, #26303f 0 .375cqw, transparent .375cqw 3.75cqw); }
.pad { left: 21.25cqw; top: 47.875cqw; width: 7.5cqw; height: 1.125cqw; border-radius: .19cqw; background: #1b2430; }
.beacon { left: 20.625cqw; top: 34.1875cqw; width: .625cqw; height: .625cqw; border-radius: 50%; background: #ff3b3b;
  box-shadow: 0 0 .6cqw .1cqw rgba(255,59,59,.7); animation: blink 1s linear infinite; }

.mars { left: 75.9375cqw; top: 9.6875cqw; width: 11.875cqw; height: 11.875cqw; border-radius: 50%;
  background:
    radial-gradient(ellipse 1.625cqw 1cqw at 40% 41%, rgba(122,38,18,.45), rgba(122,38,18,0) 100%),
    radial-gradient(ellipse 1.125cqw .75cqw at 67% 67%, rgba(122,38,18,.45), rgba(122,38,18,0) 100%),
    radial-gradient(ellipse .75cqw .5cqw at 56% 24%, rgba(122,38,18,.4), rgba(122,38,18,0) 100%),
    radial-gradient(ellipse .875cqw .5625cqw at 29% 71%, rgba(122,38,18,.4), rgba(122,38,18,0) 100%),
    radial-gradient(circle at 35% 30%, #ffc9a8 0%, #e8703f 40%, #b9421f 70%, #6e1f0e 100%);
  box-shadow: 0 0 3cqw 1cqw rgba(255,120,80,.28), inset -1cqw -.8cqw 1.6cqw rgba(60,10,0,.55); }

.puff { left: 22.5cqw; top: 45cqw; width: 5cqw; height: 5cqw; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,236,220,.95) 0%, rgba(205,205,215,.55) 55%, rgba(205,205,215,0) 72%);
  animation: puff 14s ease-out infinite; }

/* il razzo: SVG inline (base dell'ugello nel punto 70,270 del suo viewBox), mosso via CSS */
svg.rocket { left: 20.625cqw; top: 31.125cqw; width: 8.75cqw; height: 32.5cqw; overflow: visible;
  transform-origin: 4.375cqw 16.875cqw; animation: fly 14s linear infinite; }

.fire { transform-box: view-box; transform-origin: 0px 12px; opacity: 0; animation: burn 14s linear infinite; }
.flame { transform-box: view-box; transform-origin: 0px 12px; animation: flicker .18s ease-in-out infinite alternate; }
.flame-inner { animation-duration: .13s; }
.plume { opacity: 0; animation: trail 14s linear infinite; }
.ship { transform-box: view-box; transform-origin: 0px 0px; animation: shake 14s linear infinite; }
@keyframes burn {
  0%, 8% { opacity: 0; transform: scale(.2); }
  14%, 62% { opacity: 1; transform: scale(1); }
  66%, 69% { opacity: 0; transform: scale(.5); }
  70% { opacity: 1; transform: scale(.75); }
  76% { opacity: 1; transform: scale(.55); }
  78%, 100% { opacity: 0; transform: scale(.2); }
}
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.9, 1.28); } }
@keyframes trail { 0%, 18% { opacity: 0; } 26%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes shake {
  0%, 9.9% { transform: translate(0, 0); }
  10% { transform: translate(-1.6px, 0.5px); }
  10.4% { transform: translate(1.6px, -0.5px); }
  10.8% { transform: translate(-1.6px, 0.5px); }
  11.2% { transform: translate(1.6px, -0.5px); }
  11.6% { transform: translate(-1.6px, 0.5px); }
  12% { transform: translate(1.6px, -0.5px); }
  12.4% { transform: translate(-1.6px, 0.5px); }
  12.8% { transform: translate(1.6px, -0.5px); }
  13.2% { transform: translate(-1.6px, 0.5px); }
  13.6% { transform: translate(1.6px, -0.5px); }
  14% { transform: translate(-1.6px, 0.5px); }
  14.4% { transform: translate(1.6px, -0.5px); }
  14.8% { transform: translate(-1.6px, 0.5px); }
  15.2% { transform: translate(1.6px, -0.5px); }
  15.6% { transform: translate(-1.6px, 0.5px); }
  16%, 100% { transform: translate(0, 0); }
}

.fade { inset: 0; background: #02040c; opacity: 0; pointer-events: none; animation: loopfade 14s linear infinite; }

@keyframes dawn { 0% { opacity: .15; } 65%, 100% { opacity: 1; } }
@keyframes sunrise { 0% { transform: translate(0, 3.75cqw); } 65%, 100% { transform: translate(0, -6.875cqw); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes puff {
  0%, 11% { opacity: 0; transform: translate(0, 0) scale(.2); }
  14% { opacity: .85; transform: translate(0, 0) scale(.8); }
  24% { opacity: .5; transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) scale(2.4); }
  40%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(3.6); }
}
@keyframes loopfade { 0% { opacity: 1; } 3% { opacity: 0; } 94% { opacity: 0; } 97%, 100% { opacity: 1; } }

@keyframes fly {
  0% { transform: translate(0cqw, 0cqw) rotate(0deg) scale(1); animation-timing-function: linear; }
  16% { transform: translate(0cqw, 0cqw) rotate(0deg) scale(1); animation-timing-function: ease-in; }
  30% { transform: translate(0.625cqw, -13cqw) rotate(4deg) scale(0.92); animation-timing-function: linear; }
  42% { transform: translate(4.375cqw, -29.25cqw) rotate(22deg) scale(0.78); animation-timing-function: linear; }
  52% { transform: translate(15cqw, -39.875cqw) rotate(52deg) scale(0.6); animation-timing-function: linear; }
  60% { transform: translate(30cqw, -44.875cqw) rotate(78deg) scale(0.46); animation-timing-function: linear; }
  66% { transform: translate(43.125cqw, -45.5cqw) rotate(92deg) scale(0.38); animation-timing-function: ease-in-out; }
  70% { transform: translate(50cqw, -43.625cqw) rotate(-20deg) scale(0.34); animation-timing-function: ease-out; }
  76% { transform: translate(56.875cqw, -38.3125cqw) rotate(0deg) scale(0.3); animation-timing-function: linear; }
  97% { transform: translate(56.875cqw, -38.3125cqw) rotate(0deg) scale(0.3); animation-timing-function: linear; }
  100% { transform: translate(0cqw, 0cqw) rotate(0deg) scale(1); animation-timing-function: linear; }
}

/* overlay */
.hud { position: absolute; left: 2.2%; top: 3.5%; display: flex; align-items: center; gap: .8em;
  font-size: clamp(12px, 1.6vmin, 20px); text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.hud .tux-badge { width: 2.4em; height: 3.1em; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.hud h1 { margin: 0; font-size: 1.45em; font-weight: 600; letter-spacing: .02em; }
.hud p { margin: .15em 0 0; font-size: .9em; opacity: .8; }
.controls { position: absolute; right: 2.2%; bottom: 4%; display: flex; align-items: center; gap: .5em; font-size: clamp(11px, 1.4vmin, 16px); }
.controls .lbl { opacity: .7; margin-right: .2em; }
.controls a { color: #e8edf5; text-decoration: none; padding: .45em .9em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(6,12,30,.55); backdrop-filter: blur(6px); }
.controls a:hover { border-color: #5fdcff; }
.controls a[href="#css"], #svg:target ~ .controls a[href="#svg"] { background: #19d3ff; color: #04101f; border-color: #19d3ff; }
#svg:target ~ .controls a[href="#css"] { background: rgba(6,12,30,.55); color: #e8edf5; border-color: rgba(255,255,255,.35); }

@media (prefers-reduced-motion: reduce) { .scene, .scene * { animation: none !important; } }