/**
 * Color Swipe Text Effect - Core CSS
 * Pretpot Massive Addons Kit
 */

/* ========== MAIN WRAPPER ========== */
.pretpot-swipe-wrapper {
    position: relative;
    width: 100%;
}

.pretpot-swipe-container {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* ========== SWIPE WORD STRUCTURE ========== */
.pretpot-swipe-word {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    cursor: default;
}

/* For responsiveness - wrap on mobile if needed */
@media (max-width: 768px) {
    .pretpot-swipe-word {
        white-space: normal;
        display: inline-block;
    }
}

/* ========== STATIC BASE TEXT ========== */
.pretpot-swipe-static {
    position: relative;
    display: inline-block;
    
    /* Fallback solid color */
    color: #8b9dbc;
    
    /* Support for gradient inactive */
    background: var(--swipe-inactive-gradient, none);
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--swipe-inactive-solid, #8b9dbc);
}

/* If inactive type is gradient, apply gradient to static text */
.pretpot-swipe-wrapper[style*="--swipe-inactive-type: gradient"] .pretpot-swipe-static {
    background: var(--swipe-inactive-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ========== ANIMATED OVERLAY ========== */
.pretpot-swipe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    
    /* Start completely hidden (clipped from right) */
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    
    will-change: clip-path;
    
    /* Gradient styling for active state */
    background: var(--swipe-active-gradient, #ff6b4a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    
    /* Ensure text rendering is crisp */
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

/* Solid color fallback for active state */
.pretpot-swipe-word[style*="--swipe-active-solid"] .pretpot-swipe-overlay {
    background: var(--swipe-active-solid, #ff6b4a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Responsive overlay */
@media (max-width: 768px) {
    .pretpot-swipe-overlay {
        white-space: normal;
    }
}

/* ========== ANIMATION STATES ========== */

/* Animation triggered - swipe through (stays active) */
.pretpot-swipe-word.animate-swipe-stay .pretpot-swipe-overlay {
    animation: pretpotSwipeThrough var(--swipe-duration, 0.8s) var(--swipe-easing, cubic-bezier(0.25, 0.95, 0.4, 1.05)) forwards;
}

/* Animation triggered - swipe with reverse/bounce */
.pretpot-swipe-word.animate-swipe-reverse .pretpot-swipe-overlay {
    animation: pretpotSwipeAndReverse var(--swipe-duration, 0.8s) var(--swipe-easing, cubic-bezier(0.25, 0.95, 0.4, 1.05)) forwards;
}

/* ========== KEYFRAMES ========== */

/* One-way swipe - stays revealed */
@keyframes pretpotSwipeThrough {
    0% {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0% 0 0);
        -webkit-clip-path: inset(0 0% 0 0);
    }
}

/* Swipe then reverse back (bounce style) */
@keyframes pretpotSwipeAndReverse {
    0% {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }
    50% {
        clip-path: inset(0 0% 0 0);
        -webkit-clip-path: inset(0 0% 0 0);
    }
    100% {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }
}

/* ========== HOVER TRIGGER STYLES ========== */
.pretpot-swipe-wrapper[data-trigger-type="hover"] .pretpot-swipe-word:hover .pretpot-swipe-overlay {
    animation: pretpotSwipeThrough var(--swipe-duration, 0.8s) var(--swipe-easing, cubic-bezier(0.25, 0.95, 0.4, 1.05)) forwards;
}

.pretpot-swipe-wrapper[data-trigger-type="hover"][data-animation-behavior="reverse"] .pretpot-swipe-word:hover .pretpot-swipe-overlay {
    animation: pretpotSwipeAndReverse var(--swipe-duration, 0.8s) var(--swipe-easing, cubic-bezier(0.25, 0.95, 0.4, 1.05)) forwards;
}

/* ========== CLICK TRIGGER STYLES (cursor pointer) ========== */
.pretpot-swipe-wrapper[data-trigger-type="click"] .pretpot-swipe-word {
    cursor: pointer;
}

/* ========== MOBILE DISABLE ========== */
@media (max-width: 768px) {
    .pretpot-swipe-wrapper[data-disable-mobile="true"] .pretpot-swipe-overlay {
        display: none;
    }
    
    .pretpot-swipe-wrapper[data-disable-mobile="true"] .pretpot-swipe-static {
        position: relative;
        color: var(--swipe-active-solid, #ff6b4a);
        background: var(--swipe-active-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* ========== EDITOR PREVIEW STYLES ========== */
.elementor-editor-active .pretpot-swipe-overlay {
    clip-path: inset(0 0% 0 0) !important;
    -webkit-clip-path: inset(0 0% 0 0) !important;
    opacity: 0.7;
}

.elementor-editor-active .pretpot-swipe-word {
    outline: 1px dashed rgba(255,107,74,0.3);
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
    .pretpot-swipe-overlay {
        clip-path: inset(0 0% 0 0) !important;
        -webkit-clip-path: inset(0 0% 0 0) !important;
        animation: none !important;
    }
}

/* ========== STAGGER ANIMATIONS ========== */
.pretpot-swipe-word.stagger-1 { animation-delay: 0ms; }
.pretpot-swipe-word.stagger-2 { animation-delay: 50ms; }
.pretpot-swipe-word.stagger-3 { animation-delay: 100ms; }
.pretpot-swipe-word.stagger-4 { animation-delay: 150ms; }
.pretpot-swipe-word.stagger-5 { animation-delay: 200ms; }
.pretpot-swipe-word.stagger-6 { animation-delay: 250ms; }
.pretpot-swipe-word.stagger-7 { animation-delay: 300ms; }
.pretpot-swipe-word.stagger-8 { animation-delay: 350ms; }
.pretpot-swipe-word.stagger-9 { animation-delay: 400ms; }
.pretpot-swipe-word.stagger-10 { animation-delay: 450ms; }