/* Flujo Digital – movimiento y formas.
   Only transform and opacity are animated, so nothing shifts the layout.
   Everything that moves sits inside prefers-reduced-motion: no-preference. */

.fd-motion {
	--fd-rose: #F43F5E;
	--fd-cyan: #22D3EE;
	--fd-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Layout fix: the "Bitrix24 Partner" badge overlapped the menu links
   on screens narrower than ~1180px; the hero badge already says it there. ---------- */

@media (max-width: 1179px) {
	.fd-motion .nav-partner { display: none; }
}

/* ---------- Decorative layer (inserted by fd-motion.js) ---------- */

.fd-motion .fd-has-deco { position: relative; }
.fd-motion .fd-has-deco > :not(.fd-deco) { position: relative; z-index: 1; }

.fd-motion .fd-deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.fd-motion .fd-deco > i { position: absolute; }

/* Soft light orbs (pre-blurred gradients: no filter: blur needed) */
.fd-motion .fd-orb { border-radius: 50%; }
.fd-motion .fd-orb--rose {
	width: 560px; height: 560px; top: -200px; right: -160px;
	background: radial-gradient(circle, rgba(244, 63, 94, .20), rgba(244, 63, 94, 0) 66%);
}
.fd-motion .fd-orb--cyan {
	width: 500px; height: 500px; bottom: -220px; left: -180px;
	background: radial-gradient(circle, rgba(34, 211, 238, .14), rgba(34, 211, 238, 0) 66%);
}

/* Rings */
.fd-motion .fd-ring { border-radius: 50%; }
.fd-motion .fd-ring--dash {
	width: 460px; height: 460px; top: 50%; right: 2%; margin-top: -230px;
	border: 1px dashed rgba(34, 211, 238, .28);
}
.fd-motion .fd-ring--arc {
	width: 150px; height: 150px; top: 9%; left: 47%;
	border: 2px solid rgba(244, 63, 94, .45);
	border-top-color: transparent;
	border-left-color: transparent;
}
.fd-motion .fd-ring--thin {
	width: 74px; height: 74px; bottom: 5%; right: 4%;
	border: 1px solid rgba(255, 255, 255, .16);
}

/* Dot grid */
.fd-motion .fd-dots {
	width: 190px; height: 150px; bottom: 3%; right: 24%;
	background: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.7px) 0 0 / 18px 18px;
	-webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
	mask: radial-gradient(closest-side, #000 55%, transparent);
}

/* Plus marks */
.fd-motion .fd-plus { width: 16px; height: 16px; }
.fd-motion .fd-plus::before,
.fd-motion .fd-plus::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	background: currentColor; border-radius: 2px;
	transform: translate(-50%, -50%);
}
.fd-motion .fd-plus::before { width: 100%; height: 2px; }
.fd-motion .fd-plus::after { width: 2px; height: 100%; }
.fd-motion .fd-plus--a { color: rgba(244, 63, 94, .75); top: 16%; left: 40%; }
.fd-motion .fd-plus--b { color: rgba(34, 211, 238, .75); bottom: 18%; right: 6%; width: 12px; height: 12px; }
.fd-motion .fd-plus--c { color: rgba(255, 255, 255, .45); top: 7%; right: 7%; width: 10px; height: 10px; }

/* Triangle outline */
.fd-motion .fd-tri {
	width: 34px; height: 30px; top: 13%; right: 33%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M17 2 32 28H2Z' fill='none' stroke='%2322D3EE' stroke-opacity='.6' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pill (section layers only; the hero keeps its text side clean) */
.fd-motion .fd-pill {
	width: 86px; height: 26px; bottom: 12%; right: 10%;
	border: 1px solid rgba(244, 63, 94, .4); border-radius: 999px;
}

/* Section variants: fewer, fainter shapes placed at the edges */
.fd-motion .fd-deco--sec .fd-ring--dash { width: 380px; height: 380px; top: 4%; right: -170px; margin-top: 0; border-color: rgba(34, 211, 238, .16); }
.fd-motion .fd-deco--sec .fd-ring--arc { top: auto; bottom: 8%; left: -50px; border-color: rgba(244, 63, 94, .28); border-top-color: transparent; border-left-color: transparent; }
.fd-motion .fd-deco--sec .fd-dots { bottom: auto; top: 6%; left: 3%; opacity: .7; }
.fd-motion .fd-deco--sec .fd-plus--a { top: 10%; left: auto; right: 12%; }
.fd-motion .fd-deco--alt .fd-ring--dash { right: auto; left: -190px; top: 30%; }
.fd-motion .fd-deco--alt .fd-ring--arc { left: auto; right: -40px; bottom: 14%; }
.fd-motion .fd-deco--alt .fd-dots { left: auto; right: 4%; top: auto; bottom: 8%; }
.fd-motion .fd-deco--alt .fd-pill { right: auto; left: 5%; bottom: 6%; }

/* ---------- Reading progress bar ---------- */

.fd-motion .fd-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
	background: linear-gradient(90deg, var(--fd-rose), var(--fd-cyan));
	transform: scaleX(0); transform-origin: 0 50%;
	pointer-events: none;
}

