/* ==========================================================================
   ANIMATION SYSTEM - "MYTHIC FLOW"
   ========================================================================== */

/* Utility Classes */
.fade-slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-play-state: paused; /* Controlled by JS Intersection Observer */
}

/* Fallback for when JS is disabled or elements are above fold */
.hero-content.fade-slide-up, .page-header.fade-slide-up {
    animation-play-state: running;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

.float-anim {
    animation: float 6s ease-in-out infinite;
}

.glow-pulse {
    animation: pulseGlowBox 2s infinite alternate;
}

/* Keyframes */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes breathingGlow {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes pulseGlow {
    0% {
        text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
        opacity: 0.6;
    }
    100% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 1);
        opacity: 1;
    }
}

@keyframes pulseGlowBox {
    0% {
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
    }
    100% {
        box-shadow: 0 0 25px rgba(46, 204, 113, 0.6);
    }
}

/* Ambient Particles Background */
.ambient-particles {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(26, 188, 156, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
    animation: auroraDrift 15s infinite alternate linear;
}

@keyframes auroraDrift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}