/* ==========================================================
   REZN® — preloader
   Dark curtain: the wordmark fills up with the real loading progress,
   counter 000 → 100, status lines; then the letters lift away and the
   curtain sweeps up with a straight edge, starting the hero intro.
   Driven by preloader.js.
   ========================================================== */
html.is-preloading, html.is-preloading body { overflow: hidden; }
/* hold the hero intro until the curtain lifts */
html.is-preloading .hero *, html.is-preloading .portrait { animation-play-state: paused !important; }

.pl {
  --pl-bg: #0e0e0f;
  --pl-ink: #f2f1ee;
  --pl-dim: rgba(242, 241, 238, .38);
  --pl-ease: cubic-bezier(.76, 0, .24, 1);
  position: fixed; inset: 0; z-index: 9999;
  color: var(--pl-ink);
  pointer-events: all;
}
.pl[hidden] { display: none; }

/* two layers: a soft grey one trails just behind the dark one on exit */
.pl__curtain, .pl__trail {
  position: absolute; inset: 0;
  will-change: transform;
}
.pl__trail { background: #d9d8d4; }
.pl__curtain { background: var(--pl-bg); }

.pl__inner {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 40px);
}

/* ---------- top line ---------- */
.pl__top, .pl__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pl__top {
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pl-dim);
}
.pl__top b { color: var(--pl-ink); font-weight: 500; }

/* ---------- wordmark ---------- */
.pl__mark {
  align-self: center; justify-self: center;
  position: relative;
  font-family: "Anton", "Impact", sans-serif; font-weight: 400;
  font-size: clamp(84px, 19vw, 360px); line-height: .9; letter-spacing: -.01em;
  user-select: none;
}
.pl__word { display: flex; }
.pl__ch { display: block; overflow: hidden; padding-top: .04em; }
.pl__ch > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--pl-ease);
  transition-delay: calc(var(--i) * 70ms);
}
.pl.is-in .pl__ch > span { transform: translateY(0); }
.pl.is-out .pl__ch > span { transform: translateY(-105%); transition-duration: .8s; transition-delay: calc(var(--i) * 45ms); }

/* outline copy below, solid copy on top revealed by the progress */
.pl__word--line { color: transparent; -webkit-text-stroke: 1px rgba(242, 241, 238, .42); }
/* the solid copy sits in a window that slides up with the progress (transforms only: no repaint per frame) */
.pl__fill {
  position: absolute; inset: 0; overflow: hidden;
  transform: translateY(calc((100 - var(--p, 0)) * 1%));
  will-change: transform;
}
.pl__word--fill {
  color: var(--pl-ink);
  transform: translateY(calc((var(--p, 0) - 100) * 1%));
  will-change: transform;
}
.pl__reg {
  position: absolute; top: .02em; right: -.42em;
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .1em; font-weight: 500;
  color: var(--pl-dim);
  opacity: 0; transition: opacity .6s .6s;
}
.pl.is-in .pl__reg { opacity: 1; }
.pl.is-out .pl__reg { opacity: 0; transition-delay: 0s; }

/* ---------- bottom line: status + counter ---------- */
.pl__status {
  position: relative; height: 1.7em; overflow: hidden;
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.7;
  color: var(--pl-dim); flex: 1; min-width: 0; align-self: flex-end; margin-bottom: .6em;
}
.pl__status span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  transition: transform .5s var(--pl-ease), opacity .5s;
}
.pl__status span::before { content: "› "; color: var(--pl-ink); }
.pl__status span.is-leaving { transform: translateY(-100%); opacity: 0; }
.pl__status span.is-coming { transform: translateY(100%); opacity: 0; }

.pl__count {
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: -.05em;
  font-size: clamp(56px, 9vw, 150px); line-height: .8;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: flex-start;
  overflow: hidden; padding-top: .06em;
}
.pl__count small { font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .16em; font-weight: 500; margin: .2em 0 0 .3em; color: var(--pl-dim); }
.pl__count span { display: block; transition: transform .8s var(--pl-ease); }
.pl.is-out .pl__count span, .pl.is-out .pl__count small { transform: translateY(-110%); }
.pl.is-out .pl__top, .pl.is-out .pl__status { opacity: 0; transition: opacity .4s; }

/* progress hairline */
.pl__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(242, 241, 238, .08);
}
.pl__bar i {
  display: block; height: 100%; background: var(--pl-ink);
  transform-origin: left; transform: scaleX(calc(var(--p, 0) / 100));
  transition: transform .25s linear;
}
.pl.is-out .pl__bar { opacity: 0; transition: opacity .3s; }

/* ---------- exit: curtain sweeps up ---------- */
.pl.is-lift .pl__curtain { transform: translateY(-101%); transition: transform 1.1s var(--pl-ease); }
.pl.is-lift .pl__trail { transform: translateY(-101%); transition: transform 1.1s var(--pl-ease) .12s; }
.pl.is-lift .pl__inner { opacity: 0; }
.pl.is-lift { pointer-events: none; }

@media (max-width: 820px) {
  .pl__top span:nth-child(2) { display: none; }
  .pl__mark { font-size: 27vw; }
  .pl__status { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::after { transition-duration: .01s !important; transition-delay: 0s !important; }
}