/* Fade In Up */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Staggered Children */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }

/* Image Parallax / Zoom */
.zoom-in-slow {
    animation: zoomInSlow 15s infinite alternate ease-in-out;
}

@keyframes zoomInSlow {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Ambient Particles */
.ambient-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: var(--color-highlight);
    border-radius: 50%;
    opacity: 0.2;
    animation: float 20s infinite linear;
}

.p1 { width: 4px; height: 4px; left: 10%; top: 20%; animation-duration: 25s; }
.p2 { width: 6px; height: 6px; left: 80%; top: 40%; animation-duration: 30s; }
.p3 { width: 3px; height: 3px; left: 40%; top: 70%; animation-duration: 22s; }
.p4 { width: 5px; height: 5px; left: 70%; top: 80%; animation-duration: 28s; }
.p5 { width: 4px; height: 4px; left: 30%; top: 30%; animation-duration: 26s; }

@keyframes float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.3; }
    80% { opacity: 0.3; }
    100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}