/* Custom Styles for Arcadialand */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .mask-image-linear {
        mask-image: linear-gradient(to right, transparent, black);
        -webkit-mask-image: linear-gradient(to right, transparent, black);
    }
    
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-slide-up {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Modal Open States */
.modal-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-active > div[id$="-content"] {
    transform: scale(1) !important;
}

/* Game Card Hover Effects */
.game-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px -5px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.3);
}

.game-card-img-wrap {
    overflow: hidden;
}

.game-card-img {
    transition: transform 0.5s ease;
}

.game-card:hover .game-card-img {
    transform: scale(1.05);
}

/* Progress Bar Smooth Transition */
.progress-bar-fill {
    transition: width 0.2s linear;
}

/* Toasts */
.toast-enter {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-leave {
    animation: slideOutRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #060608; 
}

::-webkit-scrollbar-thumb {
    background: #1A1A24; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155; 
}