@property --ratio-x{syntax:"<number>";inherits:true;initial-value:0}@property --ratio-y{syntax:"<number>";inherits:true;initial-value:0}@property --correction{syntax:"<percent>";inherits:true;initial-value:0%}.iso-holo-card{container-type:inline-size;overflow:hidden;width:100%;height:100%;min-height:120px;border-radius:1.5rem;background:#0a0e2a;position:relative;--ratio-x:0;--ratio-y:0;transform-style:preserve-3d;transition:transform .2s linear;transform:rotateY(calc(-20deg * var(--ratio-x))) rotateX(calc(20deg * var(--ratio-y)));--correction:0%}.iso-holo-card:hover .iso-holo-bg{opacity:.8}.iso-holo-card:hover .iso-holo-circles{opacity:1}.iso-holo-card:hover{--correction:0%}.iso-holo-bg{position:absolute;border-radius:inherit;inset:0;background:radial-gradient(ellipse at calc(90% - var(--ratio-x) * 20%) calc(0% - var(--ratio-y) * 20%),
            rgba(255, 255, 255, 0.7), #ddb4eb 1%, #000 20%, transparent),
        linear-gradient(110deg,
            #0093ff calc(10% - var(--ratio-x) * 20%),
            #51d6fd calc(20% - var(--ratio-x) * 20%),
            #0093ff calc(30% - var(--ratio-x) * 20%),
            #000 calc(60% - var(--ratio-x) * 20%),
            transparent calc(100% - var(--ratio-x) * 20%),
            transparent);transition:all .2s linear,opacity .8s ease;mix-blend-mode:hard-light;opacity:.3}.iso-holo-circles{position:absolute;border-radius:inherit;inset:0;overflow:hidden;opacity:.1;transition:all .8s ease}.iso-holo-circles:before,.iso-holo-circles:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#000 .25rem,transparent .25rem,transparent) repeat;background-size:1rem 1rem;background-position:left top}.iso-holo-circles:before{transform:translate(-50%,-50%) rotate(45deg)}.iso-holo-circles:after{transform:translate(50%,100%) rotate(45deg)}.iso-holo-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:2}.iso-holo-logo .iso-title{font-size:clamp(2.5rem, 18cqw, 4rem);font-weight:900;line-height:1;color:rgba(0,0,0,.4);position:relative}.iso-holo-logo .iso-title:after{content:"ISO";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;transform-style:preserve-3d;transition:all .2s linear;transform:perspective(100px) translateZ(calc(0.01rem + 0.5rem * var(--ratio-x))) translate(calc(var(--ratio-x) * -1rem), calc(var(--ratio-y) * -1rem)) rotateY(calc(-10deg * var(--ratio-x))) rotateX(calc(10deg * var(--ratio-y)))}.iso-holo-logo .iso-subtitle{font-size:clamp(0.7rem, 5cqw, 1rem);font-weight:600;color:rgba(255,255,255,.9)}@keyframes iso-card-rotate{from{--ratio-x:1.2;--ratio-y:1.2}30%{--ratio-x:-1.5;--ratio-y:.2}50%{--ratio-x:.5;--ratio-y:.2}70%{--ratio-x:-1.5;--ratio-y:-1.2}to{--ratio-x:1.2;--ratio-y:1.2}}