/* =========================
   ESTATS INICIALS
   ========================= */

#header {
    background-color: rgba(0, 0, 0, 0.75);

    animation:
        header-scale 1s ease-in-out infinite alternate,
        header-background 5s ease-in-out infinite alternate;
}

#header2 {
    scale: 0.6;
    opacity: 1;

    animation:
        header2-rotation 1s linear infinite,
        header2-scale 2s ease-in-out infinite alternate;
}

#header3 {
    scale: 0.8;
    rotate: 0deg;
    translate: 0 0;

    animation:
        header3-rotation 2s linear infinite,
        header3-scale 1s ease-in-out infinite alternate,
        header3-radius 2s ease-in-out infinite alternate;
}

#cercle1 {
    scale: 0;
}


/* =========================
   HEADER
   ========================= */

/*
TweenMax.to($("#header"), 1, {
    scale: 1,
    yoyo: true,
    repeat: -1,
    opacity: 1
});
*/
@keyframes header-scale {
    from {
        scale: 0.9;
        opacity: 1;
    }

    to {
        scale: 1;
        opacity: 1;
    }
}


/*
TweenMax.to($("#header"), 5, {
    backgroundColor: "rgba(0,0,0,0.4)",
    yoyo: true,
    repeat: -1
});
*/
@keyframes header-background {
    from {
        background-color: rgba(0, 0, 0, 0.75);
    }

    to {
        background-color: rgba(0, 0, 0, 0.95);
    }
}


/* =========================
   HEADER 2
   ========================= */

/*
TweenMax.to($("#header2"), 1, {
    rotation: 360,
    repeat: -1,
    opacity: 1
});
*/
@keyframes header2-rotation {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


/*
TweenMax.to($("#header2"), 2, {
    scale: 1,
    yoyo: true,
    repeat: -1
});
*/
@keyframes header2-scale {
    from {
        scale: 0.6;
    }

    to {
        scale: 1;
    }
}


/* =========================
   HEADER 3
   ========================= */

/*
TweenMax.to($("#header3"), 2, {
    rotation: 720,
    repeat: -1,
    ease: Power0.easeNone,
    y: 0
});
*/
@keyframes header3-rotation {
    from {
        rotate: 0deg;
        translate: 0 0;
    }

    to {
        rotate: 720deg;
        translate: 0 0;
    }
}


/*
TweenMax.to($("#header3"), 1, {
    scale: 0.9,
    yoyo: true,
    repeat: -1
});
*/
@keyframes header3-scale {
    from {
        scale: 0.8;
    }

    to {
        scale: 0.9;
    }
}


/*
TweenMax.to($("#header3"), 2, {
    borderRadius: 100,
    yoyo: true,
    repeat: -1
});
*/
@keyframes header3-radius {
    from {
        border-radius: 0;
    }

    to {
        border-radius: 100px;
    }
}