/**
 * smefinancing-mycif.css — MyCIF-only visual "eyecatcher" layer.
 *
 * Loaded IN ADDITION to smefinancing-usecase.css and scoped entirely under the
 * page modifier `.alx-uc--mycif`, so the three sibling use-case pages
 * (working-capital, invoice-financing, bank-loan-rejected) are NOT affected.
 *
 * Adds: an animated gradient-mesh hero with floating blobs and a signature
 * "co-investment flow" SVG (government + private streams merging into a filling
 * campaign bar), gradient headline, shimmering chips, a connected step ladder,
 * a glowing callout and an animated CTA band. Built on the shared tokens.css
 * variables, dark-mode aware and fully reduced-motion aware.
 */

/* ── Local accents (gold = the government/MyCIF stream) ── */
.alx-uc--mycif {
  --mycif-gold: #EAA032;
  --mycif-gold-soft: rgba(234, 160, 50, .16);
  --mycif-blue-soft: rgba(28, 88, 142, .14);
}
:root[data-theme="dark"] .alx-uc--mycif {
  --mycif-gold: #FFB84D;
  --mycif-gold-soft: rgba(255, 184, 77, .16);
  --mycif-blue-soft: rgba(91, 155, 216, .16);
}

/* ══════════════════════════════════════════════════════════
   HERO — animated mesh + two-column (copy + co-investment art)
   ══════════════════════════════════════════════════════════ */
.alx-uc--mycif .alx-uc-hero {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--mycif-blue-soft), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, var(--mycif-gold-soft), transparent 55%),
    linear-gradient(135deg, var(--c-card-2), var(--c-bg-muted));
}
/* soft animated mesh blobs */
.alx-uc--mycif .alx-uc-hero::before,
.alx-uc--mycif .alx-uc-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.alx-uc--mycif .alx-uc-hero::before {
  width: 340px; height: 340px;
  top: -120px; right: -60px;
  background: radial-gradient(circle at 30% 30%, var(--c-blue), transparent 70%);
  animation: mycifFloatA 14s ease-in-out infinite;
}
.alx-uc--mycif .alx-uc-hero::after {
  width: 300px; height: 300px;
  bottom: -120px; left: -40px;
  background: radial-gradient(circle at 30% 30%, var(--mycif-gold), transparent 70%);
  animation: mycifFloatB 18s ease-in-out infinite;
}
/* faint engraved grid overlay for a "government / official" texture */
.alx-uc--mycif .alx-uc-hero {
  position: relative;
}
.alx-uc--mycif .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--mycif .alx-uc-hero-copy { min-width: 0; }

