/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f0518; 
}

::-webkit-scrollbar-thumb {
    background: #1a0b2e; 
    border-radius: 4px;
    border: 1px solid #d4af37;
}

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

/* Hide scrollbar for main container if needed, but usually better to keep it custom */
.snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    scroll-behavior: smooth;
}

.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
    position: relative;
}

/* Fade In Animation for elements */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
    opacity: 0;
    animation: none;
}

.is-visible {
    animation: fadeIn 1s ease-out forwards;
}

/* Glowing Text Effect helper */
.text-glow {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Gradient Borders for Cards */
.gradient-border {
    position: relative;
    background: rgba(26, 11, 46, 0.8);
    backdrop-filter: blur(10px);
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, #d4af37, #00e5ff, #9333ea);
    z-index: -1;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    /* On mobile, strict snapping can sometimes trap the user if content is too tall. 
       We ensure min-height is respected. */
    .snap-section {
        min-height: 100vh;
        height: auto; /* Allow expansion */
        padding-top: 80px; /* Navbar clearance */
        padding-bottom: 40px;
    }
    
    /* Touch-friendly buttons */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Prevent text selection issues on mobile */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* Optimize images for mobile */
    img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Video container mobile optimization */
video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    video {
        object-fit: cover; /* Better fill on mobile */
    }
}

/* Lightbox mobile optimization */
#lightbox {
    -webkit-overflow-scrolling: touch;
}

#lightbox-img {
    max-height: 85vh !important;
    max-width: 95vw !important;
    touch-action: pinch-zoom;
}

@media (min-width: 768px) {
    #lightbox-img {
        max-height: 90vh !important;
        max-w: 90vw !important;
    }
}

/* Gallery images - full size display */
.gallery-trigger {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: block;
    width: 100%;
    height: auto;
    min-height: 400px;
}

/* Gallery container optimization */
#library .grid > div {
    background: rgba(26, 11, 46, 0.3);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

#loading-progress {
    animation: shimmer 2s infinite;
    background: linear-gradient(90deg, #d4af37 0%, #00e5ff 50%, #d4af37 100%);
    background-size: 1000px 100%;
}