/* Фоны конструктора: слой .cx-fx за содержимым сайта (весь сайт) или внутри первого экрана. Только CSS: цвет, яркость,
   размер, скорость и угол - переменные --fx-c/--fx-c2/--fx-c3, --fx-a, --fx-s, --fx-t, --fx-ang. Анимации двигают только
   transform и opacity; при «уменьшить движение» в системе фон стоит. */
.cx-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:var(--fx-a,.3);color:var(--fx-c,#888);--fx-s:48px;--fx-t:24s;--fx-ang:45deg}
.cx-fx[data-scope="hero"]{position:absolute;z-index:0}
.cx-fx[data-fade="1"]{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 92%)}
.cx-fx::before,.cx-fx::after{content:"";position:absolute;inset:0}
.cx-fx.big::before{inset:calc(var(--fx-s) * -3)}
.cx-tile .cx-fx{position:absolute;z-index:0}

/* ---------- узоры ---------- */
.cx-fx[data-fx="stripes"]::before,.cx-fx[data-fx="stripes-move"]::before{background:repeating-linear-gradient(var(--fx-ang),currentColor 0 calc(var(--fx-s) * .32),transparent calc(var(--fx-s) * .32) var(--fx-s))}
.cx-fx[data-fx="pinstripe"]::before,.cx-fx[data-fx="pinstripe-move"]::before{background:repeating-linear-gradient(var(--fx-ang),currentColor 0 1px,transparent 1px calc(var(--fx-s) * .5))}
.cx-fx[data-fx="ruled"]::before{background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px var(--fx-s))}
.cx-fx[data-fx="checks"]::before,.cx-fx[data-fx="grid-drift"]::before{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:var(--fx-s) var(--fx-s)}
.cx-fx[data-fx="dots"]::before,.cx-fx[data-fx="dots-drift"]::before{background-image:radial-gradient(currentColor 1.5px,transparent 1.9px);background-size:calc(var(--fx-s) * .5) calc(var(--fx-s) * .5)}
.cx-fx[data-fx="diamonds"]::before{background:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px var(--fx-s)),repeating-linear-gradient(-45deg,currentColor 0 1px,transparent 1px var(--fx-s))}
.cx-fx[data-fx="chevron"]::before{background:linear-gradient(135deg,currentColor 25%,transparent 25%) calc(var(--fx-s) / -2) 0,linear-gradient(225deg,currentColor 25%,transparent 25%) calc(var(--fx-s) / -2) 0,linear-gradient(315deg,currentColor 25%,transparent 25%),linear-gradient(45deg,currentColor 25%,transparent 25%);background-size:var(--fx-s) var(--fx-s);opacity:.55}
.cx-fx[data-fx="rings"]::before{background:repeating-radial-gradient(circle at 50% 0%,currentColor 0 1px,transparent 1px var(--fx-s))}
.cx-fx[data-fx="plaid"]::before{background:repeating-linear-gradient(0deg,currentColor 0 calc(var(--fx-s) * .18),transparent calc(var(--fx-s) * .18) var(--fx-s)),repeating-linear-gradient(90deg,currentColor 0 calc(var(--fx-s) * .18),transparent calc(var(--fx-s) * .18) var(--fx-s));opacity:.6}
.cx-fx[data-fx="waves"]::before,.cx-fx[data-fx="waves-move"]::before{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 Q20 4 40 20 T80 20' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/var(--fx-s) calc(var(--fx-s) / 2) repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 Q20 4 40 20 T80 20' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/var(--fx-s) calc(var(--fx-s) / 2) repeat}
.cx-fx[data-fx="hexes"]::before{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v31L28 62 2 47V16zM28 62v35M0 97' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/var(--fx-s) calc(var(--fx-s) * 1.73) repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v31L28 62 2 47V16zM28 62v35M0 97' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/var(--fx-s) calc(var(--fx-s) * 1.73) repeat}
.cx-fx[data-fx="topo"]::before{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M-10 30c40-24 70 10 120-8s80-26 140 6'/%3E%3Cpath d='M-10 62c50-20 80 14 130-4s70-20 130 8'/%3E%3Cpath d='M-10 96c40-18 90 16 130-2s80-24 130 6'/%3E%3Cpath d='M-10 128c50-22 80 12 130-6s70-18 130 10'/%3E%3Cellipse cx='176' cy='46' rx='22' ry='12'/%3E%3Cellipse cx='60' cy='112' rx='18' ry='9'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(var(--fx-s) * 5) calc(var(--fx-s) * 3.33) repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M-10 30c40-24 70 10 120-8s80-26 140 6'/%3E%3Cpath d='M-10 62c50-20 80 14 130-4s70-20 130 8'/%3E%3Cpath d='M-10 96c40-18 90 16 130-2s80-24 130 6'/%3E%3Cpath d='M-10 128c50-22 80 12 130-6s70-18 130 10'/%3E%3Cellipse cx='176' cy='46' rx='22' ry='12'/%3E%3Cellipse cx='60' cy='112' rx='18' ry='9'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(var(--fx-s) * 5) calc(var(--fx-s) * 3.33) repeat}
.cx-fx[data-fx="grain"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}

/* ---------- свет и градиенты ---------- */
.cx-fx[data-fx="glow-top"]::before,.cx-fx[data-fx="pulse"]::before{background:radial-gradient(60% 55% at 50% -5%,currentColor,transparent 72%)}
.cx-fx[data-fx="glow-corners"]::before{background:radial-gradient(45% 50% at 0% 0%,currentColor,transparent 70%),radial-gradient(45% 50% at 100% 100%,var(--fx-c2),transparent 70%)}
.cx-fx[data-fx="beam"]::before{background:conic-gradient(from 160deg at 50% -12%,transparent 0deg,currentColor 20deg,transparent 40deg);opacity:.8}
.cx-fx[data-fx="mesh"]::before{background:radial-gradient(40% 45% at 15% 20%,currentColor,transparent 70%),radial-gradient(38% 42% at 85% 30%,var(--fx-c2),transparent 70%),radial-gradient(45% 45% at 55% 95%,var(--fx-c3),transparent 70%)}
.cx-fx[data-fx="horizon"]::before{background:linear-gradient(0deg,currentColor 0%,transparent 45%)}
.cx-fx[data-fx="spot"]::before{background:radial-gradient(34% 40% at 72% 30%,currentColor,transparent 72%)}

/* ---------- движение ---------- */
.cx-fx[data-fx="stripes-move"]::before,.cx-fx[data-fx="pinstripe-move"]::before{inset:calc(var(--fx-s) * -3);animation:fxSlideX var(--fx-t) linear infinite;--fx-step:calc(var(--fx-s) / sin(var(--fx-ang)))}
.cx-fx[data-fx="pinstripe-move"]::before{--fx-step:calc(var(--fx-s) * .5 / sin(var(--fx-ang)))}
.cx-fx[data-fx="grid-drift"]::before{inset:calc(var(--fx-s) * -2);animation:fxSlideXY var(--fx-t) linear infinite;--fx-step:var(--fx-s)}
.cx-fx[data-fx="dots-drift"]::before{inset:calc(var(--fx-s) * -2);animation:fxSlideXY var(--fx-t) linear infinite;--fx-step:calc(var(--fx-s) * .5)}
.cx-fx[data-fx="waves-move"]::before{inset:0 calc(var(--fx-s) * -2) 0 calc(var(--fx-s) * -2);animation:fxSlideX var(--fx-t) linear infinite;--fx-step:var(--fx-s)}
.cx-fx[data-fx="rain"]::before{inset:calc(var(--fx-s) * -4) 0 0 0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='64'%3E%3Crect width='1.2' height='22' fill='%23000'/%3E%3Crect x='20' y='32' width='1.2' height='14' fill='%23000'/%3E%3C/svg%3E") 0 0/var(--fx-s) calc(var(--fx-s) * 1.6) repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='64'%3E%3Crect width='1.2' height='22' fill='%23000'/%3E%3Crect x='20' y='32' width='1.2' height='14' fill='%23000'/%3E%3C/svg%3E") 0 0/var(--fx-s) calc(var(--fx-s) * 1.6) repeat;animation:fxSlideY var(--fx-t) linear infinite;--fx-step:calc(var(--fx-s) * 1.6)}
.cx-fx[data-fx="aurora"]::before{inset:-20%;background:radial-gradient(35% 40% at 25% 30%,currentColor,transparent 70%),radial-gradient(30% 36% at 70% 60%,var(--fx-c2),transparent 70%);animation:fxDrift var(--fx-t) ease-in-out infinite alternate}
.cx-fx[data-fx="aurora"]::after{inset:-20%;background:radial-gradient(28% 32% at 60% 20%,var(--fx-c3),transparent 70%);animation:fxDrift2 calc(var(--fx-t) * 1.3) ease-in-out infinite alternate}
.cx-fx[data-fx="pulse"]::before{animation:fxPulse calc(var(--fx-t) / 3) ease-in-out infinite alternate;transform-origin:50% 0}
.cx-fx[data-fx="shimmer"]::before{inset:0 -100%;background:linear-gradient(105deg,transparent 42%,currentColor 50%,transparent 58%);animation:fxSweep var(--fx-t) ease-in-out infinite}
.cx-fx[data-fx="scan"]::before{inset:auto 0 auto 0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,currentColor 85%,transparent);animation:fxScan var(--fx-t) linear infinite}
.cx-fx[data-fx="rays"]::before{inset:-60% -30% 0;background:repeating-conic-gradient(from 0deg at 50% 0%,currentColor 0 3deg,transparent 3deg 16deg);-webkit-mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 75%);transform-origin:50% 0;animation:fxSway var(--fx-t) ease-in-out infinite alternate}
.cx-fx[data-fx="ripples"]::before,.cx-fx[data-fx="ripples"]::after{inset:-50%;background:repeating-radial-gradient(circle at 50% 40%,currentColor 0 1px,transparent 1px var(--fx-s));animation:fxRipple var(--fx-t) linear infinite}
.cx-fx[data-fx="ripples"]::after{animation-delay:calc(var(--fx-t) / -2)}
.cx-fx[data-fx="stars"]::before,.cx-fx[data-fx="stars"]::after{background-image:radial-gradient(currentColor 1px,transparent 1.5px),radial-gradient(var(--fx-c2) 1.2px,transparent 1.7px);background-size:calc(var(--fx-s) * 2.3) calc(var(--fx-s) * 1.9),calc(var(--fx-s) * 3.1) calc(var(--fx-s) * 2.7);background-position:0 0,calc(var(--fx-s) * 1.1) calc(var(--fx-s) * .7);animation:fxTwinkle calc(var(--fx-t) / 4) ease-in-out infinite alternate}
.cx-fx[data-fx="stars"]::after{background-position:calc(var(--fx-s) * .6) calc(var(--fx-s) * 1.3),calc(var(--fx-s) * 2) calc(var(--fx-s) * .2);animation-delay:calc(var(--fx-t) / -8)}
.cx-fx[data-fx="orbit"]::before{inset:auto;left:50%;top:40%;width:calc(var(--fx-s) * 14);height:calc(var(--fx-s) * 14);margin:calc(var(--fx-s) * -7) 0 0 calc(var(--fx-s) * -7);border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,currentColor 92%,transparent);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:fxSpin var(--fx-t) linear infinite}

