/**
 * Apple-Style Parallax CSS v21.3.0
 * Smooth scrolling, layering, transitions
 */

/* ========================================
   SMOOTH SCROLLING (Apple-Style)
   ======================================== */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* ========================================
   SECTION LAYERING & SPACING
   ======================================== */

.spa-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden; /* Contain parallax layers */
    
    /* Apple-style spacing */
    padding: 120px 0;
}

/* First section = Hero (fullscreen) */
.spa-section:first-child {
    min-height: 100vh;
    padding: 0;
}

/* ========================================
   PARALLAX LAYERS
   ======================================== */

/* Layer 1: Background */
.spa-background-layer {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    z-index: 1;
    
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Layer 2: Particles */
.spa-particles {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: 2;
    
    will-change: transform;
    pointer-events: none;
}

/* Layer 3: Media Content */
.spa-media-content {
    position: relative;
    z-index: 3;
    
    will-change: transform;
}

/* Layer 4: Avatar */
.spa-avatar-area {
    position: relative;
    z-index: 90 !important; /* Below text, above backgrounds */
    
    will-change: transform;
}

/* Layer 5: Text (Foreground) */
.spa-text-content {
    position: relative;
    z-index: 100 !important; /* CRITICAL: Must be visible */
    
    will-change: transform;
}

/* ========================================
   CONTENT WRAPPER (Split Screen)
   ======================================== */

.spa-content-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    z-index: 100 !important; /* CRITICAL: Above all parallax layers */
}

/* Left: Text (60%) */
.spa-text-section {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 80px 80px 10%;
    position: relative;
}

/* Right: Avatar (40%) */
.spa-avatar-section {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    height: 100vh;
}

/* ========================================
   APPLE-STYLE TRANSITIONS
   ======================================== */

/* Content inside sections starts hidden, sections themselves visible */
.spa-section {
    /* NO opacity here - section must be visible! */
    position: relative;
}

/* Scale effect on scroll */
.spa-avatar-container {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.spa-section.spa-animated .spa-avatar-container {
    transform: scale(1);
}

/* Text reveal animations */
.spa-section-title {
    /* Initial opacity entfernt - Text muss sichtbar sein! */
    transform: translateY(0);
}

.spa-section.spa-animated .spa-section-title {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.spa-section-text {
    /* Initial opacity entfernt - Text muss sichtbar sein! */
    transform: translateY(0);
}

.spa-section.spa-animated .spa-section-text {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* CTA with delay + pulse */
.spa-skill-cta-link {
    /* Initial opacity entfernt - CTA muss sichtbar sein! */
    transform: translateY(0);
}

.spa-section.spa-animated .spa-skill-cta-link {
    animation: 
        fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards,
        pulse 2s ease-in-out 1.2s infinite;
}

/* ========================================
   STICKY NAVIGATION (Apple-Style)
   ======================================== */

.spa-thumbnail-nav {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    
    /* Smooth backdrop */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    
    padding: 16px 32px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.spa-thumbnail-nav:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateX(-50%) translateY(-4px);
}

/* ========================================
   HERO SECTION (First Impression)
   ======================================== */

.spa-section:first-child {
    /* Fullscreen Hero */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Dark gradient for impact */
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.4) 0%, 
        rgba(0, 0, 0, 0.2) 100%);
}

.spa-section:first-child .spa-section-title {
    font-size: 96px;
    line-height: 1;
    letter-spacing: -2px;
}

/* ========================================
   SCROLL INDICATOR (Hero Section)
   ======================================== */

.spa-scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* ========================================
   RESPONSIVE (Mobile-First)
   ======================================== */

@media (max-width: 1200px) {
    .spa-text-section {
        padding: 60px 60px 60px 8%;
    }
    
    .spa-section:first-child .spa-section-title {
        font-size: 72px;
    }
}

@media (max-width: 768px) {
    .spa-content-wrapper {
        flex-direction: column;
    }
    
    .spa-text-section,
    .spa-avatar-section {
        flex: 0 0 100%;
    }
    
    .spa-text-section {
        padding: 40px 24px;
        min-height: 60vh;
    }
    
    .spa-avatar-section {
        position: relative;
        height: 40vh;
        top: auto;
    }
    
    .spa-section {
        min-height: auto;
        padding: 60px 0;
    }
    
    .spa-section:first-child .spa-section-title {
        font-size: 48px;
    }
    
    /* Disable parallax on mobile (performance) */
    .spa-text-content,
    .spa-avatar-area,
    .spa-background-layer,
    .spa-particles {
        transform: none !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU Acceleration */
.spa-text-content,
.spa-avatar-area,
.spa-background-layer,
.spa-particles,
.spa-media-content {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Smooth rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .spa-text-content,
    .spa-avatar-area,
    .spa-background-layer,
    .spa-particles {
        transform: none !important;
        will-change: auto !important;
    }
}