/* fx-tpl.css — стили к fx-tpl.js (эффекты шаблонов Lumen, v1, 08.10.2026).
   Все классы с префиксом fxt-, появляются только из JS (без JS файл ничего не меняет).
   Анимируются только transform / opacity (+ свойство rotate у наклона карточек).
   Цвета — через переменные; задаются в window.FXT (accent, mark, flipBg, flipFg, beamColor, peelUnder),
   по умолчанию — нейтральные. Идеи: Magic UI NumberTicker/BorderBeam (MIT), Aceternity Flip Words / 3D Card,
   React Bits ScrollReveal / StickerPeel (MIT + Commons Clause) — переписано с нуля на ванильный CSS/JS. */
:root{--fxt-accent:#e8785a;--fxt-mark:rgba(232,120,90,.28);--fxt-flip-bg:var(--fxt-accent);--fxt-flip-fg:#fff;
  --fxt-beam:#fff;--fxt-peel-under:#fffaf3}
.fxt-rel{position:relative}
.fxt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* 1. Слова по прокрутке: прозрачность каждого слова задаёт JS; маркер — полоса под словом */
.fxt-w{transition:opacity .12s linear}
.fxt-mw{position:relative;display:inline-block;z-index:0}
.fxt-mk{position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.36em;z-index:-1;border-radius:.12em;
  background:var(--fxt-mark);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* 2. Сменяющиеся слова: все слова в одной ячейке grid → ширина = самое длинное, строка не прыгает */
.fxt-fliprow{margin-top:.9rem;font-family:var(--fxt-flip-font,inherit);font-size:var(--fxt-flip-size,1.25rem);line-height:1.2;max-width:100%}
.fxt-flip{display:inline-grid;max-width:100%;vertical-align:bottom;color:var(--fxt-flip-fg);background:var(--fxt-flip-bg);
  padding:.12em .45em .1em;border-radius:.4em;transform:rotate(-1.5deg)}
.fxt-flip__w{grid-area:1/1;display:flex;justify-content:center;overflow:hidden;white-space:nowrap;padding:.04em 0}
.fxt-flip__c{display:inline-block;white-space:pre;transform:translateY(110%);opacity:0;
  transition:transform .55s cubic-bezier(.2,.9,.25,1),opacity .3s linear;transition-delay:calc(var(--i) * 24ms)}
.fxt-flip__w.is-in .fxt-flip__c{transform:none;opacity:1}
.fxt-flip__w.is-out .fxt-flip__c{transform:translateY(-110%);opacity:0;transition-duration:.38s,.25s;
  transition-timing-function:cubic-bezier(.6,0,.8,.3),linear}

/* 3. Одометр: невидимая «призрачная» цифра даёт ширину и базовую линию, барабан — поверх */
.fxt-odo{white-space:nowrap}
.fxt-odo__d{position:relative;display:inline-block;line-height:1.2em;clip-path:inset(0 -.25em)}
.fxt-odo__g{visibility:hidden}
/* цифры барабана — в ::before (не попадают в innerText/копирование); 21 строка: 0–9, 0–9, 0 */
.fxt-odo__c{position:absolute;left:0;right:0;top:0;text-align:center;line-height:1.2em;
  transition:transform 1.4s cubic-bezier(.15,.85,.25,1)}
.fxt-odo__c::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0";white-space:pre;display:block}

/* 4. Луч по рамке: кольцо (маска) поверх кромки кнопки, внутри крутится conic-gradient */
.fxt-beam{position:absolute;inset:0;border-radius:inherit;padding:var(--fxt-beam-w,2px);overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fxt-beam b{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--fxt-beam) 86%,var(--fxt-beam) 92%,transparent 100%);
  transform:translate(-50%,-50%);animation:fxt-spin var(--fxt-beam-speed,3.6s) linear infinite}
.fxt-paused .fxt-beam b{animation-play-state:paused}
@keyframes fxt-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}

/* 5. Наклон карточек (только мышь): JS пишет свойство rotate, родителю — перспектива */
.fxt-persp{perspective:1100px}
.fxt-tilt{will-change:rotate}

/* 6. Наклейка: треугольник-«изнанка» в углу, половина цвета фона прячет угол наклейки */
.fxt-peel{position:absolute;right:0;bottom:0;width:var(--fxt-peel-size,16px);height:var(--fxt-peel-size,16px);pointer-events:none;
  border-radius:0 0 var(--fxt-peel-r,0) 0;
  background:linear-gradient(135deg,var(--fxt-peel-under) 0%,color-mix(in srgb,var(--fxt-peel-under) 78%,#000) 48%,var(--fxt-peel-bg,#fff) 50%);
  box-shadow:-1px -1px 3px rgba(0,0,0,.16);transform:scale(0);transform-origin:100% 100%;
  transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.fxt-peel-host.is-peeled .fxt-peel{transform:scale(.75)}
@media (hover:hover) and (pointer:fine){ .fxt-peel-host:hover .fxt-peel{transform:scale(1.15)} }

/* 7. FAQ на нативных <details>: ответ мягко появляется */
.fxt-faq[open]>:not(summary){animation:fxt-faq-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxt-faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .fxt-w{opacity:1!important}.fxt-mk{transform:none!important}
  .fxt-beam,.fxt-peel{display:none}
  .fxt-odo__c,.fxt-flip__c,.fxt-peel,.fxt-faq>*{transition:none!important;animation:none!important}
}