/* ============================================
   Sky Transition - Nacht zu Tag Scroll-Animation
   ============================================ */

/* 
 * Scroll-Phasen:
 * Phase 1: Vision-Text sichtbar vor Nachthimmel (0% Fortschritt)
 * Phase 2: Vision-Text fadet aus (0-33% Fortschritt)
 * Phase 3: Gradient Nacht→Tag + Sterne nach oben (33-66% Fortschritt)
 * Phase 4: Taghimmel fixiert, Solutions erscheint (66-100% Fortschritt)
 */

/* ============================================
   Wrapper & Container
   ============================================ */

.sky-transition-wrapper {
    position: relative;
    width: 100%;
    /* Mindesthöhe für Scroll-Animation */
    min-height: auto;

    /* ========================================
       Sky color system (brand-token based)
       No hardcoded hex/rgb values.
       ======================================== */
    --sky-night-stop-1: color-mix(in srgb, var(--color-primary) 82%, var(--color-black));
    --sky-night-stop-2: color-mix(in srgb, var(--color-primary) 70%, var(--color-blue));
    --sky-night-stop-3: color-mix(in srgb, var(--color-primary) 55%, var(--color-blue));
    --sky-night-stop-4: color-mix(in srgb, var(--color-primary) 68%, var(--color-blue));
    --sky-night-stop-5: color-mix(in srgb, var(--color-primary) 86%, var(--color-black));

    /* Tag-Gradient: Gleiche Farbe wie heller Hintergrund für nahtlosen Übergang */
    --sky-day-stop-1: var(--color-bg-light);
    --sky-day-stop-2: var(--color-bg-light);
    --sky-day-stop-3: var(--color-bg-light);
    --sky-day-stop-4: var(--color-bg-light);
    --sky-day-stop-5: var(--color-bg-light);
    --sky-day-stop-6: var(--color-bg-light);

    --sky-atmosphere-night-strong: color-mix(in srgb, var(--color-blue) 18%, transparent);
    --sky-atmosphere-night-soft: color-mix(in srgb, var(--color-blue) 12%, transparent);
    /* Keine Atmosphären-Effekte für Tag (da einfarbig) */
    --sky-atmosphere-day-sun: transparent;
    --sky-atmosphere-day-warm: transparent;

    --solutions-offset-y: var(--spacing-md);
}

/* Himmel-Hintergrund - scrollt mit rein, wird dann fixiert */
.sky-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    /* Performance */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, position, top;
    /* Nur sichtbar wenn Wrapper im Viewport */
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sky-transition-wrapper.active .sky-background {
    opacity: 1;
}

/* Nach Animation abgeschlossen: Absolut positioniert für normales Scrollen */
.sky-transition-wrapper.phase-complete .sky-background {
    position: absolute;
    height: 100%;
    /* Kein Farbstich beim Weiter-Scrollen in die nächsten Sections */
    opacity: 0;
}

/* ============================================
   Himmel-Gradienten
   ============================================ */

/* Nachthimmel Gradient */
.sky-gradient-night {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--sky-night-stop-1) 0%,
        var(--sky-night-stop-2) 25%,
        var(--sky-night-stop-3) 50%,
        var(--sky-night-stop-4) 75%,
        var(--sky-night-stop-5) 100%
    );
    opacity: var(--sky-night-opacity, 1);
    transition: opacity var(--transition-fast);
    /* Performance */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Taghimmel Gradient */
.sky-gradient-day {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--sky-day-stop-1) 0%,
        var(--sky-day-stop-2) 20%,
        var(--sky-day-stop-3) 40%,
        var(--sky-day-stop-4) 60%,
        var(--sky-day-stop-5) 80%,
        var(--sky-day-stop-6) 100%
    );
    opacity: var(--sky-day-opacity, 0);
    transition: opacity var(--transition-fast);
    /* Performance */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Subtiler Atmosphären-Effekt für Nachthimmel */
.sky-gradient-night::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 30%, var(--sky-atmosphere-night-strong) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 70%, var(--sky-atmosphere-night-soft) 0%, transparent 50%);
    pointer-events: none;
}

/* Subtiler Atmosphären-Effekt für Taghimmel */
.sky-gradient-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--sky-atmosphere-day-sun) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 20%, var(--sky-atmosphere-day-warm) 0%, transparent 30%);
    pointer-events: none;
}


/* ============================================
   Vision Section (im Sky-Wrapper)
   ============================================ */

.sky-transition-wrapper .success-vision-section {
    position: relative;
    z-index: 10;
    /* Überschreibe Standard-Hintergrund */
    background: transparent !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl) 0;
    /* Overflow hidden damit Sterne nicht über Section hinausragen */
    overflow: hidden;
}

