/* ==========================================
   MY UNIVERSE 0.4
   CINEMATIC SPACE ENVIRONMENT
   ========================================== */

/* SCENA SPAZIALE */

#planet-scene {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 320px;

    overflow: hidden;
    border-radius: 18px;

    perspective: none;
    transform-style: flat;

    background:
        radial-gradient(
            ellipse at 48% 50%,
            rgba(30, 100, 190, 0.22) 0%,
            rgba(15, 35, 90, 0.12) 35%,
            transparent 70%
        ),
        radial-gradient(
            ellipse at 78% 25%,
            rgba(105, 45, 170, 0.13),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 15% 80%,
            rgba(15, 90, 145, 0.12),
            transparent 50%
        ),
        #030713;
}

/* CAMPO STELLARE */

#planet-scene::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;

    background-image:
        radial-gradient(
            1px 1px at 8% 15%,
            #ffffff 98%,
            transparent
        ),
        radial-gradient(
            2px 2px at 22% 72%,
            #b5dfff 98%,
            transparent
        ),
        radial-gradient(
            1px 1px at 39% 12%,
            #ffffff 98%,
            transparent
        ),
        radial-gradient(
            1px 1px at 68% 19%,
            #ffffff 98%,
            transparent
        ),
        radial-gradient(
            2px 2px at 87% 42%,
            #b6caff 98%,
            transparent
        ),
        radial-gradient(
            1px 1px at 92% 82%,
            #ffffff 98%,
            transparent
        ),
        radial-gradient(
            1px 1px at 14% 91%,
            #a9dfff 98%,
            transparent
        ),
        radial-gradient(
            1px 1px at 74% 88%,
            #ffffff 98%,
            transparent
        );

    background-repeat: no-repeat;
    background-size: 100% 100%;

    opacity: 0.8;

    animation: spaceTwinkle 7s ease-in-out infinite;
}

/* NEBULOSA E LUCE DIFFUSA */

#planet-scene::after {
    content: "";

    position: absolute;
    inset: -20%;

    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 35% 40%,
            rgba(25, 75, 170, 0.12),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 72% 65%,
            rgba(100, 40, 170, 0.09),
            transparent 45%
        );

    filter: blur(28px);

    animation: nebulaDrift 18s ease-in-out infinite alternate;
}

/* TERRA 3D */

#earth-canvas {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    height: 100%;

    background: transparent;

    cursor: grab;
    touch-action: pan-y;
}

#earth-canvas:active {
    cursor: grabbing;
}

/* ANIMAZIONI */

@keyframes spaceTwinkle {
    0%, 100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

@keyframes nebulaDrift {
    from {
        transform: translate(-2%, 1%) scale(1);
        opacity: 0.7;
    }

    to {
        transform: translate(2%, -2%) scale(1.08);
        opacity: 1;
    }
}

/* SMARTPHONE */

@media (max-width: 700px) {
    #planet-scene {
        height: 280px;
        border-radius: 14px;
    }
}

/* ACCESSIBILITA' */

@media (prefers-reduced-motion: reduce) {
    #planet-scene::before,
    #planet-scene::after {
        animation: none !important;
    }
}