:root {
  --vl-black: #0B0B0D;
  --vl-red: #8B000F;
  --vl-silver: #C0C0C0;
  --vl-gray: #1E1E22;
  --vl-white: #FFFFFF;
}


/* =========================================
   FULLSCREEN
   ========================================= */

#velora-red-loader {
  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(139,0,15,.18),
      transparent 36%
    ),
    radial-gradient(
      circle at 0% 50%,
      rgba(139,0,15,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 50%,
      rgba(139,0,15,.10),
      transparent 30%
    ),
    var(--vl-black);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* GRID BACKGROUND */

#velora-red-loader::before {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.22;

  background-image:
    linear-gradient(
      rgba(192,192,192,.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(192,192,192,.06) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}


/* RED SIDE GLOW */

#velora-red-loader::after {
  content:"";

  position:absolute;

  width:70vw;
  height:70vw;

  max-width:900px;
  max-height:900px;

  border:
    1px solid rgba(139,0,15,.18);

  border-radius:50%;

  filter:blur(1px);

  box-shadow:
    0 0 120px rgba(139,0,15,.14);

  pointer-events:none;
}


/* =========================================
   CARD
   ========================================= */

.vl-card {
  position:relative;

  z-index:2;

  box-sizing:border-box;

  width:min(92vw, 430px);

  padding:
    28px
    25px
    21px;

  color:var(--vl-white);

  background:
    linear-gradient(
      145deg,
      rgba(30,30,34,.96),
      rgba(11,11,13,.98)
    );

  border:
    1px solid rgba(139,0,15,.62);

  border-radius:27px;

  box-shadow:
    0 25px 70px rgba(0,0,0,.52),
    0 0 55px rgba(139,0,15,.12),
    inset 0 1px 0 rgba(255,255,255,.05);

  overflow:hidden;
}


/* top red reflection */

.vl-card::before {
  content:"";

  position:absolute;

  left:15%;
  top:-1px;

  width:70%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vl-red),
      transparent
    );

  box-shadow:
    0 0 18px rgba(139,0,15,.8);
}


/* =========================================
   LOGO
   ========================================= */

.vl-logo-wrap {
  display:flex;
  justify-content:center;

  margin-bottom:17px;
}


.vl-logo {
  position:relative;

  display:grid;
  place-items:center;

  width:72px;
  height:72px;

  background:
    linear-gradient(
      145deg,
      #141416,
      #070708
    );

  border:
    1px solid rgba(139,0,15,.80);

  border-radius:20px;

  box-shadow:
    0 0 0 6px rgba(139,0,15,.08),
    0 0 28px rgba(139,0,15,.28),
    inset 0 1px 0 rgba(255,255,255,.08);

  overflow:hidden;
}


.vl-logo span {
  font-family:Georgia, serif;

  font-size:47px;
  font-weight:900;

  line-height:1;

  letter-spacing:-7px;

  transform:
    translateX(-3px);

  background:
    linear-gradient(
      115deg,
      var(--vl-white) 0%,
      var(--vl-silver) 42%,
      var(--vl-red) 55%,
      var(--vl-red) 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


/* =========================================
   HEADINGS
   ========================================= */

.vl-eyebrow {
  margin:0 0 8px;

  color:var(--vl-red);

  text-align:center;

  font-size:10px;
  font-weight:900;

  letter-spacing:2px;

  text-transform:uppercase;
}


.vl-title {
  margin:0;

  color:var(--vl-white);

  text-align:center;

  font-size:28px;
  font-weight:950;

  letter-spacing:-1px;

  line-height:1.08;
}


.vl-title strong {
  color:#b30b1b;
}


.vl-subtitle {
  max-width:315px;

  margin:
    10px auto
    22px;

  color:rgba(192,192,192,.78);

  text-align:center;

  font-size:12px;
  font-weight:500;

  line-height:1.55;
}


/* =========================================
   PROGRESS
   ========================================= */

.vl-progress-head {
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  margin-bottom:8px;
}


.vl-progress-head span {
  color:rgba(192,192,192,.76);

  font-size:8px;
  font-weight:900;

  letter-spacing:1.3px;
}


.vl-progress-head strong {
  color:var(--vl-white);

  font-size:21px;
  font-weight:950;
}


.vl-progress {
  position:relative;

  width:100%;
  height:9px;

  margin-bottom:20px;

  overflow:hidden;

  background:#080809;

  border:
    1px solid rgba(192,192,192,.11);

  border-radius:999px;
}


.vl-progress-fill {
  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:0%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #61000A,
      var(--vl-red),
      #b30b1b
    );

  box-shadow:
    0 0 15px rgba(139,0,15,.65);

  transition:
    width .35s ease;
}


.vl-progress-fill::after {
  content:"";

  position:absolute;

  right:0;
  top:0;

  width:40px;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55)
    );

  filter:blur(3px);
}


/* =========================================
   STEPS
   ========================================= */

.vl-steps {
  display:flex;

  flex-direction:column;

  gap:8px;
}


.vl-step {
  display:grid;

  grid-template-columns:
    39px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:10px;

  min-height:58px;

  padding:
    6px
    11px;

  background:
    linear-gradient(
      90deg,
      rgba(30,30,34,.96),
      rgba(11,11,13,.96)
    );

  border:
    1px solid rgba(192,192,192,.10);

  border-radius:14px;

  transition:
    border .25s ease,
    background .25s ease;
}


.vl-step.is-done {
  border-color:
    rgba(139,0,15,.30);
}


