@keyframes opacity-in {
    from    {opacity: 0; filter: blur(20rem) hue-rotate(0deg)}
    to      {opacity: 1; filter: blur(var(--blur-value)) hue-rotate(var(--hue-value))}
}

@keyframes show-from-bottom {
    from    {opacity: 0; transform: translateY(10%); filter: blur(0.1rem)}
    to      {opacity: 1; transform: translateY(0%); filter: blur(0)}
}

@keyframes p-show-from-bottom {
    from    {opacity: 0; transform: translateY(2rem); filter: blur(0.1rem)}
    to      {opacity: 1; transform: translateY(0%); filter: blur(0)}
}

@keyframes show-from-left {
    from    {opacity: 0; transform: translateX(-20%); filter: blur(0.1rem)}
    to      {opacity: 1; transform: translateX(0%); filter: blur(0)}
}

@keyframes show-from-right {
    from    {opacity: 0; transform: translateX(20%); filter: blur(0.1rem)}
    to      {opacity: 1; transform: translateX(0%); filter: blur(0)}
}

@keyframes show-sub-card {
    from    {translate: 0 10%; opacity: 0}
    to      {translate: 0 0; opacity: 1}
}

@keyframes image-show-in {
    from        {opacity: 0; transform: translateY(5%);}
    to          {opacity: 1; transform: translateY(0%);}
}

@keyframes card-show {
    to      {transform: rotateY(0deg); opacity: 1; translate: 0 0;}
}

@keyframes border-rotate {
    from    {--gradient-angle: 0deg;}
    to      {--gradient-angle: 360deg;}
}