/* fx/titles.css - заголовки (fx/titles.js подключает сам). Заход 7: перо (надпись-картинка .t-title, «пишется» маской слева направо)
   только у четырёх акцентов - девиз первого экрана (motto), цитата (pismo) и подпись (podpis) в «Письме основательницы»,
   «Начнём с разговора» над формой (razgovor); остальные заголовки - живым шрифтом (.h-rev) со спокойным проявлением: лёгкий подъём
   и проявление, у строк первого экрана - по очереди (--d). Пока модуль не поставил html.t-ready - виден обычный текст, без анимации. */
.t-title { position: relative; }
.t-ready .t-title .t-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.t-title .t-glyph { display: none; }
.t-ready .t-title .t-glyph { display: block; width: 100%; max-width: var(--t-max, 100%); }
.t-glyph img { display: block; width: 100%; height: auto; }

/* перо: надпись проявляется слева направо (маска-градиент 250 % ширины едет из положения 100 % в 0 %, край ~12 % ширины) */
.t-ready .t-glyph {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
/* переход задан только у состояния «написано»: иначе первое применение стилей (после загрузки файла) анимировалось бы как стирание */
.t-ready .t-title.is-written .t-glyph {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: -webkit-mask-position 1.5s linear, mask-position 1.5s linear;
}
.t-ready .hero .t-title.is-written .t-glyph { transition-duration: 1.6s; }
.t-ready .pismo__name.is-written .t-glyph { transition-duration: 1.2s; }
.t-ready .zapis__title.is-written .t-glyph { transition-duration: 2.7s; }   /* заход 12: было 1,5 с - «слишком быстро» */

/* живые заголовки: спокойное проявление (опора - .t-ready, чтобы без модуля всё было видно сразу) */
.t-ready .h-rev { opacity: 0; transform: translateY(10px); }
.t-ready .h-rev.is-written {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease, ease) var(--d, 0s), transform 1s var(--ease, ease) var(--d, 0s);
}
/* первый экран при открытии страницы (fx/titles.js, класс is-quick): переход по меню не ждёт долгого проявления */
.t-ready .h-rev.is-quick.is-written { transition-duration: .55s; }
.t-ready .hero__title .h-line { display: block; }

/* размеры надписей (из _tmp_titles/titles.json): пропорции - чтобы место было до загрузки */
.t-title[data-t="motto"] .t-glyph { aspect-ratio: 1000 / 164; }
.t-title[data-t="pismo"] .t-glyph { aspect-ratio: 1200 / 380; }
.t-title[data-t="podpis"] .t-glyph { aspect-ratio: 760 / 151; }
.t-title[data-t="razgovor"] .t-glyph { aspect-ratio: 1440 / 257; }