html:has(#projects) #preloader.huiling-preloader-running,
html:has(#projects) .huiling-preloader {
  background: transparent !important;
}

html:has(#projects) .huiling-preloader::before {
  --huiling-projects-aperture-start: clamp(47.56px, 3.772vw, 55.76px);
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: #000;
  transform: translateZ(0);
}

html:has(#projects) .huiling-preloader__percent {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html:has(#projects) .huiling-preloader__mark {
  z-index: 1;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate(-50%, -50%) scale(1);
  animation: none !important;
}

html:has(#projects)
  .huiling-preloader.is-morphing
  .huiling-preloader__mark {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate(-50%, -50%) scale(1);
  animation: none !important;
}

html:has(#projects)
  .huiling-preloader.is-anticipating
  .huiling-preloader__mark {
  animation: huiling-mark-anticipate 140ms cubic-bezier(0.55, 0, 1, 0.45)
    forwards !important;
}

html:has(#projects) .huiling-preloader.is-exiting {
  animation: none !important;
}

html:has(#projects) .huiling-preloader.is-exiting::before {
  -webkit-mask-image:
    linear-gradient(#fff 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M8 8h13v18h22V8h13v48H43V38H21v18H8V8Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% 100%, clamp(58px, 4.6vw, 68px);
  -webkit-mask-composite: xor;
  mask-image:
    linear-gradient(#fff 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M8 8h13v18h22V8h13v48H43V38H21v18H8V8Z'/%3E%3C/svg%3E");
  mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 100% 100%, clamp(58px, 4.6vw, 68px);
  mask-composite: exclude;
  animation: huiling-projects-preloader-aperture 720ms
    cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

html:has(#projects)
  .huiling-preloader.is-exiting
  .huiling-preloader__mark {
  opacity: 0;
  animation: none !important;
}

@keyframes huiling-projects-preloader-aperture {
  from {
    -webkit-mask-size: 100% 100%, var(--huiling-projects-aperture-start);
    mask-size: 100% 100%, var(--huiling-projects-aperture-start);
  }

  to {
    -webkit-mask-size: 100% 100%, 320vmax;
    mask-size: 100% 100%, 320vmax;
  }
}

@media (max-width: 812px) {
  html:has(#projects) .huiling-preloader.is-exiting::before {
    --huiling-projects-aperture-start: clamp(44.28px, 11.48vw, 50.84px);
    -webkit-mask-size: 100% 100%, clamp(54px, 14vw, 62px);
    mask-size: 100% 100%, clamp(54px, 14vw, 62px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(#projects)
    .huiling-preloader.is-anticipating
    .huiling-preloader__mark {
    animation-duration: 60ms !important;
  }

  html:has(#projects) .huiling-preloader.is-exiting::before {
    animation-duration: 280ms;
  }
}