.logo-pattern {
    /* animation */
    --animation-duration: 12s;

    /* diagonal cut */
    --cut-width: 15rem;
    --cut-tangent: 2.7474774194546216; /* tan(70) */

    /* size variation */
    --size-small-width: 59px;
    --size-small: var(--size-small-width) -89px;
    --size-big-width: 118px;
    --size-big: var(--size-big-width) -178px;

    /* internal */
    --pattern-width: var(--size-small-width);
    --pattern-size: var(--size-small);

    z-index: -1;
}

.logo-pattern.fast {
    --animation-duration: 8s;
}

.logo-pattern.quick {
    --animation-duration: 4s;
}

.logo-pattern.big {
    --pattern-width: var(--size-big-width);
    --pattern-size: var(--size-big);
}

.logo-pattern,
.logo-pattern::before {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.logo-pattern.fixed {
    position: fixed;
}

.logo-pattern.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

.logo-pattern::before {
    content: '';
    background-image: url(/resources/img/logo-pattern_solid.svg);
    background-size: var(--pattern-width);
    background-attachment: fixed;
    opacity: 0.15;
    animation: logoPattern var(--animation-duration) linear infinite;
}

.logo-pattern.line::before {
    background-image: url(/resources/img/logo-pattern_line.svg);
    opacity: 0.3;
}

.logo-pattern.diagonal-cut::before {
    clip-path: polygon(
            100% calc(100% - var(--cut-width) * var(--cut-tangent)),
            100% 100%,
            calc(100% - var(--cut-width)) 100%
    );
}

@keyframes logoPattern {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: var(--pattern-size);
    }
}

@media only screen and (min-width: 640px) {
    .logo-pattern:not(.small) {
        --pattern-width: var(--size-big-width);
        --pattern-size: var(--size-big);
    }
}

@media only screen and (max-width: 1500px) {
    .logo-pattern.diagonal-cut {
        display: none;
    }
}

@media only screen and (min-width: 1700px) {
    .logo-pattern.diagonal-cut {
        --cut-width: 25rem;
    }
}

@media (prefers-reduced-motion) {
    .logo-pattern::before {
        animation: none;
    }
}