/* Original sky artwork; this file is loaded only by the HTML portfolio. */
body { background: #030610; }
body::before, body::after { content: none; }
.portfolio-space {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 22%, #143b792b, transparent 48%),
    radial-gradient(ellipse at 89% 78%, #087e9420, transparent 42%),
    linear-gradient(160deg, #030610, #02040a 65%, #040c18);
}
.space-parallax { position: absolute; inset: -24px; transform: translate(var(--space-x, 0px), var(--space-y, 0px)); }
.space-drift { position: absolute; inset: 0; animation: space-drift 86s ease-in-out infinite alternate; }
.space-drift-near { animation-duration: 59s; animation-direction: alternate-reverse; }
.space-drift svg { display: block; width: 100%; height: 100%; }
.space-sparkle {
  position: absolute;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #b7d7ff55 0%, #7db5ff18 35%, transparent 70%);
  opacity: .55;
  animation: space-twinkle var(--sparkle-duration) ease-in-out var(--sparkle-delay) infinite;
}
.space-sparkle::after {
  content: "";
  position: absolute;
  inset: 20%;
  background: #e2efff;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
/* Only opacity changes; the small glow is painted once, not animated as blur. */
@keyframes space-twinkle { 0%, 100% { opacity: .22; } 50% { opacity: .95; } }
.space-meteor {
  position: absolute;
  width: 120px;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #a4ceffb3);
  transform-origin: right center;
}
.space-meteor::after { content: ""; position: absolute; right: 0; top: -1px; width: 3px; height: 3px; border-radius: 50%; background: #e3eeff; box-shadow: 0 0 7px #9dc9ff; }
.space-meteor.is-active { animation: space-meteor 1.7s ease-in both; }
.portfolio-space[data-running="false"] * { animation-play-state: paused; }
@keyframes space-drift { from { transform: translate(0, 10px); } to { transform: translate(-9px, -14px); } }
@keyframes space-meteor {
  0% { opacity: 0; transform: translate(0, 0) rotate(34deg); }
  12%, 65% { opacity: .65; }
  100% { opacity: 0; transform: translate(46vw, 31vh) rotate(34deg); }
}
@media (max-width: 600px), (pointer: coarse) {
  .space-meteor { display: none; }
  .space-parallax { transform: none; }
  .space-drift { animation-duration: 110s; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-space * { animation: none !important; }
  .space-parallax { transform: none !important; }
  .space-meteor { display: none; }
}