/* ---- Container + background ---- */
#spinnerContainer {
    position: absolute;
    left: 50%;
    top: calc(var(--loader-top) + (var(--bar-h) / 2) + var(--spinner-gap) + (40px * var(--spinner-scale)));
    /* Compensate for .lds-ellipsis translateY(-50%) on its 80px height. */
    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%) translateY(-50%) scale(var(--spinner-scale));
    -ms-transform: translateX(-50%) translateY(-50%) scale(var(--spinner-scale));
    transform: translateX(-50%) translateY(-50%) scale(var(--spinner-scale));
    transform-origin: center top;
    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 var(--preloader-bg-pos-y);
    background-size: var(--preloader-bg-size) auto;
    /*-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: cover;
    -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%) scale(var(--corp-logo-scale));
    transform-origin: center bottom;
    left: 50%;
    bottom: var(--corp-logo-bottom);
    max-height: var(--corp-logo-max-height);
    max-width: var(--corp-logo-max-width);
}

/* ===========================================
   LOADING BAR — tilted rectangle with hot glow
   =========================================== */

:root{
  --ui-scale: 1;
  --corp-logo-scale: var(--ui-scale);
  --preloader-bg-size: calc(75% * var(--ui-scale));
  --preloader-bg-pos-y: 40%;
  --bar-w: 80vw;   /* width */
  --bar-h: 68px;   /* height — always taller than 64px Loading_Text */
  --tilt: 28px;    /* tilt size */
  --frame: 2px;    /* border thickness */
  --loader-top: 71%;
  --spinner-gap: calc(32px * var(--ui-scale));
  --spinner-scale: var(--ui-scale);
  --corp-logo-bottom: 2%;
  --corp-logo-max-height: 20%;
  --corp-logo-max-width: 30%;
  --bar-w: calc(80vw * var(--ui-scale));   /* width */
  --bar-max-w: calc(80% * var(--ui-scale));
  --bar-h: calc(68px * var(--ui-scale));   /* height */
  --tilt: calc(28px * var(--ui-scale));    /* tilt size */
}

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

#loadingText{
  -webkit-transform: translateX(-50%) translateY(-50%) scale(var(--ui-scale));
  -ms-transform: translateX(-50%) translateY(-50%) scale(var(--ui-scale));
  transform: translateX(-50%) translateY(-50%) scale(var(--ui-scale));
  transform-origin: center center;
}

/* FRAME — with hot glow border */
#barBg{
  width: min(var(--bar-w), var(--bar-max-w));
  height: var(--bar-h);
  border: var(--frame) solid #c8930a;
  border-radius: 0;
  clip-path: polygon(
    var(--tilt) 0,
    100% 0,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  background:#1a0f00;
  box-shadow:
    0 0 12px rgba(255, 140, 0, 0.5),
    0 0 30px rgba(255, 100, 0, 0.25),
    inset 0 1px 0 rgba(255, 215, 0, 0.15);
}

/* subtle top highlight sheen */
#barBg::before{
  content:"";
  position:absolute; inset:0;
  clip-path:inherit;
  background: linear-gradient(to bottom, rgba(255, 200, 50, 0.15), transparent 55%);
  mix-blend-mode: screen; pointer-events:none;
}

/* HOT OUTER GLOW — pulsing warm aura behind the bar */
#fantasma-preloader-container::before{
  content: "";
  position: absolute;
  left: 50%;
  top: var(--loader-top);
  transform: translate(-50%, -50%);
  width: min(calc(var(--bar-w) * 1.025), calc(var(--bar-max-w) * 1.025));
  height: calc(var(--bar-h) + 40px);

  clip-path: polygon(
    var(--tilt) 0,
    100% 0,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );

  background: transparent;
  box-shadow:
    0 0 20px rgba(255, 120, 0, 0.5),
    0 0 50px rgba(255, 80, 0, 0.3),
    0 0 80px rgba(255, 60, 0, 0.15),
    0 0 120px rgba(200, 40, 0, 0.08);
  pointer-events: none;
  z-index: 1;
  animation: bar-glow-pulse 2.4s ease-in-out infinite;
}

/* Ensure container positioning context */
#fantasma-preloader-container{ position: fixed; }

/* FILL — hotter gradient with ember tones */
#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,
    #8b3000 0%,
    #cc6600 10%,
    #d4a020 22%,
    #ffd700 40%,
    #ffec80 50%,
    #ffd700 60%,
    #d4a020 78%,
    #cc6600 92%,
    #e8b400 100%
  );
  background-size:200% 100%;
  box-shadow:
    inset 0  3px 6px rgba(255,255,200,0.5),
    inset 0 -3px 6px rgba(140, 60, 0, 0.5),
    0 0 18px rgba(255,140,0,0.5),
    0 0 40px rgba(255,80,0,0.2);
  animation: progress-sheen 3.2s linear infinite;
}

/* Metallic highlight band across the fill */
#progress::before{
  content:"";
  position:absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    rgba(255,255,240,0.5) 0%,
    rgba(255,255,240,0.08) 100%
  );
  clip-path: inherit;
  pointer-events:none;
}

/* Hot edge glow on the fill — embers at edges */
#progress::after{
  content:"";
  position:absolute;
  inset: -4px;

  background:
    radial-gradient(closest-side, transparent 50%, rgba(255, 100, 0, 0.4) 100%),
    linear-gradient(to right,
      rgba(255, 60, 0, 0.7) 0%, transparent 12%,
      transparent 88%, rgba(255, 120, 0, 0.6) 100%),
    linear-gradient(to bottom,
      rgba(255, 200, 100, 0.35) 0%, transparent 35%,
      transparent 65%, rgba(200, 60, 0, 0.5) 100%);

  filter: blur(4px);
  mix-blend-mode: screen;
  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;
}

/* ===========================================
   MOBILE / PORTRAIT — bring elements closer
   =========================================== */
@media (orientation: portrait) {
  #preloader {
    background-size: cover;
    background-position: center center;
  }

  :root {
    --preloader-bg-size: 106%;
    --preloader-bg-pos-y: 38%;
    --corp-logo-scale: calc(var(--ui-scale) * 0.85);
    --loader-top: 72%;
  }
}

@media (max-height: 999px) {
  :root {
    --ui-scale: 0.88;
    --loader-top: 69.5%;
    --preloader-bg-pos-y: 39%;
  }
}

@media (max-height: 768px) {
  :root {
    --ui-scale: 0.79;
    --loader-top: 68%;
    --preloader-bg-pos-y: 37%;
  }
}

@media (orientation: portrait) and (max-height: 999px) {
  :root {
    --preloader-bg-size: 116%;
    --preloader-bg-pos-y: 41%;
  }
}

@media (orientation: portrait) and (max-height: 768px) {
  :root {
    --preloader-bg-size: 126%;
    --preloader-bg-pos-y: 44%;
  }
}

@media (max-width: 768px) {
  #preloader-bg {
    background-size: 132% auto;
    background-position: center 45%;
  }
}

@media (max-width: 480px) {
  #preloader-bg {
    background-size: 148% auto;
    background-position: center 50%;
  }
}

/* ===========================================
   KEYFRAMES
   =========================================== */

/* Pulsing glow for the bar aura */
@keyframes bar-glow-pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bar-glow-pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Sheen sweep across the fill */
@keyframes progress-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@-webkit-keyframes progress-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@-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% {
        -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% {
        -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;
    }
}