/* 5.18: движение и интерактивност в духа на видеата (6.10), на целия сайт.
   Всичко спира при prefers-reduced-motion. */

/* 1. Звездно небе с паралакс в първата секция (hero) */
.fx-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.fx-hero { position: relative; isolation: isolate; }
.fx-hero > *:not(.fx-stars) { position: relative; z-index: 1; }

/* 2. Картите: наклон към курсора + светлина по ръба, която следва мишката */
.fx-tilt { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; will-change: transform; }
.fx-tilt::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
	background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent) 40%, transparent 70%); }
.fx-tilt:hover::after { opacity: 1; }
.fx-tilt { position: relative; }
.fx-tilt .wai-icon, .fx-tilt .wai-thumb { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.fx-tilt:hover .wai-icon { transform: translateZ(30px) scale(1.12) rotate(-6deg); }
.fx-tilt:hover .wai-thumb { transform: translateZ(20px) scale(1.03); }

/* 3. „Как работим“: линията се рисува при скрол, етапите изскачат с пружина */
.fx-steps { position: relative; }
.fx-steps-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.fx-steps-line path { fill: none; stroke: url(#fx-grad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1); }
.fx-steps.is-in .fx-steps-line path { stroke-dashoffset: 0; }
.fx-steps > *:not(.fx-steps-line) { position: relative; z-index: 1; }   /* линията остава absolute и не заема клетка в мрежата */
.fx-pop { opacity: 0; transform: translateY(18px) scale(.9); }
.fx-steps.is-in .fx-pop { animation: fx-spring .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(var(--i) * .22s + .2s); }
@keyframes fx-spring { to { opacity: 1; transform: none; } }

/* 4. Броячите в кейса (по-големи и с лек импулс в края) */
.fx-count.is-done { animation: fx-bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes fx-bump { 40% { transform: scale(1.12); } }

/* 5. Бутоните „Заявете демо“: магнитен ефект + импулс в лайм */
.fx-magnet { transition: transform .25s cubic-bezier(.2,.8,.2,1) !important; position: relative; }
.wp-block-button:not(.is-style-ghost) .fx-magnet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); animation: fx-pulse 2.6s ease-out infinite; }
@keyframes fx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); } }

/* 6. Поява на секциите при скрол (веднъж), с каскада за картите */
.fx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.fx-reveal.is-in { opacity: 1; transform: none; }

/* Лента „демо режим“ (само за прегледа) */
.fx-badge { position: fixed; left: 12px; bottom: 12px; z-index: 9999; font: 600 12px/1 var(--wp--preset--font-family--body, sans-serif); padding: 8px 12px; border-radius: 999px;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.fx-stars { display: none; }
	.fx-tilt, .fx-tilt .wai-icon, .fx-tilt .wai-thumb, .fx-magnet { transition: none !important; transform: none !important; }
	.fx-pop, .fx-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
	.fx-steps-line path { stroke-dashoffset: 0; transition: none; }
	.fx-magnet::before, .fx-count.is-done { animation: none !important; }
}
@media (hover: none) { .fx-tilt:hover::after { opacity: 0; } }

/* Светлата тема: сиянието, което следва курсора (fx.js, т. 0). Под съдържанието (z-index:-1), над фона на страницата. */
.fx-cursor-glow { position: fixed; left: 0; top: 0; width: 700px; height: 700px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s ease; will-change: transform;
	background: radial-gradient(circle, color-mix(in srgb, #8B5CF6 40%, transparent) 0%, color-mix(in srgb, #A78BFA 20%, transparent) 38%, transparent 68%); }
html[data-theme="light"] .fx-cursor-glow.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-cursor-glow { display: none; } }