#loading-overlay,
#page-fade {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: #000;
  color: #fff;
  pointer-events: none;
  overflow: hidden;
}

@property --fade-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

#loading-overlay {
  --loader-progress: 0;
  --loader-r: calc(10% + var(--loader-progress) * 98%);
  display: grid;
  place-items: center;
  transform: translateY(0) scale(1);
  visibility: visible;
  opacity: 1;
  transition:
    transform .72s var(--ease-inout),
    opacity .48s var(--ease-out-expo),
    visibility 0s linear .72s;
}

#loading-overlay::before,
#loading-overlay::after {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: .75;
  transform-origin: 50% 50%;
}

#loading-overlay::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--loader-r) - 16%), rgba(255,43,46,.34) calc(var(--loader-r) - 3%), rgba(255,255,255,.18) var(--loader-r), transparent calc(var(--loader-r) + 12%)),
    radial-gradient(circle at 50% 50%, rgba(255,43,46,.26), transparent calc(12% + var(--loader-progress) * 34%)),
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(255,255,255,.08) 24.2% 24.8%, transparent 25.2%),
    linear-gradient(90deg, transparent 0 49.8%, rgba(255,255,255,.09) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(255,255,255,.07) 50%, transparent 50.2%);
  filter: blur(calc((1 - var(--loader-progress)) * 8px));
  transform: scale(calc(.78 + var(--loader-progress) * .28)) rotate(calc(var(--loader-progress) * 14deg));
}

#loading-overlay::after {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 52%, transparent 78%);
  opacity: calc(.13 + var(--loader-progress) * .18);
  transform: perspective(800px) rotateX(58deg) translateY(calc((1 - var(--loader-progress)) * 70px));
}

#loading-overlay.is-hidden {
  transform: translateY(-100%) scale(1.04);
  opacity: 0;
  visibility: hidden;
}

#loading-overlay.is-complete .loader {
  transform: translateY(-22px) scale(1.04);
  opacity: 0;
}

.loader {
  position: relative;
  z-index: 1;
  width: min(78vw, 620px);
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  transition: transform .7s var(--ease-inout), opacity .45s var(--ease-out-expo);
}

.loader__field {
  position: relative;
  width: clamp(150px, 22vw, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: scale(calc(.82 + var(--loader-progress) * .18));
  filter: drop-shadow(0 0 42px rgba(255,43,46,.26));
}

.loader__source-lottie,
.lottie-lite__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.loader__source-lottie {
  inset: -70%;
  opacity: calc(.12 + var(--loader-progress, 0) * .30);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px rgba(255,43,46,.16));
}
.loader__source-lottie svg {
  overflow: visible;
}
.loader__source-lottie path,
.loader__source-lottie ellipse {
  stroke: rgba(255,255,255,.30);
}

.loader__grid,
.loader__halo,
.loader__portal,
.loader__scan {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.loader__portal {
  inset: -22%;
  opacity: calc(.24 + var(--loader-progress) * .44);
  transform: scale(calc(.46 + var(--loader-progress) * 1.15));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 0 55px rgba(255,43,46,.18),
    0 0 90px rgba(255,43,46,.12);
}

.loader__portal--inner {
  inset: 12%;
  opacity: calc(.38 + var(--loader-progress) * .24);
  transform: scale(calc(.68 + var(--loader-progress) * .42)) rotate(calc(var(--loader-progress) * -18deg));
}

.loader__grid {
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.12) 13px, transparent 14px),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.10) 13px, transparent 14px);
  mask-image: radial-gradient(circle, #000 0 58%, transparent 70%);
  opacity: calc(.10 + var(--loader-progress) * .20);
}

.loader__halo {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 40px rgba(255,43,46,.12), 0 0 45px rgba(255,43,46,.16);
}

.loader__halo--outer {
  animation: loader-spin 6s linear infinite;
}

.loader__halo--inner {
  inset: 22%;
  border-color: rgba(255,43,46,.45);
  animation: loader-spin 3.6s linear infinite reverse;
}

.loader__scan {
  background: conic-gradient(from -90deg, transparent 0 72%, rgba(255,43,46,.78), rgba(255,255,255,.72), transparent 82% 100%);
  mask-image: radial-gradient(circle, transparent 0 28%, #000 29% 55%, transparent 57%);
  transform: rotate(calc(var(--loader-progress) * 460deg));
  opacity: .8;
}

.loader__mark {
  width: clamp(108.5px, 14vw, 161px);
  height: clamp(108.5px, 14vw, 161px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255,43,46,.72))
    drop-shadow(0 0 42px rgba(255,43,46,.28));
  transform: rotate(calc((var(--loader-progress) - .5) * 8deg));
  opacity: calc(.45 + var(--loader-progress) * .55);
}

.loader__title,
.loader__hint,
.loader__progress {
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
}

.loader__title {
  letter-spacing: .28em;
  color: rgba(255,255,255,.62);
}

.loader__line {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: clamp(23px, 4.2vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-shadow: 0 0 28px rgba(255,43,46,.22);
}

.loader__line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  animation: loader-char-in .64s var(--ease-out-expo) forwards;
  animation-delay: calc(.24s + var(--char-index, 0) * .055s);
}

#loading-overlay[data-loading-phase="ready"] .loader__line span,
#loading-overlay[data-loading-phase="complete"] .loader__line span {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.loader__hint {
  letter-spacing: .16em;
  color: rgba(255,255,255,.32);
}

.loader__progress {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  letter-spacing: .12em;
  color: rgba(255,255,255,.46);
}

#page-fade {
  --fade-x: 50vw;
  --fade-y: 50vh;
  --fade-progress: 0;
  z-index: var(--z-pagefade);
  opacity: 0;
  transform: translateY(100%);
  transition: transform .48s var(--ease-inout), opacity .36s var(--ease-out-expo);
}

#page-fade::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at var(--fade-x) var(--fade-y), transparent 0 calc(var(--fade-progress) * 18vw), rgba(255,43,46,.34) calc(var(--fade-progress) * 30vw), transparent calc(var(--fade-progress) * 54vw + 6vw)),
    radial-gradient(circle at 50% 50%, rgba(255,43,46,.18), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px);
  transform: perspective(900px) rotateX(62deg) translateY(80px);
}

.page-fade__grid,
.page-fade__line,
.page-fade__field,
.page-fade__ring,
.page-fade__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.page-fade__field {
  left: var(--fade-x);
  top: var(--fade-y);
  width: min(118vw, 118vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 26%, rgba(255,43,46,.22) 38%, rgba(255,255,255,.08) 41%, transparent 62%),
    repeating-radial-gradient(circle, rgba(255,255,255,.12) 0 1px, transparent 1px 44px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.28);
}

.page-fade__grid {
  width: min(64vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(255,43,46,.16), inset 0 0 60px rgba(255,43,46,.10);
}

.page-fade__ring {
  left: var(--fade-x);
  top: var(--fade-y);
  width: min(82vw, 820px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,43,46,.34);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 70px rgba(255,43,46,.18), inset 0 0 65px rgba(255,255,255,.05);
}

.page-fade__ring--inner {
  width: min(48vw, 480px);
  border-color: rgba(255,255,255,.18);
}

.page-fade__line {
  width: min(76vw, 900px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,43,46,.72), rgba(255,255,255,.68), transparent);
}

.page-fade__mark {
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 19.25px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.44);
}

#page-fade.is-covering {
  opacity: 1;
  transform: translateY(0);
  --fade-progress: 1;
}

#page-fade.is-revealing {
  opacity: 1;
  transform: translateY(-100%);
}

#page-fade.is-pulsing {
  opacity: 1;
  transform: translateY(0);
  animation: page-fade-pulse .98s var(--ease-inout) both;
}

#page-fade.is-pulsing .page-fade__field {
  animation: page-fade-field .98s var(--ease-out-expo) both;
}

#page-fade.is-pulsing .page-fade__ring {
  animation: page-fade-ring .98s var(--ease-out-expo) both;
}

#page-fade.is-pulsing .page-fade__ring--inner {
  animation-duration: .78s;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes loader-char-in {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  58% {
    opacity: .86;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes page-fade-pulse {
  0% { opacity: 0; --fade-progress: 0; }
  28% { opacity: .62; --fade-progress: .36; }
  100% { opacity: 0; --fade-progress: 1; }
}

@keyframes page-fade-field {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.20) rotate(-8deg); filter: blur(8px); }
  34% { opacity: .52; filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12) rotate(8deg); filter: blur(2px); }
}

@keyframes page-fade-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.32); }
  38% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  #loading-overlay,
  #page-fade {
    transition: none;
  }

  .loader__halo,
  .loader__portal,
  .loader__scan {
    animation: none;
  }
}