@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 0.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: 0.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 0.2s linear, opacity 0.8s ease;
    mix-blend-mode: hard-light;
    opacity: 0.3;
}

.iso-holo-circles {
    position: absolute;
    border-radius: inherit;
    inset: 0;
    overflow: hidden;
    opacity: 0.1;
    transition: all 0.8s ease;
}

.iso-holo-circles::before,
.iso-holo-circles::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, #000 0.25rem, transparent 0.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, 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: white;
    transform-style: preserve-3d;
    transition: all 0.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, 0.9);
}

@keyframes iso-card-rotate {
    from {
        --ratio-x: 1.2;
        --ratio-y: 1.2;
    }

    30% {
        --ratio-x: -1.5;
        --ratio-y: 0.2;
    }

    50% {
        --ratio-x: 0.5;
        --ratio-y: 0.2;
    }

    70% {
        --ratio-x: -1.5;
        --ratio-y: -1.2;
    }

    to {
        --ratio-x: 1.2;
        --ratio-y: 1.2;
    }
}