/* === SATURN SYSTEM DESIGN SYSTEM === */

.journey-space {
    /* Responsive Variable Tokens */
    --planet-size: clamp(260px, 30vw, 460px);
    --ring-size: calc(var(--planet-size) * 2.0);
    --ring-tilt-x: 75deg;
    --ring-tilt-z: 25deg;
    --glow-size: calc(var(--planet-size) * 1.6);
    --moon-size: clamp(14px, 1.4vw, 20px);

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    /* Background layer of the timeline */
    overflow: hidden;
}

/* Stars Canvas Layer */
.journey-stars-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Sits behind back rings and planet */
}

/* Saturn Wrapper centering */
.saturn-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Transforms rendered purely via CSS Variables updated by JS */
    transform: translate(-50%, -50%) scale(var(--planet-scale, 0.9)) rotate(var(--planet-tilt, 0deg));
    width: var(--ring-size);
    height: var(--ring-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Glow Layer */
.glow {
    position: absolute;
    width: var(--glow-size);
    height: var(--glow-size);
    background: radial-gradient(circle,
            rgba(255, 46, 99, 0.45) 0%,
            rgba(159, 91, 140, 0.18) 50%,
            transparent 70%);
    filter: blur(60px);
    opacity: var(--glow-opacity, 0);
    z-index: 1;
    /* Lowest inner Saturn layer */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--glow-scale, 0.8));
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 2. Rings Layers (NASA-style translucent masked Cassini divisions + noise + conic gradient) */
.ring {
    position: absolute;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;

    /* Mask out the inner and outer areas to keep the ring shape */
    mask-image: radial-gradient(circle, transparent 33%, black 34%, black 58%, transparent 59%);
    -webkit-mask-image: radial-gradient(circle, transparent 33%, black 34%, black 58%, transparent 59%);

    background:
        /* Cassini divisions and shadows (radial bands) */
        radial-gradient(circle,
            transparent 0%,
            transparent 33%,
            rgba(0, 0, 0, 0.55) 35%,
            /* Inner edge shadow */
            rgba(255, 46, 99, 0.25) 38%,
            rgba(255, 159, 28, 0.45) 43%,
            rgba(0, 0, 0, 0.75) 47.5%,
            /* Cassini Division line */
            rgba(0, 0, 0, 0.75) 48.5%,
            rgba(255, 46, 99, 0.35) 51%,
            rgba(255, 159, 28, 0.25) 54%,
            rgba(0, 0, 0, 0.6) 58%,
            /* Outer edge shadow */
            transparent 59%),
        /* Spinning conic gradient for lighting changes and dust chunks */
        conic-gradient(from 0deg,
            rgba(255, 46, 99, 0.35) 0%,
            rgba(255, 159, 28, 0.45) 25%,
            rgba(255, 46, 99, 0.3) 50%,
            rgba(255, 159, 28, 0.45) 75%,
            rgba(255, 46, 99, 0.35) 100%),
        /* Space dust / Ice particles noise texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

    background-blend-mode: overlay, difference;
    opacity: 0.85;

    /* transform updated by JS: var(--planet-scale), var(--ring-tilt-x), var(--ring-tilt-z), var(--ring-spin) */
    transform: rotate(var(--ring-spin, 0deg)) rotateX(var(--ring-tilt-x)) rotateZ(var(--ring-tilt-z));
    pointer-events: none;
    transform-origin: center;
    transition: opacity 0.5s ease;
}

/* Back ring sits behind planet sphere */
.ring-back {
    z-index: 3;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

/* Front ring sits in front of planet sphere */
.ring-front {
    z-index: 5;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

/* 3. Planet Sphere */
.planet {
    position: absolute;
    width: var(--planet-size);
    height: var(--planet-size);
    border-radius: 50%;
    background: radial-gradient(circle at var(--light-x, 30%) var(--light-y, 30%), #ffd2e6 0%, #ff7ea2 20%, #ab3c6b 50%, #4a154b 80%, #15002b 100%);
    overflow: hidden;
    z-index: 4;
    /* Layered exactly between front and back rings */
    box-shadow:
        0 0 45px rgba(255, 46, 99, 0.25),
        inset -20px -20px 45px rgba(0, 0, 0, 0.8),
        inset 15px 15px 35px rgba(255, 255, 255, 0.15),
        /* Rim lighting: thin bright edge on the left side */
        inset 3px 3px 6px rgba(255, 255, 255, 0.55);
    transform-origin: center;
}

/* Subtle ring shadow cast on planet */
.planet-ring-shadow {
    position: absolute;
    top: 42%;
    left: -10%;
    width: 120%;
    height: 18%;
    background: rgba(0, 0, 0, 0.82);
    filter: blur(6px);
    transform: rotate(25deg) translateY(var(--ring-shadow-offset, 0px)) scaleY(var(--ring-shadow-scale-y, 1));
    opacity: var(--ring-shadow-opacity, 0);
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Planet lighting highlight */
.planet-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Highlight position mapped dynamically via CSS Variables set by JS */
    background: radial-gradient(circle at var(--light-x, 30%) var(--light-y, 30%),
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 60%);
    z-index: 4;
}

/* Planet Shadow depth mapping */
.planet-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Dark side shadow, slightly dynamic */
    background: radial-gradient(circle at calc(var(--light-x, 30%) + 45%) calc(var(--light-y, 30%) + 45%),
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0.7) 65%,
            rgba(0, 0, 0, 0.95) 100%);
    z-index: 3;
}

/* Gas Band Textures */
.planet-texture {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    opacity: 0.12;
    z-index: 2;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 12px,
            rgba(255, 255, 255, 0.2) 12px,
            rgba(255, 255, 255, 0.2) 24px,
            transparent 24px,
            transparent 36px,
            rgba(0, 0, 0, 0.3) 36px,
            rgba(0, 0, 0, 0.3) 48px);
    filter: blur(4px);
    /* Dynamic drift offset */
    transform: rotate(25deg) translate(var(--texture-drift-x, 0px), var(--texture-drift-y, 0px));
}

/* 4. Orbital Moon */
.moon {
    position: absolute;
    width: var(--moon-size);
    height: var(--moon-size);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e0e0e8 0%, #9090a0 50%, #303040 100%);
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.25),
        inset -3px -3px 6px rgba(0, 0, 0, 0.8),
        inset 2px 2px 4px rgba(255, 255, 255, 0.4);
    overflow: hidden;
    /* Transform updated by JS variables */
    transform: translate(calc(-50% + var(--moon-x, 0px)), calc(-50% + var(--moon-y, 0px))) scale(var(--moon-scale, 0));
    opacity: var(--moon-opacity, 0);
    z-index: var(--moon-z-index, 6);
    /* High initial z-index, JS will update dynamically depending on orbit phase */
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Moon Crater Details */
.moon-craters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 25% 30%, black 8%, transparent 10%),
        radial-gradient(circle at 60% 25%, black 12%, transparent 14%),
        radial-gradient(circle at 45% 70%, black 15%, transparent 18%),
        radial-gradient(circle at 75% 65%, black 6%, transparent 8%),
        radial-gradient(circle at 30% 75%, black 10%, transparent 12%);
    z-index: 1;
}

/* Moon shadow layer reacting to mouse variables */
.moon-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at var(--moon-light-x, 30%) var(--moon-light-y, 30%),
            transparent 30%,
            rgba(0, 0, 0, 0.6) 70%,
            rgba(0, 0, 0, 0.95) 100%);
    z-index: 2;
}

.moon.active {
    opacity: var(--moon-opacity, 1);
}