/* ---- Container + background ---- */
#spinnerContainer {
    position: absolute;
    left: 50%;
    top: 78%;
    width: 100%;
    max-width: 10%;
    height: 100%;
    max-height: 10%;
    background: rgba(0, 0, 0, 0);
    background-image: none;
}

.lds-ellipsis {
    display: block;
    position: absolute;
    z-index: 19;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 120px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
}

/* Flat black background */
#fantasma-preloader-container {
    background: radial-gradient(ellipse at top, #100a0a, rgba(18, 8, 8, 0.831)),
    radial-gradient(ellipse at center, #2134c7, #120c09);
    width: 100%;
    height: 100%;
    position: fixed;
}

#fade-in {
    -webkit-animation: fade-in 2s ease-out forwards;
    animation: fade-in 2s ease-out forwards;
}

#preloader-bg {
    width: 100%;
    height: 100%;
    top: -12px;
    position: absolute;
    /*background-image: url("PRELOADER_BGR.png");*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /*-webkit-animation: fade-in 2s ease-out forwards;*/
    /*animation: fade-in 2s ease-out forwards;*/
}

#preloader {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url("PRELOADER_BGR.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2186px 1230px;
    -webkit-animation: fade-in 2s ease-out forwards;
    animation: fade-in 2s ease-out forwards;
}

/* ---- Logo & text ---- */
#loadingText {
    max-width: 50%;
}

#corpLogo {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 2%;
    max-height: 20%;
    max-width: 30%;
}

/* ===========================================
   LOADING BAR — tilted rectangle
   =========================================== */

:root{
  --bar-w: 80vw;   /* width */
  --bar-h: 30px;   /* height */
  --tilt: 28px;    /* tilt size */
  --frame: 1px;    /* border thickness */
}

/* keep these centered */
#loadingText, #barBg, #progress{
  position:absolute;
  left:50%; top:71%;
  max-height: 8%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* FRAME */
#barBg{
  width: min(var(--bar-w), 80%);
  height: var(--bar-h);
  border: var(--frame) solid #e517eb;
  border-radius: 0;
  /* keep the tilted ends */
  clip-path: polygon(
    var(--tilt) 0,
    100% 0,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  background:#0c0010;

}

/* keep your ::before if you like the slight top sheen, it won’t affect outer glow */
#barBg::before{
  content:"";
  position:absolute; inset:0;
  clip-path:inherit;
  background: linear-gradient(to bottom, rgb(30, 12, 24), transparent 55%);
  mix-blend-mode: screen; pointer-events:none;
}

/* PINK OUTER GLOW — above & below only, behind the bar */
#fantasma-preloader-container::before{
  content: "";
  position: absolute;         /* relative to the fixed container */
  left: 50%;
  top: 71%;
  transform: translate(-50%, -50%);
  width: min(var(--bar-w), 80%);
  height: var(--bar-h);

  /* match the bar’s tilted shape so drop-shadow hugs only top/bottom edges */
  clip-path: polygon(
    var(--tilt) 0,
    100% 0,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );

  background: transparent;    /* we only want the glow, not a fill */
  pointer-events: none;
  z-index: 1;                 /* behind #barBg, above the black bg */

}

/* Optional: if needed, ensure the container creates a positioning context */
#fantasma-preloader-container{ position: fixed; }

/* FILL */
#progress{
  height: calc(var(--bar-h) - var(--frame)*2);
  width: 0; /* JS updates this */
  border:0; border-radius:0;
  clip-path: polygon(
    var(--tilt) 0,
    100% 0,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  background: linear-gradient(90deg,
    #99299f 0%,
    #2dc6ac 28%,
    #54d325 50%,
    #de261e 100%
  );
  background-size:200% 100%;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.35),
    0 0 14px rgba(255,64,236,0.35);
  animation: progress-sheen 3.2s linear infinite;
  mix-blend-mode: screen;
}

#progress::after{
  content:"";
  position:absolute;
  inset:0;

  /* Edge-to-center glow */
  background:
    radial-gradient(closest-side, transparent 65%, rgba(255, 169, 31, 0.484) 100%),
    linear-gradient(to right,
      rgb(255, 214, 31) 0%, transparent 20%,
      transparent 80%, rgba(248, 31, 255, 0.473) 100%),
    linear-gradient(to bottom,
      rgb(255, 192, 31) 0%, transparent 40%,
      transparent 60%, rgb(255, 31, 221) 100%);

  filter: blur(3px);
  mix-blend-mode: color-dodge;
  pointer-events:none;
}

/* ---- Triangular ticks ---- */
.lds-ellipsis div {
    position: absolute;
    width: 88px;
    height: 50px;
    background-image: url("tick.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: -60px;
    -webkit-animation: lds-ellipsis1 0.6s infinite;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: -60px;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 10px;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 80px;
    -webkit-animation: lds-ellipsis3 0.6s infinite;
    animation: lds-ellipsis3 0.6s infinite;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes enter-in-small {
    0% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes enter-in-small {
    0% {
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@-webkit-keyframes enter-in {
    0% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes enter-in {
    0% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@-webkit-keyframes lds-ellipsis1 {
    0% {
        /*transform: translate(-55px, 0);*/
        -webkit-transform: translate(-120px, 0);
        transform: translate(-120px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes lds-ellipsis1 {
    0% {
        /*transform: translate(-55px, 0);*/
        -webkit-transform: translate(-120px, 0);
        transform: translate(-120px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes lds-ellipsis2 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(70px, 0);
        transform: translate(70px, 0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(70px, 0);
        transform: translate(70px, 0);
    }
}

@-webkit-keyframes lds-ellipsis3 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(120px, 0);
        transform: translate(120px, 0);
        opacity: 0;
    }
}

@keyframes lds-ellipsis3 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(120px, 0);
        transform: translate(120px, 0);
        opacity: 0;
    }
}