/* site-fx.css — анимированные подложки галереи страницы методички (пакеты S26 и S27: ось движения x, y или xy); разметку и параметры даёт public/js/site-bgfx.js.
   Слой в несколько раз больше окна, повёрнут и каждый период сдвигается ровно на одну плитку узора: движение без шва.
   prefers-reduced-motion не учитывается, как и у остальных анимаций сайта (решение Степана). */
.spp-fx { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.spp-fx-l { position: absolute; left: -50%; top: -50%; width: calc(200% + var(--tw)); height: calc(200% + var(--th)); background-repeat: repeat; background-size: var(--tw) var(--th); transform: rotate(var(--rot)); will-change: transform; animation: spp-fx-x var(--fx-d, 10s) linear infinite; animation-play-state: var(--fx-run, running); }
.spp-fx-xy { animation-name: spp-fx-xy; }
.spp-fx-y { animation-name: spp-fx-y; }
@keyframes spp-fx-x { from { transform: rotate(var(--rot)) translateX(0); } to { transform: rotate(var(--rot)) translateX(calc(var(--tw) * -1)); } }
@keyframes spp-fx-xy { from { transform: rotate(var(--rot)) translate(0, 0); } to { transform: rotate(var(--rot)) translate(calc(var(--tw) * -1), calc(var(--th) * -1)); } }
@keyframes spp-fx-y { from { transform: rotate(var(--rot)) translate(0, 0); } to { transform: rotate(var(--rot)) translate(0, calc(var(--th) * -1)); } }