/**
 * Mobile-Optimized Scroll Animations
 * Kompatibel mit mobile-scroll-reveal-fix.js
 * Version: 2.0 - Mobile First Design
 */

/* ===================================================================
   MOBILE-FIRST SCROLL ANIMATION BASE
   =================================================================== */

/* Initial State: Alle animierbaren Elemente versteckt */
.skill-detail,
.skill-section,
.content-pair,
.text-container,
.image-container,
[data-skill],
[id^="skill"]:not(.scroll-visible):not(.mobile-revealed) {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile-spezifische sanftere Initial-Transformation */
@media (max-width: 768px) {
    .skill-detail,
    .skill-section,
    [data-skill],
    [id^="skill"]:not(.scroll-visible):not(.mobile-revealed) {
        transform: translateY(20px); /* Weniger aggressive Bewegung für Mobile */
        transition: all 0.4s ease-out; /* Schnellere Animation für Mobile */
    }
}

/* ===================================================================
   REVEAL STATES - Multiple Klassen für Kompatibilität
   =================================================================== */

/* Haupt-Reveal-Klassen */
.scroll-visible,
.animate-visible,
.mobile-revealed,
.scroll-visible .content-pair,
.scroll-visible .text-container,
.scroll-visible .image-container,
.mobile-revealed .content-pair,
.mobile-revealed .text-container,
.mobile-revealed .image-container {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Erweiterte Reveal-States für verschiedene Animationstypen */
.scroll-visible.fade-up,
.mobile-revealed.fade-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.scroll-visible.slide-left,
.mobile-revealed.slide-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.scroll-visible.slide-right,
.mobile-revealed.slide-right {
    animation: slideInRight 0.6s ease-out forwards;
}

/* ===================================================================
   MOBILE-SPECIFIC ANIMATIONS
   =================================================================== */

@media (max-width: 768px) {
    /* Mobile: Sanftere, schnellere Animationen */
    .scroll-visible,
    .animate-visible,
    .mobile-revealed {
        transition: all 0.4s ease-out !important;
    }
    
    /* Mobile Touch-Feedback */
    .mobile-revealed {
        animation: mobileReveal 0.4s ease-out forwards;
    }
}

/* ===================================================================
   KEYFRAME ANIMATIONS
   =================================================================== */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mobileReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===================================================================
   SKILL-SPECIFIC ANIMATIONS
   =================================================================== */

/* 3D-Druck Skill - Animation von links */
#skill1 {
    transform: translateX(-50px) translateY(20px);
}

#skill1.scroll-visible,
#skill1.mobile-revealed {
    animation: slideInLeft 0.6s ease-out forwards;
}

/* 3D-Modell Skill - Animation von rechts */
#skill2 {
    transform: translateX(50px) translateY(20px);
}

#skill2.scroll-visible,
#skill2.mobile-revealed {
    animation: slideInRight 0.6s ease-out forwards;
}

/* 3D-Design Skill - Animation von links */
#skill3 {
    transform: translateX(-50px) translateY(20px);
}

#skill3.scroll-visible,
#skill3.mobile-revealed {
    animation: slideInLeft 0.6s ease-out forwards;
}

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

/* GPU-Beschleunigung für bessere Mobile Performance */
.skill-detail,
.skill-section,
[data-skill],
[id^="skill"] {
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
}

/* Reduce Motion für Accessibility */
@media (prefers-reduced-motion: reduce) {
    .skill-detail,
    .skill-section,
    [data-skill],
    [id^="skill"] {
        transition: opacity 0.2s ease !important;
        transform: none !important;
    }
    
    .scroll-visible,
    .animate-visible,
    .mobile-revealed {
        animation: none !important;
        transform: none !important;
    }
}

/* ===================================================================
   TOUCH-DEVICE OPTIMIZATIONS
   =================================================================== */

/* Touch-Device spezifische Verbesserungen */
@media (hover: none) and (pointer: coarse) {
    /* Touch-Geräte: Schnellere Animationen */
    .skill-detail,
    .skill-section,
    [data-skill],
    [id^="skill"] {
        transition-duration: 0.3s !important;
    }
    
    /* Touch-Feedback für interaktive Elemente */
    .skill-detail:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ===================================================================
   FALLBACK FÜR ÄLTERE BROWSER
   =================================================================== */

/* Legacy Browser: Sofortige Sichtbarkeit ohne Animationen */
.no-js .skill-detail,
.no-js .skill-section,
.no-js [data-skill],
.no-js [id^="skill"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ===================================================================
   DEBUG-MODUS (für Entwicklung)
   =================================================================== */

/* Debug-Border für Development (wird durch JS entfernt) */
.debug-mode .scroll-visible {
    border: 2px solid green !important;
}

.debug-mode .mobile-revealed {
    border: 2px solid blue !important;
}

/* ===================================================================
   RESPONSIVE ANIMATION BREAKPOINTS
   =================================================================== */

/* Mobile Portrait */
@media (max-width: 480px) {
    .skill-detail,
    .skill-section {
        transform: translateY(15px); /* Noch sanftere Animation */
        transition: all 0.3s ease-out;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .skill-detail,
    .skill-section {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .skill-detail,
    .skill-section {
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Desktop: Erweiterte Hover-Effekte */
    .scroll-visible:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease;
    }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */

@media print {
    .skill-detail,
    .skill-section,
    [data-skill],
    [id^="skill"] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}