/* FILE: assets/css/style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 1. SCROLL SNAP */
html, body {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
    background-color: #000;
}

#feed-container {
    height: 100vh; width: 100vw;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
#feed-container::-webkit-scrollbar { display: none; }

.video-snap {
    height: 100vh; width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
}

/* 2. GLASSMORPHISM UTILITIES */
.glass-pill {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-circle {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
}

/* 3. CLEAN MODE (When holding screen) */
.clean-mode .action-layer,
.clean-mode .info-layer,
.clean-mode .nav-layer,
.clean-mode .overlay-layer, 
.clean-mode .monetag-overlay,
.clean-mode .vol-indicator {
    opacity: 0 !important;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}

/* 4. ANIMATIONS & SKELETON */
.skeleton-shimmer {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vol-animate { animation: fade-vol 1s forwards; }
@keyframes fade-vol { 
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); } 
    10% { transform: translate(-50%, -50%) scale(1.1); } 
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } 
}