/* pulse */
@keyframes pulse{
    0%{
        background-color: var(--online-standby-color);
        border-color: var(--background-color);
    }
    20%{
        background-color: var(--online-pulse-color);
        border-color: var(--online-pulse-background);
    }
    30%{
        background-color: var(--online-pulse-color);
        border-color: var(--online-pulse-background);
    }
    50%{
        background-color: var(--online-standby-color);
        border-color: var(--background-color);
    }
    100%{
        background-color: var(--online-standby-color);
        border-color: var(--background-color);
    }
}

/* fade in */
@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* title animation */
@keyframes text-fade-in{
    0%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./|";
    }
    4%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./j|";
    }
    8%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jo|";
    }
    12%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jon|";
    }
    16%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jona|";
    }
    20%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonat|";
    }
    24%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonath|";
    }
    28%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonatha|";
    }
    32%{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathan|";
    }
    36%{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanm|";
    }
    40%{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanmt|";
    }
    44%{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanmtz|";
    }
    48%{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanmtzc|";
    }
    52%{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanmtzc.|";
    }
    70%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanmtzc.dev|";
    }
    71%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        content: "./jonathanmtzc.dev";
        opacity: 1;
    }
    80%{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        opacity: 1;
        content: "./jonathanmtzc.dev";
    }
    92%{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color:  var(--background-color);
        opacity: 0;
        content: "./jonathanmtzc.dev";
    }
    96%{
        position: unset;
        top: unset;
        left: unset;
        display: flex;
        justify-content: unset;
        align-items: unset;
        opacity: 0;
        content: "./jonathanmtzc.dev";
    }
    100%{
        position: unset;
        top: unset;
        left: unset;
        display: flex;
        justify-content: unset;
        align-items: unset;
        opacity: 1;
        font-size: 28px;
        content: "./jonathanmtzc.dev";
    }
}

/* hero */
@keyframes triangle-glow{
    0%{
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    30%{
        opacity: 0.9;
    }
    40%{
        opacity:0.15;
    }
    55%{
        opacity:0.9;
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@keyframes hero-box-animation{
    0%{
        opacity: 0.9;
        transform: rotate(45deg) translate();
    }
    40%{
        opacity: 0;
        transform: rotate(45deg) translate(20px, 30px);
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px, 30px);
    }
}

@keyframes hero-up-down{
    0%{
        transform: translateY(0) rotate(180deg) scale(1);
    }
    100%{
        transform: translateY(0) rotate(180deg) scale(0.65);
    }
}