/* ==========================================
   ULTRAKIT SCROLL STACK CARDS
   ========================================== */
.ultrakit-fst-wrapper { --fst-top: 110px; --fst-step: 0px; --fst-gap: 55vh; --fst-ratio: 1.78; --fst-w: 1000px; --fst-r: 28px; --fst-acc: #6c5ce7; --fst-depth: .5; --fst-n: 6; position: relative; width: 100%; box-sizing: border-box; font-family: inherit; }
.ultrakit-fst-wrapper *, .ultrakit-fst-wrapper *::before, .ultrakit-fst-wrapper *::after { box-sizing: border-box; }

.fst-stack { position: relative; }
.fst-item { position: sticky; top: calc(var(--fst-top) + var(--i) * var(--fst-step)); margin-bottom: var(--fst-gap); }
.fst-item:last-child { margin-bottom: 0; }
.fst-card { --p: 0; --q: 1; width: min(100%, var(--fst-w)); margin: 0 auto; transform-origin: 50% 0; will-change: transform, filter; }
.fst-media { position: relative; display: block; aspect-ratio: var(--fst-ratio); border-radius: var(--fst-r); overflow: hidden; background: #14142b; text-decoration: none !important; }
.fst-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fst-media .uks { height: 100%; aspect-ratio: auto; border-radius: 0; }
.fst-border .fst-media { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.fst-sh-soft .fst-media { box-shadow: 0 30px 60px -30px rgba(20,20,43,.45); }
.fst-sh-strong .fst-media { box-shadow: 0 40px 90px -24px rgba(20,20,43,.7), 0 0 0 1px rgba(20,20,43,.06); }
.fst-sh-soft.fst-border .fst-media { box-shadow: 0 30px 60px -30px rgba(20,20,43,.45), inset 0 0 0 1px rgba(255,255,255,.35); }

/* captions */
.fst-cap { position: absolute; left: 22px; bottom: 22px; right: 22px; display: flex; align-items: center; gap: 14px; max-width: 460px; padding: 14px 20px; border-radius: 18px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); color: #14142b; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.fst-cap b, .fst-cap-below b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.fst-cap span:not(.fst-no), .fst-cap-below span:not(.fst-no) { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; opacity: .72; }
.fst-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 12px; background: var(--fst-acc); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.fst-cap-below { display: flex; align-items: flex-start; gap: 14px; padding: 18px 6px 0; color: #14142b; }

/* ---------- variations (JS feeds --p: how far the NEXT card has covered this one; --q: how far this card has risen into place) ---------- */
.fst-v-stack .fst-card { transform: scale(calc(1 - var(--p) * .12 * var(--fst-depth) * 2)); filter: brightness(calc(1 - var(--p) * .22 * var(--fst-depth) * 2)); }

.fst-v-peek .fst-card { transform: scale(calc(1 - var(--p) * .05 * var(--fst-depth) * 2)); filter: brightness(calc(1 - var(--p) * .12 * var(--fst-depth) * 2)); }

.fst-v-fan .fst-card { transform: rotate(calc(var(--rot) * (1 - var(--q)) + var(--rot) * .35 * var(--p))) scale(calc(1 - var(--p) * .08 * var(--fst-depth) * 2)); filter: brightness(calc(1 - var(--p) * .15 * var(--fst-depth) * 2)); }
.fst-v-fan .fst-media { border-radius: calc(var(--fst-r) * .8); box-shadow: 0 30px 60px -26px rgba(20,20,43,.55), 0 0 0 10px #fff; }

.fst-v-rise .fst-card { transform: none; filter: none; }
.fst-v-rise .fst-media { box-shadow: 0 -24px 60px -20px rgba(20,20,43,.5); }

.fst-v-zoom .fst-card { transform: scale(calc(1 - var(--p) * .22 * var(--fst-depth) * 2)) translateY(calc(var(--p) * -24px)); filter: blur(calc(var(--p) * 6px * var(--fst-depth) * 2)) brightness(calc(1 - var(--p) * .3 * var(--fst-depth) * 2)); opacity: calc(1 - var(--p) * .35); }

/* side progress dots */
.fst-dots { position: fixed; right: 26px; top: 50%; z-index: 30; display: none; flex-direction: column; gap: 12px; transform: translateY(-50%); }
.fst-dots.is-live { display: flex; }
.fst-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(20,20,43,.22); transition: transform .3s, background .3s; }
.fst-dots i.is-on { background: var(--fst-acc); transform: scale(1.5); }

@media (max-width: 1024px) { .fst-item { top: calc(var(--fst-top) * .8 + var(--i) * var(--fst-step)); } }
@media (max-width: 767px) {
	.fst-cap { left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; max-width: none; }
	.fst-cap b { font-size: 14.5px; } .fst-cap span:not(.fst-no) { font-size: 12px; }
	.fst-no { min-width: 32px; height: 32px; font-size: 12px; }
	.fst-media { aspect-ratio: min(var(--fst-ratio), 1.35); }
	.fst-dots { right: 10px; }
	.fst-v-fan .fst-media { box-shadow: 0 20px 40px -20px rgba(20,20,43,.55), 0 0 0 6px #fff; }
}
@media (prefers-reduced-motion: reduce) { .fst-card { transform: none !important; filter: none !important; opacity: 1 !important; } }