/* ===================================================================================
   LOADER
   =================================================================================== */
.win-ldr {
  width: 100vw;
  height: 100vh;
  color: var(--c-wht);
  line-height: 1;
  background-color: var(--c-red);
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 75%);
  background-blend-mode: multiply;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  transform: translate3d(0, 0, 0);
}

.win-ldr::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url(/common/img/img_bg_noise.png);
  background-position: center;
  background-size: 500px;
  mix-blend-mode: overlay;
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;
}

.is-vivus-done .win-ldr,
.is-gen-sess-load .win-ldr {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--easeInCubic), visibility 300ms var(--easeInCubic);
}

.is-vivus-done .win-ldr {
  transition-delay: 750ms;
}

.win-ldr_bdy {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ua-mbl.is-load .win-ldr_bdy {
  transition: height 150ms var(--easeOutQuint), max-height 150ms var(--easeOutQuint);
}

.win-ldr_bdy::after {
  content: '';
  width: 100vw;
  aspect-ratio: 1 / 1;
  background-image: url(/common/img/ring_grade.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  filter: brightness(0%) invert(100%);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  transform: translate3d(60%, 60%, 0) rotate(0deg);
  animation: spin-fx 7.5s linear infinite;
}

.win-ldr_inr {
  width: 15em;
  max-width: 100%;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 50;
}

.is-frst-sess .win-ldr_inr,
.is-gen-sess .win-ldr_inr {
  animation: shw-ldr 37.5ms 75ms var(--easeInCubic) both;
}

.win-ldr_btm-unt {
  width: 100%;
  position: absolute;
  top: 100%;
}

.win-ldr_shldr-cpy {
  align-items: center;
}

.win-ldr_b-cpy {
  width: max-content;
  margin: 2.5em auto 0;
  font-size: 0.625em;
  font-weight: 700;
  position: relative;
}

.is-vivus-init .win-ldr_b-cpy,
.is-vivus-done .win-ldr_b-cpy,
.is-load.is-gen-sess .win-ldr_b-cpy {
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms var(--easeOutQuint), visibility 150ms var(--easeOutQuint);
}

.win-ldr_b-cpy-rdr {
  display: block;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 100%;
  animation: reader-stp 1.25s steps(2) infinite;
}

.ldr-logo {
  width: var(--logo-wdh);
  max-width: 100%;
  line-height: 1;
  overflow: hidden;
  display: block;
  position: absolute;
  bottom: 100%;
}

.ldr-logo.-wht {
  filter: brightness(0%) invert(100%);
}

.ldr-logo.-blk {
  filter: brightness(0%) invert(0%);
}

.ldr-logo.-oag-main {
  --logo-wdh: 7.5em;
  display: flex;
  justify-content: center;
}

.is-gen-sess .ldr-logo.-oag-main {
  display: none;
}

.ldr-logo.-oag-main > * {
  transition: width 300ms var(--easeInOutSine), opacity 135ms var(--easeInOutSine), transform 236.25ms var(--easeInOutSine);
}

.is-vivus-done .ldr-logo.-oag-main > * {
  opacity: 0;
  transform: translate3d(0, -40%, 0);
}

.ldr-logo.-oag-grp {
  --logo-wdh: 100%;
  z-index: 100;
}

.is-load .ldr-logo.-oag-grp > * {
  transition: opacity 236.25ms 100ms var(--easeInOutSine), transform 135ms 100ms var(--easeInOutSine);
}

.is-frst-sess .ldr-logo.-oag-grp > * {
  opacity: 0;
  transform: translate3d(0, 40%, 0);
}

.is-vivus-done .ldr-logo.-oag-grp > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ldr-logo_bdy, .ldr-logo_inr, .ldr-logo_lnk {
  width: 100%;
  height: 100%;
  display: block;
}

.oag-logo-fx {
  width: 2.55156em;
}

.is-vivus-init .oag-logo-fx,
.is-vivus-done .oag-logo-fx {
  width: 100%;
}

.oag-logo-fx_o {
  opacity: 0.5;
}

.oag-logo-fx_a, .oag-logo-fx_g, .oag-logo-fx_shldr {
  opacity: 0;
  transition: opacity 367.5ms 60ms var(--easeInOutSine), transform 210ms 60ms var(--easeInOutSine);
}

.is-vivus-init .oag-logo-fx_a,
.is-vivus-done .oag-logo-fx_a, .is-vivus-init .oag-logo-fx_g,
.is-vivus-done .oag-logo-fx_g, .is-vivus-init .oag-logo-fx_shldr,
.is-vivus-done .oag-logo-fx_shldr {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.oag-logo-fx_a, .oag-logo-fx_g {
  transform: translate3d(-2em, 0, 0);
}

.oag-logo-fx_g {
  transition-delay: 180ms;
}

.oag-logo-fx_shldr {
  transform: translate3d(0, 1em, 0);
}

.oag-logo-fx_cir {
  width: 7.5em;
}

.oag-logo-fx_cir-strk {
  stroke: currentColor;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 999, 999;
  stroke-dashoffset: 999;
  stroke-miterlimit: 10;
}

.oag-logo-fx_txt {
  position: absolute;
  top: 0;
  left: 0;
}

.ldr {
  --ldrBar-wdh: 100%;
  --ldrBar-hgt: 2px;
  --ldrBar-col: var(--c-wht);
  --ldrBar-speed: 1.4s;
  width: var(--ldrBar-wdh);
  padding-block: calc(var(--ldrBar-hgt) * 9) calc(var(--ldrBar-hgt) * 8);
  backface-visibility: hidden;
}

.ldr_bar {
  width: var(--ldrBar-wdh);
  height: var(--ldrBar-hgt);
  overflow: hidden;
  position: relative;
}

.ldr_bar::before, .ldr_bar::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--ldrBar-col);
  display: block;
}

.ldr_bar::before {
  opacity: 0.4;
}

.is-vivus-init .ldr_bar::before,
.is-vivus-done .ldr_bar::before,
.is-load.is-gen-sess .ldr_bar::before {
  opacity: 1;
  transition: opacity 300ms var(--easeOutQuint);
}

.ldr_bar::after {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0, 1);
  animation: race-by-fx var(--ldrBar-speed) 0.5s var(--easeInOutQuint) infinite;
}

.utl-chg-svg-col {
  fill: currentColor;
}

@keyframes shw-ldr {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes reader-stp {
  to {
    height: 0;
  }
}

@keyframes spin-fx {
  0% {
    transform: translate3d(60%, 60%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(60%, 60%, 0) rotate(360deg);
  }
}

@keyframes race-by-fx {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }
  25% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  25.1% {
    transform: scale(1, 1);
    transform-origin: 100% 0;
  }
  75% {
    transform: scale(0, 1);
    transform-origin: 100% 0;
  }
}