@keyframes loader-rotate-x {
    0% { transform: rotateX(360deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes loader-rotate-y {
    0% { transform: rotateY(360deg); }
    100% { transform: rotateY(0deg); }
}

.loader-outer,
.loader-inner,
.loader-leaf {
    position: absolute;
    transform-style: preserve-3d;
}

.loader-outer {
    --phi: 1.618; /* Golden ratio */

    top: 50%;
    left: 50%;
    width: calc(75vmin / 2);
    height: calc(75vmin / 4);
    perspective: 25vmin;
    transform-origin: center center;
    transform:
        translate3D(-50%,-50%,calc(75vmin / 2.7))
        rotateY(10deg)
        scale(var(--phi));
}

.loader-inner {
    --animation-duration: 3600ms;
    --leaf-border-width: calc(1vmin * var(--phi));

    --leaf-delay: 0; /* Is dynamic... */
    /* These are sometimes dynamic... */
    --leaf-color-r: 128;
    --leaf-color-g: 128;
    --leaf-color-b: 128;

    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: calc(var(--animation-duration) * var(--phi)) infinite linear loader-rotate-x;
}

.loader-leaf {
    --leaf-fill-color: rgba(var(--leaf-color-r),var(--leaf-color-g),var(--leaf-color-b),0.15);
    --leaf-border-color: rgba(var(--leaf-color-r),var(--leaf-color-g),var(--leaf-color-b),0.5);
    --leaf-shadow-color: rgba(var(--leaf-color-r),var(--leaf-color-g),var(--leaf-color-b),0.25);
    border: var(--leaf-border-width) double var(--leaf-border-color);
    border-radius: 50%;
    background: var(--leaf-fill-color);
    width: calc(50% - 2 * var(--leaf-border-width));
    height: calc(100% - 2 * var(--leaf-border-width));
    transform-origin: right center;
    animation: var(--animation-duration) infinite linear loader-rotate-y;
    animation-delay: var(--leaf-delay);
    box-shadow: 0 0 32px var(--leaf-shadow-color);
}