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

body { font-family: 'Vazirmatn', sans-serif; -webkit-tap-highlight-color: transparent; }
.font-lalezar { font-family: 'Lalezar', cursive; }

.fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.slide-up { animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.spin-wheel { animation: spin 3s cubic-bezier(0.1, 0.7, 0.1, 1) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(1080deg); } }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

.glass { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}

.zoom-container { overflow: hidden; cursor: zoom-in; }
.zoom-container img { transition: transform 0.1s ease-out; transform-origin: center center; }
.zoom-container:hover img { transform: scale(2); }

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Story Progress Bar Animation */
.story-progress-bar { width: 0; transition: width 5s linear; }
.story-progress-bar.active { width: 100%; }