html { scroll-behavior: smooth; }

/* Стартовые скрытые состояния включаем только при работающем JS.
   Без скриптов заголовки и контент видны сразу, анимация просто
   не проигрывается - прогрессивное улучшение. */
@media (scripting: enabled) {
  /* Появление по словам: элементы с data-word-rise */
  .word {
    opacity: 0;
    transition: opacity 0.75s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
  }

  /* Fade-in для контента */
  .fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.75s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
                transform 0.75s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
  }

  /* Blur-in для H1/H2: символы появляются из размытия */
  .blur-char {
    display: inline;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.8s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
                filter  0.8s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
  }
}

.word.is-visible { opacity: 1; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
.blur-char.is-visible { opacity: 1; filter: blur(0); }

/* Секционные правила вида «.title span» не должны стилизовать служебные
   обёртки анимации — сбрасываем декоративные свойства. animations.css
   грузится после секционных файлов, равная специфичность — каскад выигрывает. */
h1 .blur-char,
h2 .blur-char {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}

@media (prefers-reduced-motion: reduce) {
  .word,
  .fade-in,
  .blur-char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}