/* === АНИМАЦИИ === */

body{
    position:relative;
    overflow-x:hidden;
}

.container,
.hero,
section{
    position:relative;
    z-index:1;
}

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

@keyframes glowPulse{
    0%,100%{box-shadow:0 0 12px rgba(108,99,255,.15)}
    50%{box-shadow:0 0 24px rgba(108,99,255,.25)}
}

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

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

body::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        #6C63FF,
        #FF4081,
        #6C63FF,
        #8B85FF
    );
    background-size:400% 400%;
    animation:floatGradient 15s ease infinite;
    opacity:.03;
    pointer-events:none;
}

.price-mini{
    animation:fadeInUp .5s ease forwards;
    will-change:transform,opacity;
}

.price-mini.featured{
    animation:glowPulse 5s ease-in-out 3;
    border-color:#6C63FF;
    background:rgba(108,99,255,.08);
    backdrop-filter:blur(8px);
}

.hero-badge{
    animation:float 3s ease-in-out infinite;
    will-change:transform;
}

@media(max-width:768px){
    .price-mini{
        animation:none;
    }
}

@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
    }
}