:where([class^="ri-"])::before {
    content: "\f3c2";
}

.form-container {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: formAppear 0.5s forwards ease-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

    .form-container.hidden {
        display: none;
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    .form-container.active {
        display: block;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

@keyframes formAppear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.form-field {
    opacity: 0;
    transform: translateY(10px);
}

    .form-field:nth-child(1) {
        animation: fieldAppear 0.4s 0.1s forwards ease-out;
    }

    .form-field:nth-child(2) {
        animation: fieldAppear 0.4s 0.15s forwards ease-out;
    }

    .form-field:nth-child(3) {
        animation: fieldAppear 0.4s 0.2s forwards ease-out;
    }

    .form-field:nth-child(4) {
        animation: fieldAppear 0.4s 0.25s forwards ease-out;
    }

@keyframes fieldAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-text {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bg-gradient-animate {
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

    .btn-ripple:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform 0.5s, opacity 0.8s;
    }

    .btn-ripple:active:after {
        transform: scale(0, 0);
        opacity: 0.3;
        transition: 0s;
    }

.social-btn {
    transition: transform 0.2s ease;
}

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