/* static/css/animations.css */

/* Fade animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Slide animations */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Scale animations */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scaleOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Bounce animations */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Shake animation */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Glow animation */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgba(94, 114, 228, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(94, 114, 228, 0.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(94, 114, 228, 0.5);
    }
}

/* Online indicator pulse */
@keyframes pulse-online {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

/* Premium avatar glow */
@keyframes premiumGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Typing indicator animation */
@keyframes typingDot {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingDot 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Skeleton loading animation */
@keyframes skeletonLoading {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, var(--border-color) 25%, var(--hover-bg) 50%, var(--border-color) 75%);
    background-size: 200px 100%;
    animation: skeletonLoading 1.5s infinite linear;
    border-radius: 4px;
}

/* Story progress animation */
@keyframes storyProgress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.story-progress-bar {
    animation: storyProgress 5s linear forwards;
}

/* Message appear animation */
@keyframes messageAppear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.message-wrapper {
    animation: messageAppear 0.2s ease-out;
}

/* Modal backdrop animation */
@keyframes backdropFade {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

.modal-overlay {
    animation: backdropFade 0.2s ease-out;
}

/* Toast notification animation */
@keyframes toastSlideIn {
    from {
        transform: translate(-50%, 100px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    to {
        transform: translate(-50%, 100px);
        opacity: 0;
    }
}

/* Reaction pop animation */
@keyframes reactionPop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.reaction-badge {
    animation: reactionPop 0.2s ease-out;
}

/* Heart like animation */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.heart-animation {
    animation: heartBeat 0.5s ease-in-out;
}

/* Loading spinner with gradient */
@keyframes gradientSpin {
    0% {
        transform: rotate(0deg);
    }

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

.gradient-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent-blue), var(--accent-green), var(--accent-blue));
    animation: gradientSpin 1s linear infinite;
    mask: radial-gradient(transparent 60%, black 61%);
    -webkit-mask: radial-gradient(transparent 60%, black 61%);
}

/* Transition utilities */
.transition-all {
    transition: all 0.2s ease;
}

.transition-transform {
    transition: transform 0.2s ease;
}

.transition-opacity {
    transition: opacity 0.2s ease;
}

.transition-colors {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover effects */
.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale:hover {
    transform: scale(1.02);
}

.hover-glow:hover {
    animation: glow 1.5s infinite;
}