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

/* --- 2. GLOBAL DEFAULTS --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #F3F4F6;
    color: #1F2937;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

/* --- 3. CUSTOM COLORS (Replacing Tailwind Config) --- */
.bg-brand-red { background-color: #FF0000 !important; }
.text-brand-red { color: #FF0000 !important; }
.border-brand-red { border-color: #FF0000 !important; }
.ring-brand-red:focus { box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3) !important; }

/* Gradients for Story Ring */
.from-brand-red { --tw-gradient-from: #FF0000; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 0, 0, 0)); }

/* --- 4. CUSTOM SHADOWS --- */
.shadow-card { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.shadow-nav { box-shadow: 0 -4px 20px rgba(0,0,0,0.05); }

/* --- 5. UTILITIES --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 20px); }
.safe-area-top { padding-top: env(safe-area-inset-top, 20px); }

.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

/* --- 6. ANIMATIONS --- */
.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #FF0000;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Blur Up Image Loading */
.blur-up {
    filter: blur(10px);
    transition: filter 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0.6;
}
.blur-up.loaded {
    filter: blur(0);
    opacity: 1;
}

/* Fade In */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }

/* Slide Up */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Pop In */
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.animate-pop { animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }