/* ======================= */
/* ROOT VARIABLES & RESET  */
/* ======================= */
:root {
    /* Library configuration variables */
    --ch-duration: 1s;
    --ch-delay: 0s;
    --ch-timing: ease;
    --ch-repeat: infinite;
    --ch-reveal-color1: #333;
    --ch-reveal-color2: #222;
    --ch-gradient-colors: #09f1b8, #00a2ff, #ff00d2, #fed90f;
    --ch-gradient-size: 300%;
    --ch-gradient-direction: to right;
    --ch-accent: #4a6cf7;
    
    /* Utility variables */
    --ch-spacing: 1rem;
    --ch-border-radius: 8px;
    --ch-box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


/* ======================= */
/* CORE STYLES             */
/* ======================= */
[hover\:ch-border-ltr],
[hover\:ch-border-rtl],
[hover\:ch-border-ttb],
[hover\:ch-border-btt],
[hover\:ch-border-dashed],
[hover\:ch-border-radius],
[hover\:ch-border-wave],
[hover\:ch-border-shimmer],
[hover\:ch-border-mosaic],
[hover\:ch-border-flow]{
    position: relative;
    overflow: hidden;
}

/* Animation helper elements */
.ch-animation-helper {
    position: absolute;
    z-index: 99;
    pointer-events: none;
}

/* ======================= */
/* BORDER ANIMATIONS       */
/* ======================= */

/* Border Progress - Left to Right */
[hover\:ch-border-ltr] .ch-animation-helper {
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ch-accent);
    transition: width var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-ltr]:hover .ch-animation-helper {
    width: 100%;
}

/* Border Progress - Right to Left */
[hover\:ch-border-rtl] .ch-animation-helper {
    top: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--ch-accent);
    transition: width var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-rtl]:hover .ch-animation-helper {
    width: 100%;
}

/* Border Progress - Top to Bottom */
[hover\:ch-border-ttb] .ch-animation-helper {
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    background: var(--ch-accent);
    transition: height var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-ttb]:hover .ch-animation-helper {
    height: 100%;
}

/* Border Progress - Bottom to Top */
[hover\:ch-border-btt] .ch-animation-helper {
    bottom: 0;
    left: 0;
    width: 2px;
    height: 0;
    background: var(--ch-accent);
    transition: height var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-btt]:hover .ch-animation-helper {
    height: 100%;
}

/* Dashed Border Animation */
[hover\:ch-border-dashed] {
    border: 2px dashed transparent;
}

[hover\:ch-border-dashed] .ch-animation-helper {
    width: 0;
    height: 0;
    border: 2px dashed var(--ch-accent);
    opacity: 0;
    transition: all var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-dashed]:hover .ch-animation-helper {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    opacity: 1;
}

/* Border Radius Animation */
[hover\:ch-border-radius] {
    transition: border-radius var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-radius]:hover {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}


@keyframes ch-glow-animation {
    0% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(74, 108, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0); }
}

/* Border Wave */
[hover\:ch-border-wave] .ch-animation-helper {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgb(158, 205, 244), transparent);
    transform: translateX(-100%);
}

[hover\:ch-border-wave]:hover .ch-animation-helper {
    animation: ch-wave-animation var(--ch-duration) linear infinite;
}

@keyframes ch-wave-animation {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Border Shimmer */
[hover\:ch-border-shimmer] .ch-animation-helper {
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%);
    transform: rotate(45deg);
}

[hover\:ch-border-shimmer]:hover .ch-animation-helper {
    animation: ch-shimmer-animation var(--ch-duration) linear infinite;
}

@keyframes ch-shimmer-animation {
    0% { transform: translateY(-100%) rotate(45deg); }
    100% { transform: translateY(100%) rotate(45deg); }
}

/* Border Flow */
[hover\:ch-border-flow] .ch-animation-helper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, transparent, var(--ch-accent)),
        linear-gradient(180deg, transparent, var(--ch-accent)),
        linear-gradient(270deg, transparent, var(--ch-accent)),
        linear-gradient(0deg, transparent, var(--ch-accent));
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transform: scaleX(0) scaleY(0);
    transition: transform var(--ch-duration) var(--ch-timing);
}

[hover\:ch-border-flow]:hover .ch-animation-helper {
    transform: scaleX(1) scaleY(1);
}