@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #061206;
}
.card{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 320px;
    background: var(--clr1);
    box-shadow: 0 0 0 5px #0009, 0 10px 65px var(--clr1);
    transition: 0.25s;
}
.card:hover{
    background: var(--clr2);
    box-shadow: 0  0 5px #0009, 0 10px 45px var(--clr2), 0 10px 95px var(--clr2);
}
.card h2{
    font-size: 1.5em;
    text-align: center;Buen Día...
👽
BCDEF
    line-height: 3em;
    scale: 0;
    transition: 0.5s;
}
.card:hover h2{
    scale: 1;
}
.card h2 b{
    font-size: 4em;
}
.card .clip{
    position: absolute;
    inset: 5px;
    box-shadow: 0 0 0 2px #061206;
}
.card .clip span{
    position: absolute;
    inset: 0;
    background: #020d1e;
    transition: 0.5s;
    z-index: 1;
}
.card .clip span:nth-child(1){
    clip-path: polygon(0 6%, 0 94%, 51% 46%);
}
.card .clip span:nth-child(2){
    clip-path: polygon(94% 0, 5% 0, 51% 46%);
}
.card .clip span:nth-child(3){
    clip-path: polygon(100% 6%, 100% 94%, 51% 46%);
}
.card .clip span:nth-child(4){
    clip-path: polygon(96% 100%, 7% 99%, 51% 46%);
}
.card:hover .clip span:nth-child(1){
    clip-path: polygon(0 0, 0 100%, 10% 50%);
}
.card:hover .clip span:nth-child(2){
    clip-path: polygon(100% 0, 0% 0, 50% 10%);
}
.card:hover .clip span:nth-child(3){
    clip-path: polygon(100% 100%, 100% 0%, 90% 50%);
}
.card:hover .clip span:nth-child(4){
    clip-path: polygon(0% 100%, 100% 100%, 50% 90%);
}