/* The use-case pages' flow animation (use-cases/partials/flow-animation + flow-dest-*): source system ->
   handelsregister.ai -> destination, one 12 s loop, and its easter egg (click a client row or the hub for a live
   run). Moved here from the partials' inline <style> blocks with the design-system migration (2026-10-30): every
   colour is a token (DESIGN.md > Colour), weights 400/600, the radii of the system. Layout and timeline unchanged.
   The live run was orange (the old CTA colour); orange is only for spending, so it is the brand blue now. */

/* ===== Steuerberater flow animation (scoped: .stb-*) =====
 One 12s loop, three clients staggered: request dot travels from the
 practice software to the hub, the hub pulses (synced with the official
 register above), a PDF chip travels onward and the matching document
 row in the client file lights up. All colours are design-system tokens. */

.stb-stage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(40px, 130px) auto minmax(40px, 130px) minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: 10px;
align-items: center;
justify-items: stretch;
}
.stb-register     { grid-column: 3; grid-row: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; }
.stb-card--source { grid-column: 1; grid-row: 2; }
.stb-lane--out    { grid-column: 2; grid-row: 2; }
.stb-hub          { grid-column: 3; grid-row: 2; justify-self: center; }
.stb-lane--in     { grid-column: 4; grid-row: 2; }
.stb-card--dms    { grid-column: 5; grid-row: 2; }
.stb-hub-label    { grid-column: 3; grid-row: 3; justify-self: center; display: flex; align-items: center; gap: .45rem; margin-top: .7rem; }

