/**
 * GPU Acceleration for 60fps+ Performance
 * Supports 120Hz displays
 */

.animated,
.transition,
.card,
.button,
.modal,
.sidebar,
.player {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

* {
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fadeIn 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    }

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

    @keyframes fadeIn {
        from { opacity: 0; transform: translateZ(0); }
        to { opacity: 1; transform: translateZ(0); }
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translate3d(0, 20px, 0); }
        to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
}

.scroll-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

video {
    transform: translateZ(0);
    will-change: transform;
}

.grid {
    will-change: contents;
    contain: layout style paint;
}

@media (min-resolution: 120dpi) {
    * {
        animation-duration: calc(1s / 120);
    }
}