document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");

if (document.body.classList.contains("has-animations")) {
    const sr = ScrollReveal();
    sr.reveal(".feature, .pricing-table-inner", {
        duration: 600,
        distance: "20px",
        easing: "cubic-bezier(0.5, -0.01, 0, 1.005)",
        origin: "bottom",
        interval: 100
    });

    document.documentElement.classList.add("anime-ready");

    anime.timeline({ targets: ".hero-figure-box-05" })
        .add({
            duration: 400,
            easing: "easeInOutExpo",
            scaleX: [.05, .05],
            scaleY: [0, 1],
            perspective: "500px",
            delay: anime.random(0, 400)
        })
        .add({ duration: 400, easing: "easeInOutExpo", scaleX: 1 })
        .add({
            duration: 800,
            rotateY: "-15deg",
            rotateX: "8deg",
            rotateZ: "-1deg"
        });

    anime.timeline({ targets: ".hero-figure-box-06, .hero-figure-box-07" })
        .add({
            duration: 400,
            easing: "easeInOutExpo",
            scaleX: [.05, .05],
            scaleY: [0, 1],
            perspective: "500px",
            delay: anime.random(0, 400)
        })
        .add({ duration: 400, easing: "easeInOutExpo", scaleX: 1 })
        .add({ duration: 800, rotateZ: "20deg" });

    const figureBoxes = document.querySelectorAll(".hero-figure-box-01, .hero-figure-box-02, .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-08, .hero-figure-box-09, .hero-figure-box-10");
    figureBoxes.forEach((box) => {
        anime({
            targets: box,
            duration: anime.random(600, 800),
            delay: anime.random(600, 800),
            rotate: [anime.random(-360, 360), box.getAttribute("data-rotation")],
            scale: [.7, 1],
            opacity: [0, 1],
            easing: "easeInOutExpo"
        });
    });
}

/*
const togglePassword = (toggleButton, passwordField) => {
    const type = passwordField.getAttribute("type") === "password" ? "text" : "password";
    passwordField.setAttribute("type", type);
    toggleButton.classList.toggle("bi-eye");
};

const togglePassword1 = document.querySelector("#togglePassword1");
const password1 = document.querySelector("#password1");

togglePassword1.addEventListener("click", () => {
    togglePassword(togglePassword1, password1);
});

const togglePassword2 = document.querySelector("#togglePassword2");
const password2 = document.querySelector("#password2");

togglePassword2.addEventListener("click", () => {
    togglePassword(togglePassword2, password2);
});*/