/* highlight-animations.css */

/* Base highlight text container */
.highlight-text {
    position: relative;
    display: inline;
    padding: 8px 12px;
}

/* The highlight background */
.highlight-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Start with 0 width */
    height: 100%;
    background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
    z-index: -1;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 4px;
}

/* Animation when element comes into view */
.highlight-text.animate::before {
    width: 100%;
}

/* Slide animation variant */
.highlight-text-slide {
    position: relative;
    display: inline;
    padding: 6px 10px;
}

.highlight-text-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #4CAF50;
    z-index: -1;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.highlight-text-slide.animate::before {
    animation-name: slideHighlight;
}

@keyframes slideHighlight {
    0% {
        width: 0%;
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0.9;
    }
}

/* Bouncy animation variant */
.highlight-bounce {
    position: relative;
    display: inline;
    padding: 8px 12px;
}

.highlight-bounce::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    z-index: -1;
    border-radius: 6px;
}

.highlight-bounce.animate::before {
    animation: bounceHighlight 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceHighlight {
    0% { width: 0%; }
    60% { width: 110%; }
    100% { width: 100%; }
}

/* Yellow highlighter style */
.highlight-yellow {
    position: relative;
    display: inline;
    padding: 4px 8px;
}

.highlight-yellow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #ffeb3b;
    z-index: -1;
    transition: width 0.6s ease-out;
}

.highlight-yellow.animate::before {
    width: 100%;
}

/* Enhanced styles for headings */
h1 .highlight-yellow,
h2 .highlight-yellow,
h3 .highlight-yellow {
    padding: 6px 12px;
    font-weight: inherit; /* Inherit the heading's font weight */
}

h1 .highlight-yellow::before,
h2 .highlight-yellow::before,
h3 .highlight-yellow::before {
    border-radius: 6px; /* Slightly more rounded for larger text */
    background: linear-gradient(135deg, #ffeb3b 0%, #FF6B35 100%); /* Richer gradient for headings */
}

/* Specific adjustments for different heading sizes */
h1 .highlight-yellow {
    padding: 8px 16px;
}

h1 .highlight-yellow::before {
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

h2 .highlight-yellow {
    padding: 6px 12px;
}

h3 .highlight-yellow {
    padding: 4px 10px;
}

/* Pink accent style */
.highlight-pink {
    position: relative;
    display: inline;
    padding: 6px 10px;
}

.highlight-pink::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #ff4081;
    z-index: -1;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
}

.highlight-pink.animate::before {
    width: 100%;
}