/* Hide Alpine elements before init to prevent flash */
[x-cloak] { display: none !important; }

/* Udemy-style layout overrides */
body { overflow: hidden; background-color: #1c1d1f; }
main.min-h-screen { min-height: 0 !important; height: 100vh; display: flex; flex-direction: column; }

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #1c1d1f;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3e4143;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #565b5e;
}

/* Plyr fills the video container so controls appear at bottom, not center */
.plyr--video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Keep controls inside video frame and avoid overlap with metadata section */
.video-player-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-player-stage .plyr-video-container,
.video-player-stage .plyr,
.video-player-stage .plyr__video-wrapper,
.video-player-stage video {
    width: 100%;
    height: 100%;
}

.video-player-stage .plyr-video-container {
    position: absolute;
    inset: 0;
}

.video-player-stage .plyr__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.animate-fadeIn {
    animation: fadeIn 0.3s ease;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease;
}