.h2 {
  animation: foward 1.2s  cubic-bezier(0.34, 1.90, 0.64, 1) forwards;
}
/* cubic-bezier(0.34, 1.56, 0.64, 1) */
.up{
  animation: up 1.5s alternate forwards;
}
.set-bg {
    position: relative;
    overflow: hidden;
    background-color: #1B0A65;
}

.set-bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../../hero-1.webp");
    background-size: cover;
    background-position: center;

    opacity: 0;
    animation: bg 2s ease forwards;

    z-index: 0;
}

.set-bg > * {
    position: relative;
    z-index: 1;
}

@keyframes bg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@keyframes up{
    from{
        transform: translatey(20%);
        opacity: 0;
        display: inline-block;
    }
    to{
        transform: translatey(0);
        opacity: 1;
    }
}

@keyframes foward{
    from{
        transform: translateX(-30%);
        opacity: 0;
        display: inline-block;
    }
    to{
        transform: translateX(0);
        opacity: 1;
    }
}