/* ==========================================================================
   MORE VPS — анимации
   Здесь ключевые кадры (@keyframes) и анимации появления.
   Свойство animation у компонентов осталось рядом с ними в style.css.
   ========================================================================== */

/* ===== Фон: плавающие орбы ===== */
@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    100% { transform: translate(6%, 8%) scale(1.4); opacity: 0.85; }
}

/* ===== Кнопки ===== */
@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6), 0 0 24px rgba(16, 185, 129, 0.5); }
    50% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0), 0 0 35px rgba(16, 185, 129, 0.8); }
}
@keyframes shimmerBtn { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes urgencePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.98); }
}

/* ===== Mega CTA ===== */
@keyframes megaGlow {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(16, 185, 129, 0.7),
            0 8px 32px rgba(16, 185, 129, 0.45),
            inset 0 1px 0 rgba(255,255,255,0.2);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(16, 185, 129, 0),
            0 12px 48px rgba(16, 185, 129, 0.7),
            inset 0 1px 0 rgba(255,255,255,0.2);
    }
}

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

/* блик-sweep поверх кнопки */
@keyframes sweepShine {
    0% { transform: translateX(-200%); }
    40%, 100% { transform: translateX(300%); }
}

/* кольцевое сияние вокруг кнопки */
@keyframes borderRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes rocketBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}

@keyframes megaGlowRed {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0.7),
            0 8px 32px rgba(239, 68, 68, 0.45),
            inset 0 1px 0 rgba(255,255,255,0.2);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(239, 68, 68, 0),
            0 12px 48px rgba(239, 68, 68, 0.7),
            inset 0 1px 0 rgba(255,255,255,0.2);
    }
}

/* Ripple при клике по главной CTA (создаётся в js/animations.js) */
@keyframes rippleEffect { to { transform: scale(1); opacity: 0; } }

/* ===== Hero: 3D-сервер ===== */
@keyframes serverFloat { 0%, 100% { transform: rotateY(-12deg) rotateX(8deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(6deg) translateY(-14px); } }
@keyframes pulseRing { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ===== Попапы удержания ===== */
@keyframes retFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes retSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Появление карточек ===== */
@keyframes fadeSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.feature, .price-card-glass, details, .cta-glass { animation: fadeSlide 0.5s ease-out forwards; }

/* ===== Scroll-анимация через классы (без forced reflow) ===== */
.scroll-hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}