/* Animation Effects for CyberFace Website */

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Slide In Animations */
.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.slide-in-up {
    animation: slideInUp 0.8s ease-out forwards;
}

.slide-in-down {
    animation: slideInDown 0.8s ease-out forwards;
}

/* Pulse Animation */
.pulse {
    animation: pulse 2s infinite alternate;
}

/* Glow Animation */
.glow {
    animation: glow 2s infinite alternate;
}

/* Typing Animation */
.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--secondary-color);
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

@keyframes slideInDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

@keyframes glow {
    from { box-shadow: 0 0 5px rgba(12, 255, 12, 0.3); }
    to { box-shadow: 0 0 20px rgba(12, 255, 12, 0.7); }
}

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

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--secondary-color) }
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Animation Durations */
.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-800 { animation-duration: 0.8s; }
.duration-1000 { animation-duration: 1s; }
.duration-1500 { animation-duration: 1.5s; }

/* Apply animations to specific elements */
/* Removed animations from hero content to prevent multiple text issues */
.hero-content h2 { opacity: 1; }
.hero-content p { opacity: 1; }
.hero-content .cta-buttons { opacity: 1; }

.feature-card:nth-child(1) { animation: slideInUp 0.8s ease-out 0.2s forwards; opacity: 0; }
.feature-card:nth-child(2) { animation: slideInUp 0.8s ease-out 0.4s forwards; opacity: 0; }
.feature-card:nth-child(3) { animation: slideInUp 0.8s ease-out 0.6s forwards; opacity: 0; }

.footer-logo, .footer-links, .footer-contact, .footer-newsletter {
    animation: fadeIn 0.8s ease-out forwards;
}