/* gradient headline highlight */
.alx-uc--mycif .alx-uc-h1 {
  background: linear-gradient(100deg, var(--c-text) 0%, var(--c-text) 55%, var(--c-blue) 78%, var(--mycif-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text); /* fallback */
}
:root[data-theme="dark"] .alx-uc--mycif .alx-uc-h1 {
  background: linear-gradient(100deg, #fff 0%, #fff 50%, var(--c-blue) 80%, var(--mycif-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

/* primary CTA: animated conic glow ring on hover */
.alx-uc--mycif .alx-uc-btn--primary { position: relative; overflow: hidden; }
.alx-uc--mycif .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 CO-INVESTMENT ART (inline SVG in hero)
   ══════════════════════════════════════════════════════════ */
.alx-uc--mycif .alx-uc-art {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.alx-uc--mycif .alx-uc-art svg { width: 100%; height: 100%; overflow: visible; }

/* rotating dashed halo behind the diagram */
.alx-uc--mycif .alx-uc-art .halo {
  fill: none;
  stroke: var(--c-blue);
  stroke-opacity: .28;
  stroke-width: 1.4;
  stroke-dasharray: 4 8;
  transform-origin: 130px 130px;
  animation: mycifSpin 40s linear infinite;
}
/* two source nodes */
.alx-uc--mycif .alx-uc-art .node circle { stroke-width: 2; }
.alx-uc--mycif .alx-uc-art .node.gov circle { fill: var(--mycif-gold-soft); stroke: var(--mycif-gold); }
.alx-uc--mycif .alx-uc-art .node.pri circle { fill: var(--c-active); stroke: var(--c-blue); }
.alx-uc--mycif .alx-uc-art .node .ic { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alx-uc--mycif .alx-uc-art .node.gov .ic { stroke: var(--mycif-gold); }
.alx-uc--mycif .alx-uc-art .node.pri .ic { stroke: var(--c-blue); }
.alx-uc--mycif .alx-uc-art .node .lbl {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700; font-size: 11px;
  fill: var(--c-muted);
}
/* flow streams */
.alx-uc--mycif .alx-uc-art .stream { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.alx-uc--mycif .alx-uc-art .stream.gov { stroke: var(--mycif-gold); }
.alx-uc--mycif .alx-uc-art .stream.pri { stroke: var(--c-blue); }
.alx-uc--mycif .alx-uc-art .flow {
  fill: none; stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 10 90;
}
.alx-uc--mycif .alx-uc-art .flow.gov { stroke: var(--mycif-gold); animation: mycifDash 2.2s linear infinite; }
.alx-uc--mycif .alx-uc-art .flow.pri { stroke: var(--c-blue); animation: mycifDash 2.2s linear infinite .4s; }
/* central campaign disc + filling ring */
.alx-uc--mycif .alx-uc-art .core { fill: var(--c-card); stroke: var(--c-line); stroke-width: 1.5; }
.alx-uc--mycif .alx-uc-art .ringtrack { fill: none; stroke: var(--c-line); stroke-width: 7; }
.alx-uc--mycif .alx-uc-art .ringfill {
  fill: none; stroke: var(--c-green-alt); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 251;            /* 2*pi*40 */
  stroke-dashoffset: 251;
  transform: rotate(-90deg);
  transform-origin: 130px 130px;
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
.alx-uc--mycif .alx-uc-art.is-in .ringfill { stroke-dashoffset: 65; } /* ~74% funded */
.alx-uc--mycif .alx-uc-art .corelabel {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700; text-anchor: middle;
}
.alx-uc--mycif .alx-uc-art .corelabel.big { font-size: 26px; fill: var(--c-text); }
.alx-uc--mycif .alx-uc-art .corelabel.small { font-size: 10px; fill: var(--c-muted); letter-spacing: .04em; }

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

/* ══════════════════════════════════════════════════════════
   STEP LADDER — connecting gradient line + pulsing badges
   ══════════════════════════════════════════════════════════ */
.alx-uc--mycif .alx-uc-steps { position: relative; }
.alx-uc--mycif .alx-uc-step {
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.alx-uc--mycif .alx-uc-step:hover {
  transform: translateX(3px);
  border-color: var(--c-blue);
  box-shadow: var(--shadow-hover);
}
.alx-uc--mycif .alx-uc-step .n {
  position: relative;
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-variant));
  box-shadow: 0 0 0 0 rgba(28, 88, 142, .35);
}
.alx-uc--mycif .alx-uc-step:last-child .n {
  background: linear-gradient(135deg, var(--mycif-gold), #d98a1e);
}
@media (prefers-reduced-motion: no-preference) {
  .alx-uc--mycif .alx-uc-step .n { animation: mycifPulse 2.6s ease-out infinite; }
  .alx-uc--mycif .alx-uc-step:nth-child(2) .n { animation-delay: .5s; }
  .alx-uc--mycif .alx-uc-step:nth-child(3) .n { animation-delay: 1s; }
}

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

/* checklist ticks pop on hover */
.alx-uc--mycif .alx-uc-check .ci { transition: transform .18s ease; }
.alx-uc--mycif .alx-uc-check .ci:hover { transform: translateX(3px); }

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

/* ══════════════════════════════════════════════════════════
   CTA BAND — animated mesh + shimmering primary button
   ══════════════════════════════════════════════════════════ */
.alx-uc--mycif .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--mycif .alx-uc-cta::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 320px;
  background: radial-gradient(circle, rgba(255,184,77,.28), transparent 60%);
  pointer-events: none;
  animation: mycifFloatB 20s ease-in-out infinite;
}
.alx-uc--mycif .alx-uc-cta > * { position: relative; z-index: 1; }
.alx-uc--mycif .alx-uc-cta .alx-uc-btn--primary { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .alx-uc--mycif .alx-uc-cta .alx-uc-btn--primary::after { animation: mycifSheen 3.4s ease-in-out infinite 1s; }
  .alx-uc--mycif .alx-uc-btn--primary:hover::after { animation: mycifSheen 1s ease; }
  .alx-uc--mycif .alx-uc-chip:hover::after { animation: mycifSheen 1s ease; }
}

/* ── Keyframes ── */
@keyframes mycifFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-26px, 22px) scale(1.08); }
}
@keyframes mycifFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -18px) scale(1.1); }
}
@keyframes mycifSpin {
  to { transform: rotate(360deg); }
}
@keyframes mycifDash {
  to { stroke-dashoffset: -100; }
}
@keyframes mycifPulse {
  0% { box-shadow: 0 0 0 0 rgba(28, 88, 142, .35); }
  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 mycifSheen {
  0% { left: -150%; }
  60%, 100% { left: 150%; }
}

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

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