/* Fintech Application Development hero illustration.
   See inc/hero-illustration-fintech-app.php. The base styles below draw the
   finished state (all steps done); animation only exists inside the
   no-preference media query, so reduced-motion visitors get a clean static
   illustration. Timeline is one 8s master loop (percentages below). */

.fa-hero {
	position: absolute;
	inset: 0;
}

.fa-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---- Ring ---- */
.fa-hero__track {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 14;
}

.fa-hero__arc {
	fill: none;
	stroke: var(--navy);
	stroke-width: 14;
	stroke-linecap: round;
	stroke-dasharray: 340 1005;
}

.fa-hero__orbit-dot {
	fill: var(--cyan);
	filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.6));
}

.fa-hero__dot--cyan-tint { fill: #b9e4f7; }
.fa-hero__dot--slate     { fill: var(--slate-light); opacity: 0.6; }
.fa-hero__dot--cyan      { fill: var(--cyan); }
.fa-hero__dot--navy      { fill: var(--navy); opacity: 0.45; }

.fa-hero__flow {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 2 7;
	opacity: 0.7;
}

.fa-hero__shadow {
	fill: var(--navy);
	opacity: 0.08;
}

/* ---- Phone ---- */
.fa-hero__phone {
	filter: drop-shadow(0 18px 26px rgba(1, 36, 126, 0.22));
}

.fa-hero__body   { fill: var(--navy); }
.fa-hero__screen { fill: var(--paper); }
.fa-hero__row    { fill: var(--mist); }

.fa-hero__ui-navy  { fill: var(--navy); opacity: 0.85; }
.fa-hero__ui-line  { fill: var(--line); }
.fa-hero__ui-track { fill: var(--mist-dark); }

.fa-hero__fill { fill: var(--cyan); }

.fa-hero__pending {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1.5;
}

.fa-hero__check circle { fill: var(--cyan); }
.fa-hero__check path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fa-hero__cta rect          { fill: var(--cyan); }
.fa-hero__cta .fa-hero__cta-label { fill: var(--paper); }

.fa-hero__ping {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	opacity: 0;
}

/* ---- Floating cards ---- */
.fa-hero__card {
	filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14));
}

.fa-hero__card-bg {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.fa-hero__badge      { fill: var(--cyan); }
.fa-hero__badge-tick,
.fa-hero__shield-tick {
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fa-hero__badge-tick  { stroke: var(--paper); }
.fa-hero__shield-tick { stroke: var(--navy); }

.fa-hero__shield {
	fill: var(--cyan-tint);
	stroke: var(--cyan);
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.fa-hero__bar     { fill: var(--navy); opacity: 0.35; }
.fa-hero__bar--hot { fill: var(--cyan); opacity: 1; }

.fa-hero__scan { fill: var(--cyan); opacity: 0.22; }
.fa-hero__live { fill: var(--cyan); }

/* ---- Motion ---- */
.fa-hero__orbit,
.fa-hero__arc,
.fa-hero__card,
.fa-hero__dot,
.fa-hero__bar,
.fa-hero__fill,
.fa-hero__check,
.fa-hero__ping,
.fa-hero__scan,
.fa-hero__live {
	transform-box: fill-box;
	transform-origin: center;
}

.fa-hero__orbit { transform-box: view-box; transform-origin: 260px 260px; }
.fa-hero__arc   { transform-box: view-box; transform-origin: 260px 260px; }
.fa-hero__fill  { transform-origin: left center; }
.fa-hero__bar   { transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
	.fa-hero__orbit { animation: fa-spin 26s linear infinite; }
	.fa-hero__arc   { animation: fa-spin 60s linear infinite reverse; }
	.fa-hero__flow  { animation: fa-flow 1.4s linear infinite; }
	.fa-hero__dot   { animation: fa-drift 7s ease-in-out infinite; }

	.fa-hero__card--a { animation: fa-float 6s ease-in-out infinite; }
	.fa-hero__card--b { animation: fa-float 7s ease-in-out -2s infinite; }
	.fa-hero__card--c { animation: fa-float 6.5s ease-in-out -4s infinite; }
	.fa-hero__card--d { animation: fa-float 5.5s ease-in-out -1s infinite; }
	.fa-hero__phone   { animation: fa-float-phone 8s ease-in-out infinite; }

	.fa-hero__bar   { animation: fa-bar 3.6s ease-in-out infinite; }
	.fa-hero__scan  { animation: fa-scan 3s ease-in-out infinite; }
	.fa-hero__live  { animation: fa-live 1.8s ease-in-out infinite; }

	/* Onboarding sequence — one 8s master timeline. */
	.fa-hero__fill         { animation: fa-fill 8s ease-in-out infinite; }
	.fa-hero__check--1     { animation: fa-check-1 8s ease-out infinite; }
	.fa-hero__check--2     { animation: fa-check-2 8s ease-out infinite; }
	.fa-hero__check--3     { animation: fa-check-3 8s ease-out infinite; }
	.fa-hero__cta          { animation: fa-cta 8s ease-in-out infinite; }
	.fa-hero__ping         { animation: fa-ping 8s ease-out infinite; }
}

@keyframes fa-spin  { to { transform: rotate(360deg); } }
@keyframes fa-flow  { to { stroke-dashoffset: -9; } }

@keyframes fa-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

@keyframes fa-float-phone {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

@keyframes fa-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes fa-bar {
	0%, 100% { transform: scaleY(0.55); }
	50%      { transform: scaleY(1); }
}

@keyframes fa-scan {
	0%, 100% { transform: translateY(0);    opacity: 0; }
	15%, 85% { opacity: 0.3; }
	50%      { transform: translateY(14px); opacity: 0.3; }
}

@keyframes fa-live {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.5; }
}

@keyframes fa-fill {
	0%, 8%   { transform: scaleX(0.04); }
	58%, 92% { transform: scaleX(1); }
	98%, 100% { transform: scaleX(0.04); }
}

@keyframes fa-check-1 {
	0%, 20%  { opacity: 0; transform: scale(0.4); }
	26%      { opacity: 1; transform: scale(1.2); }
	30%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes fa-check-2 {
	0%, 34%  { opacity: 0; transform: scale(0.4); }
	40%      { opacity: 1; transform: scale(1.2); }
	44%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes fa-check-3 {
	0%, 48%  { opacity: 0; transform: scale(0.4); }
	54%      { opacity: 1; transform: scale(1.2); }
	58%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes fa-cta {
	0%, 60%  { opacity: 0; }
	66%, 92% { opacity: 1; }
	97%, 100% { opacity: 0; }
}

@keyframes fa-ping {
	0%, 62%  { opacity: 0;   transform: scale(0.8); }
	64%      { opacity: 0.7; transform: scale(0.9); }
	78%, 100% { opacity: 0;  transform: scale(1.9); }
}

@media (max-width: 1024px) {
	.fa-hero__flow { display: none; }
}