:root {
  --page-load-bg: #000000;
  --page-load-gold: #d4af37;
  --page-load-gold-bright: #f1d978;
  --page-load-gold-deep: #8f6b19;
  --page-load-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-load-intro-duration: 1815ms;
}

.page-load-reveal {
  align-items: center;
  contain: layout paint style;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 1;
  overflow: hidden;
  perspective: 900px;
  pointer-events: none;
  position: fixed;
  transition: opacity 160ms var(--page-load-ease);
  will-change: opacity;
  z-index: 9999;
}

.page-load-reveal::before,
.page-load-reveal::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.page-load-reveal::before {
  animation: page-load-backdrop var(--page-load-intro-duration) var(--page-load-ease) both;
  background: #000000;
  opacity: 1;
  z-index: 0;
}

.page-load-reveal::after {
  animation: page-load-ambient-edge var(--page-load-intro-duration) var(--page-load-ease) both;
  background:
    radial-gradient(circle at 50% 50%, rgba(241, 217, 120, 0.1), transparent 21%),
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.055), transparent 38%);
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center;
  z-index: 1;
}

.page-load-reveal.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.page-load-stage {
  align-items: center;
  display: grid;
  height: clamp(220px, 30vw, 330px);
  justify-items: center;
  perspective: 720px;
  position: relative;
  transform: translateZ(0);
  transform-style: preserve-3d;
  width: min(320px, calc(100vw - 48px));
  z-index: 2;
}

.page-load-n {
  animation: page-load-n-lock-turn var(--page-load-intro-duration) linear both;
  filter:
    drop-shadow(0 0 1px rgba(241, 217, 120, 0.28))
    drop-shadow(0 0 5px rgba(212, 175, 55, 0.1));
  height: auto;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  transform-style: preserve-3d;
  width: min(164px, 42vw);
  will-change: transform;
}

.page-load-n-part {
  transform-box: view-box;
  transform-origin: 172px 210px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.page-load-n-part-a {
  --page-load-entry-y: -156px;
  --page-load-exit-y: -135vh;
  animation: page-load-part-motion var(--page-load-intro-duration) linear both;
}

.page-load-n-part-b {
  --page-load-entry-y: 156px;
  --page-load-exit-y: 135vh;
  animation: page-load-part-motion var(--page-load-intro-duration) linear both;
}

.page-load-n-piece {
  fill: url("#page-load-gold-gradient");
  filter: url("#page-load-gold-crystal");
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.page-load-n-piece {
  animation: page-load-gold-presence var(--page-load-intro-duration) linear both;
  opacity: 0;
  shape-rendering: geometricPrecision;
  will-change: opacity;
}

@keyframes page-load-part-motion {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--page-load-entry-y), -2px) scale(0.99);
    animation-timing-function: cubic-bezier(0.2, 0.76, 0.22, 1);
  }

  10.4683% {
    opacity: 1;
  }

  46.832% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  54.6832%,
  83.4711% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0.15, 0.7, 0.85);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, var(--page-load-exit-y), 0) scale(1);
  }
}

@keyframes page-load-gold-presence {
  0% {
    opacity: 0;
  }

  10.4683% {
    opacity: 1;
  }

  46.832%,
  98.3471% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes page-load-n-lock-turn {
  0%,
  54.6832% {
    transform: translateZ(0) rotateZ(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  83.4711% {
    transform: translateZ(0) rotateZ(180deg) scale(1);
  }

  100% {
    transform: translateZ(0) rotateZ(180deg) scale(1);
  }
}

@keyframes page-load-backdrop {
  0%,
  80.854% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes page-load-ambient-edge {
  0%,
  18.3196% {
    opacity: 0;
    transform: scale(0.92);
  }

  46.832% {
    opacity: 0.58;
    transform: scale(1);
  }

  83.4711% {
    opacity: 0.38;
  }

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

@media (max-width: 768px) {
  .page-load-stage {
    height: 210px;
    width: min(260px, calc(100vw - 44px));
  }

  .page-load-n {
    width: min(148px, 42vw);
  }

  .page-load-n-part-a {
    --page-load-exit-y: calc(-135vh - 180px);
  }

  .page-load-n-part-b {
    --page-load-exit-y: calc(135vh + 180px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --page-load-intro-duration: 180ms;
    --page-load-content-delay: 0ms;
    --page-load-content-duration: 180ms;
  }

  .page-load-reveal {
    transition-duration: 20ms;
  }

  .page-load-reveal::before,
  .page-load-reveal::after,
  .page-load-n,
  .page-load-n-part,
  .page-load-n-piece {
    animation: none;
  }

  .page-load-reveal::before {
    opacity: 1;
  }

  .page-load-reveal::after {
    opacity: 0;
  }

  .page-load-n,
  .page-load-n-part {
    filter: none;
    opacity: 1;
    transform: none;
  }

  .page-load-n-piece {
    opacity: 1;
  }
}

.norvex-icon-fall-item {
  animation: iconFallFadeRotate var(--duration, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  display: block;
  height: calc(var(--size, 64px) * var(--ambient-scale, 1));
  position: absolute;
  top: 0;
  transform: translateX(var(--drift-start, 0px)) translateY(-20px) rotate(0deg);
  width: calc(var(--size, 64px) * var(--ambient-scale, 1));
  will-change: transform, opacity;
  z-index: 0;
}

.norvex-dashboard-icon {
  --ambient-scale: 1.42;
}

.norvex-icon-fall-item img {
  display: block;
  filter: none;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
  width: 100%;
}

.norvex-icon-fall-item img.is-ready {
  visibility: visible;
}

@keyframes iconFallFadeRotate {
  0% {
    opacity: 0;
    transform: translateX(var(--drift-start, 0px)) translateY(-20px) rotate(0deg);
  }

  15% {
    opacity: var(--icon-opacity, 0.34);
  }

  85% {
    opacity: var(--icon-opacity, 0.34);
  }

  100% {
    opacity: 0;
    transform: translateX(var(--drift-end, 0px)) translateY(var(--fall-distance, 100vh)) rotate(60deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .norvex-icon-fall-item {
    animation: none;
    transform: translate3d(-50%, var(--reduced-motion-y, 42vh), 0);
  }
}

@media (max-width: 768px) {
  .norvex-dashboard-icon {
    --ambient-scale: 0.72;
    --icon-opacity: 0.09 !important;
  }

  .norvex-dashboard-icon:nth-child(n+21) {
    display: none;
  }
}

@media (max-width: 480px) {
  .norvex-dashboard-icon:nth-child(n+19) {
    display: none;
  }
}