@import url('https://fonts.cdnfonts.com/css/satoshi');
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; }
body {
    display: flex; flex-direction: row; flex-wrap: wrap; flex-wrap: nowrap;
    justify-content: center; align-items: center; margin: 0; padding-top: 120px;
    background: #ededed;
    font-family: 'Satoshi', sans-serif;

    --scale: clamp(200px, 22vw, 300px);
}

.card {
    --clr: #7da072; --fclr: #f0ffe2;
    &:nth-child(2) { --clr: #2e2e2e; --fclr: #fefefe; }
    &:nth-child(3) { --clr: #fff; --fclr: #000; }

    width: var(--scale);
    height: 364px;
    min-width: var(--scale);
    background: var(--clr);
    border-radius: 8px;
    box-shadow: 
    -8px -8px 24px 0 #fffc,
    1px 1px 3px 0px #0002,
    12px 42px 24px -8px #0001,
    10px 24px 42px 0 #0001,
    1px 4px 12px 0 #0002;
    &:nth-child(1) {
          box-shadow: 
    -8px -8px 24px 0 #fffc,
    1px 1px 3px 0px #7da07277,
    12px 42px 24px -8px #7da07233,
    10px 24px 42px 0 #7da07233,
    1px 4px 12px 0 #7da07244;
    } 
    &:nth-child(2) {
    box-shadow: 
      -8px -8px 24px 0 #fffc,
      1px 1px 3px 0px #0006,
      12px 42px 24px -8px #0003,
      10px 24px 42px 0 #0003,
      1px 4px 12px 0 #0006;
    }
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end; align-items: center;
    cursor: pointer;

    margin: auto 24px;

    .content {
        position: relative;
        z-index: 1;
        bottom: 0; top: unset;
        height: fit-content;
        padding: 12px 24px; 
        h2 , p {
            margin: 0; padding: 0;
            line-height: 124%;
            margin-bottom: 8px;
            font-weight: 700;
            color: var(--fclr);
        }
        p {
            font-weight: 500;
            margin-bottom: 16px;
        }
        
        .options {
            position: absolute;
            display: flex; gap: 4px;
            bottom: 8px; right: 12px;
            > div {
                cursor: pointer;
                width: 24px; height: 16px;
                border-radius: 4px;
                background: white;
                border: 1px solid #aaa8;
                transition: border 0.1s ease-in-out;
                &:hover {
                    border: 1px solid #fff;
                }
            }
        }
    }
    .glass {
        pointer-events: none;
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 80%;
        background: linear-gradient(transparent, var(--clr) 80%);
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        overflow: hidden;
    }
    .overflow {
        pointer-events: none;
        position: absolute;
        width: 200%; height: 200%;
        overflow: hidden;
        display: flex; justify-content: end; align-items: end;
        clip-path: polygon(0 0, 100% 0, 100% 60%, 75% 60%, 75% 100%, 25% 100%, 25% 60%, 0 60%);
    }
    .model {
        position: absolute;
        width: 100%; height: 100%;
        bottom: -10%;
        display: flex; justify-content: center; align-items: center;
        model-viewer{
            position: absolute;
            width: 500px; height: 500px;
            width: 500px; height: calc((5/3) * var(--scale));
            --progress-bar-color: none;
            --progress-bar-height: 0px;
            opacity: 0;
            transition: filter 0.4s ease-in-out;
            &.loaded{
                animation: onLoad 1s ease-in forwards;
            }
        }
    }

    @media (max-width: 700px) {
        &:nth-child(3) {
            display: none;
        }
    }
    @media (max-width: 468px) {
        &:nth-child(1) {
            display: none;
        }
    }
}
@keyframes onLoad {
    to { opacity: 1; }
}


.gradient-blur {
    position: absolute;
    z-index: 1;
    height: 100%;
    inset: auto 0 0 0;
    pointer-events: none;
}
.gradient-blur:nth-child(2){
    inset: auto 0;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
    position: absolute;
    inset: 0;
    --p1: 0%;
    --p2: 12.5%;
    --p3: 25%;
    --p4: 37.5%;
    --p5: 50%;
    --p6: 62.5%;
    --p7: 75%;
    --p8: 87.5%;
    --p9: 100%;
}
.gradient-blur::before {
    content: "";
    z-index: 1;
    backdrop-filter: blur(0.5px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p1),
        rgba(0, 0, 0, 1) var(--p2),
        rgba(0, 0, 0, 1) var(--p3),
        rgba(0, 0, 0, 0) var(--p4)
    );
}
.gradient-blur > div:nth-of-type(1) {
    z-index: 2;
    backdrop-filter: blur(1px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p2),
        rgba(0, 0, 0, 1) var(--p3),
        rgba(0, 0, 0, 1) var(--p4),
        rgba(0, 0, 0, 0) var(--p5)
    );
}
.gradient-blur > div:nth-of-type(2) {
    z-index: 3;
    backdrop-filter: blur(2px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p3),
        rgba(0, 0, 0, 1) var(--p4),
        rgba(0, 0, 0, 1) var(--p5),
        rgba(0, 0, 0, 0) var(--p6)
    );
}
.gradient-blur > div:nth-of-type(3) {
    z-index: 4;
    backdrop-filter: blur(4px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p4),
        rgba(0, 0, 0, 1) var(--p5),
        rgba(0, 0, 0, 1) var(--p6),
        rgba(0, 0, 0, 0) var(--p7)
    );
}
.gradient-blur > div:nth-of-type(4) {
    z-index: 5;
    backdrop-filter: blur(8px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p5),
        rgba(0, 0, 0, 1) var(--p6),
        rgba(0, 0, 0, 1) var(--p7),
        rgba(0, 0, 0, 0) var(--p8)
    );
}
.gradient-blur > div:nth-of-type(5) {
    z-index: 6;
    backdrop-filter: blur(16px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p6),
        rgba(0, 0, 0, 1) var(--p7),
        rgba(0, 0, 0, 1) var(--p8),
        rgba(0, 0, 0, 0) var(--p9)
    );
}
.gradient-blur > div:nth-of-type(6) {
    z-index: 7;
    backdrop-filter: blur(32px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p7),
        rgba(0, 0, 0, 1) var(--p8),
        rgba(0, 0, 0, 1) var(--p9)
    );
}
.gradient-blur::after {
    content: "";
    z-index: 8;
    backdrop-filter: blur(64px);
    mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) var(--p8),
        rgba(0, 0, 0, 1) var(--p9)
    );
}