/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.cu-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(218, 199, 196, 0.4);
	animation: cosmetic-focus-shadow 4s ease-in-out infinite;
    transition: all 0.4s ease-in-out !important;
}

.cu-btn * {
    position: relative;
    z-index: 2;
}

.cu-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
    z-index: 1;
	animation: cosmetic-silk-glint 4s ease-in-out infinite;
}

@keyframes cosmetic-focus-shadow {
    0% {
        box-shadow: 0 2px 6px rgba(218, 199, 196, 0.4), 
                    0 0 0 0px rgba(218, 199, 196, 0);
    }
    30% {
        box-shadow: 0 4px 12px rgba(218, 199, 196, 0.25), 
                    0 0 0 4px rgba(218, 199, 196, 0.45);
    }
    60% {
        box-shadow: 0 2px 6px rgba(218, 199, 196, 0.4), 
                    0 0 0 0px rgba(218, 199, 196, 0);
    }
    100% {
        box-shadow: 0 2px 6px rgba(218, 199, 196, 0.4), 
                    0 0 0 0px rgba(218, 199, 196, 0);
    }
}

@keyframes cosmetic-silk-glint {
    0% {
        left: -150%;
    }
    35% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

.cu-btn:hover {
    animation-play-state: paused;
    box-shadow: 0 6px 20px rgba(218, 199, 196, 0.6);
}

.cu-btn:hover::after {
    animation-play-state: paused;
}