@layer components{.animated-lines{gap:30px;width:100%;height:100%;display:flex}@media (width<=768px){.animated-lines{transform:scale(2)}}.animated-lines__row{--size:7vmin;--gap:calc(var(--size)*.03);gap:var(--gap);transform-style:preserve-3d;pointer-events:none;animation:animated-lines-row 12.8s var(--transition-easing)infinite;grid-template-columns:1fr;place-self:center;display:grid;transform:rotateX(45deg)rotate(45deg)}.animated-lines__row:hover{animation-play-state:paused}.animated-lines__row:nth-child(odd){--begin:calc(-2.5%);--end:calc(2.5%)}.animated-lines__row:nth-child(2n){--begin:calc(2.5%);--end:calc(-2.5%)}.animated-lines__row:nth-child(2){animation-delay:-320ms}.animated-lines__row:nth-child(3){animation-delay:-1280ms}@keyframes animated-lines-row{0%,to{transform:rotateX(45deg)rotate(45deg)translateY(var(--begin))}50%{transform:rotateX(45deg)rotate(45deg)translateY(var(--end))}}.animated-lines__item{width:var(--size);height:var(--size);background:var(--grey-000);transform-origin:-50% -50% calc(0vmin - var(--size));transform-style:preserve-3d;transition:background-color 2.56s var(--transition-easing)1.28s;pointer-events:auto;display:grid;scale:1 1 .1}.animated-lines__item:before,.animated-lines__item:after{--offset-y:0;--offset-x:calc(1 - var(--offset-y));content:"";translate:calc(var(--offset-y)*100%)calc(var(--offset-x)*100%);rotate:var(--offset-x)var(--offset-y)0 calc((2*var(--offset-y) - 1)*90deg);transform-origin:calc(var(--offset-x)*50%)calc(var(--offset-y)*50%);grid-area:1/1}.animated-lines__item:before{background-color:var(--grey-200)}.animated-lines__item:after{--offset-y:1;background-color:var(--grey-300)}.animated-lines__item:nth-child(7n){--hover-color:var(--red)}.animated-lines__item:nth-child(7n+1){--hover-color:var(--green)}.animated-lines__item:nth-child(7n+2){--hover-color:var(--yellow)}.animated-lines__item:nth-child(7n+3){--hover-color:var(--orange)}.animated-lines__item:nth-child(7n+4){--hover-color:var(--blue)}.animated-lines__item:nth-child(7n+5){--hover-color:var(--magenta)}.animated-lines__item:nth-child(7n+6){--hover-color:var(--cyan)}.animated-lines__item:is(:hover,:focus){cursor:pointer;background-color:var(--hover-color);transition:background-color .16s var(--transition-easing)}.animated-lines__row:first-child .animated-lines__item:nth-child(4),.animated-lines__row:nth-child(2) .animated-lines__item:nth-child(8),.animated-lines__row:nth-child(3) .animated-lines__item:nth-child(11){animation:animated-line-cube-pop-in 9s var(--transition-easing)-1s infinite}.animated-lines__row:first-child .animated-lines__item:nth-child(6),.animated-lines__row:nth-child(2) .animated-lines__item:nth-child(12),.animated-lines__row:nth-child(3) .animated-lines__item:nth-child(4){animation:animated-line-cube-pop-in 8s var(--transition-easing)-3s infinite}.animated-lines__row:first-child .animated-lines__item:nth-child(9),.animated-lines__row:nth-child(2) .animated-lines__item:nth-child(7),.animated-lines__row:nth-child(3) .animated-lines__item:nth-child(17){animation:animated-line-cube-pop-in 11s var(--transition-easing)-4.5s infinite}.animated-lines__row:first-child .animated-lines__item:nth-child(28),.animated-lines__row:nth-child(2) .animated-lines__item:nth-child(19),.animated-lines__row:nth-child(3) .animated-lines__item:nth-child(14){animation:animated-line-cube-pop-in 7s var(--transition-easing)-4s infinite}.animated-lines__row:first-child .animated-lines__item:nth-child(16),.animated-lines__row:nth-child(2) .animated-lines__item:nth-child(21),.animated-lines__row:nth-child(3) .animated-lines__item:nth-child(10){animation:animated-line-cube-pop-in 10s var(--transition-easing)-2s infinite}.animated-lines__row:first-child .animated-lines__item:nth-child(28),.animated-lines__row:nth-child(2) .animated-lines__item:nth-child(18),.animated-lines__row:nth-child(3) .animated-lines__item:nth-child(20){animation:animated-line-cube-pop-in 12s var(--transition-easing)-5s infinite}@keyframes animated-line-cube-pop-in{0%,75%{scale:1 1 .1}20%,50%{background-color:var(--hover-color);scale:1 1 .35}}}