:root {
  --primary-red: #FF0000;
  --red-glow: 0 0 15px rgba(255, 100, 100, 0.7), 0 0 25px rgba(255, 0, 0, 0.5);
  --red-dim: #660000;
  --red-dark: #330000;
  --background-color: #16161D;
  --logo-width: 300px;
  --space-object-width: 38px;
}

body {
    background-color: var(--background-color);
    color: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#nebula-canvas, #stars-canvas {
    z-index: -2;
}

#stars-canvas {
    z-index: -1;
}

#logo-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#logo {
    width: var(--logo-width);
    max-width: 80vw;
    filter: drop-shadow(var(--red-glow));
    animation: pulse-glow 3s infinite;
}

#space-object-container {
    position: fixed;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    /* Animation properties will be set by JS */
    transform: translate(var(--start-x, -200px), var(--start-y, -200px)) rotate(var(--start-rotate, 0deg));
}

.space-object {
    width: var(--space-object-width);
    transform-origin: center;
    position: absolute;
    display: none;
}

#rocket {
    /* Rocket's rotation is now handled by the container */
}

#space-object-container.animate {
    opacity: 1;
    animation: move-astronaut var(--duration, 20s) linear forwards;
}

#space-object-container.animate.rocket #rocket {
    animation: rocket-squiggle 2s ease-in-out infinite;
}