.card-container{--sz:min(60vh,clamp(260px,38vw,330px));--fz:calc(.032*var(--sz));--xv:0;--yv:0;aspect-ratio:1/1.05;width:100%;max-width:100%;height:auto;transform-style:preserve-3d;perspective:1200px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.card-container .tilt{width:86%;height:86%;transform:rotateX(calc(1deg*var(--xv)))rotateY(calc(1deg*var(--yv)));background:linear-gradient(calc(var(--yv)*-.4deg),transparent,transparent calc(20% + (-3px*var(--xv))),#ffffff0f calc(40% + (-3px*var(--xv))),#ffffff05 calc(70% + (-3px*var(--xv))),transparent calc(90% + (-3px*var(--xv))),transparent);z-index:10;border:1px solid #9b6b51cc;border-radius:22px;padding:12px 22px;transition:all .4s ease-out;position:relative;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a}.card-container .tilt:before{content:"";border:1px solid #9b6b5166;border-radius:28px;width:calc(100% + 24px);height:calc(100% + 24px);margin:auto;display:block;position:absolute;top:-12px;left:-12px}.card-container .tilt span.tag{color:#02128e;width:fit-content;font-size:calc(.9*var(--fz));background:#fff9;border:1px solid #6464644d;border-radius:4px;margin:0 auto 22px;padding:4px 8px;font-family:Mona Sans,sans-serif;display:block}.card-container .tilt h2{font-size:calc(3.2*var(--fz));-webkit-text-fill-color:transparent;text-align:center;background:linear-gradient(#2a2a2a 0%,#4a4a4a 100%);-webkit-background-clip:text;background-clip:text;margin:0 0 16px;font-family:Mona Sans,sans-serif;font-weight:800;line-height:127%}.card-container .tilt p{font-size:calc(1.6*var(--fz));color:#272727;text-align:center;font-family:Mona Sans,sans-serif;font-weight:500;line-height:170%}.card-container .tilt p span{color:#000;font-weight:600}.card-container .vortex{pointer-events:none;width:100%;height:100%;position:absolute}.card-container .vortex svg{opacity:.08;width:88%;margin:auto;position:absolute;bottom:-6%;left:0;right:0}.card-container .mist{width:140%;height:200%;box-shadow:inset 0 0 calc(var(--sz)/6)calc(var(--sz)/10)#fffdfd66;border-radius:calc(var(--sz)/2);pointer-events:none;position:absolute;bottom:-6%;left:-20%}.card-container .orbs{pointer-events:none;width:100%;height:100%;position:absolute}.card-container .hide-orb{border-radius:calc((1/3)*var(--sz));width:100%;height:100%;box-shadow:inset 0 calc((.78)*var(--sz))calc((.08)*var(--sz))calc((-.18)*var(--sz))#f7f7f7;position:absolute;left:0;right:0}.card-container .orb{width:calc(var(--sz)/6);height:calc(var(--sz)/6);opacity:0;--startX:calc(-.6*var(--sz));--startY:0;--offset:0s;animation:24s cubic-bezier(.11,0,.5,0) infinite orbX,24s cubic-bezier(.64,0,.92,0) infinite orbY;animation-delay:var(--offset);background:#211e1f;border-radius:100%;margin:auto;position:absolute;bottom:20%;left:0;right:0;box-shadow:0 -2px 12px -3px #272222,inset 8px -4px 2px #fff2,inset 0 0 12px #fffc,inset 0 6px 12px -6px #0008,inset 0 32px 12px -12px #0003}.card-container .orb:nth-child(2){--startX:calc(.6*var(--sz));--offset:4s}.card-container .orb:nth-child(3){--startX:calc(-.3*var(--sz));--startY:calc(-.3*var(--sz));--offset:8s}.card-container .orb:nth-child(4){--startX:calc(.3*var(--sz));--startY:calc(-.3*var(--sz));--offset:12s}.card-container .orb:nth-child(5){--startX:calc(-.6*var(--sz));--startY:calc(-.15*var(--sz));--offset:16s}.card-container .orb:nth-child(6){--startX:calc(.6*var(--sz));--startY:calc(-.15*var(--sz));--offset:20s}.card-container .orb img{width:64%;height:auto;margin:auto;display:none;position:absolute;inset:0}.card-container .orb .dot{transform-origin:0 -36px;background:#fff;width:2px;height:1px;margin:auto;animation:10s linear infinite innerDot,6s ease-in-out infinite innerDot2;position:absolute;inset:100% 0 0;rotate:none;box-shadow:0 0 4px 1px #fff}.card-container .orb .dot:nth-child(2){animation-name:innerDot,innerDot2;animation-duration:12s,5s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:-2s;animation-fill-mode:none,none;animation-timeline:auto,auto;scale:.8}.card-container .orb .dot:nth-child(3){animation-name:innerDot,innerDot2;animation-duration:8s,4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:reverse;animation-play-state:running,running;animation-delay:-6s;animation-fill-mode:none,none;animation-timeline:auto,auto;scale:.7}.card-container .orb .dot:nth-child(4){animation-name:innerDot,innerDot2;animation-duration:22s,5s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:-5s;animation-fill-mode:none,none;animation-timeline:auto,auto}.card-container .orb .dot:nth-child(5){animation-name:innerDot,innerDot2;animation-duration:8s,3.4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:reverse;animation-play-state:running,running;animation-delay:-1s;animation-fill-mode:none,none;animation-timeline:auto,auto;scale:.76}.card-container .orb .dot:nth-child(6){animation-name:innerDot,innerDot2;animation-duration:8.6s,3.4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:-2s;animation-fill-mode:none,none;animation-timeline:auto,auto;scale:.8}.card-container .orb .dot:nth-child(7){animation-name:innerDot,innerDot2;animation-duration:9.2s,3.4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:reverse;animation-play-state:running,running;animation-delay:-3s;animation-fill-mode:none,none;animation-timeline:auto,auto;scale:.9}@keyframes innerDot{to{rotate:360deg}}@keyframes innerDot2{50%{translate:0 -16px}to{translate:0}}@keyframes orbX{0%{translate:var(--startX)var(--startY)}20%{translate:0}to{translate:0}}@keyframes orbY{0%{opacity:1;transform:translateY(0)scale(1)}20%{transform:translateY(calc(.3*var(--sz)))scale(.5);opacity:0}to{transform:translateY(calc(.3*var(--sz)))scale(.5);opacity:0}}@media (max-width:768px){.card-container{--sz:min(85vw,320px)}.card-container .tilt h2{font-size:calc(2.8*var(--fz))}.card-container .tilt p{font-size:calc(1*var(--fz))}}