/* ============================================================
   ВАРИАНТ 9 — прелоадер «Монограмма» (вместо «Счётчика»)
   Кольцо с ART, собирающиеся буквы; уход — шторка из центра:
   верхняя половина вверх, нижняя вниз
   ============================================================ */

.preloader--c { gap: 34px; background: transparent; }

/* Шторки-половинки */
.preloader--c .preloader__shutter {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--bg, #0a0a0a); z-index: 0;
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1) 0.45s;
  will-change: transform;
}
.preloader--c .preloader__shutter--top { top: 0; }
.preloader--c .preloader__shutter--bottom { bottom: 0; }
/* Градиентная кромка на линии разреза */

.preloader--c .preloader__ring-wrap,
.preloader--c .preloader__letters,
.preloader--c .preloader__pct { position: relative; z-index: 2; }
.preloader--c .preloader__ring-wrap {
  position: relative; width: 148px; height: 148px;
  display: flex; align-items: center; justify-content: center;
}
.preloader--c .preloader__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.preloader--c .preloader__ring circle {
  fill: none; stroke-width: 2;
}
.preloader--c .preloader__ring .ring-bg { stroke: rgba(255,255,255,0.10); }
.preloader--c .preloader__ring .ring-fg {
  stroke: url(#preGrad);
  stroke-linecap: round;
  stroke-dasharray: 452; /* 2πr, r=72 */
  stroke-dashoffset: 452;
}
.preloader--c .preloader__mono {
  font-size: 36px; font-weight: 900; letter-spacing: 0.06em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: scale(0.8);
  animation: monoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
@keyframes monoIn { to { opacity: 1; transform: scale(1); } }

.preloader--c .preloader__letters {
  display: flex; gap: 0.34em;
  font-size: 13px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.preloader--c .preloader__letters span {
  display: inline-block; opacity: 0; transform: translateY(16px) rotate(4deg);
  animation: preLetter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes preLetter { to { opacity: 1; transform: none; } }

.preloader--c .preloader__pct {
  font-size: 12px; letter-spacing: 0.3em; color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}

/* Уход: буквы разлетаются, кольцо тает, шторки расходятся из центра */
.preloader--c.preloader--exit .preloader__letters span {
  animation: preLetterOut 0.55s cubic-bezier(0.55, 0, 0.75, 0) forwards;
}
@keyframes preLetterOut { to { opacity: 0; transform: translateY(-26px); } }
.preloader--c.preloader--exit .preloader__letters span.dn {
  animation-name: preLetterOutDown;
}
@keyframes preLetterOutDown { to { opacity: 0; transform: translateY(26px); } }
.preloader--c.preloader--exit .preloader__ring-wrap,
.preloader--c.preloader--exit .preloader__pct {
  opacity: 0; transition: opacity 0.45s ease;
}
.preloader--c.preloader--exit .preloader__shutter--top { transform: translateY(-102%); }
.preloader--c.preloader--exit .preloader__shutter--bottom { transform: translateY(102%); }
.preloader--c { transition: opacity 0.3s ease 1.5s, visibility 0.3s ease 1.5s; }
.preloader--c.preloader--exit { opacity: 0; visibility: hidden; }