.fx-cards{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding-bottom:40px}.fx-cards .all{display:flex;gap:var(--gap,28px);justify-content:center;perspective:10px;perspective-origin:50%;transform:perspective(300px) rotateX(20deg);transform-style:preserve-3d;transition:all 1.3s ease-out;will-change:perspective,transform}.fx-cards .all:hover{perspective:1000px;transform:perspective(10000px) rotateX(0deg);transition:all 1.3s ease-in}.fx-cards .all:hover .card{opacity:1;transition-delay:0s}.fx-cards .all:hover .text{opacity:1;transform:translate(-50%)}.fx-cards .all:hover .explainer{opacity:0}.fx-cards .all:hover .card:after{opacity:1}.fx-cards .card{background-blend-mode:color-burn;background-color:var(--card-bg,#523694);background-image:var(--img,none);background-position:50%;background-repeat:no-repeat;background-size:var(--bg-size,72px) auto;border:1px solid #fff;border-radius:10px;box-shadow:0 0 20px 5px rgba(100,100,255,.4);cursor:pointer;display:block;height:var(--h,150px);opacity:0;pointer-events:auto;position:relative;transform-style:preserve-3d;transition:opacity .3s ease,transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,background-color .3s ease,background-size .35s ease;transition-delay:1s;width:var(--w,210px);z-index:1}.fx-cards .card:before{background:linear-gradient(180deg,hsla(0,0%,100%,.28),hsla(0,0%,100%,.06) 60%,hsla(0,0%,100%,0) 75%),radial-gradient(120% 60% at 50% -10%,hsla(0,0%,100%,.35),hsla(0,0%,100%,0) 60%);border-radius:10px;content:"";inset:0;mix-blend-mode:screen;pointer-events:none;position:absolute}.fx-cards .card:after{color:#666;content:attr(data-caption);font-size:18px;font-weight:600;left:50%;line-height:1.35;opacity:0;pointer-events:none;position:absolute;text-align:center;top:calc(100% + 16px);transform:translateX(-50%);transition:opacity .3s ease;width:var(--w,210px)}.fx-cards .card:hover{background-color:#ccf;box-shadow:0 0 30px 10px rgba(100,100,255,.6)}.fx-cards .text{bottom:8px;color:#fff;font-size:24px;font-weight:600;left:50%;line-height:1.1;opacity:0;position:absolute;text-align:center;text-shadow:0 0 5px rgba(100,100,255,.6);transform:translate(-50%,30px);transition:all .3s ease;width:90%}.fx-cards .left{transform:translateX(-30px) translateZ(-25px) rotateY(-5deg);z-index:1}.fx-cards .center{opacity:1;transform:translateZ(0) rotateY(0);--bg-size:0px;z-index:2}.fx-cards .right{transform:translateX(30px) translateZ(-25px) rotateY(5deg);z-index:1}.fx-cards .all:hover .center{--bg-size:72px}.fx-cards .explainer{align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.02));border-radius:10px;color:#fff;display:flex;font-size:clamp(18px,2.2vw,26px);font-weight:600;inset:0;justify-content:center;pointer-events:none;position:absolute;text-shadow:0 0 10px hsla(0,0%,100%,.6);transition:opacity .6s ease;z-index:3}.fx-cards .all:hover .left{transform:translateX(-30px) translateZ(-20px) rotateY(-4deg)}.fx-cards .all:hover .right{transform:translateX(30px) translateZ(-20px) rotateY(4deg)}