/* Background-only objects: one continuous distance interpolation, fixed size per pass. */
#nebula{z-index:-5}.vignette{z-index:-4}#stars{z-index:-3}
.ambient-star-field{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.ambient-star-field[data-paused=true] *{animation-play-state:paused}
#space-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:layout paint;user-select:none}
.ambient-star{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#edf6ff;opacity:.2;box-shadow:0 0 6px #b1dbff9c;animation:ambient-twinkle var(--duration) ease-in-out var(--delay) infinite}
.ambient-star--glint{background:#fff;box-shadow:0 0 12px #b6dfff9c}
.ambient-star--glint::before,.ambient-star--glint::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#d5edffcc,transparent);width:15px;height:1px}
.ambient-star--glint::after{transform:translate(-50%,-50%) rotate(90deg);width:11px}
@keyframes ambient-twinkle{0%,100%{opacity:var(--minimum)}23%,67%{opacity:var(--middle)}43%{opacity:var(--brightness)}82%{opacity:var(--minimum)}}
.ambient-star[data-twinkle=quick]{animation-name:ambient-quick-twinkle}
@keyframes ambient-quick-twinkle{0%,100%{opacity:var(--middle)}18%,72%{opacity:var(--minimum)}39%,89%{opacity:var(--brightness)}55%{opacity:var(--middle)}}
.ambient-satellite,.ambient-rocket{position:absolute;left:0;top:0;object-fit:contain;max-width:none;pointer-events:none;offset-anchor:50% 50%;offset-rotate:auto;offset-distance:0%;transform-origin:center}
.ambient-satellite{width:var(--sat-width);height:var(--sat-height);opacity:0;animation:satellite-drift var(--flight-duration) linear var(--flight-delay) infinite}
/* offset-distance has exactly two endpoints: constant speed along the curve.
   Fading uses a separate animation so it cannot change movement speed. */
.ambient-satellite--distant{animation:satellite-drift var(--flight-duration) linear var(--flight-delay) infinite,satellite-fade var(--flight-duration) linear var(--flight-delay) infinite}
@keyframes satellite-drift{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes satellite-fade{0%,100%{opacity:0}5%,95%{opacity:var(--sat-opacity)}}
/* One modest closer visitor per twelve minutes, first after about 5.5 minutes.
   Its window never overlaps the larger white/gold rocket's 360s cycle. */
.ambient-satellite--rare{animation:rare-drift 720s linear 3s infinite,rare-fade 720s linear 3s infinite}
@keyframes rare-drift{0%,45%{offset-distance:0%}55%,100%{offset-distance:100%}}
@keyframes rare-fade{0%,45%,55%,100%{opacity:0}46%,54%{opacity:var(--sat-opacity)}}
.ambient-rocket{width:120px;height:68px;opacity:0;transform:scale(.8);animation:starship-drift 360s linear 3s infinite,starship-fade 360s linear 3s infinite}
.ambient-rocket--falcon{width:125px;height:70px;animation-name:falcon-drift,falcon-fade}
.ambient-rocket-image{display:block;width:100%;height:100%;object-fit:contain}
.ambient-rocket--starship{width:60px;height:34px}
.ambient-rocket--starship>.ambient-rocket-image{filter:brightness(.76)}
.rocket-engine{position:absolute;left:5.6%;top:50%;width:29%;height:23%;transform:translate(-100%,-50%);pointer-events:none;background:radial-gradient(ellipse at 100% 50%,#f2f5ffbf 0%,#d0e3ff88 18%,#accbfa38 43%,transparent 76%);clip-path:polygon(100% 30%,100% 70%,0% 100%,0% 0%);filter:blur(.4px)}
.rocket-engine::after{content:"";position:absolute;right:-4%;top:30%;width:17%;height:40%;border-radius:50%;background:#d9e9ffcc;box-shadow:0 0 3px #b3d5ffa3}
.ambient-rocket[data-reverse=true] .rocket-engine{left:auto;right:5.6%;transform:translate(100%,-50%) scaleX(-1)}
@keyframes starship-drift{0%,10%{offset-distance:0%}30%,100%{offset-distance:100%}}
@keyframes starship-fade{0%,10%,30%,100%{opacity:0}12%,28%{opacity:.68}}
@keyframes falcon-drift{0%,60%{offset-distance:0%}80%,100%{offset-distance:100%}}
@keyframes falcon-fade{0%,60%,80%,100%{opacity:0}62%,78%{opacity:.68}}
#space-atmosphere[data-paused=true] *{animation-play-state:paused}
#space-atmosphere[data-reduced=true] .ambient-satellite,#space-atmosphere[data-reduced=true] .ambient-rocket{display:none}
@supports not (offset-path:path("M0 0 L1 1")){.ambient-satellite,.ambient-rocket{display:none}}
@media(max-width:599px){
 .ambient-star:nth-child(n+25){display:none}
 .atmosphere-depth[data-small-hidden=true]{display:none}
 .ambient-satellite--rare{width:50px;height:64px}
 .ambient-rocket{width:77px;height:44px}.ambient-rocket--falcon{width:80px;height:45px}
 .ambient-rocket--starship{width:38px;height:22px}
}
@media(prefers-reduced-motion:reduce){.ambient-star{animation:none;opacity:.32}.ambient-satellite,.ambient-rocket{display:none}}

/* Each object has a background depth; card transforms are never inherited. */
.atmosphere-depth{position:absolute;inset:0;pointer-events:none;transform:translate3d(var(--depth-x,0px),var(--depth-y,0px),0);transition:transform 160ms ease-out}
@media(prefers-reduced-motion:reduce){.atmosphere-depth{transition:none}}

/* Real 3D on its own background depth, behind all interactive artwork/UI. */
.atmosphere-depth[data-kind=roadster]{transform:none;transition:none}
.roadster-visitor{position:absolute;inset:0;pointer-events:none;transform:translate3d(var(--depth-x,0px),var(--depth-y,0px),0);transition:transform 160ms ease-out}
.roadster-visitor[data-near=true]{z-index:13001}
.roadster-visitor-canvas{display:block;width:100%;height:100%;pointer-events:none}
#space-atmosphere[data-reduced=true] .roadster-visitor{display:none}
@media(prefers-reduced-motion:reduce){.roadster-visitor{display:none;transition:none}}

/* Duplicate the same aligned nebula texture through broad soft masks. Screen
   blending only raises its own existing highlights; no coloured fog is added. */
.nebula-breath{position:absolute;inset:0;pointer-events:none}
.nebula-glow{position:absolute;inset:0;background:url('assets/nebula.webp') center/cover;mix-blend-mode:screen;opacity:.02;animation:nebula-breathe 52s ease-in-out -11s infinite;--cloud-max:.10;--cloud-min:.015}
.nebula-glow--blue{-webkit-mask-image:radial-gradient(ellipse 48% 55% at 78% 27%,#000 5%,transparent 85%);mask-image:radial-gradient(ellipse 48% 55% at 78% 27%,#000 5%,transparent 85%)}
.nebula-glow--violet{-webkit-mask-image:radial-gradient(ellipse 42% 40% at 45% 61%,#000 0%,transparent 88%);mask-image:radial-gradient(ellipse 42% 40% at 45% 61%,#000 0%,transparent 88%);animation-duration:67s;animation-delay:-37s;--cloud-max:.085;--cloud-min:.018}
.nebula-glow--amber{-webkit-mask-image:radial-gradient(ellipse 44% 39% at 21% 80%,#000 0%,transparent 88%);mask-image:radial-gradient(ellipse 44% 39% at 21% 80%,#000 0%,transparent 88%);animation-duration:81s;animation-delay:-59s;--cloud-max:.075;--cloud-min:.015}
@keyframes nebula-breathe{0%,100%{opacity:var(--cloud-min)}52%{opacity:var(--cloud-max)}}
.nebula-breath[data-paused=true] .nebula-glow{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.nebula-breath{display:none}}