/* ---------- прелоадер: колонки-шторки + счётчик-одометр ---------- */
/* фон — до запуска скрипта: шторки (.loader__cols i) строит JS, и без фона на первом кадре был виден первый экран */
.loader {
  position: fixed; inset: 0; z-index: 60; color: #ece6da; pointer-events: auto; background: var(--ink);
  --l-soft: rgba(236, 230, 218, .55); --l-rule: rgba(236, 230, 218, .18);
}
.loader.is-done { display: none; }
.loader__cols { position: absolute; inset: 0; display: flex; }
.loader__cols i { flex: 1; height: 100%; margin-right: -1px; background: var(--ink); will-change: transform; }
.loader__cols.acc i { background: var(--acc); }
.loader__in { position: absolute; inset: 0; padding: var(--pad); display: grid; grid-template-rows: auto 1fr auto auto; }
.l-top { display: flex; justify-content: space-between; align-items: start; }
.l-top .who { display: grid; gap: 4px; }
.l-top .who b { font-weight: 500; }
.l-top .who span, .l-tasks { color: var(--l-soft); }
.l-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: right; }
.l-tasks li { display: flex; gap: 10px; justify-content: flex-end; align-items: center; transition: color .4s; }
.l-tasks li::after { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .4s, border-color .4s; }
.l-tasks li.ok { color: #ece6da; }
.l-tasks li.ok::after { background: var(--acc); border-color: var(--acc); }
.l-bar { position: relative; height: 1px; background: var(--l-rule); margin-bottom: clamp(10px, 1.6vh, 18px); }
.l-bar i { position: absolute; inset: -.5px 0; background: #ece6da; transform: scaleX(0); transform-origin: 0 50%; }
.l-bot { display: flex; justify-content: space-between; align-items: end; }
.l-count { display: flex; align-items: flex-start; font: 600 clamp(7rem, min(25vw, 40vh), 26rem)/1 var(--font-display); font-stretch: 80%; letter-spacing: -.05em; margin-bottom: -.09em; }
.l-dg { height: .82em; overflow: hidden; width: .58em; text-align: center; }
.l-dg .st { display: block; will-change: transform; }
.l-dg .st span { display: block; height: .82em; line-height: .82em; }
.l-dg.dim { color: rgba(236, 230, 218, .14); transition: color .5s; }
.l-count em { font: italic 400 .32em/1 var(--font-serif); letter-spacing: 0; margin: .06em 0 0 .12em; color: var(--acc); }
.l-bot .cap { color: var(--l-soft); text-align: right; padding-bottom: 1.2vh; }
.l-bot .cap b { color: #ece6da; font-weight: 500; }
.l-bot .wrap { overflow: hidden; }
/* окно посередине: картинки сменяются клипом на каждом шаге счёта */
.l-peek { place-self: center; display: grid; gap: 10px; justify-items: center; }
.l-peek .win { position: relative; width: clamp(110px, 12vw, 190px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #2a2622; }
.l-peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); }

@media (max-width: 760px) {
  .l-bot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .l-bot .cap { text-align: left; }
  .l-count { font-size: 38vw; }
}