/**
 * Swirl Flip Text Fill Effects CSS
 * Combines vertical flip, blur stagger, tornado twirl, and text fill effects
 */

.pretpot-swirl-text-wrapper {
    display: block;
    width: 100%;
    position: relative;
}

.pretpot-swirl-text {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.02em;
    position: relative;
}

.pretpot-swirl-text .char {
    display: inline-block;
    transition-property: transform, filter, opacity, color, clip-path;
    transition-timing-function: cubic-bezier(0.2, 0.9, 0.4, 1.1);
    white-space: pre;
}

/* ============================================ */
/* 1. VERTICAL FLIP EFFECT (Counter Style)      */
/* ============================================ */
.pretpot-swirl-text[data-effect="flip"] .char {
    transition-property: transform;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.pretpot-swirl-text[data-effect="flip"][data-trigger="hover"]:hover .char,
.pretpot-swirl-text[data-effect="flip"][data-trigger="click"].active .char,
.pretpot-swirl-text[data-effect="flip"][data-trigger="load"].loaded .char,
.pretpot-swirl-text[data-effect="flip"][data-trigger="scroll"].in-view .char {
    transform: rotateX(360deg);
}

/* ============================================ */
/* 2. BLUR STAGGER EFFECT (Vertical)            */
/* ============================================ */
.pretpot-swirl-text[data-effect="blur_stagger"] .char {
    transition-property: transform, filter, opacity;
    transform: translateY(0px) scale(1);
    filter: blur(0px);
    opacity: 1;
}

.pretpot-swirl-text[data-effect="blur_stagger"][data-trigger="hover"]:hover .char,
.pretpot-swirl-text[data-effect="blur_stagger"][data-trigger="click"].active .char,
.pretpot-swirl-text[data-effect="blur_stagger"][data-trigger="load"].loaded .char,
.pretpot-swirl-text[data-effect="blur_stagger"][data-trigger="scroll"].in-view .char {
    animation: pretpotBlurStaggerUp 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pretpot-swirl-text[data-effect="blur_stagger"][data-blur-direction="down"] .char {
    animation-name: pretpotBlurStaggerDown;
}

@keyframes pretpotBlurStaggerUp {
    0% {
        transform: translateY(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    35% {
        transform: translateY(-28px) scale(1.02);
        filter: blur(6px);
        opacity: 0.7;
    }
    70% {
        transform: translateY(-48px) scale(0.96);
        filter: blur(12px);
        opacity: 0.2;
    }
    100% {
        transform: translateY(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes pretpotBlurStaggerDown {
    0% {
        transform: translateY(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    35% {
        transform: translateY(28px) scale(1.02);
        filter: blur(6px);
        opacity: 0.7;
    }
    70% {
        transform: translateY(52px) scale(0.95);
        filter: blur(12px);
        opacity: 0.2;
    }
    100% {
        transform: translateY(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

/* ============================================ */
/* 3. BLUR STAGGER EFFECT (Horizontal)          */
/* ============================================ */
.pretpot-swirl-text[data-effect="blur_stagger_horizontal"] .char {
    transition-property: transform, filter, opacity;
    transform: translateX(0px) scale(1);
    filter: blur(0px);
    opacity: 1;
}

.pretpot-swirl-text[data-effect="blur_stagger_horizontal"][data-trigger="hover"]:hover .char,
.pretpot-swirl-text[data-effect="blur_stagger_horizontal"][data-trigger="click"].active .char,
.pretpot-swirl-text[data-effect="blur_stagger_horizontal"][data-trigger="load"].loaded .char,
.pretpot-swirl-text[data-effect="blur_stagger_horizontal"][data-trigger="scroll"].in-view .char {
    animation: pretpotBlurStaggerLeft 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pretpot-swirl-text[data-effect="blur_stagger_horizontal"][data-slide-direction="right"] .char {
    animation-name: pretpotBlurStaggerRight;
}

@keyframes pretpotBlurStaggerLeft {
    0% {
        transform: translateX(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    35% {
        transform: translateX(-28px) scale(1.02);
        filter: blur(6px);
        opacity: 0.7;
    }
    70% {
        transform: translateX(-48px) scale(0.96);
        filter: blur(12px);
        opacity: 0.2;
    }
    100% {
        transform: translateX(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes pretpotBlurStaggerRight {
    0% {
        transform: translateX(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    35% {
        transform: translateX(28px) scale(1.02);
        filter: blur(6px);
        opacity: 0.7;
    }
    70% {
        transform: translateX(48px) scale(0.96);
        filter: blur(12px);
        opacity: 0.2;
    }
    100% {
        transform: translateX(0px) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

/* ============================================ */
/* 4. TORNADO TWIRL EFFECT (3D Spin)            */
/* ============================================ */
.pretpot-swirl-text[data-effect="tornado"] {
    perspective: 800px;
    transform-style: preserve-3d;
}

.pretpot-swirl-text[data-effect="tornado"] .char {
    transition-property: transform;
    transform: rotateY(0deg) rotateX(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.pretpot-swirl-text[data-effect="tornado"][data-trigger="hover"]:hover .char,
.pretpot-swirl-text[data-effect="tornado"][data-trigger="click"].active .char,
.pretpot-swirl-text[data-effect="tornado"][data-trigger="load"].loaded .char,
.pretpot-swirl-text[data-effect="tornado"][data-trigger="scroll"].in-view .char {
    transform: rotateY(360deg) rotateX(15deg);
}

/* ============================================ */
/* 5. TEXT FILL EFFECT (Vertical Reveal)        */
/* ============================================ */
.pretpot-swirl-text[data-effect="text_fill"] {
    color: var(--unfilled-color, #2c4a5e);
}

.pretpot-swirl-text[data-effect="text_fill"] .char {
    transition-property: color, clip-path;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--unfilled-color, #2c4a5e);
    position: relative;
}

.pretpot-swirl-text[data-effect="text_fill"] .char.revealed {
    color: var(--filled-color, #d4c6b9);
}

/* Top to Bottom Fill */
.pretpot-swirl-text[data-effect="text_fill"][data-fill-direction="top_to_bottom"] .char {
    clip-path: inset(0 0 100% 0);
}

.pretpot-swirl-text[data-effect="text_fill"][data-fill-direction="top_to_bottom"] .char.revealed {
    clip-path: inset(0 0 0 0);
}

/* Bottom to Top Fill */
.pretpot-swirl-text[data-effect="text_fill"][data-fill-direction="bottom_to_top"] .char {
    clip-path: inset(100% 0 0 0);
}

.pretpot-swirl-text[data-effect="text_fill"][data-fill-direction="bottom_to_top"] .char.revealed {
    clip-path: inset(0 0 0 0);
}

/* ============================================ */
/* 6. SWIRL COMBINED (All Effects)              */
/* ============================================ */
.pretpot-swirl-text[data-effect="swirl_combined"] .char {
    transition-property: transform, filter, opacity, color, clip-path;
    transition-timing-function: cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Continuous loop animation */
@keyframes pretpotSwirlCombined {
    0% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px);
        filter: blur(0px);
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
    25% {
        transform: rotateX(180deg) rotateY(90deg) translateY(-20px);
        filter: blur(4px);
        opacity: 0.7;
        clip-path: inset(0 0 0 0);
    }
    50% {
        transform: rotateX(360deg) rotateY(180deg) translateY(-40px);
        filter: blur(8px);
        opacity: 0.3;
        clip-path: inset(0 0 100% 0);
    }
    75% {
        transform: rotateX(540deg) rotateY(270deg) translateY(-20px);
        filter: blur(4px);
        opacity: 0.7;
        clip-path: inset(0 0 0 0);
    }
    100% {
        transform: rotateX(720deg) rotateY(360deg) translateY(0px);
        filter: blur(0px);
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* ============================================ */
/* Scroll Trigger (Intersection Observer)       */
/* ============================================ */
.pretpot-swirl-text[data-trigger="scroll"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.pretpot-swirl-text[data-trigger="scroll"].in-view {
    opacity: 1;
    transform: translateY(0);
}

.pretpot-swirl-text[data-trigger="load"].loaded {
    animation: none;
}

/* Continuous loop styling */
.pretpot-swirl-text[data-trigger="continuous"] .char {
    animation-duration: var(--duration, 0.5s);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.4, 1.1);
    animation-fill-mode: forwards;
}

/* Animation delay values are set via inline styles */