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

.server-card {
    animation: float 4s ease-in-out infinite;
}

@keyframes glow {
    0% { box-shadow: 0 0 20px rgba(46, 123, 255, .2); }
    50% { box-shadow: 0 0 55px rgba(46, 123, 255, .5); }
    100% { box-shadow: 0 0 20px rgba(46, 123, 255, .2); }
}

.card {
    animation: glow 6s infinite;
}

[data-particles] {
    position: relative;

    isolation: isolate;
    overflow: hidden;
}

.particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    display: block;
}

@keyframes eyebrowGlow {
    0% { opacity: .55; letter-spacing: 2px; }
    50% { opacity: 1; letter-spacing: 4px; }
    100% { opacity: .55; letter-spacing: 2px; }
}

.section-title span {
    animation: eyebrowGlow 3.5s ease-in-out infinite;
}

@keyframes planEnter {
    0% { opacity: 0; transform: translateY(28px) scale(.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.plan-card {
    animation: planEnter .55s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes softPulse {
    0%, 100% {
        box-shadow:
            0 12px 30px -12px rgba(46, 123, 255, .72),
            0 3px 12px -4px rgba(26, 92, 255, .5),
            inset 0 1px 0 rgba(255, 255, 255, .28),
            0 0 0 0 rgba(96, 165, 255, 0);
    }
    50% {
        box-shadow:
            0 14px 34px -12px rgba(46, 123, 255, .9),
            0 3px 12px -4px rgba(26, 92, 255, .5),
            inset 0 1px 0 rgba(255, 255, 255, .28),
            0 0 26px 4px rgba(96, 165, 255, .38);
    }
}

.hero-buttons .primary-btn {
    animation: softPulse 3.4s ease-in-out infinite;
}

.server-illustration,
.blur-circle {
    will-change: transform, translate;
}

@keyframes driftOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(28px, -22px) scale(1.06); }
}

@keyframes driftOrbAlt {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-24px, 18px) scale(1.05); }
}

@keyframes gridDrift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 70px 70px, 70px 70px; }
}

@keyframes cardBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.circle1 {
    animation: driftOrb 16s ease-in-out infinite;
}

.circle2 {
    animation: driftOrbAlt 20s ease-in-out infinite;
}

.grid-background {
    animation: gridDrift 28s linear infinite;
}

.feature-card,
.stat-card,
.location-card,
.review,
.trusted-grid div {
    animation: cardBreathe 7s ease-in-out infinite;
}

.feature-card:nth-child(2),
.stat-card:nth-child(2),
.location-card:nth-child(2),
.review:nth-child(2),
.trusted-grid div:nth-child(2) { animation-delay: .6s; }

.feature-card:nth-child(3),
.stat-card:nth-child(3),
.review:nth-child(3),
.trusted-grid div:nth-child(3) { animation-delay: 1.2s; }

.feature-card:nth-child(4),
.stat-card:nth-child(4),
.trusted-grid div:nth-child(4) { animation-delay: 1.8s; }

.trusted-grid div:nth-child(5) { animation-delay: 2.2s; }

.feature-card:hover,
.stat-card:hover,
.location-card:hover,
.review:hover,
.trusted-grid div:hover {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    .plan-card,
    .hero-buttons .primary-btn,
    .section-title span,
    .server-card,
    .card {
        animation: none !important;
    }
    .server-illustration,
    .blur-circle {
        will-change: auto;
    }
}