.blades-wrap{
width: 0;
height: 0;
pointer-events: none;
transform-origin: 0 0;
animation: blades-spin var(--blades-duration, 48s) linear infinite;
}

.blades-wrap--container{
position: absolute;
left: 50%;
top: 50%;
scale: 24%;
z-index: 0;
}

.blades-wrap--viewport{
position: fixed;
left: 50%;
top: 50%;
z-index: 0;
}

.blades-img{
position: absolute;
left: calc(-1 * var(--blades-pivot-x) / var(--blades-source-width) * var(--blades-size));
top: calc(-1 * var(--blades-pivot-y) / var(--blades-source-width) * var(--blades-size));
width: var(--blades-size);
height: auto;
display: block;
opacity: var(--blades-opacity, 0.88);
pointer-events: none;
}

.blades-traces{
position: absolute;
left: calc(-1 * var(--blades-pivot-x) / var(--blades-source-width) * var(--blades-size));
top: calc(-1 * var(--blades-pivot-y) / var(--blades-source-width) * var(--blades-size));
width: var(--blades-size);
height: calc(var(--blades-size) * var(--blades-source-height) / var(--blades-source-width));
pointer-events: none;
overflow: visible;
}

.blades-traces svg{
width: 100%;
height: 100%;
display: block;
overflow: visible;
}

.blades-trace{
stroke: none;
opacity: var(--blades-trace-opacity-min, 0);
transform-box: fill-box;
transform-origin: center;
animation: blades-trace-pulse 1.65s cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

@keyframes blades-spin{
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}

@keyframes blades-trace-pulse{
0%, 100% {
opacity: var(--blades-trace-opacity-min, 0);
transform: scale(0.68);
}
18% {
opacity: var(--blades-trace-opacity-max, 0.12);
transform: scale(1.34);
}
32% {
opacity: calc(var(--blades-trace-opacity-max, 0.12) * 0.34);
transform: scale(0.82);
}
48% {
opacity: var(--blades-trace-opacity-max, 0.12);
transform: scale(1.28);
}
62% {
opacity: calc(var(--blades-trace-opacity-max, 0.12) * 0.22);
transform: scale(0.76);
}
}