/*!
 * Reveal Animations Pack
 * Появление элементов по CSS-классу + блик по кнопке.
 * Триггер — класс .is-visible (его вешает reveal-animations.js).
 * Работает и одиночно, и стаггером внутри контейнера.
 * ------------------------------------------------------------------
 * Классы:
 *   .reveal .reveal--zoom       — появление с микро-зумом
 *   .reveal .reveal--zoom-blur  — микро-зум + расфокус (из блюра)
 *   .reveal .reveal--left   — появление с микросдвигом влево
 *   .reveal .reveal--right  — появление с микросдвигом вправо
 *   .reveal .reveal--down   — появление с микросдвигом вниз
 *   .reveal .reveal--up     — появление с микросдвигом вверх
 *   .shine .shine--in       — блик проходит при появлении
 *   .shine .shine--hover    — блик проходит по наведению
 *   .shine .shine--loop     — блик проходит по кругу
 * ================================================================== */

/* Настраиваемые параметры — можно переопределить глобально,
   на контейнере или на конкретном элементе. */
:root {
  --reveal-duration: 0.7s;                          /* длительность появления       */
  --reveal-distance: 20px;                          /* дистанция микросдвига         */
  --reveal-scale-from: 0.92;                        /* начальный масштаб для зума    */
  --reveal-blur: 12px;                              /* стартовое размытие для зум+блюр */
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);     /* плавное замедление            */
  --reveal-delay: 0s;                               /* задержка (для стаггера)       */
  --reveal-line-duration: 0.6s;                     /* появление одной строки текста  */

  --shine-duration: 0.9s;                           /* скорость прохода блика        */
  --shine-loop-duration: 2.6s;                      /* цикл блика в режиме loop       */
  --shine-color: rgba(255, 255, 255, 0.55);         /* цвет блика                    */
  --shine-angle: 120deg;                            /* наклон полосы блика           */
}

/* Прогрессивное улучшение: прячем элементы только когда JS активен.
   Класс .reveal-js вешается на <html> скриптом. Если JS не сработал —
   контент остаётся видимым. */
.reveal-js .reveal {
  opacity: 0;
  animation-duration: var(--reveal-duration);
  animation-timing-function: var(--reveal-ease);
  animation-delay: var(--reveal-delay);
  animation-fill-mode: both;      /* держим кадр 0% до старта и 100% после */
  animation-play-state: paused;   /* не проигрывать, пока не появится      */
  will-change: transform, opacity;
}

/* Триггер: JS добавляет .is-visible, когда элемент попадает в зону видимости */
.reveal-js .reveal.is-visible {
  animation-play-state: running;
}

/* --- Варианты появления (выбираются классом) --------------------- */
.reveal--zoom  { animation-name: reveal-zoom; }
.reveal--zoom-blur { animation-name: reveal-zoom-blur; will-change: transform, opacity, filter; }
.reveal--left  { animation-name: reveal-left; }
.reveal--right { animation-name: reveal-right; }
.reveal--down  { animation-name: reveal-down; }
.reveal--up    { animation-name: reveal-up; }

/* Микро-зум: чуть увеличивается из уменьшенного состояния */
@keyframes reveal-zoom {
  from { opacity: 0; transform: scale(var(--reveal-scale-from)); }
  to   { opacity: 1; transform: scale(1); }
}

/* Микро-зум + расфокус: увеличивается и наводится на резкость из блюра */
@keyframes reveal-zoom-blur {
  from { opacity: 0; transform: scale(var(--reveal-scale-from)); filter: blur(var(--reveal-blur)); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Сдвиг ВЛЕВО: заходит справа и уезжает влево на место */
@keyframes reveal-left {
  from { opacity: 0; transform: translateX(var(--reveal-distance)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Сдвиг ВПРАВО: заходит слева и уезжает вправо на место */
@keyframes reveal-right {
  from { opacity: 0; transform: translateX(calc(var(--reveal-distance) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Сдвиг ВНИЗ: заходит сверху и опускается на место */
@keyframes reveal-down {
  from { opacity: 0; transform: translateY(calc(var(--reveal-distance) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Сдвиг ВВЕРХ: заходит снизу и поднимается на место */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Построчное появление текста (для <p> и др.) ----------------- */
/* Прячем блок до разбивки на строки — layout остаётся, мигания нет. */
.reveal-js .reveal-lines { visibility: hidden; }
.reveal-js .reveal-lines.reveal-lines--ready { visibility: visible; }

/* Каждая строка проявляется эффектом zoom-blur (как .reveal--zoom-blur). */
.reveal-lines .reveal-line { display: block; }
.reveal-js .reveal-lines .reveal-line__inner {
  display: block;
  transform-origin: left center;
  opacity: 0;
  animation: reveal-zoom-blur var(--reveal-line-duration) var(--reveal-ease) both;
  animation-play-state: paused;
  animation-delay: var(--line-delay, 0s);
  will-change: transform, opacity, filter;
}
.reveal-js .reveal-lines.is-visible .reveal-line__inner {
  animation-play-state: running;
}
/* Показать мгновенно, без повторной анимации (например, после ресайза). */
.reveal-lines.reveal-lines--shown .reveal-line__inner {
  animation: none !important;
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- Блик (светлая диагональная полоса) по кнопке ---------------- */
.shine {
  position: relative;
  overflow: hidden;               /* обрезаем полосу по форме кнопки */
}

.shine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;           /* не мешает кликам */
  background: linear-gradient(
    var(--shine-angle),
    transparent 40%,
    var(--shine-color) 50%,
    transparent 60%
  );
  transform: translateX(-120%);   /* полоса спрятана слева */
}

/* блик при появлении (нужен JS — класс .is-visible) */
.reveal-js .shine--in.is-visible::before {
  animation: shine-sweep var(--shine-duration) ease-out var(--reveal-delay) both;
}

/* блик по наведению (чистый CSS) */
.shine--hover:hover::before {
  animation: shine-sweep var(--shine-duration) ease-out;
}

/* блик по кругу (чистый CSS) */
.shine--loop::before {
  animation: shine-loop var(--shine-loop-duration) ease-in-out infinite;
}

@keyframes shine-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* петля с паузой: проходит за первые 60%, затем ждёт */
@keyframes shine-loop {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* --- Доступность: уважаем «уменьшить движение» ------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-js .reveal {
    opacity: 1 !important;
    animation: none !important;
  }
  .shine--in.is-visible::before,
  .shine--hover:hover::before,
  .shine--loop::before {
    animation: none !important;
  }
  .reveal-js .reveal-lines { visibility: visible !important; }
  .reveal-js .reveal-lines .reveal-line__inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}