/* Non-critical CSS - Load asynchronously */

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Floating animations */
@keyframes float1 {
    0%, 100% { transform: rotate(-15deg) translateY(0px) translateX(0px); }
    25% { transform: rotate(-10deg) translateY(-20px) translateX(10px); }
    50% { transform: rotate(-20deg) translateY(-10px) translateX(-15px); }
    75% { transform: rotate(-5deg) translateY(-30px) translateX(5px); }
}

@keyframes float2 {
    0%, 100% { transform: rotate(20deg) translateY(0px) translateX(0px); }
    25% { transform: rotate(25deg) translateY(-25px) translateX(-10px); }
    50% { transform: rotate(15deg) translateY(-15px) translateX(20px); }
    75% { transform: rotate(30deg) translateY(-35px) translateX(-5px); }
}

@keyframes float3 {
    0%, 100% { transform: rotate(-10deg) translateY(0px) translateX(0px); }
    25% { transform: rotate(-5deg) translateY(-15px) translateX(15px); }
    50% { transform: rotate(-15deg) translateY(-25px) translateX(-10px); }
    75% { transform: rotate(0deg) translateY(-20px) translateX(5px); }
}

@keyframes float4 {
    0%, 100% { transform: rotate(25deg) translateY(0px) translateX(0px); }
    25% { transform: rotate(30deg) translateY(-30px) translateX(-15px); }
    50% { transform: rotate(20deg) translateY(-20px) translateX(25px); }
    75% { transform: rotate(35deg) translateY(-40px) translateX(-10px); }
}

@keyframes float5 {
    0%, 100% { transform: rotate(-5deg) translateY(0px) translateX(0px); }
    25% { transform: rotate(0deg) translateY(-10px) translateX(20px); }
    50% { transform: rotate(-10deg) translateY(-20px) translateX(-15px); }
    75% { transform: rotate(5deg) translateY(-15px) translateX(10px); }
}

@keyframes float6 {
    0%, 100% { transform: rotate(15deg) translateY(0px) translateX(0px); }
    25% { transform: rotate(20deg) translateY(-25px) translateX(-20px); }
    50% { transform: rotate(10deg) translateY(-15px) translateX(30px); }
    75% { transform: rotate(25deg) translateY(-35px) translateX(-15px); }
}

/* Enhanced gradient animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Floating screenshot animations */
.floating-screenshot:nth-child(1) {
    animation: float1 25s ease-in-out infinite;
}

.floating-screenshot:nth-child(2) {
    animation: float2 30s ease-in-out infinite;
}

.floating-screenshot:nth-child(3) {
    animation: float3 28s ease-in-out infinite;
}

.floating-screenshot:nth-child(4) {
    animation: float4 32s ease-in-out infinite;
}

.floating-screenshot:nth-child(5) {
    animation: float5 26s ease-in-out infinite;
}

.floating-screenshot:nth-child(6) {
    animation: float6 29s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-screenshot { display: none; }
    .dynamic-background::after {
        background: linear-gradient(135deg, var(--surface) 0%, var(--primary-dark) 50%, var(--surface) 100%);
        background-size: 200% 200%;
    }
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .toast {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-100%);
        text-align: center;
    }
    .toast.show { transform: translateY(0); }
    .toast.hide { transform: translateY(-100%); }
}

@media (max-width: 1024px) {
    .floating-screenshot { opacity: 0.05; }
}