/* ---------- Service cards: pointer light ---------- */

.fd-motion .svc { position: relative; isolation: isolate; }
.fd-motion .svc::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: inherit; pointer-events: none;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, .12), transparent 62%);
	opacity: 0;
}
.fd-motion .svc:hover { border-color: rgba(34, 211, 238, .45); }
.fd-motion .svc:hover::before { opacity: 1; }

/* ---------- Primary button shine ---------- */

.fd-motion .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.fd-motion .btn-primary::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
	transform: translateX(-120%);
}

/* ---------- Mobile: lighter set ---------- */

@media (max-width: 760px) {
	.fd-motion .fd-ring--dash { width: 300px; height: 300px; margin-top: -150px; right: -120px; }
	.fd-motion .fd-ring--arc { width: 96px; height: 96px; left: auto; right: 8%; top: 4%; }
	.fd-motion .fd-dots, .fd-motion .fd-tri, .fd-motion .fd-pill, .fd-motion .fd-ring--thin,
	.fd-motion .fd-plus--a, .fd-motion .fd-plus--c { display: none; }
	.fd-motion .fd-orb--rose { width: 380px; height: 380px; }
	.fd-motion .fd-orb--cyan { width: 340px; height: 340px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	.fd-motion .fd-orb--rose { animation: fd-drift 18s ease-in-out infinite alternate; }
	.fd-motion .fd-orb--cyan { animation: fd-drift 22s ease-in-out infinite alternate-reverse; }
	.fd-motion .fd-ring--dash { animation: fd-spin 70s linear infinite; }
	.fd-motion .fd-ring--arc { animation: fd-spin 12s linear infinite reverse; }
	.fd-motion .fd-ring--thin { animation: fd-pulse 6s ease-in-out infinite; }
	.fd-motion .fd-dots { animation: fd-float 10s ease-in-out infinite; }
	.fd-motion .fd-plus--a { animation: fd-float-spin 9s ease-in-out infinite; }
	.fd-motion .fd-plus--b { animation: fd-float-spin 11s ease-in-out -3s infinite reverse; }
	.fd-motion .fd-plus--c { animation: fd-float 8s ease-in-out -2s infinite; }
	.fd-motion .fd-tri { animation: fd-tumble 16s linear infinite; }
	.fd-motion .fd-pill { animation: fd-float 12s ease-in-out -5s infinite; }

	/* CRM board in the hero floats gently */
	.fd-motion .pipe { animation: fd-bob 7s ease-in-out infinite; }

	/* Card entrance (classes added by fd-motion.js, removed once shown) */
	.fd-motion .fd-rv { opacity: 0; transform: translateY(18px); }
	.fd-motion .fd-rv.fd-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s var(--fd-ease); }

	.fd-motion .svc { transition: transform .35s var(--fd-ease), border-color .3s, box-shadow .35s; }
	.fd-motion .svc::before { transition: opacity .3s; }
	.fd-motion .svc:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(34, 211, 238, .5); }
	.fd-motion .svc-ic { transition: transform .4s var(--fd-ease); }
	.fd-motion .svc:hover .svc-ic { transform: rotate(-8deg) scale(1.08); }

	.fd-motion .lp-type { transition: transform .35s var(--fd-ease), border-color .3s; }
	.fd-motion .lp-type:hover { transform: translateY(-4px); border-color: rgba(244, 63, 94, .45); }

	.fd-motion .btn-primary { transition: transform .2s, box-shadow .3s; }
	.fd-motion .btn-primary:hover { box-shadow: 0 12px 30px -12px rgba(244, 63, 94, .75); }
	.fd-motion .btn-primary::after { transition: transform .8s ease; }
	.fd-motion .btn-primary:hover::after { transform: translateX(120%); }
	.fd-motion .hero .btn-primary::after { animation: fd-shine 6s ease-in-out 2s infinite; }
	.fd-motion .hero .btn-primary:hover::after { animation: none; }

	.fd-motion #faq details > :not(summary) { animation: fd-open .35s var(--fd-ease); }
	.fd-motion #faq summary { transition: color .2s; }
	.fd-motion #faq summary:hover { color: var(--fd-cyan); }
}

@keyframes fd-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-60px, 40px, 0) scale(1.08); }
}
@keyframes fd-spin { to { transform: rotate(360deg); } }
@keyframes fd-pulse {
	0%, 100% { transform: scale(1); opacity: .6; }
	50% { transform: scale(1.15); opacity: 1; }
}
@keyframes fd-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -16px, 0); }
}
@keyframes fd-float-spin {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
	50% { transform: translate3d(0, -14px, 0) rotate(90deg); }
}
@keyframes fd-tumble {
	0% { transform: translate3d(0, 0, 0) rotate(0); }
	50% { transform: translate3d(14px, -18px, 0) rotate(180deg); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}
@keyframes fd-bob {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -8px, 0); }
}
@keyframes fd-shine {
	0%, 82% { transform: translateX(-120%); }
	100% { transform: translateX(120%); }
}
@keyframes fd-open {
	from { opacity: 0; transform: translateY(-6px); }
}