/**
 * XQLUSIVE - Animations- & Scroll-Effekte (animations.css)
 * Steuert Hardware-beschleunigte Einblend-Animationen und Neigungseffekte.
 */

/* --- Framer-Motion: Schräge Karten & Frames --- */
.slanted-card-right {
    transform: rotate(2deg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.slanted-card-left {
    transform: rotate(-2deg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.phone-mockup {
    transform: rotate(2deg);
    border: 12px solid #1a1a24;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    background: #000;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* --- Parallax-Effekte --- */
.parallax-bg {
    transition: background-position 0.1s linear, transform 0.1s linear;
    will-change: background-position;
}

/* --- Intersection Observer Scroll-Einblendungen (Reveal) --- */
.reveal-element {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-element.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- MOBILE FEHLERABSICHERUNG (Graceful Degradation) --- */
/* * Wenn JavaScript auf älteren Smartphones fehlschlägt, blockiert, oder extrem verzögert 
 * geladen wird, zwingen diese Fallbacks die Seite nach 1.2 Sekunden zur Sichtbarkeit.
 */
@media screen {
    .no-js-fallback {
        animation: forceReveal 1s forwards;
        animation-delay: 1.2s;
    }
}

@keyframes forceReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}