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

* {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease;
}

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

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

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

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

.dark ::-webkit-scrollbar-track {
    background: #2d3748;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4a5568;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #718096;
}
/* Animation classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Video styling */
video {
    background-color: #000;
    max-height: 70vh;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

#results video {
    cursor: pointer;
    border-radius: 0.5rem;
}

.video-control-btn {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.video-control-btn:hover {
    background: rgba(0,0,0,0.8);
    transform: scale(1.1);
}

video::-webkit-media-controls {
    display: flex !important;
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-fullscreen-button {
    display: initial !important;
}
#results img {
    transition: transform 0.2s;
}

#results img:hover {
    transform: scale(1.05);
}

.bg-pink-600 {
    background-color: #db2777;
}

.hover\:bg-pink-700:hover {
    background-color: #be185d;
}
#results {
    view-transition-name: video-results;
}

::view-transition-old(video-results),
::view-transition-new(video-results) {
    animation-duration: 0.5s;
}