/* Visual Asset Taxonomy hover demos (.x-va-*) */
.x-va-s { display: block; overflow: visible; }
.x-va-t { font: 9px var(--mono); fill: var(--key); letter-spacing: .04em; }
.x-va-tx { font: 8px var(--mono); fill: var(--text-2); }
.x-va-mu { fill: var(--muted); }
.x-va-dk { fill: #0e0e11; }
.x-va-sm { font-size: 7px; }
.x-va-big { font: 700 20px var(--sans); fill: var(--text); letter-spacing: -.02em; }
.x-va-bx { fill: #1d1d23; stroke: #3a3a44; stroke-width: 1; }
.x-va-hl { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 9px var(--mono); color: var(--key); letter-spacing: .04em; }
.x-va-o { transform-box: fill-box; transform-origin: center; }

/* shared motion */
@keyframes x-va-fl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.x-va-fl { animation: x-va-fl 3.2s ease-in-out infinite; }
.x-va-d2 { animation-delay: -1.2s; }
.x-va-d3 { animation-delay: .6s !important; }
@keyframes x-va-pu { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.x-va-pu { animation: x-va-pu 3s ease-in-out infinite; }
@keyframes x-va-pu2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.x-va-pu2 { animation: x-va-pu2 3s ease-in-out infinite; }
@keyframes x-va-pu3 { 0%, 100% { transform: scale(.88); } 50% { transform: scale(1.04); } }
.x-va-pu3 { animation: x-va-pu3 3.2s ease-in-out infinite; }
@keyframes x-va-dr { 0%, 4% { stroke-dashoffset: 1; } 38%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.x-va-dr { stroke-dasharray: 1; stroke-dashoffset: 0; animation: x-va-dr 4s ease-in-out infinite; }
.x-va-d2.x-va-dr { animation-delay: .5s; }
@keyframes x-va-fw { to { stroke-dashoffset: -12; } }
.x-va-fw { stroke-dasharray: 4 3; animation: x-va-fw 1s linear infinite; }
@keyframes x-va-pp { 0%, 4% { opacity: 0; transform: translateY(3px); } 14%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.x-va-pp { opacity: 0; animation: x-va-pp 4s ease-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes x-va-assemble { 0%, 8% { transform: translate(var(--x), var(--y)); opacity: .2; } 40%, 80% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)); opacity: .2; } }
.x-va-as { animation: x-va-assemble 4s ease-in-out infinite; }
@keyframes x-va-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-22deg); } }
.x-va-arm { transform-box: view-box; transform-origin: 160px 84px; animation: x-va-arm 1.6s ease-in-out infinite; }
@keyframes x-va-arm2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-18deg); } }
.x-va-arm2 { transform-box: view-box; transform-origin: 14px 8px; animation: x-va-arm2 1.1s ease-in-out infinite; }
@keyframes x-va-bl { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.x-va-bl { animation: x-va-bl 4s ease-in-out infinite; }
.x-va-bl2 { animation: x-va-bl 4s ease-in-out infinite reverse; }
@keyframes x-va-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.x-va-lift { animation: x-va-lift 3s ease-in-out infinite; }
@keyframes x-va-reg { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, 4px); } }
.x-va-reg { animation: x-va-reg 3.4s ease-in-out infinite; }
@keyframes x-va-jp { 0%, 100% { transform: translateY(0) scale(1.1, .88); } 40% { transform: translateY(-14px) scale(.92, 1.1); } 70% { transform: translateY(0) scale(1, 1); } }
.x-va-jp { animation: x-va-jp 1.6s ease-in-out infinite; }
@keyframes x-va-bb { 0%, 100% { transform: translateY(54px) scale(1.18, .8); } 45% { transform: translateY(0) scale(.92, 1.1); } }
.x-va-bb { transform-origin: 50% 100%; animation: x-va-bb 1.4s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes x-va-sh { 0%, 100% { transform: scaleX(1.1); opacity: .5; } 45% { transform: scaleX(.55); opacity: .2; } }
.x-va-sh { animation: x-va-sh 1.4s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes x-va-pg { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.x-va-pg { transform-box: fill-box; transform-origin: left; animation: x-va-pg 2.4s linear infinite; }
@keyframes x-va-act { 0%, 30% { stroke: var(--key); fill: #2a3410; } 34%, 100% { stroke: #3a3a44; fill: #1d1d23; } }
.x-va-act { animation: x-va-act 3s linear infinite; animation-delay: calc(var(--i) * 1s - 3s); }
@keyframes x-va-gr { 0%, 6% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.x-va-gr { transform-box: fill-box; transform-origin: left; animation: x-va-gr 4s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes x-va-vl { 0%, 100% { transform: translateX(8px); } 50% { transform: translateX(-4px); } }
.x-va-vl { animation: x-va-vl 4s ease-in-out infinite; }
.x-va-vr { animation: x-va-vl 4s ease-in-out infinite reverse; }
@keyframes x-va-nd { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.x-va-nd { animation: x-va-nd 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes x-va-gv { 0%, 6% { transform: scaleY(0); } 40%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.x-va-gv { transform-box: fill-box; transform-origin: bottom; animation: x-va-gv 4s cubic-bezier(.2, .8, .3, 1) infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes x-va-rv { 0%, 8% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.x-va-rv { animation: x-va-rv 4s ease-in-out infinite; }
@keyframes x-va-sg { 0%, 8% { stroke-dasharray: 0 100; } 45%, 90% { stroke-dasharray: var(--a) 100; } 100% { stroke-dasharray: 0 100; } }
.x-va-sg { stroke-dasharray: 0 100; animation: x-va-sg 4s ease-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes x-va-hc { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }
.x-va-hc { animation: x-va-hc 3s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes x-va-fc { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.x-va-fc { animation: x-va-fc 3s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes x-va-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.x-va-bob { animation: x-va-bob 2.4s ease-in-out infinite; }

/* 3D */
.x-va-gz { position: relative; width: 200px; height: 120px; border-radius: 10px; overflow: hidden; background: #14141a; }
.x-va-gz i { position: absolute; border-radius: 50%; filter: blur(2px); }
.x-va-gb1 { width: 70px; height: 70px; background: #ff3d8b; left: 30px; top: 14px; animation: x-va-g1 5s ease-in-out infinite; }
.x-va-gb2 { width: 56px; height: 56px; background: #2ec4f0; right: 36px; bottom: 10px; animation: x-va-g1 5s ease-in-out infinite reverse; }
.x-va-gb3 { width: 34px; height: 34px; background: var(--key); right: 70px; top: 10px; animation: x-va-g1 4s ease-in-out infinite; }
@keyframes x-va-g1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, 14px); } }
.x-va-gs { position: absolute; left: 62px; top: 14px; width: 82px; height: 82px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .16)); border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(9px) saturate(1.5); box-shadow: inset 0 0 14px rgba(255, 255, 255, .25), 0 8px 18px rgba(0, 0, 0, .4); }
.x-va-scene { width: 120px; height: 120px; perspective: 360px; display: grid; place-items: center; }
.x-va-cube3d { position: relative; width: 72px; height: 72px; transform-style: preserve-3d; animation: x-va-rot 7s linear infinite; }
.x-va-cube3d i { position: absolute; inset: 0; border: 1.5px solid var(--key); background: transparent; }
@keyframes x-va-rot { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.x-va-lt { animation: x-va-lt 3.4s ease-in-out infinite; }
@keyframes x-va-lt { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, 4px); } }
@keyframes x-va-sw { 0% { transform: translateX(0) rotate(20deg); } 100% { transform: translateX(110px) rotate(20deg); } }
.x-va-sw { animation: x-va-sw 3s ease-in-out infinite alternate; }
@keyframes x-va-st { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
.x-va-st { animation: x-va-st 4s ease-in-out infinite; }
@keyframes x-va-bmp { 0%, 100% { transform: translate(-1.5px, -1.5px); } 50% { transform: translate(2px, 2px); } }
.x-va-bmp { animation: x-va-bmp 3.2s ease-in-out infinite; }
@keyframes x-va-sd { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }
.x-va-sd { animation: x-va-sd 3.6s ease-in-out infinite; }
@keyframes x-va-rm { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(-12px); } }
.x-va-rm { animation: x-va-rm 3.4s ease-in-out infinite; }
@keyframes x-va-ao { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
.x-va-aol { animation: x-va-ao 4s steps(1, end) infinite; }
.x-va-ofa { animation: x-va-ao 4s steps(1, end) infinite reverse; }
.x-va-ona { animation: x-va-ao 4s steps(1, end) infinite; }
.x-va-dofw { position: relative; width: 200px; height: 100px; }
.x-va-dofw i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--key); box-shadow: 0 0 0 2px rgba(198, 255, 61, .25); top: 50%; margin-top: calc(var(--s) / -2); }
.x-va-dn { left: 24px; animation: x-va-dn 4s linear infinite alternate; }
.x-va-dm { left: 92px; animation: x-va-dm 4s linear infinite alternate; }
.x-va-df { left: 164px; animation: x-va-df 4s linear infinite alternate; }
@keyframes x-va-dn { 0%, 20% { filter: blur(0); } 50%, 100% { filter: blur(5px); opacity: .55; } }
@keyframes x-va-dm { 0%, 100% { filter: blur(5px); opacity: .55; } 40%, 60% { filter: blur(0); opacity: 1; } }
@keyframes x-va-df { 0%, 50% { filter: blur(5px); opacity: .55; } 80%, 100% { filter: blur(0); opacity: 1; } }
.x-va-fp { position: absolute; top: 4px; bottom: 4px; width: 1px; border-left: 1px dashed #fff; opacity: .6; left: 33px; animation: x-va-fp 4s linear infinite alternate; }
@keyframes x-va-fp { from { left: 33px; } to { left: 170px; } }
@keyframes x-va-hs { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(110px); } }
.x-va-hs { animation: x-va-hs 4s ease-in-out infinite; }
@keyframes x-va-hr { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(10px); } }
.x-va-hr { animation: x-va-hr 4s ease-in-out infinite; }

/* abstract */
.x-va-box { position: relative; width: 200px; height: 118px; border-radius: 12px; overflow: hidden; }
@property --x-va-a { syntax: "<angle>"; inherits: false; initial-value: 135deg; }
@property --x-va-px { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --x-va-py { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
.x-va-lin { background: linear-gradient(var(--x-va-a), #7c5cff, #ff4d8d 55%, #ffb347); animation: x-va-ang 6s linear infinite; }
@keyframes x-va-ang { to { --x-va-a: 495deg; } }
.x-va-rad { background: radial-gradient(circle at var(--x-va-px) var(--x-va-py), #fff6c8, #ffb347 22%, #ff4d8d 55%, #1d1030 100%); animation: x-va-rp 5s ease-in-out infinite; }
@keyframes x-va-rp { 0%, 100% { --x-va-px: 28%; --x-va-py: 30%; } 50% { --x-va-px: 72%; --x-va-py: 66%; } }
.x-va-mesh { background: #1a1230; }
.x-va-mesh i { position: absolute; width: 110px; height: 110px; border-radius: 50%; filter: blur(26px); }
.x-va-m1 { background: #ff4d8d; left: -20px; top: -30px; animation: x-va-md 7s ease-in-out infinite; }
.x-va-m2 { background: #7c5cff; right: -24px; top: -20px; animation: x-va-md 8s ease-in-out infinite reverse; }
.x-va-m3 { background: #2ec4f0; left: 10px; bottom: -50px; animation: x-va-md 9s ease-in-out infinite; }
.x-va-m4 { background: #ffb347; right: -10px; bottom: -44px; animation: x-va-md 7s ease-in-out infinite reverse; }
@keyframes x-va-md { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, 18px); } }
.x-va-au { background: #0a1020; }
.x-va-au i { position: absolute; left: -30px; right: -30px; height: 34px; border-radius: 50%; filter: blur(14px); }
.x-va-a1 { background: #2ee6a6; top: 22px; opacity: .8; animation: x-va-ad 6s ease-in-out infinite; }
.x-va-a2 { background: #6a5cff; top: 46px; opacity: .75; animation: x-va-ad 7s ease-in-out infinite reverse; }
.x-va-a3 { background: #2ec4f0; top: 70px; opacity: .6; animation: x-va-ad 8s ease-in-out infinite; }
@keyframes x-va-ad { 0%, 100% { transform: translateX(-16px) skewX(-14deg); } 50% { transform: translateX(16px) skewX(12deg) scaleY(1.3); } }
.x-va-orbw { background: #101015; display: grid; place-items: center; }
.x-va-ob { position: absolute; left: 56px; top: 14px; width: 90px; height: 90px; border-radius: 50%; background: #7c5cff; filter: blur(22px); animation: x-va-pu 4s ease-in-out infinite; opacity: .9; }
.x-va-oc { position: relative; width: 112px; height: 62px; border-radius: 10px; background: rgba(20, 20, 26, .55); border: 1px solid rgba(255, 255, 255, .14); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.x-va-oc b { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .7); width: 70%; } .x-va-oc b:nth-child(2) { width: 90%; background: rgba(255, 255, 255, .3); } .x-va-oc b:nth-child(3) { width: 45%; background: rgba(255, 255, 255, .3); }
.x-va-conic { width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(from 0deg, #ff4d8d, #ffb347, var(--key), #2ec4f0, #7c5cff, #ff4d8d); animation: x-va-cs 7s linear infinite; -webkit-mask: radial-gradient(circle, transparent 0 8px, #000 9px); mask: radial-gradient(circle, transparent 0 8px, #000 9px); }
@keyframes x-va-cs { to { transform: rotate(360deg); } }
.x-va-nz { animation: none; }
@keyframes x-va-dv { 0% { transform: translateX(0); } 50%, 100% { transform: translateX(178px); } }
.x-va-dv { animation: x-va-dv 4s ease-in-out infinite alternate; }
@keyframes x-va-ht { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.x-va-ht { animation: x-va-ht 3s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
.x-va-fr { background: #14141a; }
.x-va-fr i { position: absolute; border-radius: 50%; }
.x-va-fb1 { width: 60px; height: 60px; background: #ff4d8d; left: 20px; top: 14px; animation: x-va-g1 5s ease-in-out infinite; }
.x-va-fb2 { width: 44px; height: 44px; background: var(--key); left: 60px; top: 56px; animation: x-va-g1 5s ease-in-out infinite reverse; }
.x-va-fp2 { position: absolute; right: 0; top: 0; bottom: 0; width: 120px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); border-left: 1px solid rgba(255, 255, 255, .3); padding: 40px 14px; display: flex; flex-direction: column; gap: 8px; }
.x-va-fp2 b { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .8); width: 70%; } .x-va-fp2 b + b { width: 45%; background: rgba(255, 255, 255, .45); }
@keyframes x-va-dsc { 0% { transform: translateX(0); } 100% { transform: translateX(156px); } }
.x-va-dsc { animation: x-va-dsc 3s ease-in-out infinite alternate; }

/* shapes */
.x-va-blob { width: 110px; height: 100px; background: linear-gradient(135deg, var(--key), #2ec4b6); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: x-va-bm 5s ease-in-out infinite; }
@keyframes x-va-bm { 0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: rotate(0); } 33% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; } 66% { border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; transform: rotate(8deg); } }
@keyframes x-va-wv { from { transform: translateX(0); } to { transform: translateX(-100px); } }
.x-va-wv { animation: x-va-wv 3s linear infinite; }
@keyframes x-va-dg { 0%, 60%, 100% { r: 1.8px; fill: #5a5a66; } 25% { r: 4px; fill: var(--key); } }
.x-va-dg { animation: x-va-dg 3s ease-in-out infinite; animation-delay: var(--d); }
.x-va-lg { background-color: #14141a; background-image: linear-gradient(#2a2a31 1px, transparent 1px), linear-gradient(90deg, #2a2a31 1px, transparent 1px), linear-gradient(#1d1d23 1px, transparent 1px), linear-gradient(90deg, #1d1d23 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px; animation: x-va-lgm 6s linear infinite; border: 1px solid #2a2a31; }
@keyframes x-va-lgm { to { background-position: 40px 40px, 40px 40px, 40px 40px, 40px 40px; } }
.x-va-lg b { position: absolute; right: 12px; top: 10px; font: 10px var(--mono); color: var(--muted); font-weight: 500; }
@keyframes x-va-tl { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9); } }
.x-va-tl { animation: x-va-tl 3.5s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes x-va-cf { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(6px) rotate(var(--r)); } }
.x-va-cf { transform-box: fill-box; transform-origin: center; animation: x-va-cf 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes x-va-tp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.x-va-tp { transform-box: view-box; transform-origin: 150px 72px; animation: x-va-tp 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }

/* icons */
.x-va-r3 { display: flex; gap: 18px; }
.x-va-tab { display: flex; gap: 6px; padding: 8px 10px; background: #18181d; border: 1px solid #2a2a31; border-radius: 12px; }
.x-va-tab > div { width: 50px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.x-va-fi { fill: currentColor; stroke: currentColor; }
.x-va-tab > div:nth-child(2) { animation: x-va-tabon 4.5s steps(1, end) infinite; }
.x-va-tab > div:nth-child(1) { animation: x-va-tabon 4.5s steps(1, end) infinite reverse; }
@keyframes x-va-tabon { 0%, 49% { color: var(--key); background: rgba(198, 255, 61, .1); } 50%, 100% { color: var(--muted); background: transparent; } }
.x-va-mc { display: flex; flex-direction: column; gap: 10px; }
.x-va-mr { display: flex; align-items: center; gap: 10px; font: 600 13px var(--sans); color: var(--text-2); animation: x-va-mcol 4s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes x-va-mcol { 0%, 100% { color: var(--text-2); } 50% { color: var(--key); } }
@keyframes x-va-sk { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.x-va-sk { }
.x-va-ring { animation: x-va-sk 4s ease-in-out infinite; animation-delay: calc(var(--i) * 1s - 4s); }
.x-va-cr { display: flex; gap: 18px; }
@keyframes x-va-crr { 0%, 100% { border-radius: 1px; } 50% { border-radius: 14px; } }
.x-va-cr i { width: 50px; height: 50px; border: 2px solid #e8e8ee; border-radius: 1px; display: block; animation: x-va-crr 4s ease-in-out infinite; }
.x-va-cr .x-va-cd { height: 36px; align-self: center; width: 56px; }
.x-va-cr .x-va-ce { width: 38px; height: 50px; border-color: var(--key); }
@keyframes x-va-op { 0%, 20% { transform: translateX(0); } 55%, 100% { transform: translateX(4px); } }
.x-va-op { animation: x-va-op 4s ease-in-out infinite alternate; }
@keyframes x-va-pxa { 0%, 45% { transform: translateY(0); opacity: 1; } 50%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes x-va-sz { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.x-va-sz { color: var(--text); animation: x-va-sz 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.x-va-sz g { stroke: currentColor; }
@keyframes x-va-tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
.x-va-tap { animation: x-va-tap 2.4s ease-out infinite; }
.x-va-am { width: 100px; height: 100px; display: grid; place-items: center; }
.x-va-hb { position: relative; width: 44px; height: 32px; animation: x-va-hbs 4s ease-in-out infinite; }
.x-va-hb i { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: #e8e8ee; top: 14px; transition: none; }
.x-va-hb i:nth-child(1) { animation: x-va-h1 4s ease-in-out infinite; }
.x-va-hb i:nth-child(2) { animation: x-va-h2 4s ease-in-out infinite; }
.x-va-hb i:nth-child(3) { animation: x-va-h3 4s ease-in-out infinite; }
@keyframes x-va-h1 { 0%, 15%, 100% { transform: translateY(-12px) rotate(0); background: #e8e8ee; } 40%, 70% { transform: translateY(0) rotate(45deg); background: var(--key); } }
@keyframes x-va-h2 { 0%, 15%, 100% { opacity: 1; } 40%, 70% { opacity: 0; } }
@keyframes x-va-h3 { 0%, 15%, 100% { transform: translateY(12px) rotate(0); background: #e8e8ee; } 40%, 70% { transform: translateY(0) rotate(-45deg); background: var(--key); } }