root{
  --col-Beige-400: #CB9C68;
}
/* HTML: <div class="loader"></div> */
.wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100svh;
    /* background-color: #F1F5F0; */
    background-color: #FCFBF7;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}


.gradient-background {
  background: linear-gradient(58deg,#382239,#FFEEDA,#CB9C68,#F7F7F1);
  background-size: 300% 300%;
  animation: gradient-animation 15s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* <div class="shape"> OR <img class="shape"> */
.shape {
	aspect-ratio: 2.136;
	clip-path: shape(from 64.04% 7.78%,vline to 100%,hline to 53.86%,line to 37.35% 7.78%,vline to 100%,hline to 27.17%,line to 9.26% 0%,hline to 19.44%,line by 16.03% 89.54%,vline to 0%,hline by 10.65%,line by 16.04% 89.54%,vline to 0%,hline by 10.65%,line by 17.91% 100%,hline to 80.55%,close,move to 0% 99.97%,curve by 0.32% -0.59% with 0.11% -0.2%/0.22% -0.39%,arc by 5.95% -21.81% of 20.17% 43.08% small ccw,hline by 0.32%,arc by 5.96% 21.86% of 20.18% 43.11% small ccw,curve by 0.28% 0.52% with 0.09% 0.18%/0.19% 0.35%,line by 0.01% 0.02%,close,move to 93.4% 22.42%,arc to 87.44% 0.56% of 20.16% 43.07% small ccw,curve by -0.28% -0.52% with -0.09% -0.18%/-0.19% -0.35%,line to 87.15% 0%,hline to 100%,vline to 0%,curve by -0.32% 0.6% with -0.11% 0.2%/-0.22% 0.39%,arc to 93.72% 22.42% of 20.15% 43.04% small ccw,close);
}
.shape-gradient{
  position: relative;
  width: 50px;
  height: 24px;
  background: linear-gradient(245deg,#382239,#cb9c68,#FFEEDA,#cb9c68,#382239);
  background-size: 240% 240%;
  animation: gradient-animation 4s ease infinite backwards;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* HTML: <div class="loader"></div> */
/* .loader {
  width: 60px;
  height: 20px;
  display: grid;
  color: var(--col-Beige-400);
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c:#0000 calc(100%/3),#CB9C68 0 calc(2*100%/3),#0000 0;
  --c1:linear-gradient(90deg,var(--c));
  --c2:linear-gradient( 0deg,var(--c));
  background: var(--c1),var(--c2),var(--c1),var(--c2);
  background-size: 300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: l15 1.5s infinite;
}
.loader:after {
  animation-delay: -.75s;
}
@keyframes l15 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
} */