/*
 * Occult Effects CSS
 * Add your custom effects below.
 */

.gradient-border {
    position: relative;
    border: 1px solid #303030;
    border-radius: 12px;
    background: transparent;

    transition: border-color 3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* gradient layer */
.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    background: linear-gradient(
        0deg,
        rgb(255, 156, 141),
        rgb(214, 85, 165),
        rgb(96, 83, 203),
        rgb(255, 156, 141)
    );

    opacity: 0;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;

    transition: opacity 3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover shows border */
.gradient-border:hover {
    border-color: transparent;
}

.gradient-border:hover::before {
    opacity: 1;
    animation: rotateGradient 6s linear infinite;
}

/* rotation effect */
@keyframes rotateGradient {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}