/* =========================================================================
 * Эффекты и анимации. Включаются/выключаются в админке (Настройки → Оформление):
 * при выключении <html data-fx="off"> и fx.js ничего не делает.
 * ========================================================================= */
:root { --ease: cubic-bezier(.16, 1, .3, 1); }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* ---------- Прелоадер ---------- */
.fx-preloader {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: #0B0B14;
    animation: pre-out .7s ease 3s forwards; /* страховка, если JS не отработал */
}
html.no-preloader .fx-preloader { display: none; }
.fx-preloader.hide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; animation: none; }
.fx-preloader-inner { text-align: center; }
.fx-preloader-brand {
    display: inline-block; font-size: clamp(30px, 7vw, 60px); font-weight: 800; letter-spacing: .02em;
    background: linear-gradient(90deg, #7C3AED, #c084fc, #fff, #22d3ee, #7C3AED);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradient-move 2.4s linear infinite, pre-pop .9s var(--ease) both;
}
.fx-preloader-bar {
    display: block; margin: 20px auto 0; height: 3px; width: min(260px, 60vw);
    border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; position: relative;
}
.fx-preloader-bar::after {
    content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, #7C3AED, #22d3ee); animation: pre-bar 1.2s var(--ease) forwards;
}
@keyframes pre-out { to { opacity: 0; visibility: hidden; } }
@keyframes pre-pop { from { opacity: 0; transform: scale(.85) translateY(10px); letter-spacing: .2em; } to { opacity: 1; transform: none; } }
@keyframes pre-bar { to { transform: scaleX(1); } }

/* Пока виден прелоадер, анимации главного экрана стоят на паузе */
html.fx-wait .animate-fade-up, html.fx-wait .word > span { animation-play-state: paused; }

/* ---------- Анимированный градиентный текст ---------- */
.fx-gradient-text {
    background: linear-gradient(90deg, #7C3AED, #c084fc, #22d3ee, #f472b6, #7C3AED);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
    color: transparent; animation: gradient-move 7s linear infinite;
}
@keyframes gradient-move { to { background-position: 300% 0; } }

/* ---------- Индикатор прокрутки ---------- */
.fx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
    transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, #7C3AED, #22d3ee, #f472b6);
    box-shadow: 0 0 12px rgba(124,58,237,.7);
}

/* ---------- Шапка: сжатие, скрытие при прокрутке вниз, подчёркивание ссылок ---------- */
nav[data-nav] { transition: transform .45s var(--ease), background .3s, box-shadow .3s, padding .3s; }
nav[data-nav].is-scrolled { background: rgba(11, 11, 20, .88); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
nav[data-nav].is-hidden { transform: translateY(-100%); }
.nav-link { position: relative; padding: 4px 0; }
.nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #7C3AED, #22d3ee);
    transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: #fff; }

/* ---------- Главный экран: полярное сияние, сетка, частицы ---------- */
.fx-hero-bg { position: absolute; inset: 0; z-index: -10; overflow: hidden; }
.fx-aurora span {
    position: absolute; border-radius: 50%; filter: blur(110px); mix-blend-mode: screen; opacity: .55;
    will-change: transform;
}
.fx-aurora .a1 { width: 520px; height: 520px; top: 5%; left: 8%; background: #7C3AED; animation: drift-1 18s ease-in-out infinite alternate; }
.fx-aurora .a2 { width: 460px; height: 460px; bottom: 0; right: 6%; background: #4f46e5; animation: drift-2 22s ease-in-out infinite alternate; }
.fx-aurora .a3 { width: 380px; height: 380px; top: 30%; left: 45%; background: #0891b2; opacity: .3; animation: drift-3 26s ease-in-out infinite alternate; }
@keyframes drift-1 { to { transform: translate(18vw, 14vh) scale(1.25); } }
@keyframes drift-2 { to { transform: translate(-16vw, -12vh) scale(1.15); } }
@keyframes drift-3 { to { transform: translate(-14vw, 16vh) scale(1.4); } }

.fx-grid {
    position: absolute; inset: 0; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
    animation: grid-move 12s linear infinite;
}
@keyframes grid-move { to { background-position: 64px 64px; } }
.fx-particles { position: absolute; inset: 0; pointer-events: none; }

/* Заголовок: слова выезжают по очереди */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.word > span {
    display: inline-block; transform: translateY(115%); opacity: 0;
    animation: word-in .95s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 75ms + 250ms);
}
@keyframes word-in { to { transform: none; opacity: 1; } }

/* Подсказка «листайте вниз» */
.fx-scroll-hint { animation: bounce-soft 2s ease-in-out infinite; }
@keyframes bounce-soft { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ---------- Появление при прокрутке ---------- */
html.js[data-fx="on"] [data-reveal] {
    opacity: 0;
    transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease), rotate .9s var(--ease),
                filter .9s var(--ease), transform .25s ease-out, border-color .3s, box-shadow .3s;
    will-change: opacity, translate;
}
html.js[data-fx="on"] [data-reveal=""], html.js[data-fx="on"] [data-reveal="up"] { translate: 0 44px; filter: blur(6px); }
html.js[data-fx="on"] [data-reveal="down"]  { translate: 0 -44px; }
html.js[data-fx="on"] [data-reveal="left"]  { translate: -70px 0; }
html.js[data-fx="on"] [data-reveal="right"] { translate: 70px 0; }
html.js[data-fx="on"] [data-reveal="zoom"]  { scale: .86; }
html.js[data-fx="on"] [data-reveal="flip"]  { translate: 0 40px; rotate: x 35deg; transform-origin: top; }
html.js[data-fx="on"] [data-reveal="line"]  { scale: 0 1; transform-origin: left; opacity: 1; }
html.js[data-fx="on"] [data-reveal].is-visible { opacity: 1; translate: none; scale: none; rotate: none; filter: none; }
/* после появления — быстрые переходы, чтобы не мешать наведению/фильтру */
html.js[data-fx="on"] [data-reveal].revealed {
    transition: opacity .35s ease, transform .25s ease-out, border-color .3s, box-shadow .3s;
    will-change: auto;
}

/* ---------- Карточки: подсветка за курсором и 3D-наклон ---------- */
.fx-card { position: relative; }
.fx-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    border-radius: inherit; transition: opacity .35s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124,58,237,.26), transparent 45%);
}
.fx-card:hover::after { opacity: 1; }
html[data-fx="on"] [data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out, opacity .35s ease, border-color .3s, box-shadow .3s;
}
html[data-fx="on"] [data-tilt]:hover { box-shadow: 0 20px 60px rgba(124,58,237,.22); }

/* Фильтр портфолио: скрытые карточки (перекрывает анимации появления) */
.portfolio-card.hidden-item { opacity: 0 !important; translate: none !important; scale: none !important; filter: none !important; }
.portfolio-card.pop { animation: card-pop .65s var(--ease) backwards; animation-delay: calc(var(--pi, 0) * 60ms); }
@keyframes card-pop { from { opacity: 0; transform: translateY(30px) scale(.9); } }

/* ---------- Кнопки: блик, рябь, магнит ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn-shine:hover::before { left: 140%; }
.btn-ripple { position: relative; overflow: hidden; }
.fx-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.35);
    transform: scale(0); animation: ripple .7s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
[data-magnetic] { transition: translate .3s var(--ease); }

/* ---------- Бегущая лента технологий ---------- */
.fx-marquee {
    overflow: hidden; padding: 22px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.fx-marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; }
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
.fx-marquee-item {
    white-space: nowrap; padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #D1D5DB;
    border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
    transition: border-color .3s, color .3s, transform .3s;
}
.fx-marquee-item:hover { border-color: #7C3AED; color: #fff; transform: translateY(-3px); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Заголовки разделов: линия-подчёркивание ---------- */
.fx-title { position: relative; display: inline-block; }
.fx-title::after {
    content: ""; display: block; height: 3px; width: 0; margin: .6rem auto 0; border-radius: 3px;
    background: linear-gradient(90deg, #7C3AED, #22d3ee); transition: width 1s var(--ease) .35s;
}
[data-reveal].is-visible .fx-title::after, .fx-title.is-visible::after { width: 72px; }
html:not(.js) .fx-title::after, html[data-fx="off"] .fx-title::after { width: 72px; }

/* ---------- Этапы работы: линия-соединитель ---------- */
.fx-steps { position: relative; }
.fx-steps-line {
    display: none; position: absolute; top: 24px; left: 24px; right: 24px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #7C3AED, #22d3ee, #7C3AED); opacity: .45;
}
@media (min-width: 1024px) { .fx-steps-line { display: block; } }
.fx-step-num { position: relative; z-index: 1; background: #12121e !important; transition: transform .4s var(--ease), box-shadow .4s; }
.fx-step:hover .fx-step-num { transform: scale(1.15) rotate(-6deg); box-shadow: 0 0 0 6px rgba(124,58,237,.18), 0 0 30px rgba(124,58,237,.5); }

/* ---------- Прочее ---------- */
.fx-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(1.2deg); } }

details[open] > p { animation: faq-in .5s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }

input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(124,58,237,.28); }

.footer-social { transition: transform .35s var(--ease), border-color .3s, color .3s; }
.footer-social:hover { transform: translateY(-4px) rotate(-3deg); }

#project-modal > div { animation: modal-in .55s var(--ease) both; }
#project-modal { backdrop-filter: blur(6px); }
#project-modal > div, .lb-stage { scrollbar-width: thin; scrollbar-color: #7C3AED #12121e; }
html { scrollbar-color: #4c1d95 #0B0B14; }
@keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(.94); } }

