.hero-card {
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}

.hero-card.flipped {
    transform: rotateX(360deg);
}


@keyframes floatUp {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

.scroll-float {
    animation: floatUp 0.8s ease forwards;
}

::-webkit-scrollbar {
    width: 12px;
    background: #0a0e17;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #D4A552, #B8860B);
    border-radius: 10px;
    border: 2px solid #0a0e17;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #B8860B, #D4A552);
}
.game-card, .console-card, .category-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: perspective(1000px) rotateX(0) rotateY(0);
}

.game-card:hover, .console-card:hover, .category-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    z-index: 10;
}
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
.typewriter {
    overflow: hidden;
    border-right: 3px solid #0d6efd;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #0d6efd; }
}

.glow {
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 10px #0d6efd; }
    to { box-shadow: 0 0 20px #0dcaf0, 0 0 30px #0d6efd; }
}


.hero-particle-bg {
    background: url('assets/img/particle-bg.png');
    animation: particleMove 20s linear infinite;
}

@keyframes particleMove {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}