/* Opening screen: shown once when the website is first opened in a browser tab. */
:root {
  --hgx-loader-bg: #05050a;
  --hgx-loader-glass: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  --hgx-loader-edge: rgba(255,255,255,.18);
  --hgx-loader-shine: rgba(255,255,255,.14);
  --hgx-loader-cyan: #3fb6ff;
  --hgx-loader-blue: #6a5cff;
  --hgx-loader-magenta: #ff2d7a;
  --hgx-loader-progress: linear-gradient(90deg, var(--hgx-loader-cyan), var(--hgx-loader-blue), var(--hgx-loader-magenta));
}
#hgx-page-loader { display: none; }

/* Everything on the site stays hidden until the opening has finished. */
.hgx-opening:not(.hgx-revealing) body > :not(#hgx-page-loader):not(:has(#hgx-page-loader)),
.hgx-opening:not(.hgx-revealing) .hub-page,
.hgx-opening:not(.hgx-revealing) .hub-backdrop {
  visibility: hidden !important;
  pointer-events: none;
  animation: hgx-content-failsafe 0s 6.5s forwards;
}
.hgx-opening body { overflow: hidden; }

.hgx-opening #hgx-page-loader {
  position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center;
  padding: 24px; overflow: hidden; opacity: 1;
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(63,182,255,.22), transparent 70%),
    radial-gradient(55% 50% at 85% 80%, rgba(255,45,122,.22), transparent 70%),
    radial-gradient(50% 45% at 70% 15%, rgba(106,92,255,.18), transparent 70%),
    var(--hgx-loader-bg);
  transition: opacity .6s ease, visibility .6s ease;
  animation: hgx-loader-failsafe 0s 6.5s forwards;
}
.hgx-loader-brand {
  position: relative; width: min(440px, 100%); padding: 22px 22px 26px;
  border-radius: 28px; background: var(--hgx-loader-glass);
  border: 1px solid var(--hgx-loader-edge);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 var(--hgx-loader-shine), inset 0 0 40px rgba(255,255,255,.025);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  overflow: hidden;
}
.hgx-loader-brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.10) 48%, transparent 66%);
  transform: translateX(-120%);
}
.hgx-loader-mark {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  border-radius: 20px; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 99%);
          mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 99%);
}
.hgx-loader-status { display: flex; justify-content: center; gap: 7px; margin: 14px 0 18px; }
.hgx-loader-status span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.hgx-loader-track { height: 3px; margin: 0 10px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.10); }
.hgx-loader-track span { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--hgx-loader-progress); transform: scaleX(0); transform-origin: left; }

.is-running .hgx-loader-brand { animation: hgx-panel-in .7s cubic-bezier(.22,.61,.36,1) both; }
.is-running .hgx-loader-brand::before { animation: hgx-sheen 2s ease-in-out .4s 1 forwards; }
.is-running .hgx-loader-track span { animation: hgx-progress 1.9s cubic-bezier(.2,.7,.3,1) forwards; }
.is-running .hgx-loader-status span { animation: hgx-dot 1s ease-in-out infinite alternate; }
.is-running .hgx-loader-status span:nth-child(2) { animation-delay: .18s; }
.is-running .hgx-loader-status span:nth-child(3) { animation-delay: .36s; }

.hgx-opening #hgx-page-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.hgx-opening #hgx-page-loader.is-leaving .hgx-loader-brand { transform: scale(.97); transition: transform .6s ease; }

@keyframes hgx-panel-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hgx-progress { to { transform: scaleX(1); } }
@keyframes hgx-dot { to { opacity: .25; } }
@keyframes hgx-sheen { to { transform: translateX(120%); } }
@keyframes hgx-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes hgx-content-failsafe { to { visibility: visible; pointer-events: auto; } }
@media (max-width: 480px) { .hgx-loader-brand { padding: 16px 16px 22px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .hgx-opening #hgx-page-loader { transition-duration: .08s; }
  .is-running .hgx-loader-brand, .is-running .hgx-loader-status span, .is-running .hgx-loader-brand::before { animation: none; }
  .is-running .hgx-loader-track span { animation: none; transform: scaleX(1); }
}