/* ============================================================
   RideOps Design System — animations.css
   Çok ince geçişler: fade, slide, hover. Aşırı animasyon yok.
   ============================================================ */

@keyframes ro-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ro-slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ops-card,
.ops-chart-card,
.ops-bottom-card {
    animation: ro-slide-up 220ms ease both;
}

/* .fi-page + .fi-section transform KULLANMAYAN fade ile gelir. ro-slide-up'ın
   "both" fill-mode'u translateY(0)'ı KALICI tutar → element position:fixed için
   CONTAINING BLOCK olur (transform ≠ none). Sonuçları:
   - .fi-section: açık select/takvim panelleri sonraki kartın altında kalıyordu.
   - .fi-page: İÇİNDEKİ fixed modallar (Not & Hatırlatma .nrp-modal-backdrop, AI
     onay modalı vb.) viewport yerine TÜM-SAYFA kutusuna göre konumlanıyordu →
     uzun mobil sayfada modal "sayfa başında/ortasında" açılıp görünmüyordu.
     Transform kaldırılınca fixed tekrar viewport'a göre ortalanır. */
.fi-page,
.fi-section {
    animation: ro-fade-in 220ms ease both;
}

.fi-modal-window {
    animation: ro-fade-in 160ms ease both;
}

/* Hover kaldırma efekti — sadece kartlarda, abartısız */
.ops-card,
.ops-chart-card,
.ops-bottom-card,
.ops-quick-btn,
.fi-wi-stats-overview-stat {
    transition: transform var(--ro-transition), box-shadow var(--ro-transition), background-color var(--ro-transition);
}
.ops-card:hover,
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
}

/* Erişilebilirlik: hareket azaltma tercihine uyum */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}