/**
 * Scroll-Animation: Vom Weltall zur Erde
 * Issue #69 - Durchgehende scroll-gesteuerte Hintergrundanimation
 */

/* CSS Custom Property für Scroll-Progress (wird via JS gesetzt) */
:root {
    --scroll-progress: 0;
    --phase-1-progress: 0; /* Weltall: 0-30% */
    --phase-2-progress: 0; /* Atmosphäre: 30-60% */
    --phase-3-progress: 0; /* Erde: 60-100% */
}

/* ========================================
   HAUPT-CONTAINER FÜR SCROLL-ANIMATION
   ======================================== */

.scroll-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}

/* Hintergrund-Gradient - Übergang von Weltall zu Erde */
.scroll-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        #000000 0%,
        #0a0a0a 20%,
        #0a1628 40%,
        #1e3a5f 60%,
        #4a90a4 80%,
        #87CEEB 100%
    );
    background-size: 100% 500vh;
    background-position: 0 calc(var(--scroll-progress) * -400vh);
    transition: background-position 0.05s linear;
}

/* ========================================
   PHASE 1: WELTALL (0-30% Scroll)
   ======================================== */

.space-layer {
    position: absolute;
    inset: 0;
    opacity: calc(1 - var(--phase-2-progress) * 1.5);
    transition: opacity 0.1s ease-out;
}

/* Zusätzliche Sterne für mehr Dichte */
.stars-dense {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, white 100%, transparent),
        radial-gradient(1px 1px at 25% 40%, white 100%, transparent),
        radial-gradient(2px 2px at 45% 15%, white 100%, transparent),
        radial-gradient(1px 1px at 60% 60%, white 100%, transparent),
        radial-gradient(1px 1px at 75% 30%, white 100%, transparent),
        radial-gradient(2px 2px at 85% 70%, white 100%, transparent),
        radial-gradient(1px 1px at 15% 80%, white 100%, transparent),
        radial-gradient(1px 1px at 35% 55%, white 100%, transparent),
        radial-gradient(1px 1px at 55% 85%, white 100%, transparent),
        radial-gradient(2px 2px at 90% 10%, white 100%, transparent),
        radial-gradient(1px 1px at 5% 50%, white 100%, transparent),
        radial-gradient(1px 1px at 70% 45%, white 100%, transparent);
    animation: twinkle-dense 4s ease-in-out infinite alternate;
}

@keyframes twinkle-dense {
    0% { opacity: 0.4; }
    100% { opacity: 0.8; }
}

/* Nebel/Galaxie im Hintergrund */
.nebula {
    position: absolute;
    width: 60%;
    height: 40%;
    top: 10%;
    left: 20%;
    background: radial-gradient(
        ellipse at center,
        rgba(88, 86, 214, 0.15) 0%,
        rgba(147, 51, 234, 0.1) 30%,
        rgba(59, 130, 246, 0.05) 60%,
        transparent 100%
    );
    filter: blur(40px);
    animation: nebula-pulse 8s ease-in-out infinite alternate;
    opacity: calc(1 - var(--phase-2-progress) * 2);
}

@keyframes nebula-pulse {
    0% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    100% { transform: scale(1.1) rotate(5deg); opacity: 0.5; }
}

/* ========================================
   PHASE 2: ERDATMOSPHÄRE (30-60% Scroll)
   ======================================== */

.atmosphere-layer {
    position: absolute;
    inset: 0;
    opacity: calc(var(--phase-2-progress) * 2 - var(--phase-3-progress));
    pointer-events: none;
}

/* Erdkrümmung - blauer Schimmer am unteren Rand */
.earth-curvature {
    position: absolute;
    bottom: calc(-100% + var(--phase-2-progress) * 150%);
    left: -10%;
    right: -10%;
    height: 50%;
    background: radial-gradient(
        ellipse 120% 100% at 50% 100%,
        rgba(30, 144, 255, 0.4) 0%,
        rgba(0, 191, 255, 0.2) 30%,
        transparent 70%
    );
    border-radius: 50% 50% 0 0;
    filter: blur(20px);
    transition: bottom 0.1s ease-out;
}

/* Atmosphärischer Glow */
.atmospheric-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--phase-2-progress) * 60%);
    background: linear-gradient(
        to top,
        rgba(30, 58, 95, 0.6) 0%,
        rgba(10, 22, 40, 0.3) 50%,
        transparent 100%
    );
    transition: height 0.1s ease-out;
}

