.box-loader{--size:64px;--duration:6s;--shadow:0;--half:calc(var(--size) / 2);--c1-from:#ff3b3b;--c1-to:#ff5c7a;--c2-from:#4fa8ff;--c2-to:#6c63ff;--c3-from:#f07ce8;--c3-to:#c25fe6;--c4-from:#ff8a3d;--c4-to:#ffb347;--c5-from:#1fc98e;--c5-to:#3de6c3;--c6-from:#2196f3;--c6-to:#4fc3f7;width:var(--size);height:var(--size);place-items:center;display:inline-grid;position:relative}.box-loader__scene{width:var(--size);height:var(--size);perspective:calc(var(--size) * 6.25)}.box-loader__cube{width:100%;height:100%;transform-style:preserve-3d;will-change:transform;animation:box-loader-roll var(--duration) linear infinite;position:relative}.box-loader__face{backface-visibility:hidden;border-radius:6%;position:absolute;inset:0}.box-loader__face:first-child{--i:0;background:linear-gradient(135deg, var(--c1-from), var(--c1-to));transform:translateZ(var(--half))}.box-loader__face:nth-child(2){--i:1;background:linear-gradient(135deg, var(--c2-from), var(--c2-to));transform:rotateY(90deg) translateZ(var(--half))}.box-loader__face:nth-child(3){--i:2;background:linear-gradient(135deg, var(--c3-from), var(--c3-to));transform:rotateY(90deg) rotateX(-90deg) translateZ(var(--half))}.box-loader__face:nth-child(4){--i:3;background:linear-gradient(135deg, var(--c4-from), var(--c4-to));transform:rotateY(90deg) rotateX(-90deg) rotateY(90deg) translateZ(var(--half))}.box-loader__face:nth-child(5){--i:4;background:linear-gradient(135deg, var(--c5-from), var(--c5-to));transform:rotateY(90deg) rotateX(-90deg) rotateY(90deg) rotateX(-90deg) translateZ(var(--half))}.box-loader__face:nth-child(6){--i:5;background:linear-gradient(135deg, var(--c6-from), var(--c6-to));transform:rotateY(90deg) rotateX(-90deg) rotateY(90deg) rotateX(-90deg) rotateY(90deg) translateZ(var(--half))}.box-loader__shadow{top:calc(100% + var(--size) * .22);width:calc(var(--size) * .9);height:calc(var(--size) * .14);background:radial-gradient(closest-side, rgb(0 0 0/var(--shadow)), transparent);pointer-events:none;border-radius:50%;position:absolute;left:50%;transform:translate(-50%)}.box-loader__label{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes box-loader-roll{0%,10%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotateX(0)rotateY(0)rotateX(0)rotateY(0)rotateX(0)rotateY(0)rotateX(0)}13.333%{animation-timing-function:cubic-bezier(.65,0,.35,1);rotate:x -9deg}16.667%,26.667%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotateX(0)rotateY(0)rotateX(0)rotateY(0)rotateX(0)rotateY(-90deg)rotateY(0)}30%{animation-timing-function:cubic-bezier(.65,0,.35,1);rotate:y -9deg}33.333%,43.333%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotateX(0)rotateY(0)rotateX(0)rotateY(0)rotateX(90deg)rotateY(-90deg)rotateX(0)}46.667%{animation-timing-function:cubic-bezier(.65,0,.35,1);rotate:x -9deg}50%,60%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotateX(0)rotateY(0)rotateX(0)rotateY(-90deg)rotateX(90deg)rotateY(-90deg)rotateY(0)}63.333%{animation-timing-function:cubic-bezier(.65,0,.35,1);rotate:y -9deg}66.667%,76.667%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotateX(0)rotateY(0)rotateX(90deg)rotateY(-90deg)rotateX(90deg)rotateY(-90deg)rotateX(0)}80%{animation-timing-function:cubic-bezier(.65,0,.35,1);rotate:x -9deg}83.333%,93.333%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotateX(0)rotateY(-90deg)rotateX(90deg)rotateY(-90deg)rotateX(90deg)rotateY(-90deg)rotateY(0)}96.667%{animation-timing-function:cubic-bezier(.65,0,.35,1);rotate:y -9deg}to{transform:rotateX(90deg)rotateY(-90deg)rotateX(90deg)rotateY(-90deg)rotateX(90deg)rotateY(-90deg)rotateY(0)}}@keyframes box-loader-fade{0%,12.667%{opacity:1}16.667%,96%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.box-loader__cube{transform-style:flat;will-change:auto;animation:none;transform:rotate(0)}.box-loader__face:nth-child(n){animation:box-loader-fade var(--duration) linear infinite;animation-delay:calc(var(--duration) * (var(--i) / 6 - 1));transform:none}}