/**
 * Scroll Color Effect Styles
 * Fixed 1s transition like original script
 */

/* Base transition for body background */
body.csw-scroll-color-active {
    transition: background-color 1s ease;
}

/* Text color - only inside active section via CSS variable */
.csw-scroll-color-active-section {
    color: var(--csw-scroll-text-color, inherit) !important;
    transition: color 1s ease;
}

.csw-scroll-color-active-section p,
.csw-scroll-color-active-section span:not(.elementor-icon),
.csw-scroll-color-active-section li,
.csw-scroll-color-active-section a {
    color: inherit !important;
    transition: color 1s ease;
}

/* Heading colors - only inside active section via CSS variable */
.csw-scroll-color-active-section h1,
.csw-scroll-color-active-section h2,
.csw-scroll-color-active-section h3,
.csw-scroll-color-active-section h4,
.csw-scroll-color-active-section h5,
.csw-scroll-color-active-section h6 {
    color: var(--csw-scroll-heading-color, inherit) !important;
    transition: color 1s ease;
}

/* Editor preview indicator */
.elementor-editor-active .csw-scroll-color-section::after {
    content: 'Scroll Color';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(108, 92, 231, 0.9);
    color: white;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
}