/* =========================================
   FLUX PLURIVERSUM – COSMIC DESIGN
   ========================================= */

.pluriversum {
    width: 100%;
    color: #171321;
}

.pluriversum__section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    padding: 5rem 0 8rem;

    background:
        radial-gradient(ellipse at 12% 8%,
            rgba(184, 178, 255, .55), transparent 38%),
        radial-gradient(ellipse at 90% 15%,
            rgba(255, 170, 220, .58), transparent 40%),
        radial-gradient(ellipse at 50% 48%,
            rgba(255, 255, 255, .96), transparent 65%),
        radial-gradient(ellipse at 10% 100%,
            rgba(155, 190, 255, .55), transparent 42%),
        radial-gradient(ellipse at 100% 100%,
            rgba(255, 165, 205, .55), transparent 42%),
        linear-gradient(135deg, #eeeaff, #fff1f7 50%, #eeeaff);
}

/* LICHTPUNKTE IM HINTERGRUND */

.pluriversum__section::before,
.pluriversum__section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.pluriversum__section::before {
    opacity: .65;
    background-image:
        radial-gradient(circle at 12% 25%, white 0 1px, transparent 2px),
        radial-gradient(circle at 28% 12%, white 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, white 0 1px, transparent 2px),
        radial-gradient(circle at 88% 40%, white 0 1.5px, transparent 3px),
        radial-gradient(circle at 18% 75%, white 0 1px, transparent 2px),
        radial-gradient(circle at 65% 85%, white 0 1px, transparent 2px),
        radial-gradient(circle at 94% 78%, white 0 1px, transparent 2px);
}

.pluriversum__section::after {
    opacity: .35;
    background:
        radial-gradient(ellipse at 0% 50%,
            rgba(255,255,255,.8), transparent 35%),
        radial-gradient(ellipse at 100% 55%,
            rgba(255,255,255,.8), transparent 35%);
}

/* HEADER */

.pluriversum__header {
    position: relative;
    z-index: 2;
    width: min(100% - 10vw, 1290px);
    margin: 0 auto 3rem;
    text-align: left;
}

.pluriversum__title {
    margin: 0 0 1.5rem;
    line-height: .9;
    color: #171321;
}

.pluriversum__intro {
    max-width: 68ch;
    color: #292435;
    line-height: 1.6;
}

/* PLANETEN-ANORDNUNG */

.pluriversum__universe {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 24rem), 1fr)
    );
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);

    width: min(100% - 8vw, 1400px);
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

/* PLANETEN */

.pluriversum__planet {
    --planet-color: #c5dfff;
    --planet-secondary: #8edcff;
    --planet-accent: #d9aaff;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 34rem;
    padding: 0 1rem 2rem;

    border: 0;
    border-radius: 0;
    background: transparent;
    color: #171321;
    font: inherit;
    text-align: center;

    cursor: pointer;
}

.pluriversum__planet:focus-visible {
    outline: 2px solid var(--planet-color);
    outline-offset: 8px;
}

/* UMLAUFBAHNEN */

.pluriversum__planet::before,
.pluriversum__planet::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 112%;
    height: 8.5rem;
    top: .5rem;
    left: -6%;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;

    pointer-events: none;
}

.pluriversum__planet::before {
    transform: rotate(-17deg);
    box-shadow:
        0 0 8px rgba(255,255,255,.7),
        0 0 18px color-mix(in srgb, var(--planet-color), transparent 45%);

    animation: pluriversum-orbit 34s linear infinite;
}

.pluriversum__planet::after {
    width: 120%;
    height: 6.5rem;
    top: 1.5rem;
    left: -10%;

    border-color: color-mix(in srgb, var(--planet-accent), white 35%);
    opacity: .7;

    transform: rotate(13deg);
    animation: pluriversum-orbit-reverse 46s linear infinite;
}

