/**
 * smefinancing-usecase-fx.css — shared visual "eyecatcher" layer for the SME
 * financing use-case pages, applied via the modifier `.alx-uc--fx`.
 *
 * Loaded IN ADDITION to smefinancing-usecase.css. Generic effects (animated
 * gradient-mesh hero, gradient headline, shimmer chips, pulsing step badges,
 * scroll reveal, glowing callout, animated CTA band) are driven by two accent
 * variables so each page can theme itself:
 *
 *     --uc-accent        primary accent (defaults to brand blue)
 *     --uc-accent-2      secondary accent (per page: teal / green / gold)
 *
 * Each page also carries a page modifier (.alx-uc--wc / --inv / --blr / --ecf)
 * that sets its accents and styles its own signature hero SVG. The MyCIF page
 * uses its own dedicated file and is unaffected. Dark-mode + reduced-motion aware.
 */

/* ── Accent defaults + per-page themes ── */
.alx-uc--fx {
  --uc-accent: var(--c-blue);
  --uc-accent-2: #12A594;               /* overridden per page */
  --uc-accent-soft: rgba(28, 88, 142, .14);
  --uc-accent-2-soft: rgba(18, 165, 148, .16);
}
.alx-uc--wc  { --uc-accent-2: #12A594; --uc-accent-2-soft: rgba(18, 165, 148, .18); }   /* teal — liquidity */
.alx-uc--inv { --uc-accent-2: var(--c-green-alt); --uc-accent-2-soft: rgba(25, 185, 52, .18); } /* green — cash */
.alx-uc--blr { --uc-accent-2: #19B934; --uc-accent-2-soft: rgba(25, 185, 52, .18); }    /* green — approved */
.alx-uc--ecf { --uc-accent-2: #E0A020; --uc-accent-2-soft: rgba(224, 160, 32, .18); }    /* gold — equity / ownership */
:root[data-theme="dark"] .alx-uc--fx { --uc-accent-soft: rgba(91, 155, 216, .16); }

/* ══════════════════════════════════════════════════════════ HERO ═══ */
.alx-uc--fx .alx-uc-hero {
  position: relative;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--uc-accent-soft), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, var(--uc-accent-2-soft), transparent 55%),
    linear-gradient(135deg, var(--c-card-2), var(--c-bg-muted));
}
.alx-uc--fx .alx-uc-hero::before,
.alx-uc--fx .alx-uc-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(48px); opacity: .5; pointer-events: none; z-index: 0;
}
.alx-uc--fx .alx-uc-hero::before {
  width: 340px; height: 340px; top: -120px; right: -60px;
  background: radial-gradient(circle at 30% 30%, var(--uc-accent), transparent 70%);
  animation: ucFloatA 15s ease-in-out infinite;
}
.alx-uc--fx .alx-uc-hero::after {
  width: 300px; height: 300px; bottom: -120px; left: -40px;
  background: radial-gradient(circle at 30% 30%, var(--uc-accent-2), transparent 70%);
  animation: ucFloatB 19s ease-in-out infinite;
}
.alx-uc--fx .alx-uc-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 3vw, 44px); align-items: center;
}
.alx-uc--fx .alx-uc-hero-copy { min-width: 0; }

/* gradient headline */
.alx-uc--fx .alx-uc-h1 {
  background: linear-gradient(100deg, var(--c-text) 0%, var(--c-text) 52%, var(--uc-accent) 76%, var(--uc-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--c-text);
}
:root[data-theme="dark"] .alx-uc--fx .alx-uc-h1 {
  background: linear-gradient(100deg, #fff 0%, #fff 48%, var(--uc-accent) 78%, var(--uc-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* chips */
.alx-uc--fx .alx-uc-chip {
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.alx-uc--fx .alx-uc-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--uc-accent); }
.alx-uc--fx .alx-uc-chip::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
}
:root[data-theme="dark"] .alx-uc--fx .alx-uc-chip::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); }
.alx-uc--fx .alx-uc-chip:first-child { border-color: var(--uc-accent-2); }
.alx-uc--fx .alx-uc-chip:first-child svg { stroke: var(--uc-accent-2); }