/* движущиеся слои - на отдельном слое композитора */
.cx-fx:is([data-fx$="-move"],[data-fx$="-drift"],[data-fx="rain"],[data-fx="aurora"],[data-fx="pulse"],[data-fx="shimmer"],[data-fx="scan"],[data-fx="rays"],[data-fx="ripples"],[data-fx="orbit"])::before{will-change:transform}
@keyframes fxSlideX{to{transform:translate3d(var(--fx-step),0,0)}}
@keyframes fxSlideY{to{transform:translate3d(0,var(--fx-step),0)}}
@keyframes fxSlideXY{to{transform:translate3d(var(--fx-step),var(--fx-step),0)}}
@keyframes fxDrift{to{transform:translate3d(8%,6%,0) scale(1.12)}}
@keyframes fxDrift2{to{transform:translate3d(-10%,8%,0) scale(.9)}}
@keyframes fxPulse{from{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.15)}}
@keyframes fxSweep{0%{transform:translate3d(-35%,0,0)}60%,100%{transform:translate3d(35%,0,0)}}
@keyframes fxScan{to{transform:translate3d(0,450%,0)}}
@keyframes fxSway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes fxRipple{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
@keyframes fxTwinkle{from{opacity:.25}to{opacity:1}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cx-fx::before,.cx-fx::after{animation:none!important}}
.cx-fx[data-still="1"]::before,.cx-fx[data-still="1"]::after{animation-play-state:paused!important}

/* ---------- живые финансы: содержимое слоя строит fxgen.js (строки выписки, уведомления, цифры, свечи, монеты) ---------- */
.cx-fx .fx-col{position:absolute;top:0;width:calc(100% / var(--cols, 4) - 1.5%);overflow:hidden;display:grid;gap:calc(var(--fx-s) * .18);font:500 calc(var(--fx-s) * .26) var(--mono, ui-monospace, monospace);white-space:nowrap;animation:fxUp var(--fx-t) linear infinite;will-change:transform}
.cx-fx .fx-col:nth-child(even){animation-duration:calc(var(--fx-t) * 1.35)}
.cx-fx .fx-col span{display:flex;justify-content:space-between;gap:1em;overflow:hidden;padding:.35em .8em;border-radius:.5em;background:color-mix(in srgb,currentColor 8%,transparent)}
.cx-fx .fx-col span i{font-style:normal;color:var(--fx-c2)}.cx-fx .fx-col span b{font-weight:600}
.cx-fx .fx-lane{position:absolute;left:0;display:flex;gap:2.4em;white-space:nowrap;font:500 calc(var(--fx-s) * .28) var(--mono, ui-monospace, monospace);animation:fxLeft var(--fx-t) linear infinite;will-change:transform}
.cx-fx .fx-lane:nth-child(even){animation-direction:reverse;animation-duration:calc(var(--fx-t) * 1.25)}
.cx-fx .fx-lane span i{font-style:normal;color:var(--fx-c2);margin-right:.6em}
.cx-fx .fx-ping{position:absolute;display:flex;align-items:center;gap:.7em;padding:.7em 1em;border-radius:1em;font:500 calc(var(--fx-s) * .28) var(--sans, system-ui);background:color-mix(in srgb,currentColor 14%,transparent);border:1px solid color-mix(in srgb,currentColor 28%,transparent);opacity:0;animation:fxPing var(--fx-t) ease-in-out infinite}
.cx-fx .fx-ping i{font-style:normal;width:1.8em;height:1.8em;border-radius:.6em;display:grid;place-items:center;background:var(--fx-c2);color:#111}
.cx-fx .fx-drop{position:absolute;top:0;font:600 calc(var(--fx-s) * .3) var(--mono, ui-monospace, monospace);writing-mode:vertical-rl;letter-spacing:.3em;animation:fxDown var(--fx-t) linear infinite;will-change:transform}
.cx-fx .fx-candles{position:absolute;left:0;bottom:12%;height:42%;width:200%;display:flex;animation:fxLeftHalf var(--fx-t) linear infinite;will-change:transform}
.cx-fx .fx-candles svg{width:50%;height:100%}
.cx-fx .fx-coin{position:absolute;bottom:-10%;width:calc(var(--fx-s) * .9);height:calc(var(--fx-s) * .9);border-radius:50%;display:grid;place-items:center;font:800 calc(var(--fx-s) * .42) var(--sans, system-ui);color:var(--bg,#111);background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),currentColor;animation:fxRise var(--fx-t) ease-in infinite;will-change:transform}
.cx-fx[data-fx="gradient-flow"]::before{inset:0 -200% 0 0;background:linear-gradient(100deg,currentColor,var(--fx-c2),var(--fx-c3),currentColor,var(--fx-c2),var(--fx-c3),currentColor);animation:fxLeftThird var(--fx-t) linear infinite;will-change:transform}
.cx-fx[data-hue="1"]{animation:fxHue calc(var(--fx-t) * 2) linear infinite}
@keyframes fxUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes fxDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@keyframes fxLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes fxLeftHalf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes fxLeftThird{from{transform:translate3d(0,0,0)}to{transform:translate3d(-66.666%,0,0)}}
@keyframes fxPing{0%,8%{opacity:0;transform:translateY(14px) scale(.96)}14%,46%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes fxRise{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:.9}100%{transform:translate3d(0,-120vh,0) rotate(360deg);opacity:0}}
@keyframes fxHue{to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cx-fx *{animation:none!important}.cx-fx .fx-ping{opacity:1}}