/* ==========================================================================
   feature-demos.css — animated product interfaces in the hero of
   /features/<slug>/ (templates/landings/features/demos/<slug>.html).
   Loaded only by landings/features/detail.html via {% block styles %}.

   Principles (see gwc-design-blocks → A2 feature hero):
   - one looping "story" per page (12s cycle) built from 8 reveal slots
     (.fd-s1 … .fd-s8): elements enter in order, hold, fade together, repeat;
   - only transform / opacity animate (compositor-safe), no layout thrash;
   - everything is sized in em and the stage font-size follows the container
     width (cqw), so the 1000-unit design scales as one picture;
   - prefers-reduced-motion: the final state is shown, no movement.
   ========================================================================== */

.fd {
	container-type: inline-size;
	--fd-ink: #0c0c0c;
	--fd-muted: #9396ad;
	--fd-line: #eff2fc;
	--fd-soft: #f5f7fc;
	--fd-brand: #ff0051;
	--fd-brand-2: #e835ce;
	--fd-ok: #33b36b;
	--fd-warn: #efb45c;
	--fd-info: #5ca8ef;
	--fd-cycle: 12s;
	color: var(--fd-ink);
	font-family: var(--gc-font-sans-serif);
	font-weight: 400;
	line-height: 1.3;
}
.fd-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 560;
	overflow: hidden;
	font-size: 1.6cqw; /* 16px at 1000px wide */
	background: #fff;
}
@supports not (font-size: 1cqw) {
	.fd-stage { font-size: 1rem; }
}

