.hero__art--sequence { width: 100%; }
.trade-sequence { width: 100%; }
.trade-sequence__card {
position: relative;
border-radius: var(--ty-radius-lg);
overflow: hidden;
isolation: isolate;
box-shadow: var(--ty-shadow-lg);
background: var(--ty-color-ink);
}
.trade-sequence__card::before { content: ""; display: block; padding-top: 75%; }
.trade-sequence__frame { position: absolute; inset: 0; }
.trade-sequence__photo {
position: absolute; inset: 0; display: block;
animation: sequence-photo var(--dur, 24s) linear infinite;
animation-delay: var(--delay, 0s);
will-change: opacity, transform;
}
.trade-sequence__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@keyframes sequence-photo {
0%   { opacity: 1; transform: scale(1); }
22%  { opacity: 1; transform: scale(1.07); }
25%  { opacity: 0; transform: scale(1.07); }
100% { opacity: 0; transform: scale(1.07); }
}
.trade-sequence__tint {
position: absolute; inset: 0;
background: color-mix(in srgb, var(--ty-color-primary) 22%, transparent);
mix-blend-mode: multiply;
}
[data-theme="graft"] .trade-sequence__tint { mix-blend-mode: color; opacity: .5; }
.trade-sequence__vignette {
position: absolute; inset: 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--ty-color-ink) 55%, transparent) 0%, transparent 30%, transparent 65%, color-mix(in srgb, var(--ty-color-ink) 70%, transparent) 100%),
radial-gradient(140% 100% at 50% 100%, color-mix(in srgb, var(--ty-color-ink) 40%, transparent) 0%, transparent 60%);
}
.trade-sequence__logo-wipe {
position: absolute; inset: 0; margin: auto; width: 34%; max-width: 96px; min-width: 64px; aspect-ratio: 64/48;
display: grid; place-items: center; z-index: 3; pointer-events: none;
animation: sequence-logo-wipe var(--dur, 6s) ease-in-out infinite;
}
.trade-sequence__yoke { width: 100%; height: auto; color: #fff; opacity: 0; }
.trade-sequence__yoke-hub { fill: var(--ty-color-ink); }
.trade-sequence__yoke rect, .trade-sequence__yoke circle:not(.trade-sequence__yoke-hub) { fill: currentColor; }
@keyframes sequence-logo-wipe {
0%, 76% { opacity: 0; transform: scale(.7) rotate(-6deg); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
84%     { opacity: 1; transform: scale(1.08) rotate(0deg); filter: drop-shadow(0 0 18px rgba(255,255,255,.85)); }
96%     { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 14px rgba(255,255,255,.7)); }
100%    { opacity: 0; transform: scale(1.15) rotate(4deg); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
.trade-sequence__logo-wipe svg { opacity: 1; }
.trade-sequence__brand {
position: absolute; left: 14px; bottom: 12px; z-index: 3;
display: flex; align-items: center; gap: 6px;
color: #fff; opacity: .82;
font-size: .72rem; font-weight: 700; letter-spacing: .01em;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.trade-sequence__yoke-small { width: 20px; height: auto; color: #fff; }
.trade-sequence__rail {
position: absolute; left: 14px; right: 14px; top: 12px; z-index: 3;
display: flex; flex-direction: row; gap: 4px;
}
.trade-sequence__rail::before {
content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px;
background: rgba(255,255,255,.28); border-radius: var(--ty-radius-pill);
}
.trade-sequence__rail-fill {
position: absolute; left: 0; top: 5px; height: 3px; width: 0%;
background: #fff; border-radius: var(--ty-radius-pill);
animation: sequence-rail var(--dur, 24s) linear infinite;
}
@keyframes sequence-rail {
0%   { width: 0%; }
100% { width: 100%; }
}
.trade-sequence__rail-stage {
flex: 1; text-align: center; margin-top: 10px;
font-size: .6rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
color: rgba(255,255,255,.5); text-shadow: 0 1px 2px rgba(0,0,0,.5);
transition: none;
}
@keyframes sequence-rail-stage-0 { 0%, 24.9% { color: #fff; } 25%, 100% { color: rgba(255,255,255,.5); } }
@keyframes sequence-rail-stage-1 { 0%, 24.9%, 50%, 100% { color: rgba(255,255,255,.5); } 25%, 49.9% { color: #fff; } }
@keyframes sequence-rail-stage-2 { 0%, 49.9%, 75%, 100% { color: rgba(255,255,255,.5); } 50%, 74.9% { color: #fff; } }
@keyframes sequence-rail-stage-3 { 0%, 74.9% { color: rgba(255,255,255,.5); } 75%, 100% { color: #fff; } }
.trade-sequence__rail-stage--0 { animation: sequence-rail-stage-0 var(--dur, 24s) steps(1, jump-start) infinite; }
.trade-sequence__rail-stage--1 { animation: sequence-rail-stage-1 var(--dur, 24s) steps(1, jump-start) infinite; }
.trade-sequence__rail-stage--2 { animation: sequence-rail-stage-2 var(--dur, 24s) steps(1, jump-start) infinite; }
.trade-sequence__rail-stage--3 { animation: sequence-rail-stage-3 var(--dur, 24s) steps(1, jump-start) infinite; }
@media (max-width: 520px) {
.trade-sequence__rail-stage { font-size: 0; text-indent: -9999px; margin-top: 0; }
.trade-sequence__rail-stage::before {
content: ""; display: block; width: 6px; height: 6px; margin: 0 auto; border-radius: 50%;
background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.4);
transform: translateY(2px);
}
}
.trade-sequence__overlay {
position: absolute; z-index: 2;
display: flex; align-items: center; gap: 9px;
max-width: min(78%, 260px);
padding: 9px 14px 9px 10px;
border-radius: var(--ty-radius-pill);
background: color-mix(in srgb, var(--ty-color-surface) 88%, transparent);
color: var(--ty-color-text);
box-shadow: 0 10px 28px -8px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, #fff 40%, transparent) inset;
backdrop-filter: blur(6px);
opacity: 0;
animation: sequence-overlay var(--dur, 24s) cubic-bezier(.34, 1.56, .64, 1) infinite;
animation-delay: var(--delay, 0s);
}
@keyframes sequence-overlay {
0%, 4%   { opacity: 0; transform: translateY(18px) scale(.9); }
8%       { opacity: 1; transform: translateY(0) scale(1.04); }
11%, 20% { opacity: 1; transform: translateY(0) scale(1); }
24%, 100%{ opacity: 0; transform: translateY(-12px) scale(.95); }
}
.trade-sequence__overlay--tick, .trade-sequence__overlay--payment { animation-name: sequence-overlay-settle; }
@keyframes sequence-overlay-settle {
0%, 15%  { opacity: 0; transform: translateY(18px) scale(.9); }
18%      { opacity: 1; transform: translateY(0) scale(1.04); }
19%, 20% { opacity: 1; transform: translateY(0) scale(1); }
24%, 100%{ opacity: 0; transform: translateY(-12px) scale(.95); }
}
.trade-sequence__moment {
position: absolute; inset: 0; z-index: 4;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
opacity: 0;
animation: sequence-moment var(--dur, 24s) ease-out infinite;
animation-delay: var(--delay, 0s);
}
@keyframes sequence-moment {
0%, 1%   { opacity: 0; transform: scale(.8); }
3%       { opacity: 1; transform: scale(1.06); }
5%, 11%  { opacity: 1; transform: scale(1); }
15%, 100%{ opacity: 0; transform: scale(.92); }
}
.trade-sequence__moment-scrim {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.15) 60%, transparent 85%);
}
.trade-sequence__moment-tick {
position: relative; z-index: 1; width: clamp(96px, 13vw, 140px); height: clamp(96px, 13vw, 140px);
filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
.trade-sequence__moment-tick svg { width: 100%; height: 100%; }
.trade-sequence__moment-tick .trade-sequence__tick-check { stroke-width: 3; }
.trade-sequence__moment-label {
position: relative; z-index: 1; color: #fff; font-size: clamp(1.15rem, 1vw + 1rem, 1.55rem); font-weight: 800;
text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.6); padding: 0 12px;
}
.trade-sequence__moment-tick .trade-sequence__tick-check { animation: sequence-moment-tick-draw var(--dur, 24s) linear infinite; animation-delay: var(--delay, 0s); }
.trade-sequence__moment-tick .trade-sequence__tick-burst { animation: sequence-tick-burst var(--dur, 24s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes sequence-moment-tick-draw { 0%, 2% { stroke-dashoffset: 100; } 8%, 100% { stroke-dashoffset: 0; } }
.trade-sequence__overlay:nth-of-type(4n+1) { left: 5%; bottom: 14%; }
.trade-sequence__overlay:nth-of-type(4n+2) { right: 5%; top: 22%; }
.trade-sequence__overlay:nth-of-type(4n+3) { left: 6%; top: 24%; }
.trade-sequence__overlay:nth-of-type(4n)   { right: 5%; bottom: 15%; }
.trade-sequence__overlay-text { display: flex; flex-direction: column; line-height: 1.15; }
.trade-sequence__overlay-text strong { font-size: .84rem; font-weight: 700; }
.trade-sequence__overlay-text small { font-size: .72rem; color: var(--ty-color-text-muted); }
.trade-sequence__tick { position: relative; width: 30px; height: 30px; flex: none; }
.trade-sequence__tick svg { width: 100%; height: 100%; }
.trade-sequence__tick-ring { fill: var(--ty-color-success); }
.trade-sequence__tick-burst { fill: none; stroke: var(--ty-color-success); stroke-width: 2; opacity: 0; transform-origin: 22px 22px; }
.trade-sequence__tick-check { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.trade-sequence__overlay--tick .trade-sequence__tick-check { animation: sequence-tick-draw var(--dur, 24s) linear infinite; animation-delay: var(--delay, 0s); }
.trade-sequence__overlay--tick .trade-sequence__tick-burst { animation: sequence-tick-burst var(--dur, 24s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes sequence-tick-draw { 0%, 8% { stroke-dashoffset: 100; } 15%, 100% { stroke-dashoffset: 0; } }
@keyframes sequence-tick-burst {
0%, 7%  { opacity: 0; transform: scale(.6); }
8%      { opacity: .8; transform: scale(.6); }
16%     { opacity: 0; transform: scale(1.6); }
100%    { opacity: 0; transform: scale(1.6); }
}
.trade-sequence__van { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ty-color-primary-soft); color: var(--ty-color-primary); }
.trade-sequence__van svg { width: 20px; height: 16px; fill: currentColor; }
.trade-sequence__overlay--onmyway .trade-sequence__van { animation: sequence-van-bob var(--dur, 24s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes sequence-van-bob { 0%, 8% { transform: translateX(-3px); } 14% { transform: translateX(2px); } 20%, 100% { transform: translateX(0); } }
.trade-sequence__msg-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ty-color-primary-soft); color: var(--ty-color-primary); font-size: .8rem; font-weight: 800; letter-spacing: -2px; }
.trade-sequence__pay-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ty-color-success-soft); color: var(--ty-color-success-ink); font-size: 1rem; font-weight: 800; }
.trade-sequence:hover .trade-sequence__motion,
.trade-sequence:focus .trade-sequence__motion,
.trade-sequence:focus-within .trade-sequence__motion,
.trade-sequence.is-idle .trade-sequence__motion,
.trade-sequence:hover .trade-sequence__overlay--tick .trade-sequence__tick-check,
.trade-sequence:hover .trade-sequence__overlay--tick .trade-sequence__tick-burst,
.trade-sequence:hover .trade-sequence__overlay--onmyway .trade-sequence__van,
.trade-sequence:focus .trade-sequence__overlay--tick .trade-sequence__tick-check,
.trade-sequence:focus .trade-sequence__overlay--tick .trade-sequence__tick-burst,
.trade-sequence:focus .trade-sequence__overlay--onmyway .trade-sequence__van,
.trade-sequence.is-idle .trade-sequence__overlay--tick .trade-sequence__tick-check,
.trade-sequence.is-idle .trade-sequence__overlay--tick .trade-sequence__tick-burst,
.trade-sequence.is-idle .trade-sequence__overlay--onmyway .trade-sequence__van,
.trade-sequence:hover .trade-sequence__moment,
.trade-sequence:hover .trade-sequence__moment-tick .trade-sequence__tick-check,
.trade-sequence:hover .trade-sequence__moment-tick .trade-sequence__tick-burst,
.trade-sequence:focus .trade-sequence__moment,
.trade-sequence:focus .trade-sequence__moment-tick .trade-sequence__tick-check,
.trade-sequence:focus .trade-sequence__moment-tick .trade-sequence__tick-burst,
.trade-sequence.is-idle .trade-sequence__moment,
.trade-sequence.is-idle .trade-sequence__moment-tick .trade-sequence__tick-check,
.trade-sequence.is-idle .trade-sequence__moment-tick .trade-sequence__tick-burst {
animation-play-state: paused;
}
.trade-sequence:focus { outline: none; box-shadow: var(--ty-focus-ring); }
@media (prefers-reduced-motion: reduce) {
.trade-sequence__photo,
.trade-sequence__logo-wipe,
.trade-sequence__rail-fill,
.trade-sequence__overlay,
.trade-sequence__overlay--tick .trade-sequence__tick-check,
.trade-sequence__overlay--tick .trade-sequence__tick-burst,
.trade-sequence__overlay--onmyway .trade-sequence__van {
animation: none !important;
}
.trade-sequence__photo:first-of-type { opacity: 1; transform: none; }
.trade-sequence__photo:not(:first-of-type) { opacity: 0; }
.trade-sequence__overlay { opacity: 1; transform: none; }
.trade-sequence__overlay--tick .trade-sequence__tick-check { stroke-dashoffset: 0; }
.trade-sequence__overlay--tick .trade-sequence__tick-burst { opacity: 0; }
.trade-sequence__rail-fill { width: 100%; }
.trade-sequence__rail-stage--0, .trade-sequence__rail-stage--1,
.trade-sequence__rail-stage--2, .trade-sequence__rail-stage--3 { animation: none !important; color: #fff; }
.trade-sequence__moment { display: none !important; }
}
.trade-sequence__tagline {
margin: 14px 2px 0; font-size: .96rem; font-weight: 600; color: var(--ty-color-text-onink);
}
.trade-sequence__metrics { margin: 10px 2px 0; }
.trade-sequence__metrics-caption {
margin: 0 0 8px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--ty-color-text-onink-muted);
}
.trade-sequence__metrics-list {
list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.trade-sequence__metric {
min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
padding: 10px 12px; border-radius: var(--ty-radius-panel);
background: var(--ty-color-surface-2); border: 1px solid var(--ty-color-border);
}
.trade-sequence__metric-icon {
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
background: var(--ty-color-primary-soft); color: var(--ty-color-primary-strong);
}
.trade-sequence__metric-icon svg { width: 15px; height: 15px; }
.trade-sequence__metric-value { font-size: 1.3rem; font-weight: 800; color: var(--ty-color-text); font-variant-numeric: tabular-nums; }
.trade-sequence__metric-label {
font-size: .74rem; color: var(--ty-color-text-muted); line-height: 1.25;
max-width: 100%; overflow-wrap: anywhere; hyphens: auto;
}
@property --ty-sequence-count { syntax: '<integer>'; inherits: true; initial-value: 0; }
.trade-sequence__metric-value {
--ty-sequence-count: var(--start, 0);
animation-name: var(--step-anim, none); animation-duration: var(--dur, 24s);
animation-timing-function: linear; animation-iteration-count: infinite;
}
.trade-sequence__metric-count { counter-reset: ty-sequence-count var(--ty-sequence-count); }
.trade-sequence__metric-count::before { content: counter(ty-sequence-count); }
@keyframes sequence-count-step-tick {
0%     { --ty-sequence-count: var(--start, 0); }
49.9%  { --ty-sequence-count: var(--start, 0); animation-timing-function: step-end; }
50%    { --ty-sequence-count: var(--target, 0); }
100%   { --ty-sequence-count: var(--target, 0); }
}
@keyframes sequence-count-step-payment {
0%     { --ty-sequence-count: var(--start, 0); }
74.9%  { --ty-sequence-count: var(--start, 0); animation-timing-function: step-end; }
75%    { --ty-sequence-count: var(--target, 0); }
100%   { --ty-sequence-count: var(--target, 0); }
}
@media (prefers-reduced-motion: reduce) {
.trade-sequence__metric-value { animation: none !important; --ty-sequence-count: var(--target, 0); }
}
.trade-sequence:hover .trade-sequence__metric-value,
.trade-sequence:focus .trade-sequence__metric-value,
.trade-sequence.is-idle .trade-sequence__metric-value { animation-play-state: paused; }
@media (max-width: 560px) {
.trade-sequence__overlay { max-width: 62%; padding: 7px 11px 7px 8px; }
.trade-sequence__overlay-text strong { font-size: .76rem; }
.trade-sequence__overlay-text small { font-size: .66rem; }
}