.card-spotlight{position:relative;border-radius:1.5rem;border:1px solid rgba(0,0,0,.1);padding:2rem;overflow:hidden;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(99,102,241,0.15);transition:border-color .3s ease;background-color:transparent}.card-spotlight:hover{border-color:rgba(99,102,241,.3)}.card-spotlight:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 60%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1}.card-spotlight:focus-within:before,.card-spotlight:hover:before{opacity:1}.card-spotlight>*{position:relative;z-index:2}.glass-icon{background-color:transparent;outline:none;position:relative;width:3.5em;height:3.5em;perspective:24em;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent;flex-shrink:0}.glass-icon__back,.glass-icon__front{transition:opacity .3s cubic-bezier(.83,0,.17,1),transform .3s cubic-bezier(.83,0,.17,1);border-radius:1rem;position:absolute;top:0;left:0;width:100%;height:100%}.glass-icon__back{box-shadow:.5em -.5em .75em hsla(223,10%,10%,.15);display:block;transform:rotate(15deg);transform-origin:100% 100%}.glass-icon__front{background-color:hsla(0,0%,100%,.15);box-shadow:inset 0 0 0 .1em hsla(0,0%,100%,.3);backdrop-filter:blur(.75em);-webkit-backdrop-filter:blur(.75em);display:flex;transform-origin:80% 50%}.glass-icon__icon{margin:auto;width:1.5em;height:1.5em;display:flex;align-items:center;justify-content:center;color:white}.glass-icon:hover .glass-icon__back{transform:rotate(25deg) translate3d(-.5em,-.5em,.5em)}.glass-icon:hover .glass-icon__front{transform:translateZ(2em)}