/* ===== ANIMATIONS ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ilan-card { animation: fadeIn 0.4s ease both; }
.ilan-card:nth-child(2) { animation-delay: 0.05s; }
.ilan-card:nth-child(3) { animation-delay: 0.1s; }
.ilan-card:nth-child(4) { animation-delay: 0.15s; }
.ilan-card:nth-child(5) { animation-delay: 0.2s; }
.ilan-card:nth-child(6) { animation-delay: 0.25s; }

.trend-cat-card { animation: fadeIn 0.4s ease both; }
.trend-cat-card:nth-child(2) { animation-delay: 0.05s; }
.trend-cat-card:nth-child(3) { animation-delay: 0.1s; }
.trend-cat-card:nth-child(4) { animation-delay: 0.15s; }
.trend-cat-card:nth-child(5) { animation-delay: 0.2s; }
.trend-cat-card:nth-child(6) { animation-delay: 0.25s; }
.trend-cat-card:nth-child(7) { animation-delay: 0.3s; }
.trend-cat-card:nth-child(8) { animation-delay: 0.35s; }

/* Banner transitions */
.banner-slide { transition: opacity 0.6s ease; }
.banner-dot { transition: all 0.3s ease; }

/* Modal animations */
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.auth-overlay.active, .location-overlay.active { animation: backdropIn 0.2s ease; }

/* Skeleton loading */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}