/* Home preloader — the character is revealed bottom-up while the 3D portrait downloads,
   then the overlay wipes upward into the hero. Driven by --progress (0–1) from site-preloader.js. */
html.preloader-active, html.preloader-active body { overflow: hidden; }

.site-preloader {
  --progress: 0;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto auto;
  gap: 18px;
  padding: clamp(24px, 6vh, 64px) 16px clamp(28px, 7vh, 72px);
  background:
    radial-gradient(ellipse at 62% 100%, #16432a 0%, transparent 58%),
    radial-gradient(ellipse at 24% 4%, #281237 0%, transparent 58%),
    #0c0c0c;
  color: #fff;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  clip-path: inset(0 0 0 0);
}
.site-preloader__glow {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 38, 236, .32) 0%, rgba(102, 212, 135, .12) 45%, transparent 70%);
  filter: blur(30px);
  opacity: calc(.35 + var(--progress) * .65);
  pointer-events: none;
}
.site-preloader__figure {
  position: relative;
  align-self: end;
  width: min(54vw, 340px);
  aspect-ratio: 739 / 1161;
  max-height: 58vh;
  margin: 0;
}
.site-preloader__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
}
/* Unrevealed portion: a faint glass silhouette so the shape reads from the first frame. */
.site-preloader__ghost {
  filter: grayscale(1) brightness(.55) contrast(.9);
  opacity: .18;
}
.site-preloader__fill {
  clip-path: inset(calc((1 - var(--progress)) * 100%) 0 0 0);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}
.site-preloader__scan {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: calc(var(--progress) * 100%);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #66d487 20%, #9b5cff 80%, transparent);
  box-shadow: 0 0 18px 3px rgba(102, 212, 135, .45);
  opacity: calc(1 - var(--progress) * var(--progress));
  transform: translateY(50%);
}
.site-preloader__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  width: min(86vw, 340px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b6b6bd;
}
.site-preloader__count { color: #66d487; font-variant-numeric: tabular-nums; }
.site-preloader__bar {
  width: min(86vw, 340px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.site-preloader__bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--progress));
  background: linear-gradient(90deg, #6026ec, #66d487);
}

/* Exit: wipe the overlay upward, continuing the bottom-up direction of the reveal. */
.site-preloader.is-leaving { animation: site-preloader-wipe .9s cubic-bezier(.76, 0, .24, 1) forwards; pointer-events: none; }
.site-preloader.is-leaving .site-preloader__figure { animation: site-preloader-lift .9s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes site-preloader-wipe { to { clip-path: inset(0 0 100% 0); } }
@keyframes site-preloader-lift { to { transform: translateY(-14vh) scale(.92); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .site-preloader__scan { display: none; }
  .site-preloader.is-leaving { animation: site-preloader-fade .25s ease forwards; }
  .site-preloader.is-leaving .site-preloader__figure { animation: none; }
  @keyframes site-preloader-fade { to { opacity: 0; } }
}