/*
 * Про-Тент · появление блоков при прокрутке.
 * Блоки прячутся, только когда скрипт поставил на <html> класс .reveal-ready:
 * без JS или при ошибке весь контент виден сразу.
 * Анимируются только transform и opacity, поэтому браузер всё считает на GPU.
 */
:root {
  --reveal-duration: 0.8s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 28px;
  --reveal-stitch-color: #f06422;
}

.reveal-ready [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    clip-path var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-ready [data-reveal="up"] { transform: translate3d(0, var(--reveal-distance), 0); }
.reveal-ready [data-reveal="down"] { transform: translate3d(0, calc(var(--reveal-distance) * -1), 0); }
.reveal-ready [data-reveal="left"] { transform: translate3d(calc(var(--reveal-distance) * -1.4), 0, 0); }
.reveal-ready [data-reveal="right"] { transform: translate3d(calc(var(--reveal-distance) * 1.4), 0, 0); }
.reveal-ready [data-reveal="scale"] { transform: scale(0.94); }
.reveal-ready [data-reveal="fade"] { transform: none; }

/* «Раскрой»: блок разворачивается сверху вниз, как отрез ткани с рулона */
.reveal-ready [data-reveal="unroll"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -8px, 0);
}

/* «Строчка»: под блоком прошивается пунктир, затем проявляется содержимое */
.reveal-ready [data-reveal="stitch"] {
  position: relative;
  transform: translate3d(0, 12px, 0);
}
[data-reveal="stitch"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--reveal-stitch-color) 0 13px, transparent 13px 22px);
  transform-origin: left center;
  pointer-events: none;
}
.reveal-ready [data-reveal="stitch"]::after {
  transform: scaleX(0);
  transition: transform 1.1s var(--reveal-ease) var(--reveal-delay, 0s);
}

/* Видимое состояние */
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
.reveal-ready [data-reveal="stitch"].is-revealed::after {
  transform: scaleX(1);
}
/* Строчка «тянет» содержимое за собой: текст проявляется чуть позже */
.reveal-ready [data-reveal="stitch"].is-revealed {
  transition-delay: calc(var(--reveal-delay, 0s) + 0.25s);
}

/* После анимации снимаем will-change, чтобы не держать слои в памяти */
.reveal-ready [data-reveal]:not(.is-revealed) { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal]::after {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}