.fx-cursor-glow {
    position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
    border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(124,58,237,.17), transparent 62%);
    transition: opacity .5s; will-change: transform;
}

/* Кнопка «наверх» с кольцом прогресса */
.fx-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 52px; height: 52px; padding: 0; border: 0;
    border-radius: 50%; cursor: pointer; color: #fff;
    background: conic-gradient(#7C3AED calc(var(--p, 0) * 1%), rgba(255,255,255,.14) 0);
    opacity: 0; translate: 0 24px; pointer-events: none;
    transition: opacity .4s, translate .5s var(--ease), box-shadow .3s;
}
.fx-top span { position: absolute; inset: 3px; border-radius: 50%; background: #12121e; display: grid; place-items: center; font-size: 20px; transition: background .3s; }
.fx-top.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.fx-top:hover { box-shadow: 0 0 24px rgba(124,58,237,.6); }
.fx-top:hover span { background: #7C3AED; }

/* ---------- Выключено / уменьшенная анимация ---------- */
html[data-fx="off"] .fx-hero-bg .fx-grid { animation: none; }
html.fx-reduce *, html.fx-reduce *::before, html.fx-reduce *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}
html.fx-reduce .animate-fade-up { opacity: 1 !important; }
html.fx-reduce .word > span { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .animate-fade-up { animation: none !important; opacity: 1 !important; }
    .word > span { transform: none; opacity: 1; animation: none; }
}