.brxe-shortcode{width:100%}#brxe-pyvsff { padding:var(--space-s) 0; position:relative; .pop-modal { cursor:pointer; } ul { position:relative; z-index:3; } ul:nth-child(1) { z-index:5; } .lines { margin:var(--space-m) 0; height:calc(100% - (var(--space-m) * 2)); overflow:hidden; position:absolute; width:100%; z-index:2; .brxe-divider { position:absolute; top:50%; right:50%; transform-origin:100% 0; width:100%; .line { border-color:var(--border-primary); border-width:3px; &::after { content: ''; position: absolute; width: 220px; height: 6px; background: linear-gradient(90deg, var(--border-primary), var(--primary), var(--border-primary)); border-radius: 50%; filter:blur(2px); top:-1.5px; transform: translateY(-50%) translateX(-50%); animation: flashy-line 4s linear infinite; } } } } .circle-animation { background-image: conic-gradient( var(--primary), var(--secondary), var(--secondary), var(--primary)); background-position: 50%; background-size: 100% 100%; animation: rotate 4s linear infinite; transform: rotate(0deg); inset: 0; height: 100%; width: 100%; z-index: 2; &:before { aspect-ratio:1/1; border-radius:100%; content: ''; filter: blur(10px); position: absolute; inset: 0; opacity:0.5; background: inherit; animation: blur-effect 4s linear infinite; z-index: 1; } > div { position: relative; z-index: 3; animation: counter-rotate 4s linear infinite; } }}@keyframes flashy-line { 0% { left: 100%; } 100% { left: 0%; }}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes counter-rotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }}@keyframes blur-effect { 0%, 100% { filter: blur(6px); } 25%, 75% { filter: blur(30px); }}