/* Multi-language Greeting Preloader */
:root {
  --pre-bg: #f2f1ed;
  --pre-ink: #111111;
  --pre-muted: #8a8985;
  --pre-zoom: #555555;
}
:root[data-theme="dark"],
html[data-theme="dark"] {
  --pre-bg: #0a0a0a;
  --pre-ink: #f5f5f2;
  --pre-muted: #8a8985;
  --pre-zoom: #b5b5b2;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--pre-bg);
  color: var(--pre-ink);
  display: grid;
  place-items: center;
  will-change: transform;
  transition: background-color .3s ease, color .3s ease;
}

.preloader .word {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif !important;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity .13s ease, filter .13s ease, transform .13s ease;
  will-change: transform, opacity, filter;
  user-select: none;
  pointer-events: none;
}

.preloader .word.in  { opacity: 1; filter: blur(0); transform: translateY(0); }
.preloader .word.out { opacity: 0; filter: blur(6px); transform: translateY(-10px); }

.preloader .word[lang="hi"] { font-family: "Noto Sans Devanagari", "Inter Tight", sans-serif !important; }
.preloader .word[lang="ja"] { font-family: "Noto Sans JP", "Inter Tight", sans-serif !important; font-weight: 500; letter-spacing: 0; }
.preloader .word[lang="ar"] { font-family: "Noto Sans Arabic", "Inter Tight", sans-serif !important; letter-spacing: 0; }
.preloader .word[lang="ur"] { font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", sans-serif !important; letter-spacing: 0; line-height: 1.6; }
.preloader .word[lang="ko"] { font-family: "Noto Sans KR", "Inter Tight", sans-serif !important; font-weight: 500; letter-spacing: -0.02em; }

/* final word: zooms past the viewport */
.preloader .word.zoom {
  color: var(--pre-zoom);
  opacity: 1;
  filter: blur(0);
  transition: transform .75s cubic-bezier(.76, 0, .24, 1), color .75s ease;
  transform: scale(7.5);
}

.preloader .counter {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(16px, 3vw, 40px);
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--pre-ink);
  transition: opacity .3s ease;
  user-select: none;
  pointer-events: none;
}

.preloader .counter.hide {
  opacity: 0;
}

.preloader.exit {
  transform: translateY(-100%);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);
  pointer-events: none;
}

body.preloader-active {
  overflow: hidden !important;
}

body.loaded {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  .preloader .word,
  .preloader .word.zoom,
  .preloader.exit {
    transition-duration: .01s;
  }
  .preloader .word.zoom {
    transform: none;
  }
}