/* Scoped page loader: preserves the site's existing body and page styles. */
.skyline-page-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
  animation: skyline-loader-safety 3.5s step-end forwards;
}
.skyline-page-loader.is-finished { opacity: 0; }
.skyline-page-loader .skyline-loader {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  perspective: 800px;
}
.skyline-page-loader .skyline-loader-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #df001b;
  font: 800 46px/1 Arial, sans-serif;
}
.skyline-page-loader .skyline-loader-inner {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.skyline-page-loader .one { border-bottom: 3px solid #df001b; animation: skyline-rotate-one 1s linear infinite; }
.skyline-page-loader .two { border-right: 3px solid #ff6375; animation: skyline-rotate-two 1s linear infinite; }
.skyline-page-loader .three { border-top: 3px solid #a90015; animation: skyline-rotate-three 1s linear infinite; }
@keyframes skyline-rotate-one {
  from { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
  to { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
@keyframes skyline-rotate-two {
  from { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
  to { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
@keyframes skyline-rotate-three {
  from { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
  to { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
@keyframes skyline-loader-safety { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .skyline-page-loader { transition: none; }
  .skyline-page-loader .skyline-loader-inner { animation: none; }
  .skyline-page-loader .one { transform: rotateX(35deg) rotateY(-45deg); }
  .skyline-page-loader .two { transform: rotateX(50deg) rotateY(10deg); }
  .skyline-page-loader .three { transform: rotateX(35deg) rotateY(55deg); }
}