/* LoaderWrapper — fixed so it covers the viewport before React mounts */
#app-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}
#app-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}
/* LoaderOuter */
.loader-outer {
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
/* MainLoader */
.loader-main {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
/* MainLoader SVG rect animations — matches loaderKeyframes + MainLoader selectors */
@keyframes translateo1up {
  0%, 30%        { height: 39%; transform: translate(0,   5%); }
  37.15%, 74.5%  { height: 39%; transform: translate(0, -46%); }
  81.65%         { height: 39%; transform: translate(0, -94%); }
  83.25%, 88.55% { height:  0%; transform: translate(-46%, -98%); }
  89%            { height: 39%; transform: translate(0,  48%); }
  96%, 100%      { height: 39%; transform: translate(0,   5%); }
}
@keyframes translateo2up {
  0%, 30%        { transform: translate(0,   2%); }
  37.15%, 44.6%  { transform: translate(0,  52%); }
  52%, 61.5%     { transform: translate(52%, 52%); }
  70%, 91%       { transform: translate(52%, 104%); }
  98%, 100%      { transform: translate(52%, 152%); }
}
@keyframes horizontal1 {
  0%            { width:  0%; }
  12.85%, 21.4% { width: 93%; }
  28.5%         { width:  0%; }
  30%, 45.6%    { width:  0%; transform: translateY(55%); }
  53.5%, 74.5%  { width: 42%; transform: translateY(55%); }
  84.65%, 96%   { width: 42%; transform: translateY(0%); }
  100%          { width: 93%; transform: translateY(0%); }
}
@keyframes horizontal1B {
  0%, 21.4%    { width: 93%; transform: translateY(0%); }
  28.5%        { width:  0%; transform: translateY(0%); }
  30%, 45.6%   { width:  0%; transform: translateY(55%); }
  53.5%, 74.5% { width: 42%; transform: translateY(55%); }
  84.65%, 96%  { width: 42%; transform: translateY(0%); }
  100%         { width: 93%; transform: translateY(0%); }
}
@keyframes horizontal2 {
  0%            { width:  0%; transform: translateY(0%); }
  12.85%, 21.4% { width: 42%; transform: translateY(0%); }
  28.5%         { width:  0%; transform: translateY(0%); }
  30%, 45.6%    { width:  0%; transform: translateY(55%); }
  53.5%, 74.5%  { width: 42%; transform: translateY(55%); }
  84.65%, 96%   { width: 42%; transform: translateY(0%); }
  100%          { width: 42%; transform: translateY(0%); }
}
@keyframes horizontal2B {
  0%, 21.4%    { width: 42%; transform: translateY(0%); }
  28.5%        { width:  0%; transform: translateY(0%); }
  30%, 45.6%   { width:  0%; transform: translateY(55%); }
  53.5%, 74.5% { width: 42%; transform: translateY(55%); }
  84.65%, 96%  { width: 42%; transform: translateY(0%); }
  100%         { width: 42%; transform: translateY(0%); }
}
@keyframes startSolid {
  0%           { height:    0%; transform: translate(0,    0); }
  6.9%         { height: 63.8%; }
  12%, 21.5%   { height: 72.6%; }
  27%, 37%     { height:   94%; }
  44%, 62%     { height:   44%; transform: translate(0, 101%); }
  65%          { height:   44%; transform: translate(0, 150%); }
  65.5%        { height:    0%; transform: translate(0, 150%); }
  66%          { height:    0%; transform: translate(0,    0); }
  70%, 92%     { height:   44%; transform: translate(0,  50%); }
  98%, 100%    { height: 72.6%; transform: translate(0,  50%); }
}
@keyframes finishSolid {
  0%, 21.5%    { height: 72.6%; transform: translate(0,  50%); }
  27%, 37%     { height:   94%; transform: translate(0,  50%); }
  44%, 62%     { height:   44%; transform: translate(0, 101%); }
  65%          { height:   44%; transform: translate(0, 150%); }
  65.5%        { height:    0%; transform: translate(0, 150%); }
  66%          { height:    0%; transform: translate(0,    0); }
  70%, 92%     { height:   44%; transform: translate(0,  50%); }
  98%, 100%    { height: 72.6%; transform: translate(0,  50%); }
}
#LoaderSVG rect#hp1 {
  animation: horizontal1  4.2s cubic-bezier(0.83,-0.49,0.26,1.47) forwards,
             horizontal1B 4.2s cubic-bezier(0.83,-0.49,0.26,1.47) infinite;
}
#LoaderSVG rect#hp2 {
  animation: horizontal2  4.2s cubic-bezier(0.83,-0.49,0.26,1.47) forwards,
             horizontal2B 4.2s cubic-bezier(0.83,-0.49,0.26,1.47) infinite;
}
#LoaderSVG rect#o1 {
  animation: translateo1up 4.2s cubic-bezier(0.83,-0.49,0.26,1.47) infinite forwards;
}
#LoaderSVG rect#o2 {
  animation: translateo2up 4.2s cubic-bezier(0.83,-0.49,0.26,1.47) infinite forwards;
}
#LoaderSVG rect#s1 {
  animation: startSolid  4.2s cubic-bezier(0.83,-0.49,0.26,1.47) forwards,
             finishSolid 4.2s cubic-bezier(0.83,-0.49,0.26,1.47) infinite;
}
/* TextWrap */
.loader-text-wrap {
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
}
/* StyledLoaderText — size=80: margin-top=45px (80/2+5), margin-left=6px (round(0.75*8)px) */
.loader-text-styled {
  margin-top: 45px;
  margin-left: 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* Text — size=80: font-size=20px (80/4), fill=#262AFF */
.loader-text {
  font-size: 20px;
  font-weight: 700;
  color: #262AFF;
  font-family: "DM Sans", sans-serif;
}
/* LoaderTextSVG — size=80: width=20px (80/4) */
#LoaderTextSVG {
  width: 20px;
}
/* Dot pulse — CSS equivalent of LoaderText SMIL r animation (2→0.5→2, 0.8s cycle) */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(0.25); }
}
#LoaderTextSVG circle {
  transform-box: fill-box;
  transform-origin: center;
}
#LoaderTextSVG circle:nth-child(1) { animation: dotPulse 0.8s linear infinite 0s; }
#LoaderTextSVG circle:nth-child(2) { animation: dotPulse 0.8s linear infinite 0.1s; }
#LoaderTextSVG circle:nth-child(3) { animation: dotPulse 0.8s linear infinite 0.2s; }