.stb-card {
background: rgb(var(--ds-card));
border: 1px solid var(--ds-line);
border-radius: var(--ds-radius-card);
padding: .8rem;
min-width: 0;
overflow: hidden;
}
.stb-card-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.stb-step-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 1.15rem; height: 1.15rem; border-radius: 9999px; flex-shrink: 0;
background: rgb(var(--ds-primary)); color: rgb(var(--ds-primary-fg)); font-size: .62rem; font-weight: 600;
}
.stb-card-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; max-width: 100%; }
.stb-card-titles strong { font-size: .82rem; font-weight: 600; color: rgb(var(--ds-heading)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stb-card-titles small  { font-size: .68rem; color: rgb(var(--ds-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stb-clients, .stb-files { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.stb-client {
display: flex; align-items: center; gap: .4rem;
font-size: .74rem; color: rgb(var(--ds-heading));
padding: .38rem .5rem; border-radius: var(--ds-radius-control);
border: 1px solid var(--ds-line); background: transparent;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
animation: 12s linear infinite;
}
.stb-client-dot { width: .4rem; height: .4rem; border-radius: 9999px; background: rgb(var(--ds-faint)); flex-shrink: 0; }
.stb-client-1 { animation-name: stb-client-1; }
.stb-client-2 { animation-name: stb-client-2; }
.stb-client-3 { animation-name: stb-client-3; }

.stb-lane { position: relative; height: 2px; background: var(--ds-line); border-radius: 1px; }
.stb-lane::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 7px; height: 7px;
border-top: 2px solid var(--ds-line); border-right: 2px solid var(--ds-line);
transform: translateY(-50%) rotate(45deg);
}
.stb-dot {
position: absolute; top: 50%; left: 0;
width: 9px; height: 9px; margin-top: -4.5px; border-radius: 9999px;
background: rgb(var(--ds-primary)); box-shadow: 0 0 8px rgb(var(--ds-primary));
opacity: 0; animation: 12s linear infinite;
}
.stb-dot-1 { animation-name: stb-dot-1; }
.stb-dot-2 { animation-name: stb-dot-2; }
.stb-dot-3 { animation-name: stb-dot-3; }

.stb-hub { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.stb-hub-core {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 64px; height: 64px; border-radius: 9999px;
background: rgb(var(--ds-card)); border: 1px solid var(--ds-line);
box-shadow: var(--ds-shadow-card);
animation: stb-core 12s linear infinite;
}
.stb-hub-core img { width: 34px; height: 34px; object-fit: contain; }
.stb-ring {
position: absolute; left: 4px; top: 4px; width: 64px; height: 64px;
border-radius: 9999px; border: 2px solid rgb(var(--ds-primary));
opacity: 0; animation: 12s linear infinite;
}
.stb-ring--a { animation-name: stb-ring-a; }
.stb-ring--b { animation-name: stb-ring-b; }

.stb-register-pill {
display: inline-flex; align-items: center; gap: .4rem;
padding: .32rem .6rem; border-radius: 9999px;
background: var(--ds-primary-tint); border: 1px solid color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent); color: rgb(var(--ds-link));
}
.stb-register-icon { width: .95rem; height: .95rem; flex-shrink: 0; }
.stb-register-text { display: flex; flex-direction: column; line-height: 1.15; }
.stb-register-text strong { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.stb-register-text small  { font-size: .62rem; opacity: .8; white-space: nowrap; }
.stb-sync {
width: 2px; height: 20px;
background-image: repeating-linear-gradient(180deg, color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent) 0 4px, transparent 4px 8px);
animation: stb-sync-move 1.1s linear infinite;
}

.stb-chip {
position: absolute; top: 50%; left: -4px; transform: translateY(-50%);
display: inline-flex; align-items: center; gap: .2rem;
padding: .14rem .4rem; border-radius: var(--ds-radius-chip); white-space: nowrap;
background: rgb(var(--ds-card)); border: 1px solid color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent);
color: rgb(var(--ds-link)); font-size: .62rem; font-weight: 600; letter-spacing: .02em;
box-shadow: var(--ds-shadow-card);
opacity: 0; animation: 12s linear infinite;
}
.stb-chip svg { width: .7rem; height: .7rem; }
.stb-chip-1 { animation-name: stb-chip-1; }
.stb-chip-2 { animation-name: stb-chip-2; }
.stb-chip-3 { animation-name: stb-chip-3; }

.stb-file {
display: flex; align-items: center; gap: .4rem;
font-size: .74rem; color: rgb(var(--ds-heading));
padding: .38rem .5rem; border-radius: var(--ds-radius-control);
border: 1px solid var(--ds-line);
opacity: .38; animation: 12s linear infinite;
}
.stb-file-icon { width: .85rem; height: .85rem; color: rgb(var(--ds-primary)); flex-shrink: 0; }
.stb-file-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stb-check { width: .85rem; height: .85rem; color: rgb(var(--ds-ok)); flex-shrink: 0; transform: scale(0); animation: 12s linear infinite; }
.stb-file-1 { animation-name: stb-file-1; }
.stb-file-2 { animation-name: stb-file-2; }
.stb-file-3 { animation-name: stb-file-3; }
.stb-check-1 { animation-name: stb-check-1; }
.stb-check-2 { animation-name: stb-check-2; }
.stb-check-3 { animation-name: stb-check-3; }

/* --- Timeline (percent of the 12s loop) --- */
@keyframes stb-client-1 { 0%, 2% { background: transparent; border-color: var(--ds-line); } 4%, 8% { background: var(--ds-primary-tint); border-color: color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent); } 13%, 100% { background: transparent; border-color: var(--ds-line); } }
@keyframes stb-client-2 { 0%, 28% { background: transparent; border-color: var(--ds-line); } 30%, 34% { background: var(--ds-primary-tint); border-color: color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent); } 39%, 100% { background: transparent; border-color: var(--ds-line); } }
@keyframes stb-client-3 { 0%, 54% { background: transparent; border-color: var(--ds-line); } 56%, 60% { background: var(--ds-primary-tint); border-color: color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent); } 65%, 100% { background: transparent; border-color: var(--ds-line); } }

@keyframes stb-dot-1 { 0%, 2% { left: 0; opacity: 0; } 3.2% { opacity: 1; } 9% { left: calc(100% - 9px); opacity: 1; } 10.5% { left: calc(100% - 9px); opacity: 0; } 11%, 100% { left: 0; opacity: 0; } }
@keyframes stb-dot-2 { 0%, 28% { left: 0; opacity: 0; } 29.2% { opacity: 1; } 35% { left: calc(100% - 9px); opacity: 1; } 36.5% { left: calc(100% - 9px); opacity: 0; } 37%, 100% { left: 0; opacity: 0; } }
@keyframes stb-dot-3 { 0%, 54% { left: 0; opacity: 0; } 55.2% { opacity: 1; } 61% { left: calc(100% - 9px); opacity: 1; } 62.5% { left: calc(100% - 9px); opacity: 0; } 63%, 100% { left: 0; opacity: 0; } }

@keyframes stb-ring-a { 0%, 10% { transform: scale(.7); opacity: 0; } 11% { opacity: .5; } 17% { transform: scale(1.75); opacity: 0; } 36% { transform: scale(.7); opacity: 0; } 37% { opacity: .5; } 43% { transform: scale(1.75); opacity: 0; } 62% { transform: scale(.7); opacity: 0; } 63% { opacity: .5; } 69% { transform: scale(1.75); opacity: 0; } 70%, 100% { transform: scale(.7); opacity: 0; } }
@keyframes stb-ring-b { 0%, 11.5% { transform: scale(.7); opacity: 0; } 12.5% { opacity: .35; } 18.5% { transform: scale(2); opacity: 0; } 37.5% { transform: scale(.7); opacity: 0; } 38.5% { opacity: .35; } 44.5% { transform: scale(2); opacity: 0; } 63.5% { transform: scale(.7); opacity: 0; } 64.5% { opacity: .35; } 70.5% { transform: scale(2); opacity: 0; } 71%, 100% { transform: scale(.7); opacity: 0; } }
@keyframes stb-core { 0%, 10% { transform: scale(1); } 13% { transform: scale(1.08); } 17% { transform: scale(1); } 36% { transform: scale(1); } 39% { transform: scale(1.08); } 43% { transform: scale(1); } 62% { transform: scale(1); } 65% { transform: scale(1.08); } 69% { transform: scale(1); } 100% { transform: scale(1); } }

@keyframes stb-chip-1 { 0%, 16% { left: -4px; opacity: 0; } 17.2% { opacity: 1; } 23% { left: calc(100% - 54px); opacity: 1; } 24.5% { left: calc(100% - 54px); opacity: 0; } 25%, 100% { left: -4px; opacity: 0; } }
@keyframes stb-chip-2 { 0%, 42% { left: -4px; opacity: 0; } 43.2% { opacity: 1; } 49% { left: calc(100% - 54px); opacity: 1; } 50.5% { left: calc(100% - 54px); opacity: 0; } 51%, 100% { left: -4px; opacity: 0; } }
@keyframes stb-chip-3 { 0%, 68% { left: -4px; opacity: 0; } 69.2% { opacity: 1; } 75% { left: calc(100% - 54px); opacity: 1; } 76.5% { left: calc(100% - 54px); opacity: 0; } 77%, 100% { left: -4px; opacity: 0; } }

@keyframes stb-file-1 { 0%, 23.5% { opacity: .38; } 25% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: .38; } }
@keyframes stb-file-2 { 0%, 49.5% { opacity: .38; } 51% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: .38; } }
@keyframes stb-file-3 { 0%, 75.5% { opacity: .38; } 77% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: .38; } }
@keyframes stb-check-1 { 0%, 24.5% { transform: scale(0); } 26% { transform: scale(1.25); } 27.5% { transform: scale(1); } 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes stb-check-2 { 0%, 50.5% { transform: scale(0); } 52% { transform: scale(1.25); } 53.5% { transform: scale(1); } 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes stb-check-3 { 0%, 76.5% { transform: scale(0); } 78% { transform: scale(1.25); } 79.5% { transform: scale(1); } 96% { transform: scale(1); } 100% { transform: scale(0); } }

@keyframes stb-sync-move { 0% { background-position: 0 0; } 100% { background-position: 0 8px; } }

/* --- Easter egg: click a client row (or the hub) to trigger a live run.
     User-triggered runs use the orange CTA color vs. the ambient blue. --- */
.stb-client, .stb-hub { cursor: pointer; }
.stb-client { position: relative; }
.stb-client::after, .stb-file::after {
content: ""; position: absolute; inset: -1px; border-radius: var(--ds-radius-control);
background: var(--ds-primary-tint);
border: 1px solid rgb(var(--ds-brand));
opacity: 0; pointer-events: none;
}
.stb-file { position: relative; }
.stb-client.stb-sent::after { animation: stb-flash .7s ease both; }
.stb-file.stb-hit::after { animation: stb-flash .9s ease 2.1s both; }

.stb-mdot {
position: absolute; top: 50%; left: 0;
width: 9px; height: 9px; margin-top: -4.5px; border-radius: 9999px;
background: rgb(var(--ds-brand));
box-shadow: 0 0 10px rgb(var(--ds-brand));
opacity: 0;
}
.stb-mdot.stb-go { animation: stb-mdot .8s linear both; }

.stb-ring.stb-mring { border-color: rgb(var(--ds-brand)); }
.stb-ring.stb-mring.stb-go { animation: stb-mring .8s ease .72s both; }

.stb-mchip {
position: absolute; top: 50%; left: -4px; transform: translateY(-50%);
display: inline-flex; align-items: center; gap: .2rem;
padding: .14rem .4rem; border-radius: var(--ds-radius-chip); white-space: nowrap;
background: rgb(var(--ds-card));
border: 1px solid rgb(var(--ds-brand));
color: rgb(var(--ds-heading)); font-size: .62rem; font-weight: 600; letter-spacing: .02em;
box-shadow: var(--ds-shadow-card); opacity: 0;
}
.stb-mchip svg { width: .75rem; height: .75rem; }
.stb-mchip.stb-go { animation: stb-mchip .8s linear 1.4s both; }

@keyframes stb-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stb-mdot { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
@keyframes stb-mring { 0% { transform: scale(.7); opacity: 0; } 15% { opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes stb-mchip { 0% { left: -4px; opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 54px); opacity: 0; } }

/* --- Mobile: vertical top-down flow --- */
@media (max-width: 640px) {
.stb-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.stb-register { display: none; }
.stb-card { width: 100%; max-width: 250px; }
.stb-card--source { grid-column: 1; grid-row: 1; }
.stb-lane--out    { grid-column: 1; grid-row: 2; }
.stb-hub          { grid-column: 1; grid-row: 3; }
.stb-hub-label    { grid-column: 1; grid-row: 4; margin-top: .2rem; }
.stb-lane--in     { grid-column: 1; grid-row: 5; }
.stb-card--dms    { grid-column: 1; grid-row: 6; }

.stb-lane { width: 2px; height: 40px; background: var(--ds-line); }
.stb-lane::after {
  right: auto; top: auto; bottom: 0; left: 50%;
  transform: translateX(-50%) rotate(135deg);
}
.stb-dot { left: 50%; top: 0; margin-top: 0; margin-left: -4.5px; }
.stb-dot-1 { animation-name: stb-dot-1-v; }
.stb-dot-2 { animation-name: stb-dot-2-v; }
.stb-dot-3 { animation-name: stb-dot-3-v; }
.stb-chip { left: 50%; top: -4px; transform: translateX(-50%); }
.stb-chip-1 { animation-name: stb-chip-1-v; }
.stb-chip-2 { animation-name: stb-chip-2-v; }
.stb-chip-3 { animation-name: stb-chip-3-v; }
.stb-mdot { left: 50%; top: 0; margin-top: 0; margin-left: -4.5px; }
.stb-mdot.stb-go { animation-name: stb-mdot-v; }
.stb-mchip { left: 50%; top: -4px; transform: translateX(-50%); }
.stb-mchip.stb-go { animation-name: stb-mchip-v; }
}
@keyframes stb-mdot-v { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 9px); opacity: 0; } }
@keyframes stb-mchip-v { 0% { top: -4px; opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 18px); opacity: 0; } }
@keyframes stb-dot-1-v { 0%, 2% { top: 0; opacity: 0; } 3.2% { opacity: 1; } 9% { top: calc(100% - 9px); opacity: 1; } 10.5% { top: calc(100% - 9px); opacity: 0; } 11%, 100% { top: 0; opacity: 0; } }
@keyframes stb-dot-2-v { 0%, 28% { top: 0; opacity: 0; } 29.2% { opacity: 1; } 35% { top: calc(100% - 9px); opacity: 1; } 36.5% { top: calc(100% - 9px); opacity: 0; } 37%, 100% { top: 0; opacity: 0; } }
@keyframes stb-dot-3-v { 0%, 54% { top: 0; opacity: 0; } 55.2% { opacity: 1; } 61% { top: calc(100% - 9px); opacity: 1; } 62.5% { top: calc(100% - 9px); opacity: 0; } 63%, 100% { top: 0; opacity: 0; } }
@keyframes stb-chip-1-v { 0%, 16% { top: -4px; opacity: 0; } 17.2% { opacity: 1; } 23% { top: calc(100% - 18px); opacity: 1; } 24.5% { top: calc(100% - 18px); opacity: 0; } 25%, 100% { top: -4px; opacity: 0; } }
@keyframes stb-chip-2-v { 0%, 42% { top: -4px; opacity: 0; } 43.2% { opacity: 1; } 49% { top: calc(100% - 18px); opacity: 1; } 50.5% { top: calc(100% - 18px); opacity: 0; } 51%, 100% { top: -4px; opacity: 0; } }
@keyframes stb-chip-3-v { 0%, 68% { top: -4px; opacity: 0; } 69.2% { opacity: 1; } 75% { top: calc(100% - 18px); opacity: 1; } 76.5% { top: calc(100% - 18px); opacity: 0; } 77%, 100% { top: -4px; opacity: 0; } }

/* --- Reduced motion: show the completed state, no movement --- */
@media (prefers-reduced-motion: reduce) {
.stb-flow * { animation: none !important; }
.stb-flow *::after { animation: none !important; }
.stb-dot, .stb-chip, .stb-ring, .stb-mdot, .stb-mchip { display: none; }
.stb-file { opacity: 1; }
.stb-check { transform: scale(1); }
}
/* KYC variant: amber finding on the third check + source dot flips amber */
.stbk-flag {
margin-left: auto; padding: .06rem .34rem; border-radius: var(--ds-radius-chip);
font-size: .56rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
color: rgb(var(--ds-warn)); border: 1px solid rgb(var(--ds-warn));
opacity: 0; transform: scale(.7);
animation: stbk-flag 12s linear infinite;
}
.stbk-alert {
width: .85rem; height: .85rem; flex-shrink: 0;
color: rgb(var(--ds-warn)); transform: scale(0);
animation: stbk-alert 12s linear infinite;
}
.stbk-row-warn {
animation: stb-file-3 12s linear infinite, stbk-row-warn 12s linear infinite;
}
.stb-flow .stb-client-3 .stb-client-dot {
animation: stbk-dot 12s linear infinite;
}
@keyframes stbk-alert { 0%, 76.5% { transform: scale(0); } 78% { transform: scale(1.3); } 79.5% { transform: scale(1); } 84% { transform: scale(1.18); } 86% { transform: scale(1); } 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes stbk-flag { 0%, 77.5% { opacity: 0; transform: scale(.7); } 79.5% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }
@keyframes stbk-row-warn { 0%, 76.5% { border-color: var(--ds-line); background: transparent; } 78.5% { border-color: var(--ds-warn-line); background: var(--ds-warn-bg); } 96% { border-color: var(--ds-warn-line); background: var(--ds-warn-bg); } 100% { border-color: var(--ds-line); background: transparent; } }
@keyframes stbk-dot { 0%, 78% { background: rgb(var(--ds-faint)); } 80% { background: rgb(var(--ds-warn)); } 96% { background: rgb(var(--ds-warn)); } 100% { background: rgb(var(--ds-faint)); } }
@media (prefers-reduced-motion: reduce) {
.stbk-alert { transform: scale(1); }
.stbk-flag { opacity: 1; transform: scale(1); }
.stbk-row-warn { border-color: var(--ds-warn-line); background: var(--ds-warn-bg); }
}
/* Leads variant: skeleton placeholders resolve into verified values */
.stbl-row { opacity: 1; animation: none; }
.stbl-label { flex: 0 1 auto; }
.stbl-slot { position: relative; flex: 1 1 auto; min-width: 6.4rem; height: .95rem; } /* IBM Plex runs wider than the old Satoshi: room for the longest value */
.stbl-skel {
position: absolute; inset: 0; border-radius: 4px;
background: linear-gradient(90deg, var(--ds-line) 25%, var(--ds-skeleton) 50%, var(--ds-line) 75%);
background-size: 200% 100%;
animation: stbl-shimmer 1.3s linear infinite;
}
.stbl-value {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
font-size: .64rem; font-weight: 600; color: rgb(var(--ds-heading));
white-space: nowrap; overflow: hidden;
opacity: 0; animation: 12s linear infinite;
}
.stbl-skel-1 { animation: stbl-shimmer 1.3s linear infinite, stbl-skel-1 12s linear infinite; }
.stbl-skel-2 { animation: stbl-shimmer 1.3s linear infinite, stbl-skel-2 12s linear infinite; }
.stbl-skel-3 { animation: stbl-shimmer 1.3s linear infinite, stbl-skel-3 12s linear infinite; }
.stbl-value-1 { animation-name: stbl-value-1; }
.stbl-value-2 { animation-name: stbl-value-2; }
.stbl-value-3 { animation-name: stbl-value-3; }
.stbl-score {
margin-left: auto; padding: .1rem .4rem; border-radius: var(--ds-radius-chip); white-space: nowrap;
font-size: .58rem; font-weight: 600; letter-spacing: .02em;
color: rgb(var(--ds-link)); background: var(--ds-primary-tint); border: 1px solid color-mix(in srgb, rgb(var(--ds-primary)) 35%, transparent);
opacity: 0; transform: scale(.7);
animation: stbl-score 12s linear infinite;
}
@keyframes stbl-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes stbl-skel-1 { 0%, 24% { opacity: 1; } 25.5%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stbl-skel-2 { 0%, 50% { opacity: 1; } 51.5%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stbl-skel-3 { 0%, 76% { opacity: 1; } 77.5%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stbl-value-1 { 0%, 24.5% { opacity: 0; transform: translateY(2px); } 26%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes stbl-value-2 { 0%, 50.5% { opacity: 0; transform: translateY(2px); } 52%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes stbl-value-3 { 0%, 76.5% { opacity: 0; transform: translateY(2px); } 78%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes stbl-score { 0%, 79% { opacity: 0; transform: scale(.7); } 81% { opacity: 1; transform: scale(1.1); } 82.5% { transform: scale(1); } 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
.stbl-skel { display: none; }
.stbl-value { opacity: 1; }
.stbl-score { opacity: 1; transform: scale(1); }
}