/* background.css - Fixed SVG background (.background) with animated stripe overlays */

/* Block: background */
.background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #bfa792;
    transition: filter 220ms ease, transform 220ms ease;
}

.background__svg {
    width: 100%;
    height: 100%;
}

.background__stripe {
    animation: anim-stripes-top 34s ease-in-out infinite alternate;
    will-change: transform;
    transform-origin: center;
}

.background__stripe--delay-1 {
    animation-name: anim-stripes-bottom;
    animation-duration: 42s;
    animation-delay: -12s;
}

.background__stripe--delay-2 {
    animation-name: anim-stripes-diagonal;
    animation-duration: 50s;
    animation-delay: -20s;
}

@keyframes anim-stripes-top {

    0% {
        transform: translate(0, 0) rotate(0deg) scaleX(1);
    }

    50% {
        transform: translate(0.8%, 0.9%) rotate(0.16deg) scaleX(1.02);
    }

    100% {
        transform: translate(1.4%, 1.7%) rotate(0.32deg) scaleX(1.03);
    }
}

@keyframes anim-stripes-bottom {

    0% {
        transform: translate(0, 0) rotate(0deg) scaleX(1);
    }

    50% {
        transform: translate(-0.7%, 1.05%) rotate(-0.14deg) scaleX(0.995);
    }

    100% {
        transform: translate(-1.2%, 1.85%) rotate(-0.28deg) scaleX(0.985);
    }
}

@keyframes anim-stripes-diagonal {

    0% {
        transform: translate(0, 0) scaleX(1);
    }

    50% {
        transform: translate(0, 0) scaleX(1);
    }

    25% {
        transform: translate(2.5%, 1.5%) scaleX(1.06);
    }

    75% {
        transform: translate(-2.5%, -1.5%) scaleX(0.94);
    }
}