/* primary CTA sheen */
.alx-uc--fx .alx-uc-btn--primary { position: relative; overflow: hidden; }
.alx-uc--fx .alx-uc-btn--primary::after {
  content: ""; position: absolute; top: 0; left: -150%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
}

/* ═══════════════════ SIGNATURE ART (shared primitives) ═══════════════════ */
.alx-uc--fx .alx-uc-art {
  position: relative; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 1 / 1;
}
.alx-uc--fx .alx-uc-art svg { width: 100%; height: 100%; overflow: visible; }
.alx-uc--fx .alx-uc-art .halo {
  fill: none; stroke: var(--uc-accent); stroke-opacity: .26; stroke-width: 1.4;
  stroke-dasharray: 4 8; transform-origin: 130px 130px; animation: ucSpin 44s linear infinite;
}
.alx-uc--fx .alx-uc-art .lbl { font-family: var(--font-display, 'Poppins', sans-serif); font-weight: 700; font-size: 11px; fill: var(--c-muted); }
.alx-uc--fx .alx-uc-art .flow { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 10 90; }
.alx-uc--fx .alx-uc-art .flow.a1 { stroke: var(--uc-accent); animation: ucDash 2.2s linear infinite; }
.alx-uc--fx .alx-uc-art .flow.a2 { stroke: var(--uc-accent-2); animation: ucDash 2.2s linear infinite .4s; }

