/* Xchainge case study, part 3: section labels, feature-tile art and its looping motion. Split from case-xchainge-2.css. */
/* No dot before the small section labels on this page. */
.cs-kicker::before { display: none; }

/* Business Insights: square dashboard render bleeds to the card's top edge and floats gently */
.xc-feat__shot { margin: -28px -26px 6px; aspect-ratio: 1; overflow: hidden; border-radius: 22px 22px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.xc-feat__shot img { display: block; width: 100%; height: 100%; animation: xc-insights-float 6s ease-in-out infinite; }
@keyframes xc-insights-float {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-8px) scale(1.02); filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) { .xc-feat__shot img { animation: none; } }

/* feature art at 200px tall: square renders shown whole (200x200, centred), edges faded into the card */
.xc-feat__shot { height: 200px; aspect-ratio: auto; display: flex; justify-content: center; margin: -28px -26px 10px; border-radius: 22px 22px 0 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.xc-feat__shot img { width: auto; height: 100%; aspect-ratio: 1; }
/* landscape renders (1.825:1): full card width, natural height, never upscaled */
.xc-feat__shot--wide { height: auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.xc-feat__shot--wide img { width: 100%; height: auto; aspect-ratio: auto; max-width: 365px; animation: none; }
.xc-feat__shot--wide img[width="1694"] { max-width: 1694px; }

/* ---------- feature tiles: looping art motion ---------- */
.xc-feat { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.xc-feat:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgb(6 40 54 / 55%); }
.xc-art svg * { transform-box: fill-box; }
.xc-art .sh { animation: xc-sh 4s ease-in-out infinite; }
@keyframes xc-sh { 50% { opacity: .3; } }
/* 1 Business Insights: bars rise, trend draws, dashed forecast marches */
.xc-feat:nth-child(1) .mf rect, .xc-feat:nth-child(1) .af { transform-origin: 50% 100%; animation: xc-bar 4s cubic-bezier(.3,.7,.2,1) infinite; }
.xc-feat:nth-child(1) .mf rect:nth-child(2) { animation-delay: .1s; }
.xc-feat:nth-child(1) .mf rect:nth-child(3) { animation-delay: .2s; }
.xc-feat:nth-child(1) .mf rect:nth-child(4) { animation-delay: .3s; }
.xc-feat:nth-child(1) .af { animation-delay: .4s; }
@keyframes xc-bar { 0% { transform: scaleY(.15); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
.xc-feat:nth-child(1) .a:not(.ds) { stroke-dasharray: 200; animation: xc-draw 4s ease-in-out infinite; }
@keyframes xc-draw { 0% { stroke-dashoffset: 200; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } }
.xc-art .ds { animation: xc-march 1.2s linear infinite; }
@keyframes xc-march { to { stroke-dashoffset: -20; } }
.xc-art .ad { transform-origin: center; animation: xc-pulse 2s ease-in-out infinite; }
@keyframes xc-pulse { 50% { transform: scale(1.5); } }
.xc-feat:nth-child(1) .k { animation: xc-nudge 2s ease-in-out infinite; }
@keyframes xc-nudge { 50% { transform: translate(3px, -3px); } }
/* 2 Lending: balances fill, back sheet sways, plus button turns */
.xc-feat:nth-child(2) .af { transform-origin: 0 50%; animation: xc-fill 4.5s cubic-bezier(.3,.7,.2,1) infinite; }
.xc-feat:nth-child(2) .af:nth-child(8) { animation-delay: .15s; }
.xc-feat:nth-child(2) .af:nth-child(10) { animation-delay: .3s; }
@keyframes xc-fill { 0% { transform: scaleX(.1); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.1); } }
.xc-feat:nth-child(2) .g.o { animation: xc-sway 5s ease-in-out infinite; }
@keyframes xc-sway { 50% { transform: rotate(-3deg) translateY(-3px); } }
.xc-feat:nth-child(2) circle.a { animation: xc-bob 3s ease-in-out infinite; }
.xc-feat:nth-child(2) path.a:not(.ds) { transform-origin: center; animation: xc-spin 3s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes xc-spin { 0%, 40% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(45deg); } 60%, 100% { transform: translateY(0) rotate(90deg); } }
@keyframes xc-bob { 50% { transform: translateY(-4px); } }
/* 3 Foreign Exchange: currencies trade, arrows flow, confirm pill pulses */
.xc-feat:nth-child(3) circle.g, .xc-feat:nth-child(3) .t { animation: xc-bob 3.2s ease-in-out infinite; }
.xc-feat:nth-child(3) circle.g:nth-of-type(2), .xc-feat:nth-child(3) .t:nth-of-type(2) { animation-delay: -1.6s; }
.xc-feat:nth-child(3) path.a, .xc-feat:nth-child(3) path.k { stroke-dasharray: 90; animation: xc-flow 2.4s ease-in-out infinite; }
.xc-feat:nth-child(3) path.k { animation-delay: 1.2s; }
@keyframes xc-flow { 0% { stroke-dashoffset: 90; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -90; } }
.xc-feat:nth-child(3) .kf { transform-origin: center; animation: xc-pill 2.4s ease-in-out infinite; }
@keyframes xc-pill { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } }
/* 4 Business Health Score: arc sweeps, needle swings, checklist ticks */
.xc-feat:nth-child(4) path.a.w { stroke-dasharray: 240; animation: xc-gauge 5s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes xc-gauge { 0% { stroke-dashoffset: 240; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 240; } }
.xc-feat:nth-child(4) path.a:not(.w) { transform-box: view-box; transform-origin: 160px 146px; animation: xc-needle 5s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes xc-needle { 0% { transform: rotate(-90deg); } 40%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
.xc-feat:nth-child(4) .kf { transform-origin: center; animation: xc-tick 5s ease-in-out infinite; }
.xc-feat:nth-child(4) .kf:nth-of-type(3) { animation-delay: .3s; }
@keyframes xc-tick { 0%, 30% { transform: scale(.4); opacity: .4; } 40%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.4); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .xc-art svg *, .xc-feat { animation: none !important; transition: none !important; } }

/* feature cards: hover lift + looping art motion */
.xc-feat { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.xc-feat:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgb(5 30 45 / 45%); }
.xc-art svg * { transform-box: fill-box; }
.xc-art .sh { animation: xc-sh 4s ease-in-out infinite; }
@keyframes xc-sh { 50% { opacity: .3; } }
/* 1 insights: bars rise, forecast line marches, dot pulses */
.xc-feat:nth-child(1) .mf rect, .xc-feat:nth-child(1) .af { transform-origin: 50% 100%; animation: xc-bar 3.2s cubic-bezier(.5,0,.3,1) infinite; }
.xc-feat:nth-child(1) .mf rect:nth-child(2) { animation-delay: .12s; }
.xc-feat:nth-child(1) .mf rect:nth-child(3) { animation-delay: .24s; }
.xc-feat:nth-child(1) .mf rect:nth-child(4) { animation-delay: .36s; }
.xc-feat:nth-child(1) .af { animation-delay: .48s; }
@keyframes xc-bar { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.55); } }
.xc-art .ds { animation: xc-march 1.2s linear infinite; }
@keyframes xc-march { to { stroke-dashoffset: -20; } }
.xc-art .ad { transform-origin: center; animation: xc-pulse 1.6s ease-in-out infinite; }
@keyframes xc-pulse { 50% { transform: scale(1.5); } }
.xc-feat:nth-child(1) .k { animation: xc-nudge 2.4s ease-in-out infinite; }
@keyframes xc-nudge { 50% { transform: translate(3px, -3px); } }
/* 2 lending: progress fills, back card sways, plus badge spins */
.xc-feat:nth-child(2) .af { transform-origin: 0 50%; animation: xc-fill 3.6s cubic-bezier(.5,0,.3,1) infinite; }
.xc-feat:nth-child(2) .af:nth-of-type(4) { animation-delay: .2s; }
.xc-feat:nth-child(2) .af:nth-of-type(6) { animation-delay: .4s; }
@keyframes xc-fill { 0% { transform: scaleX(.15); } 50%, 100% { transform: scaleX(1); } }
.xc-feat:nth-child(2) .g.o { animation: xc-sway 5s ease-in-out infinite; }
@keyframes xc-sway { 50% { transform: rotate(-4deg) translateY(-4px); } }
.xc-feat:nth-child(2) circle.g.a, .xc-feat:nth-child(2) circle.g.a + path { transform-origin: 296px 64px; transform-box: view-box; animation: xc-spin 6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes xc-spin { 0%, 30% { transform: rotate(0); } 50%, 100% { transform: rotate(180deg); } }
/* 3 FX: coins bob in turn, arrows flow */
.xc-feat:nth-child(3) circle.g, .xc-feat:nth-child(3) .t { animation: xc-bob 3s ease-in-out infinite; }
.xc-feat:nth-child(3) circle.g:nth-of-type(2), .xc-feat:nth-child(3) .t:nth-of-type(2) { animation-delay: -1.5s; }
@keyframes xc-bob { 50% { transform: translateY(-6px); } }
.xc-feat:nth-child(3) path.a, .xc-feat:nth-child(3) path.k { stroke-dasharray: 8 6; animation: xc-march 1s linear infinite; }
.xc-feat:nth-child(3) .kf { transform-origin: center; animation: xc-pill 2.4s ease-in-out infinite; }
@keyframes xc-pill { 50% { transform: scaleX(1.18); } }
/* 4 health score: gauge draws, needle settles */
.xc-feat:nth-child(4) path.a.w { stroke-dasharray: 180; animation: xc-gauge 4s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes xc-gauge { 0% { stroke-dashoffset: 180; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 180; } }
.xc-feat:nth-child(4) path.a:not(.w) { transform-origin: 160px 146px; transform-box: view-box; animation: xc-needle 4s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes xc-needle { 0% { transform: rotate(-135deg); } 45% { transform: rotate(4deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(-135deg); } }
.xc-feat:nth-child(4) .kf { animation: xc-blink 2s ease-in-out infinite; }
.xc-feat:nth-child(4) .kf + .kf { animation-delay: .5s; }
@keyframes xc-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .xc-art svg *, .xc-feat { animation: none !important; transition: none; } .xc-feat:hover { transform: none; } }