/**
 * Display Animate - Estilos Base
 */

/* Reset de animaciones para prevenir FOUC */
.wpme-fade-in,
.wpme-fade-up,
.wpme-fade-down,
.wpme-fade-left,
.wpme-fade-right,
.wpme-fade-blur,
.wpme-scale-in,
.wpme-zoom-in,
.wpme-rotate-in {
    opacity: 0;
    visibility: hidden;
}

.wpme-fade-blur:not([data-wpme-animated]) {
    filter: blur(10px);
}

/* Cuando JS está activo, mostrar para que el observer funcione */
.js .wpme-fade-in,
.js .wpme-fade-up,
.js .wpme-fade-down,
.js .wpme-fade-left,
.js .wpme-fade-right,
.js .wpme-fade-blur,
.js .wpme-scale-in,
.js .wpme-zoom-in,
.js .wpme-rotate-in {
    visibility: visible;
}

/* Evitar que transitions de Elementor u otros builders interfieran con animaciones JS */
.wpme-fade-in,
.wpme-fade-up,
.wpme-fade-down,
.wpme-fade-left,
.wpme-fade-right,
.wpme-fade-blur,
.wpme-scale-in,
.wpme-zoom-in,
.wpme-rotate-in,
[class*="wpme-slide"],
[class*="wpme-rotate"],
[class*="wpme-parallax"],
[class*="wpme-background-scroll"],
[class*="wpme-typewriter"],
[class*="wpme-scramble"],
[class*="wpme-reveal"],
[class*="wpme-highlight-opacity"],
[class*="wpme-highlight-background"] {
    transition: none !important;
    animation: none !important;
}

/* Highlight Opacity Text — letra a letra */
.wpme-highlight-opacity-text .wpme-char {
    display: inline-block;
    will-change: opacity;
}

/* Highlight Background — marcador letra a letra */
.wpme-highlight-background-text .wpme-highlight-bg-char {
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.05em 0;
    will-change: background-color;
}

/* Typewriter — letras pre-renderizadas invisibles */
.wpme-typewriter .wpme-type-char {
    display: inline-block;
}

/* Cursor typewriter */
.wpme-cursor {
    display: inline-block;
    margin-left: 2px;
    font-weight: 100;
    color: currentColor;
}

@keyframes wpme-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Reduce motion - Respetar preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
    .wpme-fade-in,
    .wpme-fade-up,
    .wpme-fade-down,
    .wpme-fade-left,
    .wpme-fade-right,
    .wpme-fade-blur,
    .wpme-scale-in,
    .wpme-zoom-in,
    .wpme-rotate-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .wpme-parallax,
    .wpme-parallax-slow,
    .wpme-rotate-scroll,
    .wpme-scale-scroll,
    .wpme-background-scroll {
        transform: none !important;
        background-color: transparent !important;
    }

    .wpme-highlight-opacity-text .wpme-char {
        opacity: 1 !important;
    }

    .wpme-highlight-background-text .wpme-highlight-bg-char {
        background-color: transparent !important;
    }

    .wpme-typewriter .wpme-type-char {
        opacity: 1 !important;
        transform: none !important;
    }

    .wpme-is-pinned {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }
}

/* Utilidades */
.wpme-hidden {
    opacity: 0;
}

.wpme-visible {
    opacity: 1;
}

/* Pin al scroll */
[data-wpme-pin="true"] {
    position: relative;
    z-index: 1;
}

.wpme-is-pinned {
    z-index: 10;
    transition: none !important;
}

/* Stagger delays predefinidos */
.wpme-stagger-1 { --wpme-delay: 0.1s; }
.wpme-stagger-2 { --wpme-delay: 0.2s; }
.wpme-stagger-3 { --wpme-delay: 0.3s; }
.wpme-stagger-4 { --wpme-delay: 0.4s; }
.wpme-stagger-5 { --wpme-delay: 0.5s; }