/* Живі демки послуг (template-parts/service-demo.php): головна і сторінка послуг. */
.stage { flex: 1; min-height: 240px; border-radius: 18px; background: var(--bg-deep); border: 1px solid #23231D; position: relative; overflow: hidden; padding: 18px; }

.blk { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); font-size: 13px; font-weight: 700; margin-bottom: 8px; animation: stackin 6s var(--ease) infinite; }
.blk .mono { font-weight: 400; }
.blk--acc { border-color: var(--accent); }

.race { display: flex; flex-direction: column; gap: 22px; justify-content: center; height: 100%; }
.race-row { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.race-head { display: flex; justify-content: space-between; gap: 12px; }
.race-t { height: 12px; border-radius: 12px; background: #23231D; overflow: hidden; }
.race-t i { display: block; height: 100%; border-radius: 12px; transform-origin: left; }
.race-slow { background: #FF8A3D; animation: slow 5s linear infinite; }
.race-fast { background: var(--accent); animation: fast 5s var(--ease) infinite; }
.race-note { font-size: 11px; }
.swap { display: grid; text-align: right; }
.swap span { grid-area: 1 / 1; }
.s-wait { animation: wait 5s steps(1) infinite; }
.s-done { color: var(--accent); animation: done 5s steps(1) infinite; }

.code-st { display: grid; place-items: center; height: 100%; text-align: center; }
.st500, .st200 { grid-area: 1 / 1; font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 72px); letter-spacing: -0.05em; line-height: 1; }
.st500 { color: var(--danger); animation: s500 6s infinite; }
.st200 { color: var(--accent); animation: s200 6s infinite; }

.frame { height: 100%; display: flex; align-items: center; justify-content: center; }
.frame-in { border: 2px solid var(--line-3); border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; height: 200px; width: 110px; animation: resize 6s var(--ease-io) infinite; overflow: hidden; }
.frame-in i { display: block; height: 40px; flex: 1 1 90px; border-radius: 8px; background: #2A2A23; }
.frame-in i.a { flex-basis: 100%; height: 56px; background: var(--accent); }

.rank { position: relative; height: 202px; }
.rank-row { position: absolute; left: 0; right: 0; height: 46px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 13px; font-weight: 700; }
.rank-row.me { background: var(--accent); color: var(--bg); border-color: var(--accent); z-index: 2; top: 0; animation: me 6s var(--ease-io) infinite; }
.rank-row.r1 { top: 52px; animation: r1 6s var(--ease-io) infinite; }
.rank-row.r2 { top: 104px; animation: r2 6s var(--ease-io) infinite; }
.rank-row.r3 { top: 156px; animation: r3 6s var(--ease-io) infinite; }

.stage--pulse { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pulse { width: 100%; height: 120px; }
.pulse path { stroke: var(--accent); stroke-dasharray: 600; animation: beat 2.4s linear infinite; }
.pulse-foot { font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }

@keyframes stackin { 0% { opacity: 0; transform: translateY(-24px); } 12%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes slow { 0% { transform: scaleX(0); } 90%, 100% { transform: scaleX(.88); } }
@keyframes fast { 0% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
@keyframes wait { 0% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes done { 0% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes s500 { 0%, 40% { opacity: 1; transform: none; } 42% { transform: translateX(-6px); } 44% { transform: translateX(6px); } 46% { opacity: 1; transform: none; } 50%, 95% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; } }
@keyframes s200 { 0%, 48% { opacity: 0; transform: scale(1.2); } 55%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes resize { 0%, 15% { width: 110px; } 40%, 60% { width: 200px; } 85%, 100% { width: 110px; } }
@keyframes me { 0%, 20% { top: 156px; } 60%, 100% { top: 0; } }
@keyframes r1 { 0%, 20% { top: 0; } 60%, 100% { top: 52px; } }
@keyframes r2 { 0%, 20% { top: 52px; } 60%, 100% { top: 104px; } }
@keyframes r3 { 0%, 20% { top: 104px; } 60%, 100% { top: 156px; } }
@keyframes beat { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }