/* Animations and Microinteractions CSS for NeoVolt */

/* ====================
   1. ICON ANIMATIONS
   ==================== */

.animated-icon {
    transition: transform 0.3s ease, color 0.3s ease;
}

.icon-bounce {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-5px); }
}

/* Icon scale on hover */
.animated-icon:hover {
    transform: scale(1.2);
}

/* Rotate animation for specific icons */
.fa-cog.animated-icon:hover,
.fa-sync.animated-icon:hover {
    animation: iconRotate 1s ease infinite;
}

@keyframes iconRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulse animation for alert icons */
.fa-exclamation-triangle.animated-icon,
.fa-bell.animated-icon {
    animation: iconPulse 2s ease infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* ====================
   2. SCROLL REVEAL
   ==================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation for children */
.animate-on-scroll.animated:nth-child(1) { transition-delay: 0.1s; }
.animate-on-scroll.animated:nth-child(2) { transition-delay: 0.2s; }
.animate-on-scroll.animated:nth-child(3) { transition-delay: 0.3s; }
.animate-on-scroll.animated:nth-child(4) { transition-delay: 0.4s; }
.animate-on-scroll.animated:nth-child(5) { transition-delay: 0.5s; }

/* ====================
   3. COUNTER ANIMATIONS
   ==================== */

[data-count] {
    font-weight: bold;
    font-size: 3rem;
    color: #0066cc;
    transition: color 0.3s ease;
}

[data-count]:hover {
    color: #0052a3;
}

/* ====================
   4. PARALLAX
   ==================== */

.parallax {
    transition: transform 0.1s ease-out;
}

/* ====================
   5. CARD HOVER EFFECTS
   ==================== */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.05);
}

/* ====================
   6. LOADING ANIMATIONS
   ==================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* ====================
   8. BUTTON PRESS EFFECT
   ==================== */

.btn-press {
    transition: transform 0.1s ease;
}

.btn-press:active {
    transform: scale(0.95);
}

/* ====================
   9. SHIMMER EFFECT
   ==================== */

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ====================
   10. GLOW EFFECT
   ==================== */

.glow {
    transition: box-shadow 0.3s ease;
}

.glow:hover {
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.6),
                0 0 40px rgba(0, 102, 204, 0.4);
}

/* ====================
   11. FLIP CARD EFFECT
   ==================== */

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* ====================
   12. TYPEWRITER EFFECT
   ==================== */

.typewriter {
    overflow: hidden;
    border-right: 2px solid #0066cc;
    white-space: nowrap;
    animation: typing 3.5s steps(40) 1s normal both,
               blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* ====================
   13. MOBILE RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    [data-count] {
        font-size: 2rem;
    }
    
    .animate-on-scroll {
        transform: translateY(20px);
    }
}

/* ====================
   14. DARK MODE SUPPORT
   ==================== */

.dark-mode [data-count] {
    color: #60a5fa;
}

.dark-mode [data-count]:hover {
    color: #93c5fd;
}