/* ==========================================================================
   YAHIA AZAB PORTFOLIO - CORE ANIMATIONS SYSTEM
   ========================================================================== */

/* 1. Scrolling Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Slide Left Reveal */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Slide Right Reveal */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Zoom In Reveal */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Delay modifiers for sequential animations */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* 2. Floating Background Blobs Animation */
.bg-animated-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.14;
    mix-blend-mode: screen;
    animation: floatingBlobs 25s infinite ease-in-out;
}

.blob-primary {
    width: 450px;
    height: 450px;
    background-color: var(--color-primary);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.blob-secondary {
    width: 550px;
    height: 550px;
    background-color: var(--color-neon);
    bottom: -15%;
    right: -10%;
    animation-delay: 5s;
    animation-duration: 30s;
}

.blob-accent {
    width: 380px;
    height: 380px;
    background-color: var(--color-accent);
    top: 35%;
    left: 45%;
    animation-delay: 10s;
    animation-duration: 20s;
}

@keyframes floatingBlobs {
    0% {
        transform: translate(0px, 0px) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(80px, -100px) scale(1.15) rotate(120deg);
    }
    66% {
        transform: translate(-50px, 60px) scale(0.9) rotate(240deg);
    }
    100% {
        transform: translate(0px, 0px) scale(1) rotate(360deg);
    }
}

/* Light Theme Blob adjustments */
[data-bs-theme="light"] .blob {
    mix-blend-mode: multiply;
    opacity: 0.06;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-zoom {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .blob {
        animation: none !important;
    }
    .floating-widget, .photo-glow-border {
        animation: none !important;
    }
}