:root{--stage1-duration: .3s;--stage2-duration: .3s;--border-color: var(--bs-primary);--thickness: 2px}.line{position:absolute;background:var(--border-color);pointer-events:none}.line-top{top:0;left:0;height:var(--thickness);width:0;transition:width var(--stage1-duration) linear var(--stage2-duration)}.line-left{top:0;left:0;width:var(--thickness);height:0;transition:height var(--stage1-duration) linear var(--stage2-duration)}.line-right{top:0;right:0;width:var(--thickness);height:0;transition:height var(--stage2-duration) linear 0ms}.line-bottom{bottom:0;left:0;height:var(--thickness);width:0;transition:width var(--stage2-duration) linear 0ms}.card:hover .line-top{transition:width var(--stage1-duration) linear 0ms;width:100%}.card:hover .line-left{transition:height var(--stage1-duration) linear 0ms;height:100%}.card:hover .line-right{transition:height var(--stage2-duration) linear var(--stage1-duration);height:100%}.card:hover .line-bottom{transition:width var(--stage2-duration) linear var(--stage1-duration);width:100%}.card-content{position:relative;z-index:2;pointer-events:auto;height:100%}