:root{--sunpillar-1:#f0ff80;--sunpillar-2:#edff66;--sunpillar-3:#eaff4c;--sunpillar-4:#e7ff33;--sunpillar-5:#e4ff1a;--sunpillar-6:#e1ff00;--grain:url(https://assets.codepen.io/13471/grain.webp)}.service-card-wrapper{perspective:1000px;touch-action:none;position:relative}.service-card{--card-opacity:0;--rotate-x:0deg;--rotate-y:0deg;--pointer-x:50%;--pointer-y:50%;--background-x:50%;--background-y:50%;aspect-ratio:.718;transform-style:preserve-3d;background-color:#0a0a0ae6;border:1px solid #d7f12e1a;border-radius:20px;transition:transform .5s,box-shadow .5s;position:relative;overflow:hidden}.service-card:hover{--card-opacity:1;transform:rotateX(var(--rotate-y)) rotateY(var(--rotate-x)) scale(1.02);border-color:#d7f12e4d}.card__shine{z-index:3;pointer-events:none;mix-blend-mode:color-dodge;opacity:var(--card-opacity);background-image:repeating-linear-gradient(0deg, var(--sunpillar-1) 5%, var(--sunpillar-2) 10%, var(--sunpillar-3) 15%, var(--sunpillar-4) 20%, var(--sunpillar-5) 25%, var(--sunpillar-6) 30%, var(--sunpillar-1) 35%), repeating-linear-gradient(-45deg, #050505 0%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #050505 10% , #050505 12%);background-position:0% var(--background-y), var(--background-x) var(--background-y);background-blend-mode:color, hard-light;background-size:500% 500%,300% 300%;transition:opacity .5s;position:absolute;inset:0}.card__shine:before{content:"";background-image:linear-gradient(45deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3)), radial-gradient(circle at var(--pointer-x) var(--pointer-y), #b3b3b3 0%, #4d4d4d33 90%), var(--grain);background-size:250% 250%,100% 100%,220px 220px;background-position:var(--pointer-x) var(--pointer-y), center center, 0 0;background-blend-mode:color-dodge;mix-blend-mode:luminosity;filter:brightness(1.5)contrast(1.5);position:absolute;inset:0}.card__glare{z-index:4;pointer-events:none;mix-blend-mode:overlay;opacity:var(--card-opacity);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #fffc 10%, #fff0 60%);transition:opacity .5s;position:absolute;inset:0}.card__content{z-index:5;background:linear-gradient(#0000 40%,#000c 100%);flex-direction:column;justify-content:flex-end;height:100%;padding:2rem;display:flex;position:relative}@keyframes holo-bg{0%{background-position:0%,0 0}to{background-position:0%,90% 90%}}.service-card:not(:hover) .card__shine{opacity:.2;animation:15s linear infinite holo-bg}
.laser-flow-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}