.bils-loader-lock {
  overflow: hidden;
}

.bils-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(247, 247, 242, 0.075), transparent 26%),
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.035), transparent 32%),
    linear-gradient(145deg, #000, #050505 58%, #010101);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 560ms ease, visibility 560ms ease;
}

.bils-page-loader::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 32% 42%, rgba(255, 255, 255, 0.045), transparent 28%),
    radial-gradient(ellipse at 72% 50%, rgba(255, 255, 255, 0.038), transparent 30%),
    linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%);
  opacity: 0.62;
  filter: blur(14px);
  animation: bilsLoaderAmbient 3.5s ease forwards;
}

.bils-page-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(0, 0, 0, 0.28) 62%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026), transparent 15% 85%, rgba(255, 255, 255, 0.018));
  pointer-events: none;
}

.bils-page-loader.is-leaving,
.bils-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bils-loader-stage {
  position: relative;
  z-index: 1;
  width: min(700px, 78vw);
  aspect-ratio: 6177 / 2269;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.bils-loader-stage::before {
  content: "";
  position: absolute;
  inset: -24%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.1), transparent 34%),
    radial-gradient(ellipse at 44% 52%, rgba(255, 255, 255, 0.045), transparent 54%);
  opacity: 0;
  filter: blur(20px);
  animation: bilsStageBloom 3.5s ease forwards;
}

.bils-loader-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.28), transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08), transparent 66%);
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask: url("assets/logo/bils-logo-vector-white.png") center / contain no-repeat;
  mask: url("assets/logo/bils-logo-vector-white.png") center / contain no-repeat;
  animation: bilsLogoInnerAura 2.8s ease 520ms forwards;
}

.bils-loader-logo-base,
.bils-loader-logo-edge,
.bils-loader-logo-part,
.bils-loader-logo-final {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.bils-loader-logo-base {
  z-index: 1;
  opacity: 0;
  filter: brightness(0.28) blur(0.75px);
  transform: translateY(5px) scale(0.992);
  animation: bilsBaseEtch 3.5s ease forwards;
}

.bils-loader-logo-edge {
  z-index: 3;
  opacity: 0;
  filter:
    brightness(1.28)
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.24))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.12));
  mix-blend-mode: screen;
  transform: translateY(3px) scale(0.994);
  animation: bilsEdgeSettle 3.2s ease 120ms forwards;
}

.bils-loader-logo-part {
  z-index: 4;
  opacity: 0;
  filter:
    brightness(1.7)
    blur(0.25px)
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.22));
  mix-blend-mode: screen;
  transform: translateY(4px) scale(0.992);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--fill-size-start);
  mask-size: var(--fill-size-start);
  -webkit-mask-position: var(--fill-x) var(--fill-y);
  mask-position: var(--fill-x) var(--fill-y);
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 0 37%, rgba(0, 0, 0, 0.82) 55%, transparent 78%);
  mask-image:
    radial-gradient(ellipse at center, #000 0 37%, rgba(0, 0, 0, 0.82) 55%, transparent 78%);
  animation: bilsLogoFillBloom var(--fill-duration) ease var(--fill-delay) forwards;
}

.bils-loader-part-1 {
  --fill-x: 0%;
  --fill-y: 51%;
  --fill-size-start: 0% 0%;
  --fill-size-end: 38% 132%;
  --fill-delay: 650ms;
  --fill-duration: 1.05s;
}

.bils-loader-part-2 {
  --fill-x: 19%;
  --fill-y: 48%;
  --fill-size-start: 0% 0%;
  --fill-size-end: 42% 128%;
  --fill-delay: 830ms;
  --fill-duration: 1.05s;
}

.bils-loader-part-3 {
  --fill-x: 41%;
  --fill-y: 49%;
  --fill-size-start: 0% 0%;
  --fill-size-end: 34% 126%;
  --fill-delay: 1s;
  --fill-duration: 1s;
}

