.cardsnake {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
}

/* Create a single 2px border snake */
.cardsnake::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent; /* initial transparent border */
    border-radius: inherit;
    background: linear-gradient(90deg, #ffc107 25%, transparent 25%, transparent 50%, #ffc107 50%, #ffc107 75%, transparent 75%, transparent);
    background-size: 200% 200%;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: snakeBorder 4s linear infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes snakeBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.cardsnake3 {
    position: relative;
    border-radius: 1rem; /* keep your rounded corners */
    overflow: hidden;
}

.cardsnake3::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;

    /* Snake line only top and bottom */
    background:
        linear-gradient(90deg, transparent, #ffc107, transparent) 0 0 / 100% 3px no-repeat,    /* top */
        linear-gradient(90deg, transparent, #ffc107, transparent) 0 100% / 100% 3px no-repeat; /* bottom */

    animation: snakeTopBottom 3s linear infinite;
    pointer-events: none;
}

/* simple left-to-right animation for top/bottom borders */
@keyframes snakeTopBottom {
    0% {
        background-position: -100% 0, -100% 100%;
    }
    100% {
        background-position: 100% 0, 100% 100%;
    }
}

.cardsnake4 {
    position: relative;
    border-radius: 1rem; /* keep your rounded corners */
    overflow: hidden;
}

.cardsnake4::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;

    /* Static top and bottom lines */
    background:
        linear-gradient(90deg, transparent, #ffc107, transparent) 0 0 / 100% 1px no-repeat,    /* top */
        linear-gradient(90deg, transparent, #ffc107, transparent) 0 100% / 100% 1px no-repeat; /* bottom */

    pointer-events: none;
}



.cardsnake2 {
    position: relative;
    border-radius: 1rem;
    overflow: visible;
}

.cardsnake2::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: inherit;

    /* Snake line */
    background:
        linear-gradient(90deg, transparent, #ffc107, transparent) 0 0 / 40% 3px no-repeat,
        linear-gradient(180deg, transparent, #ffc107, transparent) 100% 0 / 3px 40% no-repeat,
        linear-gradient(270deg, transparent, #ffc107, transparent) 100% 100% / 40% 3px no-repeat,
        linear-gradient(0deg, transparent, #ffc107, transparent) 0 100% / 3px 40% no-repeat;

    animation: snakeAround 3s linear infinite;
    pointer-events: none;
}




/* Snake-border container */
.cardsnake1 {
    position: relative;
    overflow: hidden;
    border-radius: 1rem; /* keep your rounded corners */
}

/* the moving border */
.cardsnake1::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px; /* border thickness */
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        #ffc107,
        transparent
    );
    animation: snake 3s linear infinite;
    mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    mask-composite: exclude; 
    -webkit-mask-composite: xor;
}



/* Glass shine animation */
.cardglass {
    position: relative;
    overflow: hidden;
}

/* Shining effect */
.cardglass::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    transform: rotate(20deg);
    animation: shine 3s infinite ease-in-out;
}



/*keys*/

@keyframes snakeAround {
    0% {
        background-position:
            0 0,
            100% 0,
            100% 100%,
            0 100%;
    }
    25% {
        background-position:
            100% 0,
            100% 100%,
            0 100%,
            0 0;
    }
    50% {
        background-position:
            100% 100%,
            0 100%,
            0 0,
            100% 0;
    }
    75% {
        background-position:
            0 100%,
            0 0,
            100% 0,
            100% 100%;
    }
    100% {
        background-position:
            0 0,
            100% 0,
            100% 100%,
            0 100%;
    }
}


/* animation keyframes */
@keyframes snake {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

/* animation keyframes */
@keyframes shine {
    0% {
        transform: translate(-150%, -150%) rotate(20deg);
    }
    60% {
        transform: translate(100%, 100%) rotate(20deg);
    }
    100% {
        transform: translate(150%, 150%) rotate(20deg);
    }
}