/* ==========================================================================
   MySmartTools - Keyframes & Custom Animations
   ========================================================================== */

/* Fade In Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Float animations */
@keyframes floatCenter {
    0%, 100% {
        transform: translate(-50%, -52%) translateY(0) rotate(0deg);
        box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25);
    }
    50% {
        transform: translate(-50%, -48%) translateY(-10px) rotate(2deg);
        box-shadow: 0 35px 60px -10px rgba(37, 99, 235, 0.35);
    }
}

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

.float-slow {
    animation: floatItem 6s ease-in-out infinite;
}

/* Orbiting Animation Engine */
@keyframes orbit-1 {
    0% {
        transform: rotate(0deg) translate(130px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translate(130px) rotate(-360deg);
    }
}

@keyframes orbit-2 {
    0% {
        transform: rotate(72deg) translate(130px) rotate(-72deg);
    }
    100% {
        transform: rotate(432deg) translate(130px) rotate(-432deg);
    }
}

@keyframes orbit-3 {
    0% {
        transform: rotate(144deg) translate(130px) rotate(-144deg);
    }
    100% {
        transform: rotate(504deg) translate(130px) rotate(-504deg);
    }
}

@keyframes orbit-4 {
    0% {
        transform: rotate(216deg) translate(130px) rotate(-216deg);
    }
    100% {
        transform: rotate(576deg) translate(130px) rotate(-576deg);
    }
}

@keyframes orbit-5 {
    0% {
        transform: rotate(288deg) translate(130px) rotate(-288deg);
    }
    100% {
        transform: rotate(648deg) translate(130px) rotate(-648deg);
    }
}

/* Apply Orbiting Animations */
.orbit-path-1 {
    animation: orbit-1 25s linear infinite;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

.orbit-path-2 {
    animation: orbit-2 25s linear infinite;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

.orbit-path-3 {
    animation: orbit-3 25s linear infinite;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

.orbit-path-4 {
    animation: orbit-4 25s linear infinite;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

.orbit-path-5 {
    animation: orbit-5 25s linear infinite;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

/* Staggered Delay for elements load */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Pulse Glow Animation */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.glow-bg {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    animation: pulseGlow 8s ease-in-out infinite;
}

/* Intersection Observer Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Wave Animation for UI loading states */
@keyframes loadingWave {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.loading-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200px 100%;
    animation: loadingWave 1.5s infinite;
}