.bils-loader-part-4 {
  --fill-x: 57%;
  --fill-y: 49%;
  --fill-size-start: 0% 0%;
  --fill-size-end: 38% 130%;
  --fill-delay: 1.16s;
  --fill-duration: 1.03s;
}

.bils-loader-part-5 {
  --fill-x: 75%;
  --fill-y: 51%;
  --fill-size-start: 0% 0%;
  --fill-size-end: 46% 134%;
  --fill-delay: 1.32s;
  --fill-duration: 1.06s;
}

.bils-loader-logo-final {
  z-index: 6;
  opacity: 0;
  filter:
    brightness(0.9)
    drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  transform: translateY(2px) scale(0.996);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, rgba(0, 0, 0, 0.86) 62%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 0 48%, rgba(0, 0, 0, 0.86) 62%, transparent 78%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  animation: bilsFinalLogo 1.08s ease 2.03s forwards;
}

.bils-loader-laser {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.98) 0 3%, rgba(255, 255, 255, 0.46) 8%, rgba(255, 255, 255, 0.14) 18%, transparent 42%) no-repeat;
  background-size: var(--trace-size);
  background-position: var(--trace-start);
  opacity: 0;
  filter:
    blur(0.08px)
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.24));
  mix-blend-mode: screen;
  -webkit-mask: url("assets/logo/bils-logo-vector-edge.png") center / contain no-repeat;
  mask: url("assets/logo/bils-logo-vector-edge.png") center / contain no-repeat;
  animation: bilsContourTrace var(--trace-duration) cubic-bezier(0.18, 0.74, 0.16, 1) var(--trace-delay) forwards;
}

.bils-loader-laser::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(10px, 1.4vw, 18px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, 0.54) 34%, transparent 70%);
  opacity: 0;
  filter: blur(0.1px);
  transform: translate(var(--spark-start-x), var(--spark-start-y)) scale(0.65);
  animation: bilsSparkSoft var(--trace-duration) ease var(--trace-delay) forwards;
}

.bils-loader-laser-1 {
  --trace-size: 30% 72%;
  --trace-start: -18% 18%;
  --trace-end: 22% 6%;
  --trace-delay: 80ms;
  --trace-duration: 1.08s;
  --spark-start-x: 7%;
  --spark-start-y: 63%;
  --spark-end-x: 26%;
  --spark-end-y: 24%;
}

.bils-loader-laser-2 {
  --trace-size: 32% 62%;
  --trace-start: -12% 64%;
  --trace-end: 32% 54%;
  --trace-delay: 360ms;
  --trace-duration: 1.05s;
  --spark-start-x: 9%;
  --spark-start-y: 43%;
  --spark-end-x: 36%;
  --spark-end-y: 68%;
}

.bils-loader-laser-3 {
  --trace-size: 26% 84%;
  --trace-start: 25% 4%;
  --trace-end: 52% 9%;
  --trace-delay: 660ms;
  --trace-duration: 980ms;
  --spark-start-x: 32%;
  --spark-start-y: 24%;
  --spark-end-x: 53%;
  --spark-end-y: 46%;
}

.bils-loader-laser-4 {
  --trace-size: 30% 82%;
  --trace-start: 48% 8%;
  --trace-end: 73% 14%;
  --trace-delay: 920ms;
  --trace-duration: 1.02s;
  --spark-start-x: 53%;
  --spark-start-y: 68%;
  --spark-end-x: 73%;
  --spark-end-y: 30%;
}

.bils-loader-laser-5 {
  --trace-size: 36% 70%;
  --trace-start: 70% 45%;
  --trace-end: 106% 43%;
  --trace-delay: 1.16s;
  --trace-duration: 1.12s;
  --spark-start-x: 75%;
  --spark-start-y: 35%;
  --spark-end-x: 94%;
  --spark-end-y: 57%;
}

.bils-loader-glow {
  position: absolute;
  inset: 0;
  z-index: 8;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.5), transparent 30%),
    radial-gradient(ellipse at 52% 50%, rgba(255, 255, 255, 0.15), transparent 62%);
  opacity: 0;
  filter: blur(0.2px);
  mix-blend-mode: screen;
  -webkit-mask: url("assets/logo/bils-logo-vector-white.png") center / contain no-repeat;
  mask: url("assets/logo/bils-logo-vector-white.png") center / contain no-repeat;
  animation: bilsFinalReluce 760ms ease 2.62s forwards;
}

