/* ЗОЛОТОЙ — сигнатурный слой: интро-занавес, кинетическая строка,
   призрачная нумерация секций, рисующиеся линии. Анти-шаблон, оптимизировано. */

/* ============================================================
   1 · Интро-занавес — счётчик, вензель, подъём шторы
   ============================================================ */
#zl-intro {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}
#zl-intro.done { transform: translateY(-101%); }

.zl-intro-word {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text);
  font-size: clamp(40px, 9vw, 132px);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  display: flex;
  line-height: 1;
}
.zl-intro-word span {
  display: inline-block;
  transform: translateY(112%);
  animation: zlIntroLetter 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.zl-intro-word i {            /* маска для подъёма буквы */
  display: inline-block;
  overflow: hidden;
  font-style: normal;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
@keyframes zlIntroLetter { to { transform: none; } }

.zl-intro-sub {
  position: absolute;
  top: calc(50% + clamp(46px, 7vw, 104px));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  white-space: nowrap;
  animation: zlIntroFade 0.9s ease 0.55s forwards;
}
@keyframes zlIntroFade { to { opacity: 1; } }

.zl-intro-count {
  position: absolute;
  bottom: 6vh; right: 6vw;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 7vw, 96px);
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  line-height: 1;
}
.zl-intro-count i { font-family: var(--mono); font-size: 0.2em; color: var(--text-muted); font-style: normal; }
.zl-intro-count .of { font-size: 0.34em; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.1em; }
.zl-intro-bar {
  position: absolute;
  left: 6vw; bottom: calc(6vh + 0.4em);
  width: 34vw; max-width: 420px; height: 1px;
  background: var(--line);
  overflow: hidden;
}
.zl-intro-bar i { display: block; height: 100%; width: 100%; background: var(--text); transform-origin: left; transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  #zl-intro { transition: none; }
  .zl-intro-word span { animation: none; transform: none; }
}

/* ============================================================
   2 · Кинетическая строка — благородный хайрлайн-тикер
   ============================================================ */
.zl-marquee {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: 15px 0;
  background: var(--bg);
  user-select: none;
}
.zl-marquee__track {
  display: inline-flex;
  flex: none;
  will-change: transform;
  animation: zlMarq 42s linear infinite;
}
.zl-marquee[data-fast="1"] .zl-marquee__track { animation-duration: 16s; }
.zl-marquee:hover .zl-marquee__track { animation-play-state: paused; }
.zl-marquee__item {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 0 30px;
}
.zl-marquee__item::after { content: "\25C6"; font-size: 6px; color: var(--gold); }
@keyframes zlMarq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .zl-marquee__track { animation: none; } }

/* ============================================================
   3 · Призрачная нумерация секций (редакторский водяной знак)
   ============================================================ */
section { position: relative; isolation: isolate; }
section > .container { position: relative; z-index: 1; }

.zl-ghost {
  position: absolute;
  top: clamp(-0.14em, -1vw, -0.05em);
  inset-inline-end: 3.5vw;
  z-index: -1;
  pointer-events: none;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 0.78;
  font-size: clamp(150px, 25vw, 400px);
  color: transparent;
  -webkit-text-stroke: 1px var(--line-soft);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.3s ease, transform 1.5s var(--ease-expo);
}
.zl-ghost.in { opacity: 1; transform: none; }

/* ============================================================
   4 · Рисующиеся линии заголовков секций
   ============================================================ */
.section-head { position: relative; border-top: none; }
.section-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.15s var(--ease-expo) 0.05s;
}
.section-head.in::before { transform: scaleX(1); }
html[dir="rtl"] .section-head::before { transform-origin: right; }
@media (prefers-reduced-motion: reduce) {
  .section-head::before { transform: scaleX(1); transition: none; }
}

/* ============================================================
   5 · Подписи кадров — мягкое проявление вслед за кадром
   ============================================================ */
.g-item .g-caption {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease-soft) 0.18s,
              transform 1s var(--ease-expo) 0.18s;
}
.g-item.in .g-caption { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .g-item .g-caption { opacity: 1; transform: none; }
}