/*
Diamond spin: a square bipyramid turning about its vertical axis at a constant rate. Base edge 70px and
apex height 58px, so each of the eight triangular faces is 67.74px tall and leans 31.11deg off the
vertical. The perspective sits on the slot rather than the stage, which puts the vanishing point on the
solid's own centre and so shows it head on.
*/
.loader_box .loader95 {
    position: relative;
    width: 140px;
    height: 176px;
}

.loader_box .loader95-slot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 116px;
    margin: -70px 0 0 -35px;
    perspective: 620px;
}

.loader_box .loader95-solid {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: loader95-turn 5.2s linear infinite;
}

/*
Every face is the same triangle standing on an edge of the equatorial square, tipped back towards the
apex. The four faces of the lower pyramid are the upper four turned through 180deg about the horizontal
axis, which keeps each face pointing outwards so that backface-visibility hides the far side of the solid.
*/
.loader_box .loader95-face {
    position: absolute;
    left: 0;
    top: -9.74px;
    width: 70px;
    height: 67.74px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    background: rgba(255, 255, 255, 0.2);
}

/*
The face itself carries the edge colour and the fill is laid over it, inset to a triangle whose sides sit
4px in from the sides of the face. Offsetting the corners along the angle bisectors, rather than insetting
the box, is what keeps the edge an even width all the way round.

The 4px is measured in the plane of the face, and every face is tilted away from the viewer, so the band
reaches the screen narrower than it is drawn.
*/
.loader_box .loader95-face::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 12.86%, 90.62% 94.1%, 9.38% 94.1%);
}

.loader_box .loader95-face:nth-child(1) { transform: rotateY(0deg) translateZ(35px) rotateX(31.11deg); }
.loader_box .loader95-face:nth-child(2) { transform: rotateY(90deg) translateZ(35px) rotateX(31.11deg); }
.loader_box .loader95-face:nth-child(3) { transform: rotateY(180deg) translateZ(35px) rotateX(31.11deg); }
.loader_box .loader95-face:nth-child(4) { transform: rotateY(270deg) translateZ(35px) rotateX(31.11deg); }

.loader_box .loader95-face:nth-child(5) { transform: rotateX(180deg) rotateY(180deg) translateZ(35px) rotateX(31.11deg); }
.loader_box .loader95-face:nth-child(6) { transform: rotateX(180deg) rotateY(90deg) translateZ(35px) rotateX(31.11deg); }
.loader_box .loader95-face:nth-child(7) { transform: rotateX(180deg) rotateY(0deg) translateZ(35px) rotateX(31.11deg); }
.loader_box .loader95-face:nth-child(8) { transform: rotateX(180deg) rotateY(270deg) translateZ(35px) rotateX(31.11deg); }

.loader_box .loader95-face:nth-child(1)::before { background: linear-gradient(180deg, #49ABCB 40%, #036C91); }
.loader_box .loader95-face:nth-child(2)::before { background: linear-gradient(180deg, #A5CE3A 40%, #41AD49); }
.loader_box .loader95-face:nth-child(3)::before { background: linear-gradient(180deg, #4452A4 40%, #3C3D71); }
.loader_box .loader95-face:nth-child(4)::before { background: linear-gradient(180deg, #929393 40%, #595A5A); }
.loader_box .loader95-face:nth-child(5)::before { background: linear-gradient(180deg, #4452A4 40%, #3C3D71); }
.loader_box .loader95-face:nth-child(6)::before { background: linear-gradient(180deg, #929393 40%, #595A5A); }
.loader_box .loader95-face:nth-child(7)::before { background: linear-gradient(180deg, #49ABCB 40%, #036C91); }
.loader_box .loader95-face:nth-child(8)::before { background: linear-gradient(180deg, #A5CE3A 40%, #41AD49); }

/*
The shadow sits under the lower apex and widens and narrows with the silhouette, which is 70px across when
a face is square to the viewer and 99px across a quarter turn later - hence the 1.3s period against the
solid's 5.2s turn, so that the two keep step.
*/
.loader_box .loader95-shadow {
    position: absolute;
    left: 50%;
    top: 122px;
    width: 99px;
    height: 18px;
    margin-left: -49.5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    filter: blur(5px);
    animation: loader95-shadow-pulse 1.3s ease-in-out infinite;
}

@keyframes loader95-turn {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

@keyframes loader95-shadow-pulse {
    0%, 100% { transform: scaleX(0.71); opacity: 1; }
    50% { transform: scaleX(1); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader95-solid { animation: none; transform: rotateY(24deg); }
    .loader_box .loader95-shadow { animation: none; transform: scaleX(0.85); }
}