/* ---- app chrome ---------------------------------------------------------- */
.fd-topbar {
	position: absolute; inset: 0 0 auto 0; height: 3.25em;
	display: flex; align-items: center; gap: 1em; padding: 0 1.5em;
	border-bottom: 1px solid var(--fd-line);
}
.fd-topbar .fd-crumbs { font-size: .8em; color: var(--fd-muted); }
.fd-topbar .fd-crumbs b { color: var(--fd-ink); font-weight: 500; }
.fd-logo { width: 1.4em; height: 1.4em; border-radius: .35em; background: var(--fd-ink); flex: none; }
.fd-avatar { width: 1.6em; height: 1.6em; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: .7em; font-weight: 500; color: #fff; background: var(--fd-ink); }
.fd-avatar.is-a { background: #ff0051; } .fd-avatar.is-b { background: #5ca8ef; } .fd-avatar.is-c { background: #33b36b; } .fd-avatar.is-d { background: #efb45c; }
.fd-side {
	position: absolute; left: 0; top: 3.25em; bottom: 0; width: 12em;
	padding: 1.25em 1em; border-right: 1px solid var(--fd-line);
	display: flex; flex-direction: column; gap: .35em;
}
.fd-side span { display: block; padding: .45em .75em; border-radius: .5em; font-size: .85em; color: var(--fd-muted); }
.fd-side span.is-on { background: var(--fd-soft); color: var(--fd-ink); font-weight: 500; }
.fd-main { position: absolute; left: 12em; top: 3.25em; right: 0; bottom: 0; padding: 1.5em; }
.fd-main.is-full { left: 0; }

/* ---- primitives ---------------------------------------------------------- */
.fd-h { font-size: 1.15em; font-weight: 500; margin: 0 0 .25em; }
.fd-sub { font-size: .8em; color: var(--fd-muted); margin: 0; }
.fd-card { position: absolute; background: #fff; border: 1px solid var(--fd-line); border-radius: .9em; box-shadow: 0 1.25em 2.5em rgba(12, 12, 12, .06); }
.fd-card-h { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.1em; border-bottom: 1px solid var(--fd-line); font-size: .85em; font-weight: 500; }
.fd-pill { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 10em; font-size: .72em; font-weight: 500; background: var(--fd-soft); color: var(--fd-ink); white-space: nowrap; }
.fd-pill.is-ok { background: #ccecda; color: #227747; }
.fd-pill.is-warn { background: #fbecd6; color: #a86500; }
.fd-pill.is-brand { background: var(--fd-brand); color: #fff; }
.fd-pill.is-info { background: #d6e9fb; color: #1783e8; }
.fd-pill.is-dark { background: var(--fd-ink); color: #fff; }
.fd-mono { font-family: var(--gc-font-monospace); font-size: .92em; letter-spacing: -.01em; }
.fd-row { display: flex; align-items: center; gap: .75em; padding: .7em 1.1em; border-bottom: 1px solid var(--fd-line); font-size: .85em; }
.fd-row:last-child { border-bottom: 0; }
.fd-row .fd-grow { flex: 1; min-width: 0; }
.fd-row small { display: block; color: var(--fd-muted); font-size: .85em; }
.fd-coin { width: 1.9em; height: 1.9em; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .62em; font-weight: 500; color: #fff; }
.fd-coin.btc { background: #f7931a; } .fd-coin.eth { background: #627eea; } .fd-coin.usdt { background: #26a17b; } .fd-coin.sol { background: #9945ff; } .fd-coin.trx { background: #e50915; } .fd-coin.usd { background: var(--fd-ink); } .fd-coin.usdc { background: #2775ca; }
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .55em 1em; border-radius: 10em; font-size: .8em; font-weight: 500; background: var(--fd-ink); color: #fff; }
.fd-btn.is-ghost { background: #fff; color: var(--fd-ink); border: 1px solid var(--fd-line); }
.fd-btn.is-brand { background: var(--fd-brand); }
.fd-check { width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--fd-ok); position: relative; flex: none; }
.fd-check::after { content: ""; position: absolute; left: .42em; top: .2em; width: .35em; height: .65em; border: solid #fff; border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.fd-check.is-wait { background: #fff; border: .12em solid var(--fd-line); } .fd-check.is-wait::after { display: none; }
.fd-toggle { width: 2.4em; height: 1.35em; border-radius: 10em; background: #dfe3f0; position: relative; flex: none; }
.fd-toggle::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .3em rgba(0,0,0,.2); transition: transform .3s; }
.fd-toggle.is-on { background: var(--fd-ok); } .fd-toggle.is-on::after { transform: translateX(1.05em); }
.fd-bar { height: .55em; border-radius: 10em; background: var(--fd-line); overflow: hidden; }
.fd-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--fd-brand); transform-origin: left; }
.fd-toast { position: absolute; display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: .7em; background: var(--fd-ink); color: #fff; font-size: .8em; box-shadow: 0 1em 2em rgba(0,0,0,.25); }

/* ---- reveal slots (12s loop) ------------------------------------------- */
.fd-s1, .fd-s2, .fd-s3, .fd-s4, .fd-s5, .fd-s6, .fd-s7, .fd-s8, .fd-flash, .fd-grow-x, .fd-draw, .fd-swap {
	animation-duration: var(--fd-cycle); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.4, 0, .2, 1); animation-fill-mode: both;
}
@keyframes fd-slot1 { 0%, 3% { opacity: 0; transform: translateY(.6em); } 7%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot2 { 0%, 12% { opacity: 0; transform: translateY(.6em); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot3 { 0%, 21% { opacity: 0; transform: translateY(.6em); } 25%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot4 { 0%, 30% { opacity: 0; transform: translateY(.6em); } 34%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot5 { 0%, 39% { opacity: 0; transform: translateY(.6em); } 43%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot6 { 0%, 48% { opacity: 0; transform: translateY(.6em); } 52%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot7 { 0%, 57% { opacity: 0; transform: translateY(.6em); } 61%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fd-slot8 { 0%, 66% { opacity: 0; transform: translateY(.6em); } 70%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.fd-s1 { animation-name: fd-slot1; } .fd-s2 { animation-name: fd-slot2; } .fd-s3 { animation-name: fd-slot3; } .fd-s4 { animation-name: fd-slot4; }
.fd-s5 { animation-name: fd-slot5; } .fd-s6 { animation-name: fd-slot6; } .fd-s7 { animation-name: fd-slot7; } .fd-s8 { animation-name: fd-slot8; }
/* a value that is replaced by the next one: visible only for its window */
@keyframes fd-swap1 { 0%, 3% { opacity: 0; } 7%, 29% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes fd-swap2 { 0%, 29% { opacity: 0; } 33%, 55% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes fd-swap3 { 0%, 55% { opacity: 0; } 59%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.fd-swap.is-1 { animation-name: fd-swap1; } .fd-swap.is-2 { animation-name: fd-swap2; } .fd-swap.is-3 { animation-name: fd-swap3; }
/* bars / lines that grow */
@keyframes fd-grow-x { 0%, 40% { transform: scaleX(0); } 62%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
.fd-grow-x { animation-name: fd-grow-x; transform-origin: left; }
@keyframes fd-draw { 0%, 8% { stroke-dashoffset: 1; } 55%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 1; } }
.fd-draw { animation-name: fd-draw; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* attention flash (e.g. a highlighted rule) */
@keyframes fd-flash { 0%, 60% { box-shadow: 0 0 0 0 rgba(255, 0, 81, 0); } 66% { box-shadow: 0 0 0 .35em rgba(255, 0, 81, .25); } 78%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 81, 0); } }
.fd-flash { animation-name: fd-flash; }

@media (prefers-reduced-motion: reduce) {
	.fd * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
	.fd .fd-swap.is-1, .fd .fd-swap.is-2 { opacity: 0 !important; }
}

/* ---- portrait "device" variant (in-content columns, e.g. stablecoins "Why merchants…") ---- */
.fd-stage.is-portrait {
	aspect-ratio: 450 / 560;
	font-size: 3.55cqw; /* 16px at 450px wide */
	border: 1px solid var(--fd-line);
	border-radius: 1.5em;
	box-shadow: 0 2em 4em rgba(12, 12, 12, .08);
}
@supports not (font-size: 1cqw) { .fd-stage.is-portrait { font-size: .8rem; } }
.fd-stage.is-portrait .fd-topbar { padding: 0 1.25em; }
.fd-stage.is-portrait .fd-main { left: 0; padding: 1.25em; }