/* Анімація появи тексту з адмінки (10.10.2026). Елемент має data-anim="<пресет>" (ставить сервер, sitegen.ANIMS).
   Приховуємо текст ЛИШЕ коли anim.js увімкнув анімації (клас se-anim на <html> чи на прев'ю в адмінці):
   без JS, у старому браузері й для «зменшити рух» текст просто стоїть, як у верстці.
   .is-anim — елемент доїхав до екрана. Слова й літери — <span class="aw" style="--i:N"> (розбиває anim.js). */

.se-anim [data-anim]:not(.is-anim):not([data-anim="words"]):not([data-anim="letters"]):not([data-anim="marker"]) {
  opacity: 0;
}
.se-anim [data-anim] {
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.25,1), filter .8s ease, clip-path .8s ease;
}
.se-anim [data-anim="fade-up"]:not(.is-anim)     { transform: translate3d(0, 26px, 0); }
.se-anim [data-anim="slide-left"]:not(.is-anim)  { transform: translate3d(-44px, 0, 0); }
.se-anim [data-anim="slide-right"]:not(.is-anim) { transform: translate3d(44px, 0, 0); }
.se-anim [data-anim="zoom"]:not(.is-anim)        { transform: scale(.9); }
.se-anim [data-anim="blur"]:not(.is-anim)        { filter: blur(10px); transform: translate3d(0, 8px, 0); }
.se-anim [data-anim].is-anim                     { opacity: 1; transform: none; filter: none; }

/* По словах / по літерах: кожна частина зʼявляється з затримкою за номером */
.se-anim [data-anim="words"] .aw,
.se-anim [data-anim="letters"] .aw {
  display: inline-block; opacity: 0; transform: translate3d(0, .55em, 0);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.75,.25,1);
  transition-delay: calc(var(--i, 0) * var(--step, 55ms));
}
.se-anim [data-anim="letters"] { --step: 28ms; }
.se-anim [data-anim="letters"] .aw { transform: none; transition-duration: .18s; }
.se-anim [data-anim].is-anim .aw { opacity: 1; transform: none; }
/* пробіл між словами — не анімуємо, щоб перенос рядків лишався як у тексті */
.aw-sp { white-space: pre-wrap; }

/* Маркер: виділене {слово} (або весь текст) «замальовується» жовтим, як маркером */
.se-anim [data-anim="marker"] .mk {
  background-image: linear-gradient(transparent 58%, rgba(248,180,36,.55) 58%, rgba(248,180,36,.55) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size 1s cubic-bezier(.65,0,.35,1) .15s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.se-anim [data-anim="marker"].is-anim .mk { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  .se-anim [data-anim], .se-anim [data-anim] .aw { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .se-anim [data-anim="marker"] .mk { background-size: 100% 100%; transition: none; }
}