@keyframes pluriversum-orbit {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

@keyframes pluriversum-orbit-reverse {
    from { rotate: 0deg; }
    to   { rotate: -360deg; }
}

/* PLANETENKUGEL – GLAS UND NEBEL */

.pluriversum__planet-sphere {
    position: relative;
    z-index: 1;
    display: block;

    width: clamp(6.5rem, 12.5vw, 11rem);
    aspect-ratio: 1;
    flex: 0 0 auto;

    overflow: hidden;
    border-radius: 50%;

    background:
        radial-gradient(ellipse at 34% 24%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.65) 5%,
            transparent 22%),
        radial-gradient(ellipse at 70% 65%,
            var(--planet-accent) 0%,
            transparent 48%),
        radial-gradient(ellipse at 25% 70%,
            var(--planet-secondary) 0%,
            transparent 53%),
        radial-gradient(ellipse at 55% 35%,
            rgba(255,255,255,.85) 0%,
            transparent 50%),
        var(--planet-color);

    box-shadow:
        inset -1.5rem -1.5rem 2.5rem rgba(70,45,110,.16),
        inset 1rem 1rem 2rem rgba(255,255,255,.85),
        0 0 2rem color-mix(in srgb, var(--planet-color), transparent 35%),
        0 0 5rem color-mix(in srgb, var(--planet-accent), transparent 45%),
        0 2rem 4rem rgba(100,70,130,.18);

    transition: transform .7s ease, box-shadow .7s ease;
}

/* BEWEGTE FARBWOLKEN */

.pluriversum__planet-sphere::before {
    content: "";
    position: absolute;
    inset: -20%;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at 30% 35%,
            rgba(255,255,255,.9), transparent 25%),
        radial-gradient(ellipse at 70% 65%,
            var(--planet-accent), transparent 42%),
        radial-gradient(ellipse at 25% 75%,
            var(--planet-secondary), transparent 45%),
        conic-gradient(
            from 30deg,
            transparent,
            rgba(255,255,255,.6),
            var(--planet-secondary),
            transparent 40%,
            var(--planet-accent),
            rgba(255,255,255,.7),
            transparent
        );

    filter: blur(1.5rem);
    opacity: .85;

    animation: pluriversum-clouds 30s linear infinite;
}

@keyframes pluriversum-clouds {
    from { transform: rotate(0deg) scale(1.05); }
    to   { transform: rotate(360deg) scale(1.05); }
}

/* GLANZ UND LICHTREFLEXE */

.pluriversum__planet-sphere::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(ellipse at 30% 20%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.3) 13%,
            transparent 32%),
        linear-gradient(125deg,
            transparent 35%,
            rgba(255,255,255,.35) 48%,
            transparent 62%);

    mix-blend-mode: screen;
}

/* HOVER */

.pluriversum__planet:hover .pluriversum__planet-sphere {
    transform: scale(1.045);

    box-shadow:
        inset -1.5rem -1.5rem 2.5rem rgba(70,45,110,.12),
        inset 1rem 1rem 2rem rgba(255,255,255,.9),
        0 0 3rem var(--planet-color),
        0 0 6rem var(--planet-accent),
        0 2rem 4rem rgba(100,70,130,.2);
}

/* PLANETEN-TITEL UND BESCHREIBUNG */

.pluriversum__planet-name {
    display: block;
    position: relative;
    z-index: 2;

    margin-top: 1rem;

    color: #171321;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.2;
}

.pluriversum__planet-description {
    display: block;
    position: relative;
    z-index: 2;

    max-width: 22rem;
    margin-top: .75rem;

    color: #51495a;
    font-size: 1rem;
    line-height: 1.55;
}

/* LEUCHTENDE KLEINE HIMMELSKÖRPER */

.pluriversum__planet {
    background-image:
        radial-gradient(circle at 13% 48%,
            rgba(255,255,255,.95) 0 3px,
            var(--planet-secondary) 4px,
            transparent 8px),
        radial-gradient(circle at 87% 38%,
            rgba(255,255,255,.95) 0 3px,
            var(--planet-accent) 4px,
            transparent 9px);
    background-repeat: no-repeat;
}

/* LEERER ZUSTAND */

.pluriversum__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #51495a;
}

/* MOBILE */

@media (max-width: 768px) {

    .pluriversum__section {
        padding: 3rem 0 5rem;
    }

    .pluriversum__header,
    .pluriversum__universe {
        width: min(100% - 10vw, 1290px);
    }

    .pluriversum__universe {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pluriversum__planet {
        min-height: 29rem;
    }

    .pluriversum__planet::before {
        height: 8.5rem;
        top: .5rem;
    }

    .pluriversum__planet::after {
        height: 6.5rem;
        top: 1.5rem;
    }

    .pluriversum__planet-sphere {
        width: clamp(6.5rem, 32.5vw, 9rem);
    }
}

/* REDUZIERTE BEWEGUNG */

@media (prefers-reduced-motion: reduce) {
    .pluriversum__planet::before,
    .pluriversum__planet::after,
    .pluriversum__planet-sphere::before {
        animation: none !important;
    }

    .pluriversum__planet-sphere {
        transition: none;
    }
}