/**
 * Scroll Words Widget Styles
 * Scroll-driven text animation with hue shifting colors
 */

/* CSS Custom Properties for animation */
@property --hue {
    initial-value: 0;
    syntax: '<number>';
    inherits: false;
}

@property --chroma {
    initial-value: 0;
    syntax: '<number>';
    inherits: true;
}

/* Scroll overlay - captures wheel events to ensure smooth scrolling */
.csw-scroll-words__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: auto;
    cursor: default;
}

/* Main container */
.csw-scroll-words {
    position: relative;
    width: 100%;
    --fade-color: #ffffff;
    /* Note: padding is controlled via Elementor */
    /* Note: scroll-snap-type is applied to html element via JS */
}

/* Top gradient fade */
.csw-scroll-words::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, var(--fade-color), transparent);
    z-index: 10;
}

/* Bottom gradient fade */
.csw-scroll-words::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--fade-color), transparent);
    z-index: 10;
}

/* Content wrapper - flex layout for prefix + words */
.csw-scroll-words__content {
    display: flex;
    align-items: baseline;
    line-height: 1.25;
    width: 100%;
    font-weight: 600;
    font-size: clamp(2rem, 8vw, 6rem);
}


/* Sticky prefix text */
.csw-scroll-words__prefix {
    position: sticky;
    top: calc(50vh - 0.36lh); /* Align with active word at viewport center */
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    margin: 0;
    display: inline-block;
    height: fit-content;
    white-space: nowrap;
    padding-right: 0.25em;
    align-self: flex-start; /* Don't stretch in flex - critical for sticky to work */
}

/* Words list */
.csw-scroll-words__list {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    padding-inline: 0;
    margin: 0;
    list-style-type: none;
    --step: calc((var(--end) - var(--start)) / (var(--count) - 1));
}

/* Individual word items */
.csw-scroll-words__list li {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    scroll-snap-align: center;
}

/* Word colors using oklch hue gradient */
/* --chroma starts at 0 (gray) and animates to 0.3 (colored) when centered */
.csw-scroll-words__list li:not(:last-of-type) {
    --chroma: 0;
    color: var(
        --custom-color,
        oklch(var(--lightness) var(--chroma) calc(var(--start) + (var(--step) * var(--i))))
    );
}

/* Last word - inherit color (can be overridden via Elementor) */
.csw-scroll-words__list li:last-of-type {
    color: inherit;
}

/* ============================
   CSS Scroll-Driven Animations
   (Modern browsers only)
   ============================ */

@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
    /* Brightness and chroma animation on scroll */
    .csw-scroll-words__list li {
        opacity: 0.2;
        animation-name: csw-brighten;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-range: cover calc(50% - 1lh) calc(50% + 1lh);
        animation-timeline: view();
    }

    /* First word - starts colored, only fades out when scrolling past */
    .csw-scroll-words__list li:first-of-type {
        opacity: 1;
        --chroma: 0.3;
        animation-name: csw-fadeout-first;
        animation-range: cover 40% 80%;
    }

    @keyframes csw-fadeout-first {
        0% {
            opacity: 1;
            --chroma: 0.3;
            filter: brightness(1.2);
        }
        100% {
            opacity: 0.2;
            --chroma: 0;
            filter: brightness(1);
        }
    }

    /* Last word stays visible when reached */
    .csw-scroll-words__list li:last-of-type {
        --brightness: 1;
        --end-opacity: 1;
    }

    @keyframes csw-brighten {
        0% {
            opacity: var(--start-opacity, 0.2);
            --chroma: var(--start-chroma, 0);
        }
        50% {
            opacity: 1;
            --chroma: 0.3;
            filter: brightness(var(--brightness, 1.2));
        }
        100% {
            opacity: var(--end-opacity, 0.2);
            --chroma: 0;
        }
    }

    /* Note: Scrollbar color sync is handled by JavaScript for cross-browser support */
}

/* ============================
   Fallback styles (GSAP)
   These are the default state
   GSAP will animate these
   ============================ */

@supports not ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    .csw-scroll-words__list li {
        opacity: 0.2;
        /* --chroma stays at 0 (gray), GSAP will animate it */
    }

    .csw-scroll-words__list li:first-of-type {
        opacity: 1;
        --chroma: 0.3; /* First word starts colored */
    }
}

/* ============================
   Editor Preview Indicator
   ============================ */

.elementor-editor-active .csw-scroll-words__content::after {
    content: 'Scroll Words';
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: rgba(147, 57, 224, 0.9);
    color: white;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
}

/* ============================
   Reduced Motion
   ============================ */

@media (prefers-reduced-motion: reduce) {
    .csw-scroll-words__list li {
        opacity: 1 !important;
        animation: none !important;
    }
}