:root {
	--border-animation-color: #74d8deff;
	--border-animation-speed: 7s;
	--border-animation-width: 2px;
}

@property --border-animation-angle {
	syntax: "<angle>";
	initial-value: 0turn;
	inherits: false;
}

@keyframes borderRotate {
	to {
		--border-animation-angle: 1turn;
	}
}

.ct-border-animation:after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-animation-width) * -0.5);
    border-radius: inherit;
    border: solid transparent;
    border-width: var(--border-animation-width);
    animation: borderRotate var(--border-animation-speed) linear infinite;
    /* Updated background with the random start offset */
    background: conic-gradient(from calc(var(--border-animation-angle) + var(--random-start, 0turn)), transparent 88%, var(--border-animation-color), var(--border-animation-color) 100%, transparent) border-box;
    background-clip: border-box;
    background-origin: border-box;
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(97% - var(--border-animation-width)), rgba(0, 0, 0, 0)) content-box, radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(2% - var(--border-animation-width)), #000) border-box;
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

/* Color Variations */
.ct-border-animation.dot-main:after {
    --border-animation-color: #74d8deff; /* Main */
}

.ct-border-animation.dot-matix:after {
    --border-animation-color: #1cb0f6ff; /* Matix */
}

.ct-border-animation.dot-crashblock:after {
    --border-animation-color: #fff43cff; /* Crash Block */
}

.ct-border-animation.dot-proceed:after {
    --border-animation-color: #ff7102ff; /* Proceed */
}

.ct-border-animation.dot-airplanpro:after {
    --border-animation-color: #872341ff; /* AirPlanPro */
}