/* ==========================================================================
   Animations — روسری شیک
   ========================================================================== */

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(var(--animation-fade-distance));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    100% {
        background-position: 0% 50%;
    }
}

.animate-fade-up {
    opacity: 0;
    animation: fadeUp var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn var(--animation-duration) ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

.hover-lift {
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-fade-in {
        opacity: 1;
        animation: none;
    }

    .hover-lift:hover {
        transform: none;
    }

    .hero__placeholder-icon {
        animation: none;
    }
}