/* Animations for domain.com */

/* Fade In Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

.fade-in-delay-1 {
    animation: fadeIn 1s ease 0.2s forwards;
    opacity: 0;
}

.fade-in-delay-2 {
    animation: fadeIn 1s ease 0.4s forwards;
    opacity: 0;
}

.fade-in-delay-3 {
    animation: fadeIn 1s ease 0.6s forwards;
    opacity: 0;
}

/* Slide Up Animation */
@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up {
    animation: slideUp 1s ease forwards;
}

.slide-up-delay-1 {
    animation: slideUp 1s ease 0.2s forwards;
    opacity: 0;
}

.slide-up-delay-2 {
    animation: slideUp 1s ease 0.4s forwards;
    opacity: 0;
}

.slide-up-delay-3 {
    animation: slideUp 1s ease 0.6s forwards;
    opacity: 0;
}

/* Count Animation for Statistics */
@keyframes countUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.statistic-number {
    animation: countUp 1s ease 0.5s forwards;
    opacity: 0;
}

/* Pulse Animation for CTA Buttons */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 111, 97, 0.6);
    }
    50% {
        transform: scale(1.07);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 111, 97, 0.9);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 111, 97, 0.6);
    }
}

.btn-pulse {
    animation: pulse 2s infinite;
    position: relative;
    display: inline-block;
}

/* Additional effect for the hero button */
.hero .btn-pulse::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-md);
    animation: fadeIn 1.5s infinite alternate;
    z-index: -1;
}

/* Gradient Animation */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-bg {
    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent), var(--primary));
    background-size: 300% 300%;
    animation: gradientMove 15s ease infinite;
}

/* Hamburger Menu Animation */
.hamburger-icon {
    width: 30px;
    height: 20px;
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.hamburger-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--primary);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.hamburger-icon span:nth-child(1) {
    top: 0px;
}

.hamburger-icon span:nth-child(2), .hamburger-icon span:nth-child(3) {
    top: 8px;
}

.hamburger-icon span:nth-child(4) {
    top: 16px;
}

.hamburger-icon.active span:nth-child(1) {
    top: 8px;
    width: 0%;
    left: 50%;
}

.hamburger-icon.active span:nth-child(2) {
    transform: rotate(45deg);
    background: white;
}

.hamburger-icon.active span:nth-child(3) {
    transform: rotate(-45deg);
    background: white;
}

.hamburger-icon.active span:nth-child(4) {
    top: 8px;
    width: 0%;
    left: 50%;
}

/* Border Animation */
@keyframes borderPulse {
    0% {
        border-color: var(--primary);
    }
    50% {
        border-color: var(--secondary);
    }
    100% {
        border-color: var(--primary);
    }
}

.border-animate {
    animation: borderPulse 2s infinite;
}

/* Shake Animation for Form Errors */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s;
}