/* Entferne den ::before Pseudo-Element (Atmosphären-Effekt ist jetzt im sky-background) */
.sky-transition-wrapper .success-vision-section::before {
    display: none;
}

/* Vision Content Fade-out */
.sky-transition-wrapper .success-vision-content {
    opacity: var(--vision-opacity, 1);
    transform: translateY(var(--vision-offset-y, 0));
    transition: opacity 0.05s linear, transform 0.05s linear;
    will-change: opacity, transform;
    position: relative;
    z-index: 2;
}

/* Sterne-Container in Vision-Section */
.sky-transition-wrapper .success-vision-section .sky-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: var(--stars-opacity, 1);
    transition: opacity 0.2s linear;
}

/* Kleinere Sterne in der Vision-Section */
.sky-transition-wrapper .twinkling-star.size-tiny {
    width: 1.5px;
    height: 2px;
}

.sky-transition-wrapper .twinkling-star.size-small {
    width: 2px;
    height: 2.5px;
}

.sky-transition-wrapper .twinkling-star.size-medium {
    width: 2.5px;
    height: 3px;
}

.sky-transition-wrapper .twinkling-star.size-large {
    width: 3px;
    height: 3.5px;
}

.sky-transition-wrapper .twinkling-star.size-xlarge {
    width: 4px;
    height: 5px;
}

@media (min-width: 768px) {
    .sky-transition-wrapper .twinkling-star.size-tiny {
        width: 2px;
        height: 2.5px;
    }

    .sky-transition-wrapper .twinkling-star.size-small {
        width: 2.5px;
        height: 3px;
    }

    .sky-transition-wrapper .twinkling-star.size-medium {
        width: 3px;
        height: 3.5px;
    }

    .sky-transition-wrapper .twinkling-star.size-large {
        width: 4px;
        height: 4.5px;
    }

    .sky-transition-wrapper .twinkling-star.size-xlarge {
        width: 5px;
        height: 6px;
    }
}

/* Vision Text bleibt lesbar auf Sternenhimmel */
.sky-transition-wrapper .success-vision-title,
.sky-transition-wrapper .success-vision-text {
    text-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 50%, transparent);
}

/* ============================================
   Scroll-Spacer (minimiert da Solutions auf Himmel erscheint)
   ============================================ */

/* Spacer für Scroll-Animation - Solutions erscheint auf fixiertem Himmel */
.sky-scroll-spacer {
    position: relative;
    height: 30vh;
    width: 100%;
    z-index: 5;
    pointer-events: none;
}

/* ============================================
   Solutions Section (erscheint auf fixiertem Taghimmel)
   ============================================ */

.sky-transition-wrapper .solutions-split-section {
    position: relative;
    /* Höher als Overlay (z-index: 15) damit Inhalte nicht überdeckt werden */
    z-index: 20;
    /* Transparent während Animation - Taghimmel scheint durch */
    background-color: transparent;
    min-height: auto;
}

/* Nach Animation: Light background für normale Darstellung */
.sky-transition-wrapper.phase-complete .solutions-split-section {
    background-color: var(--color-bg-light);
}

/* Solutions Container zentriert auf Himmel - ÜBER dem Overlay */
.sky-transition-wrapper .solutions-split-container {
    position: relative;
    z-index: 20;
}

