/* Gamer aesthetic animations and transitions */

/* Fade in up animation for new posts */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-card.new,
.fade-in-up {
    animation: fadeInUp 0.3s ease;
}

/* Hover transitions for interactive elements */
a, button, .btn, .interactive, .clickable {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a:hover {
    color: var(--color-purple);
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Button hover effects */
.btn-primary {
    background: linear-gradient(135deg, var(--color-purple), var(--color-neon-blue));
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.4);
}

/* Focus styles with neon blue glow */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--color-neon-blue) !important;
    box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.2) !important;
    outline: none;
}

/* Card hover effects */
.post-card,
.background-dark-container {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 2px 8px rgba(157, 78, 221, 0.15);
}

.background-dark-container:hover {
    border-color: rgba(157, 78, 221, 0.2);
}

/* Smooth transitions for all interactive elements */
.poll-option,
.comment,
.chat-message {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Pulse animation for notifications */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.notification-badge {
    animation: pulse 2s ease-in-out infinite;
}

/* Slide in animation for comments */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.comment.new {
    animation: slideIn 0.25s ease;
}

/* Glow effect for active elements */
.glow {
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.5);
    transition: box-shadow 0.2s ease;
}

.glow-blue {
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.5);
    transition: box-shadow 0.2s ease;
}

.chat-message:hover {
    background-color: rgba(157, 78, 221, 0.05);
}

/* Link transitions */
a {
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
    text-shadow: 0 0 8px rgba(157, 78, 221, 0.3);
}

/* Image transitions */
img {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

img:hover {
    opacity: 0.9;
}

/* Avatar hover effect */
.avatar, .post-avatar, .comment-input-avatar {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar:hover, post-avatar:hover, .comment-input-avatar:hover {
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.4);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading state animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading, .spinner {
    animation: spin 1s linear infinite;
}

/* Fade in animation for general use */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

/* Scale up animation for modals */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.show .modal-dialog {
    animation: scaleUp 0.2s ease;
}