/* ==========================================================================
   preloader.css — the first three seconds.
   A single hairline draws across the mark, then the panel splits away.
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--c-night);
}

.preloader__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  transition: opacity 400ms var(--e-out), transform 500ms var(--e-out);
}

.preloader__mark {
  width: 56px;
  opacity: 0;
  transform: scale(0.8) rotate(-25deg);
  animation: mark-in 900ms var(--e-spring) 120ms forwards;
}

@keyframes mark-in {
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.preloader__word {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--t-night-faint);
  overflow: hidden;
  animation: sweep-in 700ms var(--e-out) 500ms both;
}

.preloader__bar {
  width: 132px;
  height: 1px;
  background: rgba(243, 236, 221, 0.16);
  overflow: hidden;
}

.preloader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-kunyit);
  transition: width 260ms linear;
}

/* Exit: the panel lifts and the page underneath is already composed. */
.preloader.is-done {
  transform: translate3d(0, -100%, 0);
  transition: transform 1000ms var(--e-out) 180ms;
}

.preloader.is-done .preloader__inner {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
}

/* While loading, nothing behind the panel can be scrolled to. */
body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  body.is-loading { overflow: auto; }
}