/* Solutions Content erscheint mit Fade-in */
.sky-transition-wrapper .solutions-split-wrapper {
    opacity: var(--solutions-opacity, 0);
    transform: translateY(var(--solutions-offset-y));
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.sky-transition-wrapper.solutions-visible .solutions-split-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Solutions Header erscheint mit Fade-in */
.sky-transition-wrapper .solutions-split-header {
    opacity: var(--solutions-opacity, 0);
    transform: translateY(var(--solutions-offset-y));
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.sky-transition-wrapper.solutions-visible .solutions-split-header {
    opacity: 1;
    transform: translateY(0);
}

/* Desktop: Nav und Content vertikal bündig am unteren Rand */
@media (min-width: 1024px) {
    .sky-transition-wrapper .solutions-split-wrapper {
        align-items: flex-start;
        gap: var(--spacing-2xl);
    }
    
    .sky-transition-wrapper .solutions-nav {
        width: 30%;
    }
    
    .sky-transition-wrapper .solutions-split-header {
        padding-left: calc(30% + var(--spacing-2xl));
    }
}

/* ============================================
   Solution Panels - Smooth Crossfade
   ============================================ */

/* Mobile-first: Panels bleiben im normalen Dokumentfluss.
   So vermeiden wir Mobile-Bugs (z.B. iOS/Scroll/Fixed Stacking), bei denen absolut positionierte Panels
   scheinbar "verschwinden" und nur die Navigation sichtbar bleibt. */
.sky-transition-wrapper .solutions-split-section .solutions-content {
    position: relative;
}

.sky-transition-wrapper .solutions-split-section .solution-panel {
    display: none;
}

.sky-transition-wrapper .solutions-split-section .solution-panel.active {
    display: block;
}

/* Desktop: Crossfade/Overlay-Layout wie bisher */
@media (min-width: 1024px) {
    .sky-transition-wrapper .solutions-split-section .solution-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(var(--spacing-md));
        transition: opacity var(--transition-slow), transform var(--transition-slow);
    }

    .sky-transition-wrapper .solutions-split-section .solution-panel.active {
        position: relative;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ============================================
   Liquid Glass Effekt mit Lichtbrechung
   Lichtquelle: oben rechts
   ============================================ */

/* ============================================
   Liquid Glass - Auf Taghimmel abgestimmt
   ============================================ */

/* Content Container - Gleicher Effekt wie Nav Items */
.sky-transition-wrapper .solutions-split-section .solutions-content {
    position: relative;
    /* Keine Glas-Optik: Solutions ist eine normale Light-Section */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Nav Container */
.sky-transition-wrapper .solutions-split-section .solutions-nav {
    position: relative;
    background: transparent;
    padding: var(--spacing-md) 0;
}

/* Desktop: keine zusätzliche Nav-Padding, damit Content oben bündig startet */
@media (min-width: 1024px) {
    .sky-transition-wrapper .solutions-split-section .solutions-nav {
        padding: 0;
    }
}

/* Nav Items - Eleganter Glass-Effekt */
.sky-transition-wrapper .solutions-split-section .solution-nav-item {
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Nav Item - Türkis Akzent-Linie links */
.sky-transition-wrapper .solutions-split-section .solution-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--spacing-xs) * 0.75);
    background: var(--color-secondary);
    border-radius: 0;
    opacity: 1;
    transform: scaleX(0.67);
    transform-origin: left;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Nav Item Hover */
.sky-transition-wrapper .solutions-split-section .solution-nav-item:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    transform: translateX(calc(var(--spacing-xs) * 0.5));
}

.sky-transition-wrapper .solutions-split-section .solution-nav-item:hover::before {
    opacity: 1;
    transform: scaleX(0.67);
    box-shadow: none;
}

/* Active Nav Item */
.sky-transition-wrapper .solutions-split-section .solution-nav-item.active {
    background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
    border-color: var(--color-secondary);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.sky-transition-wrapper .solutions-split-section .solution-nav-item.active::before {
    opacity: 1;
    transform: scaleX(1);
    background: var(--color-secondary);
    box-shadow: none;
}

/* ============================================
   Übergangs-Overlay für sanften Ende
   ============================================ */

.sky-transition-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--spacing-3xl) * 2);
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--color-white) 50%, transparent) 40%,
        var(--color-bg-light) 100%
    );
    z-index: 15;
    opacity: calc(var(--overlay-opacity, 0) * 0.6);
    pointer-events: none;
    transition: opacity var(--transition-base);
}

/* Overlay nach Phase-Ende ausblenden (verhindert "Schleier" beim Eintritt in Stats) */
.sky-transition-wrapper.phase-complete .sky-transition-overlay {
    opacity: 0;
}

/* ============================================
   Accessibility & Performance
   ============================================ */

/* Reduzierte Bewegung: Alle Animationen ausschalten */
@media (prefers-reduced-motion: reduce) {
    .sky-background,
    .sky-gradient-night,
    .sky-gradient-day,
    .sky-stars-container,
    .success-vision-content,
    .solutions-split-wrapper {
        transition: none !important;
        transform: none !important;
    }
    
    /* Zeige beide Sektionen normal ohne Scroll-Animation */
    .sky-transition-wrapper {
        min-height: auto;
    }
    
    .sky-background {
        display: none;
    }
    
    .sky-transition-wrapper .success-vision-section {
        background: linear-gradient(
            180deg,
            var(--sky-night-stop-1) 0%,
            var(--sky-night-stop-2) 25%,
            var(--sky-night-stop-3) 50%,
            var(--sky-night-stop-4) 75%,
            var(--sky-night-stop-5) 100%
        ) !important;
    }
    
    .sky-transition-wrapper .solutions-split-section {
        background-color: var(--color-bg-light) !important;
    }
    
    .sky-scroll-spacer {
        display: none;
    }
    
    .sky-transition-wrapper .success-vision-content,
    .sky-transition-wrapper .solutions-split-wrapper {
        opacity: 1 !important;
    }
}

@media (min-width: 768px) {
    .sky-scroll-spacer {
        height: 40vh;
    }
}

@media (min-width: 1024px) {
    .sky-scroll-spacer {
        height: 50vh;
    }
}