/* -- Working Capital: arched bridge over the cash-flow river -- */
.alx-uc--wc .alx-uc-art .river { fill: var(--uc-accent-2-soft); stroke: none; }
.alx-uc--wc .alx-uc-art .wave { fill: none; stroke: var(--uc-accent-2); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.alx-uc--wc .alx-uc-art .deck { fill: none; stroke: var(--uc-accent); stroke-width: 5; stroke-linecap: round; }
.alx-uc--wc .alx-uc-art .pier { stroke: var(--uc-accent); stroke-width: 4; stroke-linecap: round; opacity: .85; }
.alx-uc--wc .alx-uc-art .arch {
  fill: none; stroke: var(--uc-accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 190; stroke-dashoffset: 190; transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
}
.alx-uc--wc .alx-uc-art.is-in .arch { stroke-dashoffset: 0; }
.alx-uc--wc .alx-uc-art .gaplbl { fill: var(--c-muted); }
.alx-uc--wc .alx-uc-art .coin { fill: var(--uc-accent-2); stroke: #fff; stroke-width: 1.5; }
.alx-uc--wc .alx-uc-art .coin text { fill: #fff; font-family: var(--font-display,'Poppins',sans-serif); font-weight: 700; font-size: 12px; text-anchor: middle; }

/* -- Invoice Financing: invoice -> cash -- */
.alx-uc--inv .alx-uc-art .doc { fill: var(--c-card); stroke: var(--uc-accent); stroke-width: 2; }
.alx-uc--inv .alx-uc-art .docline { stroke: var(--c-line); stroke-width: 3; stroke-linecap: round; }
.alx-uc--inv .alx-uc-art .docline.accent { stroke: var(--uc-accent); }
.alx-uc--inv .alx-uc-art .cash { fill: var(--uc-accent-2-soft); stroke: var(--uc-accent-2); stroke-width: 2; }
.alx-uc--inv .alx-uc-art .cashsign { fill: var(--uc-accent-2); font-family: var(--font-display,'Poppins',sans-serif); font-weight: 700; font-size: 20px; text-anchor: middle; }
.alx-uc--inv .alx-uc-art .revolve {
  fill: none; stroke: var(--uc-accent-2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 6;
  transform-origin: 130px 130px; animation: ucSpin 12s linear infinite;
}

/* -- Bank Loan Rejected: closed door -> approved path -- */
.alx-uc--blr { --uc-reject: #E4572E; }
.alx-uc--blr .alx-uc-art .bank { fill: var(--c-card-2); stroke: var(--c-line); stroke-width: 1.5; }
.alx-uc--blr .alx-uc-art .bankcol { stroke: var(--c-muted); stroke-width: 3; stroke-linecap: round; }
.alx-uc--blr .alx-uc-art .xbadge { fill: var(--c-card); stroke: var(--uc-reject); stroke-width: 2; }
.alx-uc--blr .alx-uc-art .xmark { stroke: var(--uc-reject); stroke-width: 3; stroke-linecap: round; }
.alx-uc--blr .alx-uc-art .reroute {
  fill: none; stroke: var(--uc-accent-2); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 210; stroke-dashoffset: 210; transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
.alx-uc--blr .alx-uc-art.is-in .reroute { stroke-dashoffset: 0; }
.alx-uc--blr .alx-uc-art .okbadge { fill: var(--uc-accent-2-soft); stroke: var(--uc-accent-2); stroke-width: 2; }
.alx-uc--blr .alx-uc-art .okmark { fill: none; stroke: var(--uc-accent-2); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* -- Equity Crowdfunding: a crowd of investors -> a growing equity stake -- */
.alx-uc--ecf .alx-uc-art .spoke { stroke: var(--uc-accent-2); stroke-width: 1.6; opacity: .35; }
.alx-uc--ecf .alx-uc-art .inv { fill: var(--uc-accent-2-soft); stroke: var(--uc-accent-2); stroke-width: 2; }
.alx-uc--ecf .alx-uc-art .pie { fill: var(--c-card); stroke: var(--c-line); stroke-width: 1.5; }
.alx-uc--ecf .alx-uc-art .ringtrack { fill: none; stroke: var(--c-line); stroke-width: 7; }
.alx-uc--ecf .alx-uc-art .ringfill {
  fill: none; stroke: var(--uc-accent-2); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 251; stroke-dashoffset: 251;
  transform: rotate(-90deg); transform-origin: 130px 130px;
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
.alx-uc--ecf .alx-uc-art.is-in .ringfill { stroke-dashoffset: 96; }
.alx-uc--ecf .alx-uc-art .trend { fill: none; stroke: var(--uc-accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.alx-uc--ecf .alx-uc-art .corelabel { font-family: var(--font-display,'Poppins',sans-serif); font-weight: 700; text-anchor: middle; fill: var(--c-muted); font-size: 10px; letter-spacing: .04em; }

/* ═══════════════════ SCROLL REVEAL ═══════════════════ */
.alx-uc--fx .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .alx-uc--fx.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .alx-uc--fx.js-reveal .reveal.is-in { opacity: 1; transform: none; }
  .alx-uc--fx.js-reveal .reveal.d1 { transition-delay: .08s; }
  .alx-uc--fx.js-reveal .reveal.d2 { transition-delay: .16s; }
  .alx-uc--fx.js-reveal .reveal.d3 { transition-delay: .24s; }
}

/* ═══════════════════ STEP LADDER + CARDS ═══════════════════ */
.alx-uc--fx .alx-uc-step { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.alx-uc--fx .alx-uc-step:hover { transform: translateX(3px); border-color: var(--uc-accent); box-shadow: var(--shadow-hover); }
.alx-uc--fx .alx-uc-step .n { background: linear-gradient(135deg, var(--uc-accent), var(--c-blue-variant)); box-shadow: 0 0 0 0 var(--uc-accent-soft); }
.alx-uc--fx .alx-uc-step:last-child .n { background: linear-gradient(135deg, var(--uc-accent-2), var(--uc-accent)); }
@media (prefers-reduced-motion: no-preference) {
  .alx-uc--fx .alx-uc-step .n { animation: ucPulse 2.6s ease-out infinite; }
  .alx-uc--fx .alx-uc-step:nth-child(2) .n { animation-delay: .5s; }
  .alx-uc--fx .alx-uc-step:nth-child(3) .n { animation-delay: 1s; }
  .alx-uc--fx .alx-uc-step:nth-child(4) .n { animation-delay: 1.5s; }
}
/* generic card hover lift for the pages' bespoke cards */
.alx-uc--fx .alx-uc-scenario,
.alx-uc--fx .alx-uc-plan-step,
.alx-uc--fx .alx-ecf-col,
.alx-uc--fx .alx-ecf-tl { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.alx-uc--fx .alx-uc-scenario:hover,
.alx-uc--fx .alx-uc-plan-step:hover,
.alx-uc--fx .alx-ecf-col:hover,
.alx-uc--fx .alx-ecf-tl:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--uc-accent); }

/* callout glow */
.alx-uc--fx .alx-uc-callout { position: relative; overflow: hidden; border-left-color: var(--uc-accent-2); }
.alx-uc--fx .alx-uc-callout::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px;
  background: radial-gradient(circle, var(--uc-accent-2-soft), transparent 70%); pointer-events: none;
}
.alx-uc--fx .alx-uc-callout .ic { background: var(--uc-accent-2-soft); }
.alx-uc--fx .alx-uc-callout .ic svg { fill: var(--uc-accent-2); }

/* related tiles arrow */
.alx-uc--fx .alx-uc-link { position: relative; }
.alx-uc--fx .alx-uc-link .t::after {
  content: "\2192"; display: inline-block; margin-left: 6px; color: var(--uc-accent);
  opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease;
}
.alx-uc--fx .alx-uc-link:hover .t::after { opacity: 1; transform: translateX(0); }

/* ═══════════════════ CTA BAND ═══════════════════ */
.alx-uc--fx .alx-uc-cta {
  position: relative; overflow: hidden;
  background: radial-gradient(80% 140% at 100% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(135deg, var(--c-blue), var(--c-blue-variant));
}
.alx-uc--fx .alx-uc-cta::before {
  content: ""; position: absolute; inset: -60% -20% auto -20%; height: 320px;
  background: radial-gradient(circle, var(--uc-accent-2-soft), transparent 60%); pointer-events: none;
  animation: ucFloatB 20s ease-in-out infinite;
}
.alx-uc--fx .alx-uc-cta > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .alx-uc--fx .alx-uc-cta .alx-uc-btn--primary::after { animation: ucSheen 3.4s ease-in-out infinite 1s; }
  .alx-uc--fx .alx-uc-btn--primary:hover::after { animation: ucSheen 1s ease; }
  .alx-uc--fx .alx-uc-chip:hover::after { animation: ucSheen 1s ease; }
}

/* ── Keyframes ── */
@keyframes ucFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px,22px) scale(1.08); } }
@keyframes ucFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.1); } }
@keyframes ucSpin { to { transform: rotate(360deg); } }
@keyframes ucDash { to { stroke-dashoffset: -100; } }
@keyframes ucPulse { 0% { box-shadow: 0 0 0 0 var(--uc-accent-soft); } 70% { box-shadow: 0 0 0 12px rgba(28,88,142,0); } 100% { box-shadow: 0 0 0 0 rgba(28,88,142,0); } }
@keyframes ucSheen { 0% { left: -150%; } 60%,100% { left: 150%; } }

/* ── Responsive ── */
@media (max-width: 820px) {
  .alx-uc--fx .alx-uc-hero-inner { grid-template-columns: 1fr; }
  .alx-uc--fx .alx-uc-art { max-width: 280px; margin-top: var(--sp-md); order: -1; }
}

/* ── Reduced motion: kill looping animation ── */
@media (prefers-reduced-motion: reduce) {
  .alx-uc--fx .alx-uc-hero::before,
  .alx-uc--fx .alx-uc-hero::after,
  .alx-uc--fx .alx-uc-art .halo,
  .alx-uc--fx .alx-uc-art .flow,
  .alx-uc--fx .alx-uc-art .revolve,
  .alx-uc--fx .alx-uc-step .n,
  .alx-uc--fx .alx-uc-cta::before,
  .alx-uc--fx .alx-uc-chip::after,
  .alx-uc--fx .alx-uc-btn--primary::after { animation: none !important; }
  .alx-uc--fx .alx-uc-art .arch,
  .alx-uc--fx .alx-uc-art .reroute,
  .alx-uc--fx .alx-uc-art .ringfill { transition: none; }
}