/* 
================================================================================
   VidSnap Pro — PureGlow UI Animations
   Brand: Pinku's Lab (@PinkusLab)
   File: animations.css (Keyframes & Micro-interactions)
================================================================================
*/

/* 1. Real-time platform focus/active glowing pulses */

/* Instagram Gradient Glow */
@keyframes glowPulseInstagram {
    0% {
        box-shadow: 0 0 10px rgba(225, 48, 108, 0.1), 0 0 0 0 rgba(225, 48, 108, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(225, 48, 108, 0.25), 0 0 0 8px rgba(225, 48, 108, 0.08);
    }
    100% {
        box-shadow: 0 0 10px rgba(225, 48, 108, 0.1), 0 0 0 0 rgba(225, 48, 108, 0);
    }
}
.paste-box-container.instagram:focus-within, 
.paste-box-container.instagram.active-detect {
    animation: glowPulseInstagram 2s infinite ease-in-out;
}

/* Facebook Glow */
@keyframes glowPulseFacebook {
    0% {
        box-shadow: 0 0 10px rgba(24, 119, 242, 0.1), 0 0 0 0 rgba(24, 119, 242, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(24, 119, 242, 0.25), 0 0 0 8px rgba(24, 119, 242, 0.08);
    }
    100% {
        box-shadow: 0 0 10px rgba(24, 119, 242, 0.1), 0 0 0 0 rgba(24, 119, 242, 0);
    }
}
.paste-box-container.facebook:focus-within, 
.paste-box-container.facebook.active-detect {
    animation: glowPulseFacebook 2s infinite ease-in-out;
}

/* Twitter/X Glow */
@keyframes glowPulseTwitter {
    0% {
        box-shadow: 0 0 10px rgba(15, 20, 25, 0.05), 0 0 0 0 rgba(15, 20, 25, 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(15, 20, 25, 0.15), 0 0 0 8px rgba(15, 20, 25, 0.04);
    }
    100% {
        box-shadow: 0 0 10px rgba(15, 20, 25, 0.05), 0 0 0 0 rgba(15, 20, 25, 0);
    }
}
.paste-box-container.twitter:focus-within, 
.paste-box-container.twitter.active-detect {
    animation: glowPulseTwitter 2s infinite ease-in-out;
}

/* Kuaishou / Kwai Glow */
@keyframes glowPulseKuaishou {
    0% {
        box-shadow: 0 0 10px rgba(255, 110, 0, 0.1), 0 0 0 0 rgba(255, 110, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 110, 0, 0.25), 0 0 0 8px rgba(255, 110, 0, 0.08);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 110, 0, 0.1), 0 0 0 0 rgba(255, 110, 0, 0);
    }
}
.paste-box-container.kuaishou:focus-within, 
.paste-box-container.kuaishou.active-detect {
    animation: glowPulseKuaishou 2s infinite ease-in-out;
}

/* Generic/Standard Input Pulse */
@keyframes glowPulseGeneric {
    0% {
        box-shadow: 0 0 10px rgba(118, 87, 255, 0.10), 0 0 0 0 rgba(118, 87, 255, 0.16);
    }
    50% {
        box-shadow: 0 0 25px rgba(108, 99, 255, 0.18), 0 0 0 8px rgba(118, 87, 255, 0.09);
    }
    100% {
        box-shadow: 0 0 10px rgba(118, 87, 255, 0.10), 0 0 0 0 rgba(108, 99, 255, 0);
    }
}
.paste-box-container:focus-within {
    animation: glowPulseGeneric 2s infinite ease-in-out;
}

/* 2. Entrance Slide Animations */

/* Dynamic results slide entrance */
@keyframes slideUpEntrance {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.slide-up-entrance {
    animation: slideUpEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. Spinner Loading Animation */

@keyframes spinnerRotate {
    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: var(--text-white);
    animation: spinnerRotate 0.8s linear infinite;
    vertical-align: middle;
}

/* Circular loading state for buttons */
.btn-loading-state {
    pointer-events: none;
    opacity: 0.85;
}

/* 4. Button Download Bounce Animation on Hover */

@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}
.btn-final-download:hover svg,
.btn-download:hover svg {
    animation: arrowBounce 1s infinite ease-in-out;
}

/* 5. Smooth active tab guides opacity transitions */
.tab-panel {
    transition: opacity 0.25s ease-in-out;
    opacity: 0;
}

.tab-panel.active {
    opacity: 1;
}

/* 6. Mobile sticky footer slide-in */
@keyframes slideInSticky {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
.mobile-sticky-ad-wrapper.active {
    animation: slideInSticky 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 7. Platform Badge Switch transitions */
.input-icon-wrapper svg {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.15s ease;
}

.platform-changed svg {
    transform: scale(0.6);
    opacity: 0;
}

/* 8. Skeleton Loading Shimmer for Batch Cards */
@keyframes shimmerAnimation {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, rgba(239,242,250,1) 25%, rgba(225,229,240,1) 50%, rgba(239,242,250,1) 75%);
    background-size: 200% 100%;
    animation: shimmerAnimation 1.5s infinite ease-in-out;
}

.skeleton-text {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-text.title {
    width: 60%;
    height: 16px;
    margin-top: 4px;
}

.skeleton-text.author {
    width: 30%;
    height: 12px;
}