/* --- Custom Animations --- */

/* Floating Animation for Laptops */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Initial states for Scroll Animations */
.observe-me {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

/* Slide Up */
.slide-up { transform: translateY(50px); }
.slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Right */
.slide-right { transform: translateX(-50px); }
.slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Left */
.slide-left { transform: translateX(50px); }
.slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Down */
.slide-down { transform: translateY(-50px); }
.slide-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Section Layer Animations */
.section-layer {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.section-layer.is-visible {
    opacity: 1;
    transform: translateY(0);
}