@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-dark: #0a0b0e;
    --card-dark: #12151b;
    --border-dark: #222734;
    --accent-red: #e50914;
    --accent-glow: rgba(229, 9, 20, 0.3);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-dark);
    color: #f3f4f6;
    overflow-x: hidden;
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0f1117;
}
::-webkit-scrollbar-thumb {
    background: #272d3b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3c4456;
}

.movie-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.movie-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px var(--accent-glow);
}

.player-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8);
}

.player-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(18,21,27,0.7) 0%, rgba(10,11,14,0.95) 100%);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.play-pulse {
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.7);
    }
    70% {
        box-shadow: 0 0 0 25px rgba(229, 9, 20, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);
    }
}