body.site-loader-active { overflow: hidden; }

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--theme-text);
  background: var(--theme-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.site-loader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader__background,
.site-loader__overlay,
.site-loader__brand { position: absolute; inset: 0; pointer-events: none; }

.site-loader__background {
  inset: -40px;
  background: url("../images/me.png") center / cover no-repeat;
  filter: blur(10px);
  transform: scale(1.06);
  opacity: 0.25;
  z-index: -3;
}

.site-loader__overlay {
  background: radial-gradient(circle at center, var(--theme-surface-strong), var(--theme-bg-soft));
  z-index: -2;
}

.site-loader__brand {
  inset: auto auto auto -45px;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  height: auto;
  color: color-mix(in srgb, var(--theme-muted) 18%, transparent);
  font-size: clamp(100px, 16vw, 250px);
  font-weight: 900;
  letter-spacing: -12px;
  filter: blur(2px);
  white-space: nowrap;
  z-index: -1;
}

.site-loader__panel {
  position: relative;
  width: min(880px, 75vw);
  min-height: 320px;
  margin-top: 45px;
  padding: 100px 50px 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--theme-surface-strong);
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  box-shadow: var(--theme-shadow), inset 0 1px var(--theme-surface-strong);
  backdrop-filter: blur(12px);
}

.site-loader__logo-wrap {
  position: absolute;
  top: -90px;
  left: 50%;
  width: 145px;
  height: 145px;
  padding: 6px;
  background: var(--theme-surface-strong);
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  box-shadow: 0 0 35px var(--theme-border), var(--theme-shadow);
  animation: siteLoaderLogoFloat 3s ease-in-out infinite;
  transform: translateX(-50%);
}

.site-loader__logo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

@keyframes siteLoaderLogoFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.site-loader__title {
  margin-bottom: 25px;
  color: var(--theme-muted-strong);
  font-size: 31px;
  font-weight: 300;
  letter-spacing: 12px;
  text-transform: uppercase;
  animation: siteLoaderTextPulse 1.8s ease-in-out infinite;
}

@keyframes siteLoaderTextPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.site-loader__progress-container { width: 100%; max-width: 780px; }
.site-loader__track { position: relative; width: 100%; height: 27px; overflow: hidden; border: 2px solid var(--theme-border); border-radius: 8px; background: var(--theme-surface-muted); }
.site-loader__bar { position: relative; width: 0%; height: 100%; border-radius: 5px; background: var(--theme-gradient); box-shadow: 0 0 14px var(--theme-glow); transition: width .2s ease; }
.site-loader__bar::after { content: ""; position: absolute; top: 0; left: -100px; width: 100px; height: 100%; background: linear-gradient(90deg, transparent, var(--theme-surface-strong), transparent); animation: siteLoaderShine 2s linear infinite; }
@keyframes siteLoaderShine { from { left: -100px; } to { left: 110%; } }
.site-loader__percentage { margin-top: 17px; color: var(--theme-muted); text-align: center; font-size: 19px; font-weight: 300; letter-spacing: 5px; }
.site-loader__status, .site-loader__quote { position: fixed; left: 50%; transform: translateX(-50%); white-space: nowrap; text-transform: uppercase; }
.site-loader__status { bottom: 40px; color: var(--theme-muted-strong); font-size: 10px; letter-spacing: 2px; }
.site-loader__status::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--theme-muted); animation: siteLoaderBlink 1s infinite; }
@keyframes siteLoaderBlink { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
.site-loader__quote { bottom: 76px; color: var(--theme-muted); font-size: 11px; letter-spacing: 5px; }

@media (max-width: 700px) {
  .site-loader__panel { width: 88vw; min-height: 260px; padding: 80px 25px 45px; }
  .site-loader__logo-wrap { width: 115px; height: 115px; top: -72px; border-radius: 15px; }
  .site-loader__title { font-size: 20px; letter-spacing: 7px; }
  .site-loader__track { height: 21px; }
  .site-loader__percentage { font-size: 15px; }
  .site-loader__quote { bottom: 65px; font-size: 8px; letter-spacing: 3px; }
  .site-loader__brand { font-size: 100px; }
}
@media (max-width: 420px) {
  .site-loader__panel { width: 92vw; }
  .site-loader__title { font-size: 17px; letter-spacing: 5px; }
  .site-loader__quote { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader, .site-loader__bar { transition-duration: .01ms; }
  .site-loader__logo-wrap, .site-loader__title, .site-loader__bar::after, .site-loader__status::after { animation: none; }
}