/* Highlight Animation Effect - Global, Robust, and Smooth */

.btn, .animate-on-click, .service-card-link, .service-card.animate-on-click, .custom-package .btn, .custom-package .btn-outline {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn:before,
.animate-on-click:before,
.service-card-link:before,
.service-card.animate-on-click:before,
.custom-package .btn:before,
.custom-package .btn-outline:before {
    --tilt: 1.2rem;
    content: "";
    display: block;
    position: absolute;
    top: 0; left: calc(-100% - var(--tilt));
    width: calc(100% + var(--tilt));
    height: 100%;
    background: rgba(120,120,120,0.28);
    -webkit-clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%);
    transform: translateX(0);
    transition: transform 0.7s cubic-bezier(.6,.2,.4,1); /* Slower, premium animation */
    pointer-events: none;
    z-index: 2;
}
.btn-primary:before, .btn.btn-primary:before, .custom-package .btn.btn-primary:before, .custom-package .btn-primary:before {
    background: rgba(255,255,255,0.50); /* Brighter white for blue buttons */
}

.btn:hover:before, .animate-on-click:hover:before, .btn.clicked:before, .animate-on-click.clicked:before,
.service-card-link:hover:before, .service-card.animate-on-click:hover:before,
.service-card-link.clicked:before, .service-card.animate-on-click.clicked:before {
    transform: translateX(100%);
}

.btn span, .animate-on-click span, .service-card-link span, .service-card.animate-on-click span {
    position: relative;
    z-index: 3;
}