﻿/* Daah Analytics - Animations CSS */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes zoomIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.8} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes countUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes wave { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-15px) rotate(1deg)} 66%{transform:translateY(-8px) rotate(-1deg)} }
@keyframes progressFill { from{width:0} to{width:var(--target-width,100%)} }
@keyframes toastSlideIn { from{opacity:0;transform:translateY(20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes cardHoverLift { from{transform:translateY(0);box-shadow:0 2px 12px rgba(0,0,0,0.08)} to{transform:translateY(-6px);box-shadow:0 12px 40px rgba(26,46,108,0.18)} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Scroll Reveal Classes */
.reveal { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.reveal-up { transform: translateY(30px); }
.reveal.reveal-left { transform: translateX(-30px); }
.reveal.reveal-right { transform: translateX(30px); }
.reveal.reveal-zoom { transform: scale(0.92); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Hero Animation */
.hero-content { animation: fadeLeft 0.8s ease both; }
.hero-visual { animation: fadeRight 0.8s ease 0.2s both; }
.hero-badge { animation: fadeUp 0.5s ease both; }
.hero-title { animation: fadeUp 0.6s ease 0.1s both; }
.hero-subtitle { animation: fadeUp 0.6s ease 0.2s both; }
.hero-cta { animation: fadeUp 0.6s ease 0.3s both; }
.hero-search { animation: fadeUp 0.6s ease 0.35s both; }
.hero-stats { animation: fadeUp 0.6s ease 0.4s both; }
.hero-float-badge { animation: floatBadge 3s ease-in-out infinite; }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-cards-grid .hero-card-mini:nth-child(1) { animation: fadeUp 0.5s ease 0.3s both; }
.hero-cards-grid .hero-card-mini:nth-child(2) { animation: fadeUp 0.5s ease 0.4s both; }
.hero-cards-grid .hero-card-mini:nth-child(3) { animation: fadeUp 0.5s ease 0.5s both; }
.hero-cards-grid .hero-card-mini:nth-child(4) { animation: fadeUp 0.5s ease 0.6s both; }

/* Floating elements */
.float-element { animation: float 4s ease-in-out infinite; }
.float-element-slow { animation: float 6s ease-in-out infinite; }
.float-element-fast { animation: float 2.5s ease-in-out infinite; }

/* Stat counter animation */
.stat-number.counting { animation: countUp 0.4s ease; }

/* Hover lift */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(26,46,108,0.18); }

/* Pulse for badges */
.pulse { animation: pulse 2s ease-in-out infinite; }

/* Loading spinner */
.spinner { width: 24px; height: 24px; border: 3px solid rgba(26,46,108,0.15); border-top-color: #1a2e6c; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }

/* Page transition */
body { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Card hover glow */
.glow-on-hover { transition: box-shadow 0.3s ease; }
.glow-on-hover:hover { box-shadow: 0 0 0 3px rgba(41,171,226,0.2), 0 12px 40px rgba(26,46,108,0.15); }

/* Progress bar animation */
.progress-bar-animated { animation: progressFill 1s ease forwards; }

/* Dashboard chart fade */
.chart-container { animation: fadeUp 0.5s ease; opacity: 1; }

/* Notification badge pulse */
.notif-badge { animation: pulse 2s infinite; }

/* Sidebar menu items stagger */
.sidebar-link:nth-child(1){animation-delay:0.05s}
.sidebar-link:nth-child(2){animation-delay:0.1s}
.sidebar-link:nth-child(3){animation-delay:0.15s}
.sidebar-link:nth-child(4){animation-delay:0.2s}
.sidebar-link:nth-child(5){animation-delay:0.25s}

/* Button ripple */
.btn-primary-daah,.btn-secondary-daah,.btn-accent { position: relative; overflow: hidden; }
.btn-primary-daah::after,.btn-secondary-daah::after,.btn-accent::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3); width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease; opacity: 0; }
.btn-primary-daah:active::after,.btn-secondary-daah:active::after,.btn-accent:active::after { width: 200px; height: 200px; opacity: 0; }

/* Image zoom on hover */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.4s ease; }
.img-zoom:hover img { transform: scale(1.07); }

/* Stagger children */
.stagger-children > * { animation: fadeUp 0.5s ease both; }
.stagger-children > *:nth-child(1){animation-delay:0.05s}
.stagger-children > *:nth-child(2){animation-delay:0.1s}
.stagger-children > *:nth-child(3){animation-delay:0.15s}
.stagger-children > *:nth-child(4){animation-delay:0.2s}
.stagger-children > *:nth-child(5){animation-delay:0.25s}
.stagger-children > *:nth-child(6){animation-delay:0.3s}