/* =====================================================
   culchr.tv - Custom Styles
   Extends Tailwind with custom components
   ===================================================== */

/* Base */
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #0a060d;
    color: #f1f5f9;
    overflow-x: hidden;
}

/* Multi-color .tv gradient text */
.tv-gradient {
    background: linear-gradient(135deg, #FF1B8D, #00D4FF) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
}

/* Scrollbar hide */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom scrollbar for main page */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a060d; }
::-webkit-scrollbar-thumb { background: #9719f0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b84bf7; }

/* Hero gradient overlay */
.hero-gradient {
    background: linear-gradient(90deg, rgba(10,6,13,1) 0%, rgba(10,6,13,0.85) 40%, rgba(10,6,13,0) 100%);
}
.hero-gradient-bottom {
    background: linear-gradient(to top, rgba(10,6,13,1) 0%, rgba(10,6,13,0.5) 50%, transparent 100%);
}
.hero-gradient-top {
    background: linear-gradient(to bottom, rgba(10,6,13,0.7) 0%, transparent 100%);
}

/* Card hover effects */
.stream-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stream-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(151, 25, 240, 0.15);
}
.stream-card .stream-thumb img {
    transition: transform 0.5s ease;
}
.stream-card:hover .stream-thumb img {
    transform: scale(1.05);
}
.stream-card .play-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.stream-card:hover .play-overlay {
    opacity: 1;
}

/* Row scroll buttons */
.row-scroll-btn {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.stream-row:hover .row-scroll-btn {
    opacity: 1;
}

/* Featured slider */
.slider-dot {
    transition: all 0.3s ease;
}
.slider-dot.active {
    width: 2rem;
    background-color: #9719f0;
}

/* Culture pill */
.culture-pill {
    transition: all 0.3s ease;
}
.culture-pill:hover, .culture-pill.active {
    background-color: rgba(151, 25, 240, 0.2);
    border-color: rgba(151, 25, 240, 0.4);
    color: #9719f0;
}

/* Skeleton loading */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #1a1025 25%, #2a1a3a 50%, #1a1025 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* Nav active indicator */
.nav-link.active {
    color: #f1f5f9;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #9719f0;
    border-radius: 1px;
}

/* Button press effect */
.btn-press {
    transition: transform 0.1s ease;
}
.btn-press:active {
    transform: scale(0.95);
}

/* Fade in animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Mobile nav overlay */
.mobile-nav-overlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Admin styles */
.admin-sidebar {
    transition: transform 0.3s ease;
}
@media (max-width: 1023px) {
    .admin-sidebar.closed {
        transform: translateX(-100%);
    }
}

/* Toast notifications */
.toast {
    animation: slideInRight 0.3s ease, fadeOut 0.3s ease 4.7s;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}