/* Satellit */
.satellite {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 30%;
    left: calc(-30px + var(--phase-2-progress) * 130%);
    opacity: calc(var(--phase-2-progress) * 3 - var(--phase-3-progress) * 5);
    transition: left 0.05s linear, opacity 0.1s ease-out;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.satellite svg {
    width: 100%;
    height: 100%;
    fill: #c0c0c0;
}

/* Zweiter Satellit (gegenläufig) - bewegt sich von rechts nach links */
.satellite-2 {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    /* Startposition: 100% + 20px (außerhalb rechts), Endposition: -40px (außerhalb links) */
    left: calc(100% + 20px - var(--phase-2-progress) * (100% + 60px));
    opacity: calc(var(--phase-2-progress) * 2.5 - var(--phase-3-progress) * 5);
    transition: left 0.05s linear, opacity 0.1s ease-out;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    transform: scaleX(-1);
}

.satellite-2 svg {
    width: 100%;
    height: 100%;
    fill: #d0d0d0;
}

/* ISS (Internationale Raumstation) */
.iss {
    position: absolute;
    width: 80px;
    height: 25px;
    top: 40%;
    left: calc(-100px + var(--phase-2-progress) * 150%);
    opacity: calc(var(--phase-2-progress) * 2.5 - var(--phase-3-progress) * 5);
    transition: left 0.08s linear, opacity 0.1s ease-out;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

.iss svg {
    width: 100%;
    height: 100%;
    fill: #e8e8e8;
}

/* Weltraumschrott / kleine Partikel */
.space-debris {
    position: absolute;
    inset: 0;
    opacity: calc(var(--phase-2-progress) * 2 - var(--phase-3-progress) * 2);
}

.debris-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: debris-float 10s linear infinite;
}

.debris-particle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; animation-duration: 12s; }
.debris-particle:nth-child(2) { top: 35%; left: 45%; animation-delay: -2s; animation-duration: 10s; }
.debris-particle:nth-child(3) { top: 50%; left: 75%; animation-delay: -4s; animation-duration: 14s; }
.debris-particle:nth-child(4) { top: 25%; left: 85%; animation-delay: -6s; animation-duration: 11s; }
.debris-particle:nth-child(5) { top: 60%; left: 25%; animation-delay: -3s; animation-duration: 13s; }

@keyframes debris-float {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translate(-100px, 50px) rotate(360deg); opacity: 0; }
}

/* ========================================
   PHASE 3: ERDOBERFLÄCHE - Cape Canaveral (60-100% Scroll)
   ======================================== */

.earth-layer {
    position: absolute;
    inset: 0;
    opacity: calc(var(--phase-3-progress) * 1.5);
    transition: opacity 0.1s ease-out;
}

/* Wolkenschichten */
.clouds-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(30px);
}

.cloud-1 {
    width: 300px;
    height: 80px;
    top: calc(120% - var(--phase-3-progress) * 80%);
    left: 10%;
    animation: cloud-drift 30s linear infinite;
}

.cloud-2 {
    width: 400px;
    height: 100px;
    top: calc(130% - var(--phase-3-progress) * 90%);
    right: 15%;
    animation: cloud-drift 40s linear infinite reverse;
    animation-delay: -10s;
}

.cloud-3 {
    width: 250px;
    height: 60px;
    top: calc(140% - var(--phase-3-progress) * 100%);
    left: 40%;
    animation: cloud-drift 35s linear infinite;
    animation-delay: -20s;
}

@keyframes cloud-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

/* Neutraler Erdboden */
.earth-ground {
    position: absolute;
    bottom: calc(-20% + var(--phase-3-progress) * 20%);
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(
        to top,
        rgba(34, 85, 51, 0.6) 0%,
        rgba(46, 125, 50, 0.4) 30%,
        rgba(76, 175, 80, 0.2) 60%,
        transparent 100%
    );
    transition: bottom 0.1s ease-out;
}

/* ========================================
   REDUCED MOTION - Barrierefreiheit
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .scroll-animation-container,
    .scroll-animation-container * {
        animation: none !important;
        transition: none !important;
    }

    .stars-dense,
    .nebula,
    .debris-particle,
    .cloud {
        animation: none !important;
    }

    /* Statische Darstellung bei reduzierter Bewegung */
    .scroll-bg-gradient {
        background: linear-gradient(
            180deg,
            #000000 0%,
            #0a1628 50%,
            #1e3a5f 100%
        );
        background-size: 100% 100%;
        background-position: 0 0;
    }
}

/* ========================================
   RESPONSIVE ANPASSUNGEN
   ======================================== */

@media (max-width: 768px) {
    .satellite { width: 20px; height: 20px; }
    .satellite-2 { width: 15px; height: 15px; }
    .iss { width: 50px; height: 15px; }

    .nebula {
        width: 80%;
        left: 10%;
        filter: blur(30px);
    }

    .cloud-1 { width: 200px; height: 50px; }
    .cloud-2 { width: 250px; height: 60px; }
    .cloud-3 { width: 150px; height: 40px; }
}

@media (max-width: 480px) {
    .iss { display: none; }
    .satellite-2 { display: none; }
}

/* ========================================
   PERFORMANCE OPTIMIERUNGEN
   ======================================== */

.scroll-animation-container {
    contain: layout style paint;
}

.space-layer,
.atmosphere-layer,
.earth-layer {
    will-change: opacity;
    contain: layout style;
}

/* GPU-Beschleunigung für animierte Elemente */
.satellite,
.satellite-2,
.iss,
.cloud,
.earth-curvature,
.earth-ground {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}