/* 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 removed: caused full-page repaint on every scroll tick */
}

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

.background__stripe {
    animation: anim-stripes-top 18s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateZ(0);
    transform-origin: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

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

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

@keyframes anim-stripes-top {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(2%, 1.5%) rotate(0.5deg) scale(1.05);
    }
    100% {
        transform: translate(4%, 3%) rotate(1deg) scale(1.1);
    }
}

@keyframes anim-stripes-bottom {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(-2%, 2%) rotate(-0.4deg) scale(0.98);
    }
    100% {
        transform: translate(-4%, 4%) rotate(-0.8deg) scale(0.96);
    }
}

@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);
    }
}