/* If we’re arriving via internal nav, show immediately (no flash) */
.nav-loading #preloadOverlay {
  opacity: 1;
  pointer-events: all;
}



/* =========================
   Page preload overlay
   ========================= */

.preload-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0c0c0c;

  display: grid;
  place-items: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease; /* cinematic out */
}

.preload-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 220ms ease; /* a bit faster in */
}

.preload-stack {
  display: grid;
  gap: 18px;
  justify-items: center;
}

/* Wrapper spins */
.preload-cursorWrap {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  animation: preloadSpin 5.5s linear infinite; /* clockwise */
  will-change: transform;
}

@keyframes preloadSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Image distorts (does NOT rotate) */
.preload-cursor {
  width: 64px;
  height: 64px;
  display: block;
  opacity: 0.9;

  animation: preloadWobble 1.4s ease-in-out infinite;
  transform-origin: 50% 50%;

  filter: blur(0.45px) contrast(1.05);
  will-change: transform, filter;
}

@keyframes preloadWobble {
  0%   { transform: scaleX(1.00) scaleY(1.00) skewX(0deg) skewY(0deg); }
  25%  { transform: scaleX(1.08) scaleY(0.94) skewX(7deg)  skewY(-4deg); }
  50%  { transform: scaleX(0.93) scaleY(1.07) skewX(-8deg) skewY(5deg); }
  75%  { transform: scaleX(1.09) scaleY(0.93) skewX(6deg)  skewY(-6deg); }
  100% { transform: scaleX(1.00) scaleY(1.00) skewX(0deg) skewY(0deg); }
}


/* Thin bar track */
.preload-bar {
  width: min(280px, 70vw);
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
}

/* Fill that represents progress */
.preload-barFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;

  /* Your neon chaos gradient */
  background-image: radial-gradient(
    circle at 30% 30%,
    #ece5c4,
    #4999d4,
    #f9a336,
    #efebdb
  );
  background-size: 200% 200%;
  background-position: 0% 0%;

  animation: hmeNeonChaos 8s ease-in-out infinite alternate;
  will-change: width, background-position, background-size;

  /* makes the leading edge feel “alive” */
  box-shadow: 0 0 10px rgba(255,255,255,0.08);
}

/* Your existing keyframes */
@keyframes hmeNeonChaos {
  0%   { background-position: 0% 0%;    background-size: 200% 200%; }
  25%  { background-position: 80% 30%;  background-size: 400% 400%; }
  50%  { background-position: 20% 90%;  background-size: 300% 300%; }
  75%  { background-position: 100% 10%; background-size: 600% 600%; }
  100% { background-position: 0% 0%;    background-size: 200% 200%; }
}