/* ===== Shared demo animations ===== */

@keyframes demoFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes demoFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes demoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(6deg); }
}

@keyframes demoFloatSlow {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.05); }
}

@keyframes demoPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

@keyframes demoDrift {
    0% { transform: translate(0, 0); }
    33% { transform: translate(8px, -14px); }
    66% { transform: translate(-6px, -8px); }
    100% { transform: translate(0, 0); }
}

@keyframes demoKenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.demo-fade-in {
    animation: demoFadeUp 0.85s ease both;
}

.demo-fade-in--d1 { animation-delay: 0.12s; }
.demo-fade-in--d2 { animation-delay: 0.24s; }
.demo-fade-in--d3 { animation-delay: 0.36s; }
.demo-fade-in--d4 { animation-delay: 0.48s; }

.demo-bg-kenburns::before {
    animation: demoKenBurns 18s ease-in-out infinite alternate;
}

.demo-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.demo-particle {
    position: absolute;
    opacity: 0.35;
    animation: demoDrift 6s ease-in-out infinite;
}

.demo-particle--float {
    animation: demoFloat 4s ease-in-out infinite;
}

.demo-particle--pulse {
    animation: demoPulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .demo-fade-in,
    .demo-fade-in--d1,
    .demo-fade-in--d2,
    .demo-fade-in--d3,
    .demo-fade-in--d4,
    .demo-bg-kenburns::before,
    .demo-particle,
    .demo-particle--float,
    .demo-particle--pulse {
        animation: none !important;
    }
}