.boxes{grid-template-rows:repeat(5,4px);grid-template-columns:repeat(4,4px);gap:2px;display:grid}.boxes .grid-box{z-index:1;border-radius:0;justify-content:center;align-items:center;width:4px;height:4px;transition:all .3s;display:flex;position:relative;overflow:hidden}.boxes .highlight{background:#dd9a38}.boxes .highlight.active:before,.boxes .highlight.active:after{background:var(--Brand-Green,#3b5f5d)}.boxes .highlight:before,.boxes .highlight:after{content:"";background:var(--Brand-Gold,#dd9a38);z-index:-1;opacity:0;width:50%;height:100%;transition:transform .4s ease-in-out,opacity .4s .8s;position:absolute;top:0;transform:scaleX(0)}.boxes .highlight:before{transform-origin:100%;left:0}.boxes .highlight:after{transform-origin:0;right:0}.boxes .highlight:hover:before,.boxes .highlight:hover:after{opacity:1;transition:transform .4s ease-in-out,opacity .4s;transform:scaleX(1)}.boxes .thicker{background:#313131}.boxes .thicker.active:before,.boxes .thicker.active:after{background:var(--Brand-Green,#3b5f5d)}.boxes .thicker:before,.boxes .thicker:after{content:"";background:var(--Brand-Gold,#dd9a38);z-index:-1;opacity:0;width:50%;height:100%;transition:transform .4s ease-in-out,opacity .4s .8s;position:absolute;top:0;transform:scaleX(0)}.boxes .thicker:before{transform-origin:100%;left:0}.boxes .thicker:after{transform-origin:0;right:0}.boxes .thicker:hover:before,.boxes .thicker:hover:after{opacity:1;transition:transform .4s ease-in-out,opacity .4s;transform:scaleX(1)}.boxes .grey{background:#737373}.boxes .grey.active:before,.boxes .grey.active:after{background:var(--Brand-Green,#3b5f5d)}.boxes .grey:before,.boxes .grey:after{content:"";background:var(--Brand-Gold,#dd9a38);z-index:-1;opacity:0;width:50%;height:100%;transition:transform .4s ease-in-out,opacity .4s .8s;position:absolute;top:0;transform:scaleX(0)}.boxes .grey:before{transform-origin:100%;left:0}.boxes .grey:after{transform-origin:0;right:0}.boxes .grey:hover:before,.boxes .grey:hover:after{opacity:1;transition:transform .4s ease-in-out,opacity .4s;transform:scaleX(1)}.boxes .glitch{background:repeating-linear-gradient(45deg,#f87171,#f87171 10px,#facc15 10px 20px);animation:.8s infinite alternate glitch}.boxes .gold{background-color:#f59e0b;transform:rotate(5deg);box-shadow:0 0 10px #fbbf24}@keyframes pulse-highlight{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-1px,2px)}75%{transform:translate(1px,-1px)}to{transform:translate(0)}}