@layer properties {
    @property --bg-position {
        syntax: "<number>";
        inherits: true;
        initial-value: 100;
    }

    @property --after-blur {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }

    @property --after-opacity {
        syntax: "<number>";
        inherits: true;
        initial-value: 1;
    }

    @property --before-opacity {
        syntax: "<number>";
        inherits: true;
        initial-value: 0.3;
    }

    @property --btn-offset {
        syntax: "<number>";
        inherits: true;
        initial-value: 1;
    }

    @property --btn-scale {
        syntax: "<number>";
        inherits: true;
        initial-value: 1;
    }
}

:root {
    --debug: 0;

    /* colors */
    --btn-bg: hsl(241, 100%, 50%);
    --btn-border-width: 1.5;
    --btn-offset: 1;
    --btn-scale: 1;
    --after-blur: 10;
    --after-opacity: 1;
    --after-pos-y: 10;

    --before-opacity: 0.3;

    /* positions */
    --bg-position: 100;

    --color-white: hsl(0, 0%, 0%);
    --color-cyan: hsl(0, 0%, 0%);
    --color-blue: hsl(0, 0%, 0%);
    --color-purple: hsl(0, 0%, 0%);
    --color-pink: hsl(0, 0%, 0%);
    --color-red: hsl(0, 0%, 0%);
    --color-yellow: hsl(0, 0%, 0%);
    --color-lime: hsl(0, 0%, 0%);

    --color-orange: oklch(0% 0 0);
}

@supports (color: color(display-p3 0 0 0)) {
    :root {
        --color-white: color(display-p3 1 1 1);
        --color-cyan: color(display-p3 0 1 1);
        --color-blue: color(display-p3 0 0 1);
        --color-purple: color(display-p3 0.5 0 1);
        --color-pink: color(display-p3 1 0.4 0.7);
        --color-red: color(display-p3 1 0 0);
        --color-yellow: color(display-p3 1 1 0);
        --color-lime: color(display-p3 0.75 1 0);

        --color-orange: color(display-p3 0.96 0.39 0.2);
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
    outline: calc(var(--debug) * 1px) dotted rgb(208, 255, 0);
    outline-offset: -1px;
}

main {

    & button {
        all: unset;
        background: transparent;
        border-width: 0;
        transform: scale(var(--btn-scale));
        transition:
            --bg-position 3s ease,
            --after-blur 0.3s ease,
            --before-opacity 0.3s ease,
            --btn-offset 0.3s ease,
            --btn-scale 0.2s cubic-bezier(.76, -0.25, .51, 1.13);

        >div {
            display: block;
            padding: 0.8em 1.2em;
            background: var(--btn-bg);
            color: white;
            font-weight: bold;
            border-radius: 8px;
            font-size: 22px;
            position: relative;

            cursor: pointer;

            &:not(:hover) {
                transition: --after-blur 0.3s ease;
            }

            >span {
                background: linear-gradient(to right,
                        var(--color-white),
                        var(--color-white),
                        var(--color-cyan),
                        var(--color-blue),
                        var(--color-purple),
                        var(--color-pink),
                        var(--color-red),
                        var(--color-yellow),
                        var(--color-lime),
                        var(--color-white),
                        var(--color-white)) no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                letter-spacing: 0.15ch;
                font-weight: 600;
            }

            &:after {
                display: block;
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                background: var(--after-bg) no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
                transform: translateY(calc(var(--after-pos-y) * 1px));
                left: 0;
                top: 0;
                z-index: -2;
                filter: blur(calc(var(--after-blur) * 1px));
                opacity: var(--after-opacity);
            }

            &:before {
                content: "";
                display: block;
                position: absolute;
                width: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px));
                height: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px));
                background: linear-gradient(to right,
                        var(--color-white),
                        var(--color-white),
                        var(--color-cyan),
                        var(--color-blue),
                        var(--color-purple),
                        var(--color-pink),
                        var(--color-red),
                        var(--color-yellow),
                        var(--color-lime),
                        var(--color-white),
                        var(--color-white)) no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
                border-radius: 9px;
                z-index: -1;
                top: calc(var(--btn-border-width) * -1px);
                left: calc(var(--btn-border-width) * -1px);
                opacity: var(--before-opacity);
            }
        }

        &:hover {
            --btn-scale: 1.05;
            --bg-position: 0;
            --after-bg: linear-gradient(to right,
                    var(--color-white),
                    var(--color-white),
                    var(--color-cyan),
                    var(--color-blue),
                    var(--color-purple),
                    var(--color-pink),
                    var(--color-red),
                    var(--color-yellow),
                    var(--color-lime),
                    var(--color-white),
                    var(--color-white));
            --after-blur: 30;
            --after-opacity: 0.3;
            --after-pos-y: 0;
            --before-opacity: 1;
            --btn-offset: 5;

            &:active {
                --btn-scale: 0.98;
                --after-blur: 15;
            }
        }
    }
}


/* Buy Section  Button */

.temple1__buttons {
    padding-bottom: 40px;
    padding-top: 40px;
}

.temple1__buttons button {
    justify-self: center;
    font-size: 1rem;
}

.custom-btn {
    width: 130px;
    /* height: 40px; */
    color: #fff;
    border-radius: 5px;
    /* padding: 10px 25px; */
    /* font-family: 'Lato', sans-serif; */
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;

    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
}

/* 6 */
.btn-6 {
    background: radial-gradient(circle, rgb(33, 65, 245) 0%, rgb(17, 4, 92) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
}

.btn-6 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.btn-6:before,
.btn-6:after {
    position: absolute;
    content: "";
    height: 0%;
    width: 1px;
    box-shadow:
        -1px -1px 20px 0px rgba(255, 255, 255, 1),
        -4px -4px 5px 0px rgba(255, 255, 255, 1),
        7px 7px 20px 0px rgba(0, 0, 0, .4),
        4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.btn-6:before {
    right: 0;
    top: 0;
    transition: all 500ms ease;
}

.btn-6:after {
    left: 0;
    bottom: 0;
    transition: all 500ms ease;
}

.btn-6:hover {
    background: transparent;
    color: #76aef1;
    box-shadow: none;
}

.btn-6:hover:before {
    transition: all 500ms ease;
    height: 100%;
}

.btn-6:hover:after {
    transition: all 500ms ease;
    height: 100%;
}

.btn-6 span:before,
.btn-6 span:after {
    position: absolute;
    content: "";
    box-shadow:
        -1px -1px 20px 0px rgba(255, 255, 255, 1),
        -4px -4px 5px 0px rgba(255, 255, 255, 1),
        7px 7px 20px 0px rgba(0, 0, 0, .4),
        4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.btn-6 span:before {
    left: 0;
    top: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
}

.btn-6 span:after {
    right: 0;
    bottom: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
}

.btn-6 span:hover:before {
    width: 100%;
}

.btn-6 span:hover:after {
    width: 100%;
}


@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --c1: rgb(36, 77, 254);
    --c2: rgba(9, 17, 40, 1);
}

/* .wrapper {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    padding: 1rem;
}

.box {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    margin: 5vw;
    border: 0.35rem solid;
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
    animation: borderRotate var(--d) linear infinite forwards;
}

.box:nth-child(2) {
    border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
    animation: borderRadial var(--d) linear infinite forwards;
}

@media (max-width: 600px) {
    .box {
        margin: 1rem;
        font-size: 1rem; 
    }
}

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }
    40% {
        --gradX: 100%;
        --gradY: 100%;
    }
    60% {
        --gradX: 50%;
        --gradY: 100%;
    }
    80% {
        --gradX: 0%;
        --gradY: 50%;
    }
    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
} */