document.addEventListener("DOMContentLoaded", function () {

    const video = document.getElementById("af-bg-video");
    const btnToggle = document.getElementById("af-audio-toggle");
    const btnUp = document.getElementById("af-audio-up");
    const btnDown = document.getElementById("af-audio-down");

    const partFis = document.querySelector(".af-logo-fis");
    const partCo = document.querySelector(".af-logo-co");
    const partNta = document.querySelector(".af-logo-nta");
    const subtitle = document.querySelector(".af-subtitle");

    const menuToggle = document.querySelector(".af-menu-toggle");
    const menuPanel = document.querySelector(".af-menu-panel");

    const blue = "#66b3ff";
    const white = "#ffffff";

    /* Vídeo */
    if (video) {
        video.muted = true;
        video.volume = 0.5;
    }

    btnToggle.addEventListener("click", () => {
        if (video.muted || video.volume === 0) {
            video.muted = false;
            video.volume = 0.5;
        } else {
            video.muted = true;
        }
    });

    btnUp.addEventListener("click", () => {
        video.muted = false;
        video.volume = Math.min(1, video.volume + 0.1);
    });

    btnDown.addEventListener("click", () => {
        video.volume = Math.max(0, video.volume - 0.1);
        if (video.volume === 0) video.muted = true;
    });

    /* Logo */
    setTimeout(() => { partCo.style.color = blue; }, 1000);

    let state = false;
    setInterval(() => {
        state = !state;
        partFis.style.color = state ? blue : white;
        partNta.style.color = state ? white : blue;
    }, 1000);

    /* Subtítulo */
    let subBlue = false;
    setTimeout(() => {
        setInterval(() => {
            subBlue = !subBlue;
            subtitle.style.color = subBlue ? blue : white;
        }, 1000);
    }, 1000);

    /* Menu */
    menuToggle.addEventListener("click", () => {
        menuPanel.classList.toggle("af-open");
    });
});