/* Башня-цистерна заполняется жидкостью с волнистой поверхностью (SVG-маска в index.html).
   Тайминги: заполнение 0.4–2.7s, растворение 3.0–3.7s (--intro = 3.1s). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  animation: preloader-out .7s ease-in-out 3s forwards;
}

.preloader__inner { width: min(86vw, 760px, 88vh * 1.8); animation: inner-out .7s ease-in-out 3s forwards; }
.preloader__svg { display: block; width: 100%; height: auto; overflow: visible; }

.preloader__ghost { opacity: .14; filter: grayscale(1) brightness(.6); }

.liquid { transform: translateY(840px); animation: rise 2.3s cubic-bezier(.45, 0, .25, 1) .4s forwards; }
.wave   { animation: slosh 1.7s linear infinite; }

@keyframes rise  { to { transform: translateY(-40px); } }
@keyframes slosh { to { transform: translateX(-720px); } }

/* счётчик процентов, синхронный с заполнением */
@property --pct { syntax: "<integer>"; initial-value: 0; inherits: false; }
.preloader__pct {
  margin-top: 1rem;
  text-align: center;
  color: var(--muted);
  font: 400 1rem/1 var(--font-main);
  letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
  counter-reset: pct var(--pct);
  animation: pct 2.3s cubic-bezier(.45, 0, .25, 1) .4s forwards;
}
.preloader__pct::before { content: counter(pct) "%"; }
@keyframes pct { to { --pct: 100; } }

@keyframes inner-out     { to { transform: scale(1.04); } }
@keyframes preloader-out { to { opacity: 0; visibility: hidden; } }