/* Stable nested rings and an indeterminate loading bar; no simulated percentage. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  --loader-cycle: 2.1s;
}
.page-loader[hidden] { display: none; }
.page-loader.is-visible { opacity: 1; pointer-events: auto; animation: yuppion-loader-reveal 160ms ease-out both; }
.page-loader__content { display: grid; justify-items: center; width: min(100%, 360px); gap: 10px; transform: translateY(-12px); }
.page-loader__mark { display: block; width: 100%; height: auto; overflow: hidden; }
.page-loader__layer { transform-box: view-box; }
.page-loader__layer--purple { transform-origin: 108px 80px; }
.page-loader__layer--teal { transform-origin: 160px 80px; }
.page-loader__drawing { opacity: 0; color: #65586c; transform-box: view-box; transform-origin: 0 0; }
.page-loader__drawing--necklace { opacity: 1; }
.page-loader__jewel-facet, .page-loader__jewel-glint { display: none; }
.page-loader__jewel-outline path { stroke-width: 1.5px; }
.page-loader__light { opacity: 0; }
.page-loader__caption { display: grid; justify-items: center; gap: 14px; }
.page-loader__progress { display: block; width: 132px; height: 3px; overflow: hidden; border-radius: 999px; background: #eeeaf0; }
.page-loader__progress-fill { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #80509d, #3bafc0 40%, #f1af45 72%, #e5689f); transform: translateX(-110%); }
.page-loader.is-visible .page-loader__progress-fill { animation: yuppion-loader-progress 1.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes yuppion-loader-progress { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.page-loader__status { margin: 0; color: #79717e; text-align: center; font: 450 13px/1.6 var(--body, Manrope, Arial, sans-serif); letter-spacing: .01em; }
.page-loader.is-visible .page-loader__layer--purple { animation: yuppion-loader-purple var(--loader-cycle) linear infinite; }
.page-loader.is-visible .page-loader__layer--teal { animation: yuppion-loader-teal var(--loader-cycle) linear infinite; }
.page-loader.is-visible .page-loader__light { animation: yuppion-loader-light var(--loader-cycle) ease-in-out infinite; }
.page-loader.is-visible .page-loader__drawing { animation: yuppion-loader-product 6.3s ease-in-out infinite both; }
.page-loader.is-visible .page-loader__drawing--ring { animation-delay: -4.2s; }
.page-loader.is-visible .page-loader__drawing--earrings { animation-delay: -2.1s; }
@keyframes yuppion-loader-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes yuppion-loader-purple {
  0% { transform: translate(0.000px, 0.000px) rotate(0.000deg); }
  6.25% { transform: translate(0.685px, -6.123px) rotate(-2.296deg); }
  12.5% { transform: translate(2.636px, -11.314px) rotate(-4.243deg); }
  18.75% { transform: translate(5.556px, -14.782px) rotate(-5.543deg); }
  25% { transform: translate(9.000px, -16.000px) rotate(-6.000deg); }
  31.25% { transform: translate(12.444px, -14.782px) rotate(-5.543deg); }
  37.5% { transform: translate(15.364px, -11.314px) rotate(-4.243deg); }
  43.75% { transform: translate(17.315px, -6.123px) rotate(-2.296deg); }
  50% { transform: translate(18.000px, -0.000px) rotate(-0.000deg); }
  56.25% { transform: translate(17.315px, 6.123px) rotate(2.296deg); }
  62.5% { transform: translate(15.364px, 11.314px) rotate(4.243deg); }
  68.75% { transform: translate(12.444px, 14.782px) rotate(5.543deg); }
  75% { transform: translate(9.000px, 16.000px) rotate(6.000deg); }
  81.25% { transform: translate(5.556px, 14.782px) rotate(5.543deg); }
  87.5% { transform: translate(2.636px, 11.314px) rotate(4.243deg); }
  93.75% { transform: translate(0.685px, 6.123px) rotate(2.296deg); }
  100% { transform: translate(0.000px, 0.000px) rotate(0.000deg); }
}
@keyframes yuppion-loader-teal {
  0% { transform: translate(0.000px, 0.000px) rotate(0.000deg); }
  6.25% { transform: translate(-0.381px, 4.975px) rotate(1.913deg); }
  12.5% { transform: translate(-1.464px, 9.192px) rotate(3.536deg); }
  18.75% { transform: translate(-3.087px, 12.010px) rotate(4.619deg); }
  25% { transform: translate(-5.000px, 13.000px) rotate(5.000deg); }
  31.25% { transform: translate(-6.913px, 12.010px) rotate(4.619deg); }
  37.5% { transform: translate(-8.536px, 9.192px) rotate(3.536deg); }
  43.75% { transform: translate(-9.619px, 4.975px) rotate(1.913deg); }
  50% { transform: translate(-10.000px, 0.000px) rotate(0.000deg); }
  56.25% { transform: translate(-9.619px, -4.975px) rotate(-1.913deg); }
  62.5% { transform: translate(-8.536px, -9.192px) rotate(-3.536deg); }
  68.75% { transform: translate(-6.913px, -12.010px) rotate(-4.619deg); }
  75% { transform: translate(-5.000px, -13.000px) rotate(-5.000deg); }
  81.25% { transform: translate(-3.087px, -12.010px) rotate(-4.619deg); }
  87.5% { transform: translate(-1.464px, -9.192px) rotate(-3.536deg); }
  93.75% { transform: translate(-0.381px, -4.975px) rotate(-1.913deg); }
  100% { transform: translate(0.000px, 0.000px) rotate(0.000deg); }
}
@keyframes yuppion-loader-light {
  0%, 25% { opacity: 0; transform: translateX(0); }
  39% { opacity: 1; }
  72%, 100% { opacity: 0; transform: translateX(200px); }
}
@keyframes yuppion-loader-product {
  0%, 31%, 100% { opacity: 0; transform: translateY(2px); }
  6%, 25% { opacity: .85; transform: translateY(0); }
  33%, 98% { opacity: 0; transform: translateY(-2px); }
}
@media (max-width: 380px) { .page-loader__status { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .page-loader.is-visible,
  .page-loader.is-visible .page-loader__layer,
  .page-loader.is-visible .page-loader__light,
  .page-loader.is-visible .page-loader__drawing,
  .page-loader.is-visible .page-loader__progress-fill { animation: none; }
  .page-loader__progress-fill { width: 100%; transform: none; opacity: .7; }
  .page-loader__drawing { opacity: 0; }
  .page-loader__drawing--necklace { opacity: .85; }
}