/* ═══════════════════════════════════════════════════════════
   נדל״ן פרו — Animation System v5
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ KEYFRAMES ═══════════ */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-in-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ═══════════ UTILITY CLASSES ═══════════ */

.animate-fade-in    { animation: fade-in var(--duration-normal) var(--ease-out); }
.animate-fade-up    { animation: fade-up var(--duration-slow) var(--ease-out); }
.animate-scale-in   { animation: scale-in var(--duration-slow) var(--ease-spring); }
.animate-slide-right { animation: slide-in-right var(--duration-slow) var(--ease-out); }

/* ─── Stagger Children ─── */
.stagger-item { animation: fade-up var(--duration-slow) var(--ease-out) both; }
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
.stagger-item:nth-child(4) { animation-delay: 180ms; }
.stagger-item:nth-child(5) { animation-delay: 240ms; }
.stagger-item:nth-child(6) { animation-delay: 300ms; }
.stagger-item:nth-child(7) { animation-delay: 360ms; }
.stagger-item:nth-child(8) { animation-delay: 420ms; }

/* ═══════════ SKELETON LOADING ═══════════ */

.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-50) 40%, var(--gray-100) 80%);
    background-size: 300% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text      { height: 12px; margin-bottom: 10px; border-radius: var(--radius-xs); }
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-title     { height: 18px; width: 55%; margin-bottom: 14px; border-radius: var(--radius-xs); }
.skeleton-avatar    { width: 40px; height: 40px; border-radius: var(--radius-lg); flex-shrink: 0; }
.skeleton-card      { height: 100px; border-radius: var(--radius-lg); }
.skeleton-row       { display: flex; gap: var(--space-4); padding: var(--space-4); }
.skeleton-row .skeleton-text { flex: 1; margin-bottom: 0; }

/* Skeleton stat card */
.skeleton-stat {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
}
.skeleton-stat-icon { width: 46px; height: 46px; border-radius: var(--radius-lg); }
.skeleton-stat-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-stat-value { height: 24px; width: 60px; border-radius: var(--radius-xs); }
.skeleton-stat-label { height: 10px; width: 90px; border-radius: var(--radius-xs); }

/* ═══════════ OFFLINE INDICATOR ═══════════ */

.app-offline .app-header::after {
    content: 'אין חיבור לאינטרנט — עובד במצב לא מקוון';
    position: absolute;
    bottom: -30px;
    right: 0;
    left: 0;
    height: 30px;
    background: linear-gradient(90deg, var(--gold-600), var(--gold-500));
    color: var(--navy-950);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-header);
    animation: slide-in-down var(--duration-slow) var(--ease-spring);
    letter-spacing: var(--tracking-wide);
}

/* ─── Sync Indicator ─── */
.sync-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-500);
    animation: pulse-scale 1.8s ease-in-out infinite;
    margin-inline-start: var(--space-2);
}

/* ═══════════ MICRO-INTERACTIONS ═══════════ */

.link-animate { position: relative; text-decoration: none; }
.link-animate::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 1.5px;
    background: currentColor;
    transition: width var(--duration-normal) var(--ease-spring);
}
.link-animate:hover::after { width: 100%; }

.icon-bounce:active .material-icons-round { animation: count-up var(--duration-fast) var(--ease-spring); }

.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.row-sweep { position: relative; }
.row-sweep::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(77,103,147,0.03), transparent);
    opacity: 0;
    transition: opacity var(--duration-normal);
    pointer-events: none;
}
.row-sweep:hover::after { opacity: 1; }

.num-animate { display: inline-block; animation: count-up var(--duration-slow) var(--ease-out) both; }

.glow-focus:focus { box-shadow: var(--shadow-focus), 0 0 16px rgba(77,103,147,0.08); }

/* ═══════════ PAGE TRANSITIONS ═══════════ */

.page-enter { animation: fade-up var(--duration-slow) var(--ease-out); }
.page-exit  { animation: fade-in var(--duration-fast) var(--ease-in) reverse forwards; }

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
}
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* ═══════════ LOADING STATES ═══════════ */

.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
    backdrop-filter: blur(2px);
}

.loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--navy-500);
    animation: loading-dots 1.2s ease-in-out infinite;
}
.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dots {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}