/* Библиотека анимаций Velvio — стили. Отдаётся с нашего сервера (/p/_sc/anim/<мажор>/anim.css — канал, см. release.mjs),
 * в сайт подключается ссылкой в index.html — её добавляет редактор при первой анимации. Список эффектов — manifest.json.
 * Эффект задаётся атрибутом на элементе: data-anim="<id>" (in-* — при появлении, loop-* — всё время, hover-* — при наведении).
 * Отметки ставит anim.js атрибутами (data-anim-on — «показался», data-anim-demo — показ наведения без мыши): React их не трогает.
 * Все эффекты работают только под классом sc-anim на <html>: его ставит anim.js, если у посетителя не включено «уменьшить движение»
 * (без JS или с этой настройкой всё видно сразу и ничего не двигается). Превью (каталог, редактор) включают показ принудительно: __scAnim.force().
 * Тайминги — спокойные: появления ~1 с с небольшим смещением, постоянные эффекты — длинный цикл и малая амплитуда. */
[data-anim] { --anim-t: 1s; --anim-delay: 0s; --anim-ease: cubic-bezier(.22, 1, .36, 1); }
[data-anim-speed="fast"] { --anim-t: .6s; }
[data-anim-speed="slow"] { --anim-t: 1.5s; }
@property --sc-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- появление ---- */
/* исключения — в :where(), чтобы не поднимать вес правила: иначе оно перебьёт animation-name отдельных эффектов */
.sc-anim [data-anim^="in-"]:where(:not([data-anim="in-stagger"], [data-anim-split], [data-anim-on])) { opacity: 0; }
.sc-anim [data-anim^="in-"]:where([data-anim-on]:not([data-anim-split])) { animation: var(--anim-t) var(--anim-ease) var(--anim-delay) both; }
.sc-anim [data-anim="in-fade"][data-anim-on] { animation-name: sc-in-fade; }
.sc-anim [data-anim="in-up"][data-anim-on] { animation-name: sc-in-up; }
.sc-anim [data-anim="in-down"][data-anim-on] { animation-name: sc-in-down; }
.sc-anim [data-anim="in-left"][data-anim-on] { animation-name: sc-in-left; }
.sc-anim [data-anim="in-right"][data-anim-on] { animation-name: sc-in-right; }
.sc-anim [data-anim="in-zoom"][data-anim-on] { animation-name: sc-in-zoom; }
.sc-anim [data-anim="in-pop"][data-anim-on] { animation-name: sc-in-pop; animation-timing-function: cubic-bezier(.34, 1.35, .64, 1); }
.sc-anim [data-anim="in-blur"][data-anim-on] { animation-name: sc-in-blur; }
.sc-anim [data-anim="in-blur-rise"][data-anim-on] { animation-name: sc-in-blur-rise; --anim-t: 1.2s; }
.sc-anim [data-anim="in-flip"][data-anim-on] { animation-name: sc-in-flip; transform-origin: 50% 100%; }
.sc-anim [data-anim="in-mask"][data-anim-on] { animation-name: sc-in-mask; --anim-t: 1.2s; }
.sc-anim [data-anim="in-tilt"][data-anim-on] { animation-name: sc-in-tilt; }
.sc-anim [data-anim="in-spread"][data-anim-on] { animation-name: sc-in-spread; --anim-t: 1.3s; }
.sc-anim [data-anim="in-type"][data-anim-on] { animation: sc-in-type 1.8s steps(18, end) var(--anim-delay) both; white-space: nowrap; overflow: hidden; }
/* блок: содержимое по очереди (до 10 элементов, дальше — вместе) */
.sc-anim [data-anim="in-stagger"]:not([data-anim-on]) > * { opacity: 0; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > * { animation: sc-in-up var(--anim-t) var(--anim-ease) both; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(2) { animation-delay: .12s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(3) { animation-delay: .24s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(4) { animation-delay: .36s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(5) { animation-delay: .48s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(6) { animation-delay: .6s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(7) { animation-delay: .72s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(8) { animation-delay: .84s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(9) { animation-delay: .96s; }
.sc-anim [data-anim="in-stagger"][data-anim-on] > :nth-child(n+10) { animation-delay: 1.05s; }

/* ---- буквы: копия текста поверх элемента, разбитая на слова (.sc-w) и буквы (.sc-ch); оригинал прозрачный ---- */
.sc-split { position: absolute; inset: 0; pointer-events: none; -webkit-text-fill-color: currentColor; }
.sc-split .sc-w { display: inline-block; white-space: nowrap; }
.sc-split .sc-ch { display: inline-block; white-space: pre; }
.sc-anim [data-anim="loop-wave"] .sc-ch { animation: sc-wave 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); }
.sc-anim [data-anim="in-letters"]:not([data-anim-on]) .sc-ch { opacity: 0; }
.sc-anim [data-anim="in-letters"][data-anim-on] .sc-ch { animation: sc-letters 1.1s var(--anim-ease) both; animation-delay: var(--d); }
.sc-anim [data-anim="in-scramble"]:not([data-anim-on]) .sc-split { opacity: 0; }

/* ---- всё время ---- */
.sc-anim [data-anim="loop-float"] { animation: sc-loop-float 6s ease-in-out infinite; }
.sc-anim [data-anim="loop-pulse"] { animation: sc-loop-pulse 3.2s ease-in-out infinite; }
.sc-anim [data-anim="loop-glow"] { animation: sc-loop-glow 3.6s ease-in-out infinite; }
.sc-anim [data-anim="loop-sway"] { animation: sc-loop-sway 6s ease-in-out infinite; transform-origin: 50% 0; }
.sc-anim [data-anim="loop-spin"] { animation: sc-loop-spin 24s linear infinite; }
.sc-anim [data-anim="loop-kenburns"] { animation: sc-loop-kenburns 18s ease-in-out infinite alternate; }
.sc-anim [data-anim="loop-shine"] { position: relative; overflow: hidden; isolation: isolate; }
.sc-anim [data-anim="loop-shine"]::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); animation: sc-loop-shine 5s ease-in-out infinite 1.5s;
}
.sc-anim [data-anim="loop-gradient"] {
  background: linear-gradient(90deg, currentColor 0%, #FF6A4D 25%, #5A56F0 50%, currentColor 75%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: sc-loop-gradient 8s linear infinite;
}
/* луч и радуга по рамке (Border Beam): кольцо-маска поверх элемента, по нему бежит конический градиент; позицию элементу ставит anim.js */
.sc-anim :is([data-anim="loop-border-beam"], [data-anim="loop-border-rainbow"])::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  -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);
  animation: sc-turn 5s linear infinite;
}
.sc-anim [data-anim="loop-border-beam"]::after { background: conic-gradient(from var(--sc-a), transparent 0 72%, rgba(90, 86, 240, .9) 84%, #FF6A4D 92%, rgba(255, 255, 255, .9) 96%, transparent 100%); }
.sc-anim [data-anim="loop-border-rainbow"]::after { padding: 2px; background: conic-gradient(from var(--sc-a), #FF6A4D, #FFC04D, #4DD6A5, #4DA3FF, #8B5CF6, #FF6A4D); animation-duration: 6s; }
/* сияние кнопки: переливающийся размытый ореол под ней */
.sc-anim [data-anim="loop-glow-cta"] { isolation: isolate; }
.sc-anim [data-anim="loop-glow-cta"]::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #5A56F0, #FF6A4D, #FFB199, #8B5CF6, #5A56F0) 0 0 / 300% 100%;
  filter: blur(14px); opacity: .65; animation: sc-glow-cta 8s linear infinite;
}

/* ---- при наведении (data-anim-demo — показ без мыши: превью, планшет) ---- */
.sc-anim [data-anim^="hover-"] { transition: transform .5s var(--anim-ease), box-shadow .5s var(--anim-ease), filter .5s var(--anim-ease), background-size .5s var(--anim-ease); }
.sc-anim [data-anim="hover-lift"]:is(:hover, [data-anim-demo]) { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); }
.sc-anim [data-anim="hover-grow"]:is(:hover, [data-anim-demo]) { transform: scale(1.04); }
.sc-anim [data-anim="hover-glow"]:is(:hover, [data-anim-demo]) { box-shadow: 0 0 0 4px rgba(90, 86, 240, .18), 0 12px 32px -10px rgba(90, 86, 240, .55); }
.sc-anim [data-anim="hover-tilt"]:is(:hover, [data-anim-demo]) { transform: perspective(700px) rotateX(4deg) rotateY(-6deg) translateY(-3px); }
.sc-anim [data-anim="hover-bright"]:is(:hover, [data-anim-demo]) { filter: brightness(1.1) saturate(1.12); }
.sc-anim [data-anim="hover-zoom"]:is(:hover, [data-anim-demo]) { transform: scale(1.05); }
.sc-anim [data-anim="hover-shift"]:is(:hover, [data-anim-demo]) { transform: translateX(4px); }
.sc-anim [data-anim="hover-underline"] { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; }
.sc-anim [data-anim="hover-underline"]:is(:hover, [data-anim-demo]) { background-size: 100% 2px; }
/* лупа и глитч рисуются слоями поверх картинки (anim.js) */
.sc-lens { position: fixed; z-index: 2147483000; width: 132px; height: 132px; border-radius: 50%; pointer-events: none; background-repeat: no-repeat;
  border: 3px solid #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .08); transform: translate(-50%, -50%); }
.sc-glitch { position: fixed; z-index: 2147483000; pointer-events: none; overflow: hidden; background: #000; }
.sc-glitch i { position: absolute; inset: 0; background-repeat: no-repeat; background-blend-mode: multiply; mix-blend-mode: screen; }

@keyframes sc-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sc-in-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes sc-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes sc-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sc-in-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sc-in-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sc-in-blur { from { opacity: 0; filter: blur(10px); transform: scale(1.02); } to { opacity: 1; filter: none; transform: none; } }
@keyframes sc-in-blur-rise { from { opacity: 0; filter: blur(12px); transform: translateY(28px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes sc-in-flip { from { opacity: 0; transform: perspective(800px) rotateX(25deg); } to { opacity: 1; transform: none; } }
@keyframes sc-in-mask { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes sc-in-tilt { from { opacity: 0; transform: translateY(16px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes sc-in-spread { from { opacity: 0; letter-spacing: .3em; filter: blur(3px); } to { opacity: 1; filter: none; } }
@keyframes sc-in-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sc-wave { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-.2em); } }
@keyframes sc-letters { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sc-loop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sc-loop-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes sc-loop-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(90, 86, 240, 0); } 50% { box-shadow: 0 0 0 7px rgba(90, 86, 240, .18); } }
@keyframes sc-loop-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes sc-loop-spin { to { transform: rotate(360deg); } }
@keyframes sc-loop-kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-2%, -2%); } }
@keyframes sc-loop-shine { 0%, 65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes sc-loop-gradient { to { background-position: -300% 0; } }
@keyframes sc-turn { to { --sc-a: 360deg; } }
@keyframes sc-glow-cta { to { background-position: -300% 0; } }