.bcard {
    position: relative;

    --thickness: 5px;
    --ratio: 2;
    --r: calc(var(--ratio) * var(--thickness));
    --blur: 30px;

    margin: 0 auto;
    padding: 1rem;

    background: rgba(255, 255, 255, 0.03);

    width: calc(275px - 2rem);
    height: calc(375px - 2rem);

    & .btn {
        background: none;

        &:hover {
            background: var(--button-border-color);
        }
    }
}

div:has(> figcaption) {
    border: 1px solid oklch(from var(--background) calc(l + 0.125) c h);
    border-radius: 1em;
    padding: 1em;
}

figcaption {
    text-align: center;
    margin: 0.5em 0 1em 0;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    justify-content: center;
    align-items: center;
}

.bcard {
    &.clip-border {
        height: 275px;
        &:after {
            content: '';
            position: absolute;
            left: 0; top: 0;

            width: 100%;
            height: 100%;

            clip-path: polygon(
                evenodd,
                0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
                5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 5px
            );

            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            z-index: 2;
        }

        &.demo-radius {
            & {
                height: auto;
            }

            &:after {
                background: var(--blue);
            }

            &.rounded:after {
                border-radius: 1rem;
            }

            &.rounded-svg:after {
                filter: url("#goo");
            }
        }
    }


    &.demo-mask-image {
        padding: 0;

        width: 100%;
        height: 150px;

        background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Chen_Hongshou%2C_leaf_album_painting.jpg');
        background-size: cover;
    }

    &.demo-mask {
        padding: 0;

        width: 100%;
        height: 150px;
        background-image: conic-gradient(
            #0000 0deg,
            #0000 40deg,
            var(--blue) 40deg,
            var(--blue) 80deg,
            #0000 80deg,
            #0000 120deg,
            var(--blue) 120deg,
            var(--blue) 160deg,
            #0000 160deg,
            #0000 200deg,
            var(--blue) 200deg,
            var(--blue) 240deg,
            #0000 240deg,
            #0000 280deg,
            var(--blue) 280deg,
            var(--blue) 320deg,
            #0000 320deg
        );
    }

    &.demo-mask-result {
        padding: 0;

        width: 100%;
        height: 150px;
        background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Chen_Hongshou%2C_leaf_album_painting.jpg');
        background-size: cover;

        mask: conic-gradient(
            #0000 0deg,
            #0000 40deg,
            var(--blue) 40deg,
            var(--blue) 80deg,
            #0000 80deg,
            #0000 120deg,
            var(--blue) 120deg,
            var(--blue) 160deg,
            #0000 160deg,
            #0000 200deg,
            var(--blue) 200deg,
            var(--blue) 240deg,
            #0000 240deg,
            #0000 280deg,
            var(--blue) 280deg,
            var(--blue) 320deg,
            #0000 320deg
        );
    }

    &.demo-gradient {
        padding: 0;

        width: 100%;
        height: 50px;

        background: linear-gradient(
            to right,
            var(--red) 0%,
            var(--orange) 20%,
            var(--yellow) 40%,
            var(--green) 60%,
            var(--blue) 80%,
            var(--indigo) 100%
        );
    }

    &.demo-radial-gradient {
        padding: 0;

        width: 250px;
        height: 250px;

        background: radial-gradient(
            var(--blue) 0%,
            var(--background) 50%
        );
    }

    &.demo-conic-gradient {
        padding: 0;

        width: 250px;
        height: 250px;

        background: conic-gradient(
            var(--red) 0%,
            var(--orange) 20%,
            var(--yellow) 40%,
            var(--green) 60%,
            var(--blue) 80%,
            var(--indigo) 100%
        );
    }

    &.demo-conic-quarter {
        padding: 0;

        width: 250px;
        height: 250px;

        background: conic-gradient(
            from 270deg,
            var(--blue) 0%,
            var(--blue) 25%,
            var(--orange) 25%
        );
    }

    &.demo-ring-quarter {
        padding: 0;

        width: 250px;
        height: 250px;

        background: var(--blue);


        mask:
        conic-gradient(
            from 270deg,
            var(--blue) 0%,
            var(--blue) 25%,
            transparent 25%
        ),
        radial-gradient(
            transparent 0%,
            transparent 45%,
            var(--blue) 45%,
            var(--blue) 50%,
            transparent 50%
        );
    }

    &.demo-ring {
        padding: 0;

        width: 250px;
        height: 250px;

        background: radial-gradient(
            var(--background) 0%,
            var(--background) 45%,
            var(--blue) 45%,
            var(--blue) 50%,
            var(--background) 50%
        );
    }

    &.demo-color-stop {
        padding: 0;

        width: 100%;
        height: 50px;

        background: linear-gradient(
            to right,
            var(--red) 0%,
            var(--orange) 20%,
            var(--yellow) 40%,
            var(--yellow) 50%,
            var(--green) 50%,
            var(--green) 60%,
            var(--blue) 80%,
            var(--indigo) 100%
        );
    }

    &.demo-mask-edge {
        width: 250px;
        height: 250px;
        --border-linear-gradient: #0000, #0000 15px, #000 15px, #000 calc(100% - 15px), #0000 calc(100% - 15px), #0000;

        mask:
            linear-gradient(var(--border-linear-gradient))
                0 100% / 5px 100% no-repeat,
            linear-gradient(var(--border-linear-gradient))
                100% 100% / 5px 100% no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 0 / 100% 5px no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 100% / 100% 5px no-repeat;

        background: var(--blue);
    }

    &.demo-mask-edge-ring {
        width: 250px;
        height: 250px;
        --border-linear-gradient: #0000, #0000 15px, #000 15px, #000 calc(100% - 15px), #0000 calc(100% - 15px), #0000;
        --border-radial-gradient: #0000, #0000 66.67%, #000 66.67%, #000 101%, #0000 101%;
        mask:
            linear-gradient(var(--border-linear-gradient))
                0 100% / 5px 100% no-repeat,
            linear-gradient(var(--border-linear-gradient))
                100% 100% / 5px 100% no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 0 / 100% 5px no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 100% / 100% 5px no-repeat,
            radial-gradient(15px at right 15px top 15px, var(--border-radial-gradient)) add,
            radial-gradient(15px at right 15px bottom 15px, var(--border-radial-gradient)) add,
            radial-gradient(15px at left 15px top 15px, var(--border-radial-gradient)) add,
            radial-gradient(15px at left 15px bottom 15px, var(--border-radial-gradient)) add;

        background: var(--blue);
    }
    
    &.demo-rounded-border {
        width: 250px;
        height: 250px;
        --border-linear-gradient: #0000, #0000 15px, #000 15px, #000 calc(100% - 15px), #0000 calc(100% - 15px), #0000;
        --border-radial-gradient: #0000, #0000 66.67%, #000 66.67%, #000 101%, #0000 101%;
        mask:
            linear-gradient(var(--border-linear-gradient))
                0 100% / 5px 100% no-repeat,
            linear-gradient(var(--border-linear-gradient))
                100% 100% / 5px 100% no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 0 / 100% 5px no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 100% / 100% 5px no-repeat,
            conic-gradient(from 270deg at 15px 15px, #000, #000 90deg, #0000 90deg, #0000)
                0 0 / calc(100% - 15px) calc(100% - 15px) repeat intersect,
            radial-gradient(15px at right 15px top 15px, var(--border-radial-gradient)) add,
            radial-gradient(15px at right 15px bottom 15px, var(--border-radial-gradient)) add,
            radial-gradient(15px at left 15px top 15px, var(--border-radial-gradient)) add,
            radial-gradient(15px at left 15px bottom 15px, var(--border-radial-gradient)) add;

        background: var(--blue);
    }
}

.options {
    --thickness: 3px;
    --ratio: 4;
    --r: calc(var(--ratio) * var(--thickness));
    --blur: 40px;

    background: rgba(255, 255, 255, 0.01);

    width: 100%;
    min-height: 5rem;
    padding: .75rem 0;
    margin: 1rem 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .75rem;

    justify-content: center;
    align-items: center;

    .input {
        display: flex;
        justify-content: center;
        align-items: center;

        .label {
            margin: 0 0.5rem 0 0.75rem;
        }

        .unit {
            margin: 0 0.75rem 0 0.5rem;
        }
    }

    input[type="number"] {
        background: transparent;
        display: inline;

        border: none;

        -moz-appearance: textfield;
        appearance: textfield;

        font-size: 1.25rem;

        max-width: 4rem;
        height: 2.5rem;
        padding: 0 0.5rem;
        margin: 0;

        background: rgba(255, 255, 255, 0.05);
        color: var(--foreground);

        transition: all 250ms ease;

        text-align: right;

        &:focus {
            border: none;
            outline: none;

            background: var(--foreground);
            color: var(--background);
        }
    }

    & input::-webkit-outer-spin-button,
    & input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

.glass-border {
    position: relative;
    border-radius: var(--r);

    outline: var(--thickness) solid transparent;

    &:after {
        content: '';

        position: absolute;
        top: 0; left: 0;

        width: 100%;
        height: 100%;

        --border-linear-gradient: #0000, #0000 var(--r), #000 var(--r), #000 calc(100% - var(--r)), #0000 calc(100% - var(--r)), #0000;
        --corner-thickness: calc(100% * (1 - 1 / var(--ratio)));
        --border-radial-gradient: #0000, #0000 var(--corner-thickness), #000 var(--corner-thickness), #000 101%, #0000 101%;

        mask:
            linear-gradient(var(--border-linear-gradient))
                0 100% / var(--thickness) 100% no-repeat,
            linear-gradient(var(--border-linear-gradient))
                100% 100% / var(--thickness) 100% no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 0 / 100% var(--thickness) no-repeat,
            linear-gradient(to right, var(--border-linear-gradient))
                0 100% / 100% var(--thickness) no-repeat,

            conic-gradient(from 270deg at var(--r) var(--r), #000, #000 90deg, #0000 90deg, #0000)
                0 0 / calc(100% - var(--r)) calc(100% - var(--r)) repeat intersect,
            radial-gradient(var(--r) at right var(--r) top var(--r), var(--border-radial-gradient)) add,
            radial-gradient(var(--r) at right var(--r) bottom var(--r), var(--border-radial-gradient)) add,
            radial-gradient(var(--r) at left var(--r) top var(--r), var(--border-radial-gradient)) add,
            radial-gradient(var(--r) at left var(--r) bottom var(--r), var(--border-radial-gradient)) add;

        backdrop-filter: blur(var(--blur));
        -webkit-backdrop-filter: blur(var(--blur));
        pointer-events: none;

        z-index: 2;
    }
}

@media (max-width: 700px) {
    .options {
        display: none;
    }
}

#cursor {
    position: fixed;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    backdrop-filter: invert(80%) blur(2px);
    -webkit-backdrop-filter: invert(80%) blur(var(2px));
    pointer-events: none;
    z-index: 1;
}