/* Browser-ready CSS for the existing blockchain illustration. */
.rc-blockchain-visual {
    --bc-travel-x: 160px;
    --bc-travel-y: -93px;
    --bc-float-y: -25px;
    --bc-app-y: -20px;
    --bc-arrow: 25px;
    --bc-cycle: 2.4s;
    --bc-float-cycle: 1.6s;
}
.rc-blockchain-visual #redblocks > * { animation: rc-bc-blocks var(--bc-cycle) linear infinite; }
.rc-blockchain-visual #firstBlock { transform: translate(var(--bc-travel-x), var(--bc-travel-y)); animation: rc-bc-first var(--bc-cycle) linear infinite; }
.rc-blockchain-visual #blockdis { animation: rc-bc-disappear var(--bc-cycle) linear infinite; }
.rc-blockchain-visual #redblocksparticles > g:nth-child(-n+5) polygon { animation: rc-bc-glow var(--bc-cycle) ease infinite; }
.rc-blockchain-visual #redblocksparticles > g:nth-child(-n+4) g circle { animation: rc-bc-dots var(--bc-cycle) var(--bc-dot-delay, 0s) linear infinite; }
.rc-blockchain-visual #purplebg > :nth-child(-n+22) { animation: rc-bc-float var(--bc-float-cycle) var(--bc-phase, 0s) ease infinite alternate; }
.rc-blockchain-visual :is(#bottomparticles, #bottomparticles2, #redglowparticles) > :nth-child(-n+13) { animation: rc-bc-particles var(--bc-cycle) var(--bc-phase, 0s) ease infinite alternate, rc-bc-fade 1.6s ease infinite alternate; }
.rc-blockchain-visual .particlespoly { animation: rc-bc-fade 1.6s ease infinite alternate; }
.rc-blockchain-visual :is(#d-app, #d-apps2) > g:nth-child(-n+4),
.rc-blockchain-visual #d-apps2wrapper g:nth-child(3) g > circle:nth-child(-n+20),
.rc-blockchain-visual #d-appswrapper g:nth-child(2) g > circle:nth-child(-n+20) { animation: rc-bc-apps var(--bc-float-cycle) var(--bc-phase, 0s) ease-in-out infinite alternate; }
.rc-blockchain-visual #Layer_1 > g:nth-child(2) > g:nth-child(18) > g:nth-child(12),
.rc-blockchain-visual #Layer_1 > g:nth-child(2) > g:nth-child(17) > g:nth-child(12) { animation: rc-bc-arrows .8s ease-in-out infinite alternate, rc-bc-fade 1.6s ease infinite alternate; }
.rc-blockchain-visual #Layer_1 > g:nth-child(2) > g:nth-child(17) > g:nth-child(13) { animation: rc-bc-arrows-back .8s ease-in-out infinite alternate, rc-bc-fade 1.6s ease infinite alternate; }

/* Move through the whole cycle. Adjacent blocks take over the same slots
   on repeat; endpoint blocks fade in/out while the chain keeps travelling. */
@keyframes rc-bc-blocks {
    0% { transform: translate(var(--bc-travel-x), var(--bc-travel-y)); }
    100% { transform: translate(0); }
}
@keyframes rc-bc-first { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-bc-disappear {
    0% { opacity: 1; transform: translate(0); }
    100% { opacity: 0; transform: translate(calc(-1 * var(--bc-travel-x)), calc(-1 * var(--bc-travel-y))); }
}
@keyframes rc-bc-glow { 0%, 100% { opacity: 0; } 50% { opacity: .35; } }
@keyframes rc-bc-dots {
    0% { transform: translate(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(55px, -35px); opacity: 0; }
}
@keyframes rc-bc-float { to { transform: translate(0, var(--bc-float-y)); } }
@keyframes rc-bc-fade { from { opacity: .2; } to { opacity: .8; } }
@keyframes rc-bc-particles { 0%, 100% { transform: translate(0); } 50% { transform: translate(10px, 15px); } }
@keyframes rc-bc-apps { to { transform: translate(0, var(--bc-app-y)); } }
@keyframes rc-bc-arrows { to { transform: translate(var(--bc-arrow), var(--bc-arrow)); } }
@keyframes rc-bc-arrows-back { to { transform: translate(calc(-1 * var(--bc-arrow)), calc(-1 * var(--bc-arrow))); } }

/* Staggered phases start immediately rather than leaving most layers still on load. */
.rc-blockchain-visual #Layer_1 :nth-child(1) { --bc-phase: -.3s; --bc-dot-delay: -.05s; }
.rc-blockchain-visual #Layer_1 :nth-child(2) { --bc-phase: -.6s; --bc-dot-delay: -.1s; }
.rc-blockchain-visual #Layer_1 :nth-child(3) { --bc-phase: -.9s; --bc-dot-delay: -.15s; }
.rc-blockchain-visual #Layer_1 :nth-child(4) { --bc-phase: -1.2s; --bc-dot-delay: -.2s; }
.rc-blockchain-visual #Layer_1 :nth-child(5) { --bc-phase: -1.5s; --bc-dot-delay: -.25s; }
.rc-blockchain-visual #Layer_1 :nth-child(6) { --bc-phase: -1.8s; --bc-dot-delay: -.3s; }
.rc-blockchain-visual #Layer_1 :nth-child(7) { --bc-phase: -2.1s; --bc-dot-delay: -.35s; }
.rc-blockchain-visual #Layer_1 :nth-child(8) { --bc-phase: -2.4s; --bc-dot-delay: -.4s; }
.rc-blockchain-visual #Layer_1 :nth-child(9) { --bc-phase: -2.7s; --bc-dot-delay: -.45s; }
.rc-blockchain-visual #Layer_1 :nth-child(10) { --bc-phase: -3s; --bc-dot-delay: -.5s; }
.rc-blockchain-visual #Layer_1 :nth-child(11) { --bc-phase: -3.3s; --bc-dot-delay: -.55s; }
.rc-blockchain-visual #Layer_1 :nth-child(12) { --bc-phase: -3.6s; --bc-dot-delay: -.6s; }
.rc-blockchain-visual #Layer_1 :nth-child(13) { --bc-phase: -3.9s; --bc-dot-delay: -.65s; }
.rc-blockchain-visual #Layer_1 :nth-child(14) { --bc-phase: -4.2s; --bc-dot-delay: -.7s; }
.rc-blockchain-visual #Layer_1 :nth-child(15) { --bc-phase: -4.5s; --bc-dot-delay: -.75s; }
.rc-blockchain-visual #Layer_1 :nth-child(16) { --bc-phase: -4.8s; --bc-dot-delay: -.8s; }
.rc-blockchain-visual #Layer_1 :nth-child(17) { --bc-phase: -5.1s; --bc-dot-delay: -.85s; }
.rc-blockchain-visual #Layer_1 :nth-child(18) { --bc-phase: -5.4s; --bc-dot-delay: -.9s; }
.rc-blockchain-visual #Layer_1 :nth-child(19) { --bc-phase: -5.7s; --bc-dot-delay: -.95s; }
.rc-blockchain-visual #Layer_1 :nth-child(20) { --bc-phase: -6s; --bc-dot-delay: -1s; }
.rc-blockchain-visual #Layer_1 :nth-child(21) { --bc-phase: -6.3s; }
.rc-blockchain-visual #Layer_1 :nth-child(22) { --bc-phase: -6.6s; }

@media (prefers-reduced-motion: reduce) {
    .rc-blockchain-visual { --bc-travel-x: 60px; --bc-travel-y: -35px; --bc-float-y: -8px; --bc-app-y: -6px; --bc-arrow: 5px; --bc-cycle: 8s; --bc-float-cycle: 6s; }
    .rc-blockchain-visual #redblocksparticles > g:nth-child(-n+5) polygon,
    .rc-blockchain-visual #redblocksparticles > g:nth-child(-n+4) g circle,
    .rc-blockchain-visual :is(#bottomparticles, #bottomparticles2, #redglowparticles) > :nth-child(-n+13),
    .rc-blockchain-visual .particlespoly { animation: none; opacity: .15; }
    .rc-blockchain-visual #Layer_1 > g:nth-child(2) > g:nth-child(18) > g:nth-child(12),
    .rc-blockchain-visual #Layer_1 > g:nth-child(2) > g:nth-child(17) > g:nth-child(12) { animation: rc-bc-arrows 6s ease-in-out infinite alternate; }
    .rc-blockchain-visual #Layer_1 > g:nth-child(2) > g:nth-child(17) > g:nth-child(13) { animation: rc-bc-arrows-back 6s ease-in-out infinite alternate; }
}