/* CY_BORG — дополнительные анимации. Только transform/opacity, у каждой есть смысл (вход, присутствие, речь, прогресс).
Всё внутри prefers-reduced-motion: no-preference. Подключается на главной, на столе и на /dev. */
@media (prefers-reduced-motion: no-preference) {
/* ---------- ГЛАВНАЯ: полоса прогресса чтения (js/anim.js двигает scaleX) ---------- */
.scrollbar-fx { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
background: linear-gradient(90deg, var(--c, #18e6ff), var(--p, #ff3db4) 55%, var(--y, #ffe600)); box-shadow: 0 0 10px rgba(255, 61, 180, .7); will-change: transform; }
/* ---------- ГЛАВНАЯ: лестница появления текста героя (по 70 мс на элемент, один раз при загрузке) ---------- */
.hero .chapter { animation: fx-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.hero .lede { animation: fx-rise .55s cubic-bezier(.2, .8, .2, 1) .12s both; }
.hero .rule00 { animation: fx-rise .55s cubic-bezier(.2, .8, .2, 1) .22s both; }
.hero .hero-cta { animation: fx-rise .55s cubic-bezier(.2, .8, .2, 1) .32s both; }
.hero .hero-poster { animation: fx-poster .9s cubic-bezier(.2, .8, .2, 1) both, tv-glitch 8s steps(1) .9s infinite; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fx-poster { from { opacity: 0; transform: translateX(40px); } }
/* ---------- ГЛАВНАЯ: карточки и блоки въезжают по мере прокрутки (scroll-driven; где не поддерживается — просто видны) ---------- */
@supports (animation-timeline: view()) {
.ccard, .devcard .dev-links a { animation: fx-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
.ccard:nth-child(3n + 2) { animation-range: entry 6% entry 50%; }
.ccard:nth-child(3n) { animation-range: entry 12% entry 55%; }
@keyframes fx-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
}
/* ---------- ГЛАВНАЯ: кнопки героя — короткий «глитч-тык» при наведении (только у мыши) ---------- */
@media (hover: hover) {
.hero-cta .btn:hover { animation: fx-jig .28s steps(2) 1; }
@keyframes fx-jig { 0% { transform: translate(0); } 25% { transform: translate(-3px, 1px) skewX(-4deg); } 50% { transform: translate(3px, -1px) skewX(3deg); } 100% { transform: translate(0); } }
}
/* ---------- СТОЛ: «в сети» — расходящееся кольцо у точки присутствия ---------- */
.seat .dot.on::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #31ff7a; animation: fx-ring 2.4s ease-out infinite; pointer-events: none; }
@keyframes fx-ring { from { opacity: .85; transform: scale(.8); } to { opacity: 0; transform: scale(2.6); } }
/* ---------- СТОЛ: голосовая панель выезжает, говорящий «дышит» ---------- */
.tv-voice:not([hidden]) { animation: fx-drop .28s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 0; }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-10px) scaleY(.85); } }
.tv-voice .vc { transition: transform .15s ease-out, border-color .15s, box-shadow .15s; }
.tv-voice .vc.talk { animation: fx-talk .7s ease-in-out infinite alternate; }
.tv-voice .vc.talk i { animation: fx-dot .7s ease-in-out infinite alternate; }
@keyframes fx-talk { to { transform: translateY(-2px); } }
@keyframes fx-dot { from { transform: scale(1); } to { transform: scale(1.55); } }
/* ---------- СТОЛ: сообщения и броски в журнале влетают справа, чужие системные — тише ---------- */
.tv-log li { animation: fx-msg .32s cubic-bezier(.2, .8, .2, 1) both; }
.tv-log li.roll { animation-name: fx-roll; }
@keyframes fx-msg { from { opacity: 0; transform: translateX(16px); } }
@keyframes fx-roll { from { opacity: 0; transform: translateX(16px) scale(.96); filter: brightness(1.8); } }
/* ---------- /dev: карточки въезжают с разных сторон, ссылки подчёркиваются «лазером» ---------- */
.devpage .bc-slot:first-child { animation: fx-card-l .7s cubic-bezier(.2, .8, .2, 1) both; }
.devpage .bc-slot:last-child { animation: fx-card-r .7s cubic-bezier(.2, .8, .2, 1) .12s both; }
@keyframes fx-card-l { from { opacity: 0; transform: translateX(-60px) rotate(-3deg); } }
@keyframes fx-card-r { from { opacity: 0; transform: translateX(60px) rotate(3deg); } }
.devpage .dev-bar { animation: fx-drop .4s ease-out both; }
.devpage .dev-links { animation: fx-rise .5s cubic-bezier(.2, .8, .2, 1) .3s both; }
.devpage .dev-ttl::after { content: '▌'; margin-left: 6px; animation: fx-blink 1s steps(2) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }
.devcard .dev-links a { position: relative; }
.devcard .dev-links a:not(.dev-open) { border-bottom-color: transparent; }
.devcard .dev-links a:not(.dev-open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--pink); transform-origin: 0 50%; transform: scaleX(1); transition: transform .25s ease-out; }
@media (hover: hover) { .devcard .dev-links a:not(.dev-open):hover::after { transform: scaleX(0); transform-origin: 100% 50%; } }
/* ---------- ЖИВЫЕ ФОНЫ ПОЛОС (слои .bgfx вставляет js/anim.js; крутятся только полосы в поле зрения) ---------- */
.bgfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bgfx i { position: absolute; display: block; will-change: transform; }
.bgfx:not(.on) i { animation-play-state: paused; }
.b-sheet .bgfx { display: none; }
@keyframes fx-slide-x { to { transform: translateX(120px); } }
@keyframes fx-slide-y { to { transform: translateY(240px); } }
@keyframes fx-grid-y { to { transform: translateY(46px); } }
@keyframes fx-sweep { 0%, 30% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
@keyframes fx-beam { to { transform: translateY(1400px); } }
@keyframes fx-ecg { to { transform: translateX(300px); } }
/* розовые и жёлтые: ползущие диагональные полосы и блик, проходящий слева направо */
.b-pink .bgfx .a, .b-yellow .bgfx .a, .b-paper .bgfx .a { inset: 0 0 0 -120px; animation: fx-slide-x 8s linear infinite;
background: linear-gradient(45deg, var(--st) 25%, transparent 25% 50%, var(--st) 50% 75%, transparent 75%) 0 0 / 120px 120px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.b-pink .bgfx { --st: rgba(0, 0, 0, .09); --sw: rgba(255, 255, 255, .38); }
.b-yellow .bgfx { --st: rgba(0, 0, 0, .07); --sw: rgba(255, 255, 255, .45); }
.b-paper .bgfx { --st: rgba(122, 10, 0, .06); --sw: rgba(255, 60, 40, .12); }
.b-pink .bgfx .b, .b-yellow .bgfx .b, .b-paper .bgfx .b { top: 0; bottom: 0; left: -45%; width: 38%; animation: fx-sweep 9s ease-in-out infinite;
background: linear-gradient(90deg, transparent, var(--sw) 50%, transparent); }
.b-yellow .bgfx .a { animation-duration: 11s; animation-direction: reverse; }
/* чёрные и «чернильные»: падающие неоновые струи данных и луч-скан */
.b-black .bgfx .a, .b-ink .bgfx .a { inset: -240px 0 0 0; animation: fx-slide-y 6s linear infinite;
background: repeating-linear-gradient(90deg, transparent 0 56px, rgba(24, 230, 255, .4) 56px 58px, transparent 58px 131px), repeating-linear-gradient(90deg, transparent 0 97px, rgba(255, 61, 180, .4) 97px 99px, transparent 99px 173px);
-webkit-mask-image: repeating-linear-gradient(180deg, #000 0 36px, transparent 36px 120px); mask-image: repeating-linear-gradient(180deg, #000 0 36px, transparent 36px 120px); opacity: .55; }
.b-black .bgfx .b, .b-ink .bgfx .b, .b-blue .bgfx .b { left: 0; right: 0; top: -120px; height: 120px; animation: fx-beam 9s linear infinite;
background: linear-gradient(180deg, transparent, rgba(24, 230, 255, .1) 50%, rgba(255, 61, 180, .14) 52%, transparent); }
/* синяя: бегущая неоновая сетка */
.b-blue .bgfx .a { inset: -46px 0 0 0; animation: fx-grid-y 4s linear infinite;
background: repeating-linear-gradient(90deg, rgba(24, 230, 255, .16) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(24, 230, 255, .16) 0 1px, transparent 1px 46px);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
/* здоровье: бегущая кардиограмма */
#s-hp .bgfx .b { top: 42%; height: 120px; left: -300px; right: 0; width: auto; animation: fx-ecg 3.2s linear infinite; opacity: .55;
background: url("data:image/svg+xml;utf8,") repeat-x 0 0 / 300px 120px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
/* ================= ФОНЫ ПО МОТИВАМ РУЛБУКА (у каждой полосы своя идея) ================= */
.bgfx:not(.on)::before, .bgfx:not(.on)::after { animation-play-state: paused; }
.bgfx::before, .bgfx::after { content: ''; position: absolute; pointer-events: none; will-change: transform; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.04); } }
@keyframes fx-up200 { to { transform: translateY(-200px); } }
@keyframes fx-up310 { to { transform: translateY(-310px); } }
@keyframes fx-float { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12%, 85% { opacity: .5; } 100% { opacity: 0; transform: translateY(-820px) rotate(200deg); } }
@keyframes fx-flick { 0%, 100% { opacity: .55; } 48% { opacity: .55; } 50% { opacity: .1; } 52% { opacity: .7; } }
@keyframes fx-drip { 0%, 8% { transform: scaleY(.04); } 55%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.04); } }
@keyframes fx-mosh {
0%, 100% { opacity: 0; transform: translateX(0); } 6% { opacity: .85; transform: translateX(-26px); } 9% { opacity: 0; }
30% { opacity: .7; transform: translateX(34px); } 33% { opacity: 0; } 62% { opacity: .9; transform: translateX(-14px); } 66% { opacity: .25; transform: translateX(18px); } 69% { opacity: 0; } 88% { opacity: .6; transform: translateX(22px); } 91% { opacity: 0; }
}
/* 00 ИМЯ (чёрная): жёлтый полутоновый диск, как шляпа с обложки раздела, плавает в тёмной пустоте */
#s-name .bgfx .a { opacity: .22; }
#s-name .bgfx .b { left: auto; right: -8vmin; top: -6vmin; width: 62vmin; height: 62vmin; border-radius: 50%; animation: fx-bob 9s ease-in-out infinite;
background: radial-gradient(circle, rgba(255, 230, 0, .6) 1.6px, transparent 2.2px) 0 0 / 9px 9px;
-webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%); mask-image: radial-gradient(circle, #000 52%, transparent 71%); }
/* 01 КЛАСС (розовая): всплывающие «✕» с обложки */
#s-class .bgfx::before { left: 7%; bottom: -120px; width: 84px; height: 84px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: fx-float 15s linear infinite; }
#s-class .bgfx::after { left: 78%; bottom: -160px; width: 54px; height: 54px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: fx-float 11s linear 3s infinite; }
/* 02 СПОСОБНОСТИ (жёлтая): бегущая предупреждающая лента */
#s-abil .bgfx::before { left: -6%; right: -6%; bottom: 26px; height: 26px; transform: rotate(-1.6deg); opacity: .9;
background: linear-gradient(135deg, #000 25%, transparent 25% 50%, #000 50% 75%, transparent 75%) 0 0 / 40px 40px; animation: fx-tape 3s linear infinite; }
@keyframes fx-tape { to { background-position: 40px 0; } }
/* 03 СНАРЯЖЕНИЕ (синяя): бегущая сетка + искры данных двумя слоями разной скорости */
#s-gear .bgfx::before { inset: 0 0 -310px 0; opacity: .7; animation: fx-up310 22s linear infinite;
background: radial-gradient(2px 2px at 40px 60px, #ffe600, transparent), radial-gradient(2px 2px at 190px 140px, #18e6ff, transparent), radial-gradient(3px 3px at 120px 260px, #ff3db4, transparent), radial-gradient(2px 2px at 260px 20px, #fff, transparent) 0 0 / 310px 310px; }
#s-gear .bgfx::after { inset: 0 0 -200px 0; opacity: .9; animation: fx-up200 12s linear infinite;
background: radial-gradient(2px 2px at 30px 40px, #18e6ff, transparent), radial-gradient(3px 3px at 130px 120px, #ffe600, transparent), radial-gradient(2px 2px at 80px 180px, #fff, transparent) 0 0 / 200px 200px; }
/* 04 ДОЛГ (бумага): кровавые подтёки сверху, как чернила на корп-логотипах */
#s-debt .bgfx .a, #s-debt .bgfx .b { left: 0; right: 0; top: 0; bottom: auto; width: auto; transform-origin: 50% 0; opacity: .38; mask-image: none; -webkit-mask-image: none; }
#s-debt .bgfx .a { height: 210px; animation: fx-drip 7s ease-in-out infinite;
background: linear-gradient(#8a0b0b, #8a0b0b) 6% 0 / 7px 70% no-repeat, linear-gradient(#8a0b0b, #8a0b0b) 23% 0 / 5px 100% no-repeat, linear-gradient(#8a0b0b, #8a0b0b) 47% 0 / 8px 55% no-repeat, linear-gradient(#8a0b0b, #8a0b0b) 71% 0 / 6px 85% no-repeat, linear-gradient(#8a0b0b, #8a0b0b) 92% 0 / 5px 62% no-repeat; }
#s-debt .bgfx .b { height: 160px; animation: fx-drip 9s ease-in-out 2.4s infinite;
background: linear-gradient(#a01212, #a01212) 14% 0 / 5px 80% no-repeat, linear-gradient(#a01212, #a01212) 35% 0 / 7px 100% no-repeat, linear-gradient(#a01212, #a01212) 58% 0 / 5px 60% no-repeat, linear-gradient(#a01212, #a01212) 83% 0 / 8px 75% no-repeat; }
#s-debt .bgfx::before { left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, #8a0b0b 0 22%, transparent 22% 31%, #8a0b0b 31% 58%, transparent 58% 66%, #8a0b0b 66% 100%); opacity: .38; }
/* 05 ГЛИТЧИ (чёрная): аналоговый «датамош» из арта раздела: цветные полосы-срывы, пунктир и рамка-прицел */
#s-glitch .bgfx .a { inset: 0; animation: fx-mosh 4.2s steps(1) infinite; opacity: 0; -webkit-mask-image: none; mask-image: none;
background: linear-gradient(#18e6ff, #18e6ff) 10% 20% / 34% 6px no-repeat, linear-gradient(#ff3db4, #ff3db4) 58% 38% / 28% 3px no-repeat, linear-gradient(#ffe600, #ffe600) 6% 61% / 20% 9px no-repeat,
linear-gradient(#18e6ff, #18e6ff) 68% 78% / 24% 4px no-repeat, linear-gradient(#fff, #fff) 28% 90% / 14% 2px no-repeat, linear-gradient(#ff3db4, #ff3db4) 80% 12% / 12% 7px no-repeat; }
#s-glitch .bgfx::before { left: 6%; top: 8%; bottom: 8%; width: 3px; animation: fx-flick 5s steps(1) infinite;
background: repeating-linear-gradient(180deg, #fff 0 3px, transparent 3px 10px); }
#s-glitch .bgfx::after { right: 7%; top: 12%; width: 54px; height: 54px; border: 2px solid rgba(255, 255, 255, .7); border-right: 0; border-bottom: 0; animation: fx-flick 3.4s steps(1) infinite; }
/* 06 ЗДОРОВЬЕ (ink): циркулярная пила из арта «череп», оранжевые искры вверх и кардиограмма */
#s-hp .bgfx .a { inset: auto; right: -150px; top: -110px; width: 520px; height: 520px; opacity: .3; animation: fx-spin 46s linear infinite; -webkit-mask-image: none; mask-image: none;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
#s-hp .bgfx::before { inset: 0 0 -310px 0; opacity: .8; animation: fx-up310 20s linear infinite;
background: radial-gradient(2px 2px at 50px 70px, #ff7a1a, transparent), radial-gradient(3px 3px at 200px 150px, #ff3db4, transparent), radial-gradient(2px 2px at 110px 250px, #ffb347, transparent), radial-gradient(2px 2px at 270px 30px, #ff7a1a, transparent) 0 0 / 310px 310px; }
#s-hp .bgfx::after { inset: 0 0 -200px 0; opacity: .9; animation: fx-up200 11s linear infinite;
background: radial-gradient(2px 2px at 30px 50px, #ffb347, transparent), radial-gradient(3px 3px at 140px 130px, #ff7a1a, transparent), radial-gradient(2px 2px at 90px 190px, #fff, transparent) 0 0 / 200px 200px; }
/* 07 ВНЕШНОСТЬ (розовая): медленно вращающийся прицел и блик */
#s-look .bgfx::before { left: -90px; bottom: -110px; width: 420px; height: 420px; opacity: .22; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: fx-spin 60s linear infinite; }
#s-look .bgfx::after { left: 82%; bottom: -140px; width: 70px; height: 70px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: fx-float 13s linear 1s infinite; }
}