/* ==========================================================
   Tahafuz AI Dashboard Animations
   Version: 1.0
========================================================== */

/* ==========================================
   PAGE LOAD
========================================== */

body{

    animation:fadePage .8s ease;

}

@keyframes fadePage{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================================
   FADE UP
========================================== */

.hero,
.investigation-card,
.threat-card,
.glass-card,
.stat-box{

    animation:fadeUp .8s ease both;

}

.hero{

    animation-delay:.1s;

}

.investigation-card{

    animation-delay:.2s;

}

.threat-card{

    animation-delay:.3s;

}

.report-card{

    animation-delay:.4s;

}

.timeline-card{

    animation-delay:.5s;

}

.recommendation-card{

    animation-delay:.6s;

}

.insights-card{

    animation-delay:.7s;

}

.analytics-card{

    animation-delay:.8s;

}

.activity-card{

    animation-delay:.9s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar{

    animation:slideLeft .8s ease;

}

@keyframes slideLeft{

    from{

        transform:translateX(-80px);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

/* ==========================================
   TOPBAR
========================================== */

.topbar{

    animation:slideDown .7s ease;

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   BUTTON HOVER
========================================== */

.upload-btn,
.scan-btn,
.new-btn,
.sidebar-card button{

    transition:.35s ease;

}

.upload-btn:hover,
.scan-btn:hover,
.new-btn:hover,
.sidebar-card button:hover{

    transform:translateY(-5px) scale(1.02);

}

/* ==========================================
   NAVIGATION
========================================== */

.sidebar nav a{

    transition:.35s ease;

}

.sidebar nav a:hover{

    transform:translateX(8px);

}

/* ==========================================
   GLOW
========================================== */

.logo-icon{

    animation:glow 2.5s infinite alternate;

}

@keyframes glow{

    from{

        box-shadow:

            0 0 15px rgba(20,241,149,.25);

    }

    to{

        box-shadow:

            0 0 35px rgba(20,241,149,.6);

    }

}

/* ==========================================
   BADGE
========================================== */

.badge{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================
   SCORE
========================================== */

.score-number{

    animation:zoom .8s ease;

}

@keyframes zoom{

    from{

        transform:scale(.7);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================
   PROGRESS
========================================== */

.confidence-fill{

    animation:fillBar 2s ease;

}

@keyframes fillBar{

    from{

        width:0;

    }

    to{

        width:96%;

    }

}

/* ==========================================
   FINDINGS
========================================== */

.finding{

    transition:.35s ease;

}

.finding:hover{

    transform:translateX(8px);

}

/* ==========================================
   TIMELINE
========================================== */

.timeline-item span{

    animation:blinkGlow 2s infinite;

}

@keyframes blinkGlow{

    0%{

        box-shadow:none;

    }

    50%{

        box-shadow:0 0 18px rgba(20,241,149,.5);

    }

    100%{

        box-shadow:none;

    }

}

/* ==========================================
   STATS
========================================== */

.stat-box{

    transition:.35s ease;

}

.stat-box:hover{

    transform:translateY(-8px);

}

/* ==========================================
   ICON FLOAT
========================================== */

.stat-box i{

    animation:floatIcon 4s ease-in-out infinite;

}

@keyframes floatIcon{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
   SEARCH
========================================== */

.search-box{

    transition:.35s ease;

}

.search-box:focus-within{

    border-color:var(--primary);

    box-shadow:

        0 0 18px rgba(20,241,149,.25);

}

/* ==========================================
   CARD
========================================== */

.glass-card,
.investigation-card,
.threat-card{

    transition:.35s ease;

}

.glass-card:hover,
.investigation-card:hover,
.threat-card:hover{

    transform:translateY(-8px);

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar-thumb{

    transition:.3s;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ==========================================
   LOADER
========================================== */

.loader{

    width:60px;

    height:60px;

    border:5px solid rgba(255,255,255,.08);

    border-top:5px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   FADE
========================================== */

.fade-in{

    animation:fadePage .6s ease;

}

.slide-up{

    animation:fadeUp .6s ease;

}

.zoom-in{

    animation:zoom .5s ease;

}

/* ==========================================
   END
========================================== */