@property --background-shape-a-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #F05A21;
}

@property --background-shape-b-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #F5F5F5;
}

@property --background-shape-c-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #4B72FE;
}

:root {
    --background-shape-duration: 30s;
    --background-shape-size: 100;
    --background-shape-width: calc(var(--background-shape-size) * 1.1vw);
    --background-shape-height: calc(var(--background-shape-size) * 0.6vh);
    --background-blur-size: 72px;
    --background-shape-a-color: #F05A21;
    --background-shape-b-color: #F5F5F5;
    --background-shape-c-color: #4B72FE;
    transition:
        --background-shape-a-color 1.2s ease-in-out,
        --background-shape-b-color 1.2s ease-in-out,
        --background-shape-c-color 1.2s ease-in-out;
}

body.background-section-2 {
    --background-shape-a-color: #FF8705;
    --background-shape-b-color: #FFBD74;
    --background-shape-c-color: #FDEDBA;
}

body.background-section-3 {
    --background-shape-a-color: #3E18F9;
    --background-shape-b-color: #4B72FE;
    --background-shape-c-color: #92AEFF;
}

body.background-section-4 {
    --background-shape-a-color: #000000;
    --background-shape-b-color: #37D7FA;
    --background-shape-c-color: #FF8DF2;
}

.background-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.background-mobile-gradient,
.background-blur,
.background-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.background-mobile-gradient {
    display: none;
    top: auto;
    height: 30vh;
    z-index: 2;
    background: linear-gradient(to top, #000 0%, #000 80%, transparent 100%);
}

.background-blur {
    z-index: 2;
    -webkit-backdrop-filter: blur(var(--background-blur-size)) saturate(1.25);
    backdrop-filter: blur(var(--background-blur-size)) saturate(1.25);
}

.background-noise {
    z-index: 3;
    opacity: 0.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 .35 .35 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-repeat: repeat;
}

.background-shape {
    position: absolute;
    top: var(--background-shape-top, 55%);
    left: 50%;
    z-index: 1;
    width: var(--background-shape-width);
    height: var(--background-shape-height);
    transform: translate(-50%, -50%);
    overflow: visible;
}

#background-shape-a {
    animation: background-shape-size var(--background-shape-duration) ease-in-out infinite;
}

#background-shape-b {
    --background-shape-top: 53%;
    --background-shape-width: calc(var(--background-shape-size) * 1.15vw);
    --background-shape-height: calc(var(--background-shape-size) * 0.6vh);
}

#background-shape-c {
    --background-shape-top: 50%;
    --background-shape-width: calc(var(--background-shape-size) * 1.35vw);
    --background-shape-height: calc(var(--background-shape-size) * 0.66vh);
}

.background-shape path {
    fill: var(--background-shape-a-color);
    transition: fill 1.2s ease-in-out;
    animation-name: background-shape-a;
    animation-duration: var(--background-shape-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    shape-rendering: geometricPrecision;
}

#background-shape-b path {
    fill: var(--background-shape-b-color);
}

#background-shape-c path {
    fill: var(--background-shape-c-color);
}

@keyframes background-shape-a {
    0%, 50%, 100% {
        d: path("M 119.006 178.515 C 228.006 156.515 981.18 820.914 1179.01 809.517 C 1569.51 787.018 1535.51 49.017 2327.51 141.517 C 2353.51 191.017 1556.01 556.515 1775.01 848.018 C 1994.01 1139.52 2299.73 1202.45 1983.01 1393.02 C 1792.44 1507.68 297.884 1389.88 94.006 1301.02 C -104.904 1214.32 426.521 1287.04 316.506 1100.015 C 276.506 1032.015 105.5 756.022 94.006 662.015 C 80.006 547.518 13.126 199.885 119.006 178.515 Z");
    }

    25% {
        d: path("M 1999.25 442.109 C 1695.63 370.889 -31.043 226.222 83.787 291.988 C 358.786 449.487 73.969 985.49 341.748 1003.609 C 674.248 760.609 2150.25 567.609 2199.75 924.612 C 2249.25 1281.61 1329.93 1177.89 1055.79 1253.49 C 747.22 1338.59 468.017 1525.62 230.748 1407.61 C 88.928 1337.07 66.6 431.958 1.287 241.989 C -22.46 172.919 1434.77 251.929 1602.75 213.109 C 2885.75 -83.391 2242.25 499.109 1999.25 442.109 Z");
    }

    75% {
        d: path("M 177.065 663.826 C 393.989 404.589 838.331 419.893 954.121 355.834 C 1182.69 229.382 1258.62 134.135 1506.45 31.106 C 1691.12 -45.666 2008.18 25.449 2260.12 232.334 C 2512.06 439.219 1902.9 929.559 1691.12 1119.33 C 1452.74 1332.94 1003.117 1392.83 738.121 1392.83 C 579.726 1392.83 223.699 1674.84 80.621 1533.84 C 28.599 1482.57 80.621 1291.74 80.621 1119.33 C 80.621 1004.46 10.121 863.334 177.065 663.826 Z");
    }
}

@keyframes background-shape-size {
    0%, 100% {
        width: var(--background-shape-width);
        /*height: var(--background-shape-height);*/
    }

    33% {
        width: calc(var(--background-shape-size) * 1.35vw);
    }

    /*66% {*/
    /*    height: calc(var(--background-shape-size) * 0.6vh);*/
    /*}*/
}

@media (max-width: 576px) {
    .background-mobile-gradient {
        display: block;
    }
}