/**
 * Text Highlight Animation on Scroll
 *
 * Usage: Wrap text in <span class="lspa-highlight">text</span>
 * The highlight animates when the element scrolls into view
 *
 * @package LiquidationSpa
 */

/* Base highlight styles */
.lspa-highlight {
    position: relative;
    display: inline;
    white-space: nowrap;
}

.lspa-highlight::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 40%;
    background-color: var(--lspa-highlight-color, #6CA6C4);
    opacity: 0.3;
    border-radius: 4px;
    z-index: -1;
    width: 0%;
    transition: none;
}

/* Animated state - triggered by JS */
.lspa-highlight.is-visible::before {
    animation: lspa-highlight-reveal 0.6s ease-out forwards;
}

/* Animation keyframes */
@keyframes lspa-highlight-reveal {
    from {
        width: 0%;
    }
    to {
        width: calc(100% + 8px);
    }
}

/* Color variations */
.lspa-highlight--primary::before {
    background-color: #012951;
    opacity: 0.15;
}

.lspa-highlight--secondary::before {
    background-color: #6CA6C4;
    opacity: 0.35;
}

.lspa-highlight--accent::before {
    background-color: #6CA6C4;
    opacity: 0.5;
}

/* Full background highlight (more visible) */
.lspa-highlight--full::before {
    height: 100%;
    opacity: 0.2;
    border-radius: 6px;
    left: -6px;
    right: -6px;
}

/* Underline style highlight */
.lspa-highlight--underline::before {
    height: 4px;
    bottom: 2px;
    opacity: 1;
    border-radius: 2px;
}

/* For dark backgrounds (like hero, card content) */
.lspa-hero .lspa-highlight::before,
.lspa-spa-categories__card-content .lspa-highlight::before,
.lspa-highlight--light::before {
    background-color: #6CA6C4;
    opacity: 0.5;
}

/* Delay variations for staggered animations */
.lspa-highlight[data-delay="100"]::before {
    animation-delay: 0.1s;
}

.lspa-highlight[data-delay="200"]::before {
    animation-delay: 0.2s;
}

.lspa-highlight[data-delay="300"]::before {
    animation-delay: 0.3s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lspa-highlight {
        white-space: normal;
    }
}

/* Editor preview - always show highlight */
.editor-styles-wrapper .lspa-highlight::before {
    width: calc(100% + 8px);
}