@keyframes bilsBaseEtch {
  0% {
    opacity: 0;
    filter: brightness(0.16) blur(1.25px);
  }

  46% {
    opacity: 0.075;
  }

  100% {
    opacity: 0.1;
    filter: brightness(0.38) blur(0.42px);
    transform: translateY(0) scale(1);
  }
}

@keyframes bilsEdgeSettle {
  0% {
    opacity: 0;
    filter:
      brightness(0.8)
      drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }

  18% {
    opacity: 0.2;
  }

  54% {
    opacity: 0.72;
    filter:
      brightness(1.85)
      drop-shadow(0 0 9px rgba(255, 255, 255, 0.52))
      drop-shadow(0 0 22px rgba(255, 255, 255, 0.16));
  }

  100% {
    opacity: 0.34;
    filter:
      brightness(1.05)
      drop-shadow(0 0 5px rgba(255, 255, 255, 0.18))
      drop-shadow(0 0 13px rgba(255, 255, 255, 0.08));
    transform: translateY(0) scale(1);
  }
}

@keyframes bilsLogoFillBloom {
  0% {
    opacity: 0;
    -webkit-mask-size: var(--fill-size-start);
    mask-size: var(--fill-size-start);
  }

  36% {
    opacity: 0.86;
  }

  100% {
    opacity: 0.22;
    -webkit-mask-size: var(--fill-size-end);
    mask-size: var(--fill-size-end);
    transform: translateY(0) scale(1);
  }
}

@keyframes bilsFinalLogo {
  0% {
    opacity: 0;
    -webkit-mask-size: 18% 18%;
    mask-size: 18% 18%;
    filter:
      brightness(0.78)
      drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }

  58% {
    opacity: 1;
    -webkit-mask-size: 150% 132%;
    mask-size: 150% 132%;
    filter:
      brightness(1.36)
      drop-shadow(0 0 25px rgba(255, 255, 255, 0.2));
  }

  100% {
    opacity: 1;
    -webkit-mask-size: 220% 180%;
    mask-size: 220% 180%;
    filter:
      brightness(1.1)
      drop-shadow(0 0 17px rgba(255, 255, 255, 0.14));
    transform: translateY(0) scale(1);
  }
}

@keyframes bilsContourTrace {
  0% {
    opacity: 0;
    background-position: var(--trace-start);
  }

  14%,
  70% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
    background-position: var(--trace-end);
  }
}

@keyframes bilsSparkSoft {
  0%,
  100% {
    opacity: 0;
    transform: translate(var(--spark-start-x), var(--spark-start-y)) scale(0.65);
  }

  36%,
  62% {
    opacity: 0.85;
    transform: translate(var(--spark-end-x), var(--spark-end-y)) scale(1);
  }
}

@keyframes bilsFinalReluce {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  42% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes bilsLogoInnerAura {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  58% {
    opacity: 0.28;
  }

  100% {
    opacity: 0.04;
    transform: scale(1.02);
  }
}

@keyframes bilsStageBloom {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  48% {
    opacity: 0.58;
  }

  100% {
    opacity: 0.25;
    transform: scale(1);
  }
}

@keyframes bilsLoaderAmbient {
  0% {
    opacity: 0.18;
    transform: translate3d(-2%, -1%, 0) scale(0.98);
  }

  100% {
    opacity: 0.5;
    transform: translate3d(2%, 1%, 0) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bils-page-loader,
  .bils-page-loader::before,
  .bils-loader-stage::before,
  .bils-loader-stage::after,
  .bils-loader-logo-base,
  .bils-loader-logo-edge,
  .bils-loader-logo-part,
  .bils-loader-logo-final,
  .bils-loader-laser,
  .bils-loader-laser::after,
  .bils-loader-glow {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}