.holographic-card{width:300px;height:200px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border-radius:15px;transition:all .5s ease}.holographic-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(0deg,transparent,transparent 30%,rgba(0,255,255,.3));transform:rotate(-45deg);transition:all .5s ease;opacity:0}.holographic-card:hover{transform:scale(1.05);box-shadow:0 0 20px #00ffff80}.holographic-card:hover:before{opacity:1;transform:rotate(-45deg) translateY(100%)}.liquid-morph-element{background:#0a2342;display:flex;justify-content:center;align-items:center;position:relative;border-radius:50px;overflow:hidden;transition:all .6s cubic-bezier(.68,-.55,.265,1.55)}.liquid-morph-element:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:conic-gradient(#0ff,#0a2342,#0ff 240deg);transition:all .6s ease;opacity:0;transform:scale(0)}.liquid-morph-element:hover{border-radius:10px;transform:rotate(15deg)}.liquid-morph-element:hover:before{opacity:.5;transform:scale(2)}.particle-deconstruct-element{width:300px;height:200px;background:#111;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.particle-deconstruct-element h2{color:#0ff;font-size:2rem;position:relative;z-index:2;transition:all .5s ease}.particle-deconstruct-element:before,.particle-deconstruct-element:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-radial-gradient(circle at center,#0ff 1px,transparent 2px,transparent 50px);background-opacity:0;background-transition:all .5s ease}.particle-deconstruct-element:hover h2{transform:scale(1.5) rotate(360deg);opacity:0}.particle-deconstruct-element:hover:before{transform:scale(2) rotate(45deg);opacity:.3}.particle-deconstruct-element:hover:after{transform:scale(2) rotate(-45deg);opacity:.3}