/* LogoLoader: 3D loop of the logo layers. Offsets use em so they scale with --sp-logo-loader-size. */
.sp-logo-loader { display: inline-block; width: var(--sp-logo-loader-size, 64px); height: var(--sp-logo-loader-size, 64px); font-size: var(--sp-logo-loader-size, 64px); perspective: 3.75em; vertical-align: middle; }
.sp-logo-loader__scene { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: sp-logo-loader-rotate 3.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.sp-logo-loader__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: sp-logo-loader-split 3.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.sp-logo-loader__layer--back { --sp-logo-loader-x: .06em; --sp-logo-loader-y: .04em; --sp-logo-loader-z: -.29em; }
.sp-logo-loader__layer--front { --sp-logo-loader-z: 0; }
.sp-logo-loader__layer--person { --sp-logo-loader-y: -.025em; --sp-logo-loader-z: .33em; }
.sp-logo-loader__layer--tl { --sp-logo-loader-x: -.11em; --sp-logo-loader-y: -.11em; --sp-logo-loader-z: .17em; }
.sp-logo-loader__layer--tr { --sp-logo-loader-x: .11em; --sp-logo-loader-y: -.11em; --sp-logo-loader-z: .17em; }
.sp-logo-loader__layer--bl { --sp-logo-loader-x: -.11em; --sp-logo-loader-y: .11em; --sp-logo-loader-z: .17em; }
.sp-logo-loader__layer--br { --sp-logo-loader-x: .11em; --sp-logo-loader-y: .11em; --sp-logo-loader-z: .17em; }
@keyframes sp-logo-loader-rotate {
  0%, 12% { transform: rotateX(0) rotateY(0); }
  45%, 62% { transform: rotateX(18deg) rotateY(-38deg); }
  88%, 100% { transform: rotateX(0) rotateY(-360deg); }
}
@keyframes sp-logo-loader-split {
  0%, 12%, 88%, 100% { transform: translate3d(0, 0, 0); }
  45%, 62% { transform: translate3d(var(--sp-logo-loader-x, 0), var(--sp-logo-loader-y, 0), var(--sp-logo-loader-z, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-logo-loader__scene, .sp-logo-loader__layer { animation: none; }
}