/* =============================================
   BELLAMY ANIMATED TEXT - Elementor Widget CSS
   ============================================= */

.bellamywidget-animated-text-wrapper {
    width: 100%;
}

.bellamywidget-animated-text {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-weight: 700;
    line-height: 1.2;
}

/* ==================== EFFECTS ==================== */

/* Typing Effect */
.effect-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--typing-caret-width, 2px) solid var(--typing-caret-color, #0073AA);
    animation: typing 4s steps(30, end) infinite, 
               blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50%      { border-color: var(--typing-caret-color, #0073AA); }
}

/* Glitch Effect */
.effect-glitch {
    position: relative;
    animation: glitch-skew 4s infinite linear alternate-reverse;
}

.effect-glitch::before,
.effect-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.effect-glitch::before {
    color: var(--glitch-color1);
    z-index: -2;
    animation: glitch-anim 0.6s infinite linear alternate-reverse;
    clip: rect(0, 900px, 0, 0);
    left: 2px;
}

.effect-glitch::after {
    color: var(--glitch-color2);
    z-index: -1;
    animation: glitch-anim2 0.8s infinite linear alternate-reverse;
    clip: rect(0, 900px, 0, 0);
    left: -2px;
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    10% { transform: skew(1deg); }
    20% { transform: skew(-2deg); }
    100% { transform: skew(0deg); }
}

@keyframes glitch-anim {
    0% { clip: rect(25px, 9999px, 60px, 0); }
    5% { clip: rect(10px, 9999px, 80px, 0); }
    15% { clip: rect(50px, 9999px, 70px, 0); }
    25% { clip: rect(20px, 9999px, 55px, 0); }
    35% { clip: rect(45px, 9999px, 75px, 0); }
    100% { clip: rect(30px, 9999px, 65px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); }
    10% { clip: rect(15px, 9999px, 50px, 0); }
    20% { clip: rect(40px, 9999px, 85px, 0); }
    30% { clip: rect(25px, 9999px, 65px, 0); }
    100% { clip: rect(55px, 9999px, 90px, 0); }
}

/* Gradient Effect */
.effect-gradient {
    background: linear-gradient(90deg, var(--gradient-colors));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 25s ease infinite;
}

@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Neon Effect */
.effect-neon {
    text-shadow: 
        0 0 5px var(--neon-color),
        0 0 10px var(--neon-color),
        0 0 20px var(--neon-color),
        0 0 var(--neon-intensity) var(--neon-color),
        0 0 calc(var(--neon-intensity) * 1.5) var(--neon-color),
        0 0 calc(var(--neon-intensity) * 2) var(--neon-color);
    animation: neonFlicker 1.2s infinite alternate ease-in-out;
}

@keyframes neonFlicker {
    0% {
        text-shadow: 
            0 0 5px var(--neon-color),
            0 0 10px var(--neon-color),
            0 0 20px var(--neon-color),
            0 0 var(--neon-intensity) var(--neon-color);
    }
    100% {
        text-shadow: 
            0 0 8px var(--neon-color),
            0 0 15px var(--neon-color),
            0 0 25px var(--neon-color),
            0 0 calc(var(--neon-intensity) * 1.3) var(--neon-color),
            0 0 calc(var(--neon-intensity) * 2.2) var(--neon-color),
            0 0 calc(var(--neon-intensity) * 3) var(--neon-color);
    }
}

/* Wave Effect */
.effect-wave {
    display: inline-flex;
    color: inherit;
}

.effect-wave span {
    display: inline-block;
    animation: waveAnimation var(--wave-speed, 2.5s) ease infinite;
    animation-delay: calc(0.08s * var(--i));
    transform-origin: bottom center;
}

@keyframes waveAnimation {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(calc(-1 * var(--wave-intensity, 12px))); 
    }
}