.vl-step.is-active {
  border-color:
    rgba(139,0,15,.72);

  background:
    linear-gradient(
      90deg,
      rgba(139,0,15,.16),
      rgba(11,11,13,.96)
    );
}


/* STEP ICON */

.vl-step-icon {
  display:grid;
  place-items:center;

  width:33px;
  height:33px;

  color:rgba(192,192,192,.42);

  border:
    1px solid rgba(192,192,192,.14);

  border-radius:11px;

  font-size:17px;
  font-weight:900;
}


.vl-step.is-done
.vl-step-icon {
  color:var(--vl-white);

  background:
    rgba(139,0,15,.28);

  border-color:
    rgba(139,0,15,.80);

  box-shadow:
    0 0 13px rgba(139,0,15,.20);
}


.vl-step.is-active
.vl-step-icon {
  color:var(--vl-white);

  border-color:var(--vl-red);

  animation:
    vlPulse
    1.1s infinite ease-in-out;
}


/* TEXT */

.vl-step-copy strong {
  display:block;

  margin-bottom:2px;

  color:var(--vl-white);

  font-size:11px;
  font-weight:850;
}


.vl-step-copy small {
  display:block;

  color:rgba(192,192,192,.58);

  font-size:8px;
  font-weight:500;
}


/* BADGE */

.vl-step-state {
  min-width:64px;

  padding:
    6px 8px;

  color:rgba(192,192,192,.55);

  text-align:center;

  background:
    rgba(30,30,34,.85);

  border:
    1px solid rgba(192,192,192,.08);

  border-radius:999px;

  font-size:7px;
  font-weight:950;

  letter-spacing:.35px;
}


.vl-step.is-done
.vl-step-state {
  color:#d7868f;

  background:
    rgba(139,0,15,.20);

  border-color:
    rgba(139,0,15,.35);
}


.vl-step.is-active
.vl-step-state {
  color:var(--vl-white);

  background:
    var(--vl-red);

  border-color:
    var(--vl-red);
}


/* =========================================
   FOOT
   ========================================= */

.vl-footer {
  display:flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  margin-top:20px;

  color:rgba(192,192,192,.54);

  font-size:8px;
  font-weight:600;
}


.vl-footer-dot {
  width:6px;
  height:6px;

  background:var(--vl-red);

  border-radius:50%;

  box-shadow:
    0 0 9px rgba(139,0,15,.9);
}


@keyframes vlPulse {

  0%,
  100% {
    opacity:.55;
    box-shadow:
      0 0 0 rgba(139,0,15,0);
  }

  50% {
    opacity:1;
    box-shadow:
      0 0 15px rgba(139,0,15,.55);
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media(max-width:480px) {

  #velora-red-loader {
    padding:13px;
  }

  .vl-card {
    width:100%;

    padding:
      22px
      17px
      18px;

    border-radius:23px;
  }

  .vl-logo {
    width:62px;
    height:62px;
  }

  .vl-logo span {
    font-size:40px;
  }

  .vl-title {
    font-size:24px;
  }

  .vl-subtitle {
    margin-bottom:18px;

    font-size:11px;
  }

  .vl-step {
    min-height:54px;

    grid-template-columns:
      35px
      minmax(0,1fr)
      auto;

    gap:8px;
  }

  .vl-step-icon {
    width:31px;
    height:31px;
  }

}



/* ======================================================
   VELORA LOADER V2 — VISUAL COMPLETION
   ====================================================== */

#velora-red-loader {
  opacity:1;

  transition:
    opacity .4s ease,
    transform .4s ease;
}


#velora-red-loader.vl-leaving {
  opacity:0;

  pointer-events:none;
}


/* LARGE BACKGROUND FRAME */

.vl-stage-line {
  position:absolute;

  top:50%;

  width:31vw;
  max-width:520px;
  height:48vh;

  transform:
    translateY(-50%);

  pointer-events:none;

  opacity:.68;
}


.vl-stage-line--left {
  left:0;

  border-top:
    1px solid rgba(139,0,15,.55);

  border-right:
    1px solid rgba(139,0,15,.35);

  border-bottom:
    1px solid rgba(139,0,15,.28);

  border-radius:
    0 42px 42px 0;

  box-shadow:
    inset -30px 0 60px rgba(139,0,15,.05);
}


.vl-stage-line--right {
  right:0;

  border-top:
    1px solid rgba(139,0,15,.55);

  border-left:
    1px solid rgba(139,0,15,.35);

  border-bottom:
    1px solid rgba(139,0,15,.28);

  border-radius:
    42px 0 0 42px;

  box-shadow:
    inset 30px 0 60px rgba(139,0,15,.05);
}


/* TOP/BOTTOM AMBIENT LINES */

#velora-red-loader .vl-card {
  animation:
    vlCardEnter
    .5s ease both;
}


@keyframes vlCardEnter {

  from {
    opacity:0;

    transform:
      translateY(14px)
      scale(.985);
  }

  to {
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* LOGO RED PREMIUM */

.vl-logo {
  border-color:
    rgba(235,6,22,.72) !important;

  box-shadow:
    0 0 0 6px rgba(139,0,15,.09),
    0 0 32px rgba(235,6,22,.20),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}


/* PROGRESS brighter */

.vl-progress-fill {
  background:
    linear-gradient(
      90deg,
      #65000A,
      #8B000F 45%,
      #EB0616 100%
    ) !important;
}


/* ACTIVE STEP stronger */

.vl-step.is-active {
  box-shadow:
    inset 0 0 20px rgba(139,0,15,.08);
}


/* MOBILE SIDE FRAMES OFF */

@media(max-width:700px) {

  .vl-stage-line {
    display:none;
  }

}