:root {
  --phco-loader-bg: #050507;
  --phco-loader-muted: #aeb5d0;
  --phco-loader-pink: #ff57c8;
  --phco-loader-purple: #a56bff;
  --phco-loader-blue: #708dff;
}

html.phco-booting,
html.phco-leaving {
  background: var(--phco-loader-bg);
}

html.phco-booting body,
html.phco-leaving body {
  overflow: hidden !important;
}

html.phco-booting body > :not(#phcoPageLoader),
html.phco-leaving body > :not(#phcoPageLoader) {
  visibility: hidden !important;
}

#phcoPageLoader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(165, 107, 255, .18), transparent 22rem),
    radial-gradient(circle at 46% 46%, rgba(255, 87, 200, .08), transparent 15rem),
    linear-gradient(145deg, #07070a, #030305 70%);
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility .2s ease;
}

#phcoPageLoader::before {
  content: "";
  position: absolute;
  width: min(68vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0 18%,
    rgba(255, 87, 200, .08) 28%,
    transparent 42% 58%,
    rgba(112, 141, 255, .08) 68%,
    transparent 82%
  );
  filter: blur(26px);
  animation: phco-ambient-spin 10s linear infinite;
  pointer-events: none;
}

.phco-loader-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 132px;
  grid-template-rows: 132px auto;
  justify-items: center;
  align-items: center;
  row-gap: 18px;
  color: #fff;
  text-align: center;
  perspective: 900px;
  isolation: isolate;
}

.phco-loader-content::before {
  content: "";
  grid-area: 1 / 1;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  background: radial-gradient(circle, rgba(198, 125, 255, .34), rgba(255, 87, 200, .12) 44%, transparent 72%);
  filter: blur(13px);
  animation: phco-glow-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

.phco-loader-content::after {
  content: "";
  position: absolute;
  top: 106px;
  width: 76px;
  height: 13px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  box-shadow: 0 0 22px rgba(165, 107, 255, .32);
  filter: blur(7px);
  animation: phco-floor-shadow 2.2s ease-in-out infinite;
  pointer-events: none;
}

.phco-loader-logo {
  grid-area: 1 / 1;
  z-index: 3;
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 23px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  filter:
    drop-shadow(0 12px 13px rgba(0, 0, 0, .48))
    drop-shadow(0 0 15px rgba(255, 87, 200, .28))
    drop-shadow(0 0 26px rgba(165, 107, 255, .38));
  animation: phco-logo-3d 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
}

.phco-loader-spinner {
  position: relative;
  grid-area: 1 / 1;
  z-index: 2;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-top-color: rgba(255, 87, 200, .82);
  border-right-color: rgba(165, 107, 255, .6);
  border-bottom-color: rgba(112, 141, 255, .28);
  border-radius: 50%;
  box-shadow:
    0 0 22px rgba(165, 107, 255, .16),
    inset 0 0 18px rgba(255, 87, 200, .07);
  transform-style: preserve-3d;
  will-change: transform;
  animation: phco-orbit 1.65s linear infinite;
}

.phco-loader-spinner::before,
.phco-loader-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
}

.phco-loader-spinner::before {
  left: -4px;
  background: #ff8bd7;
  box-shadow: 0 0 8px #ff57c8, 0 0 18px rgba(255, 87, 200, .9);
}

.phco-loader-spinner::after {
  right: -4px;
  background: #91a6ff;
  box-shadow: 0 0 8px #708dff, 0 0 18px rgba(112, 141, 255, .9);
}

.phco-loader-text {
  grid-area: 2 / 1;
  margin: 0;
  color: var(--phco-loader-muted);
  font: 700 .88rem/1.4 Inter, Arial, sans-serif;
  letter-spacing: .035em;
  animation: phco-text-pulse 1.7s ease-in-out infinite;
}

html.phco-ready #phcoPageLoader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes phco-logo-3d {
  0%, 100% {
    transform: translateY(4px) rotateX(8deg) rotateY(-15deg) rotateZ(-1deg) scale(1);
    filter:
      drop-shadow(0 10px 12px rgba(0, 0, 0, .5))
      drop-shadow(0 0 14px rgba(255, 87, 200, .24))
      drop-shadow(0 0 24px rgba(165, 107, 255, .34));
  }
  50% {
    transform: translateY(-8px) rotateX(-7deg) rotateY(15deg) rotateZ(1deg) scale(1.045);
    filter:
      drop-shadow(0 18px 17px rgba(0, 0, 0, .38))
      drop-shadow(0 0 19px rgba(255, 87, 200, .4))
      drop-shadow(0 0 34px rgba(165, 107, 255, .55));
  }
}

@keyframes phco-orbit {
  from { transform: rotateX(67deg) rotateZ(0deg); }
  to { transform: rotateX(67deg) rotateZ(360deg); }
}

@keyframes phco-glow-pulse {
  0%, 100% { opacity: .65; transform: scale(.9) translateY(4px); }
  50% { opacity: 1; transform: scale(1.12) translateY(-4px); }
}

@keyframes phco-floor-shadow {
  0%, 100% { opacity: .72; transform: scaleX(1); }
  50% { opacity: .38; transform: scaleX(.7); }
}

@keyframes phco-text-pulse {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}

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

@media (max-width: 520px) {
  .phco-loader-content {
    grid-template-columns: 116px;
    grid-template-rows: 116px auto;
  }

  .phco-loader-logo {
    width: 74px;
    height: 74px;
    border-radius: 20px;
  }

  .phco-loader-spinner {
    width: 106px;
    height: 106px;
  }

  .phco-loader-content::after {
    top: 94px;
    width: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #phcoPageLoader {
    transition: none;
  }

  #phcoPageLoader::before,
  .phco-loader-logo,
  .phco-loader-spinner,
  .phco-loader-content::before,
  .phco-loader-content::after,
  .phco-loader-text {
    animation: none;
  }

  .phco-loader-logo {
    transform: none;
  }

  .phco-loader-spinner {
    transform: rotateX(67deg);
  }
}