/* === Loader Styling === */
#loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.pl {
  display: block;
  width: 10em;
  height: auto;
  isolation: isolate;
}

.pl__blend {
  mix-blend-mode: multiply;
}

.pl__curve {
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  animation-iteration-count: infinite;
}

.pl__curve--cyan { stroke: hsl(198, 92%, 59%); }
.pl__curve--magenta { stroke: hsl(325, 97%, 54%); }
.pl__curve--yellow { stroke: hsl(49, 98%, 50%); }

.pl__curve--rotate1 { animation-name: rotate1; }
.pl__curve--rotate2 { animation-name: rotate2; }
.pl__curve--rotate3 { animation-name: rotate3; }
.pl__curve--rotate4 { animation-name: rotate4; }
.pl__curve--rotate5 { animation-name: rotate5; }
.pl__curve--rotate6 { animation-name: rotate6; }
.pl__curve--rotate7 { animation-name: rotate7; }
.pl__curve--rotate8 { animation-name: rotate8; }

/* === Animations === */
@keyframes rotate1 {
  from { transform: rotate(0); }
  17% { transform: rotate(0.525turn) translate(4px, 0); }
  34% { transform: rotate(1.05turn); }
  46%, to { transform: rotate(1turn); }
}

@keyframes rotate2 {
  from, 8% { transform: rotate(0); }
  36% { transform: rotate(-1.05turn); }
  48%, to { transform: rotate(-1turn); }
}

@keyframes rotate3 {
  from, 3% { transform: rotate(0); }
  22.5% { transform: rotate(0.525turn) translate(3px, 0); }
  42% { transform: rotate(1.05turn); }
  54%, to { transform: rotate(1turn); }
}

@keyframes rotate4 {
  from { transform: rotate(0); }
  34% { transform: rotate(-1.08turn); }
  46%, to { transform: rotate(-1turn); }
}

@keyframes rotate5 {
  from, 12% { transform: rotate(0); }
  31% { transform: rotate(0.525turn) translate(5px, 0); }
  50% { transform: rotate(1.05turn); }
  62%, to { transform: rotate(1turn); }
}

@keyframes rotate6 {
  from { transform: rotate(0); }
  34% { transform: rotate(-1.05turn); }
  46%, to { transform: rotate(-1turn); }
}

@keyframes rotate7 {
  from, 18% { transform: rotate(0); }
  34% { transform: rotate(0.53turn) translate(4px, 0); }
  50% { transform: rotate(1.06turn); }
  62%, to { transform: rotate(1turn); }
}

@keyframes rotate8 {
  from, 10% { transform: rotate(0); }
  29% { transform: rotate(-0.54turn) translate(-4px, 0); }
  48% { transform: rotate(-1.08turn); }
  60%, to { transform: rotate(-1turn); }
}
/*** load animation end***/