/**
 * TopApp Dynamic Title - Estilos
 * 
 * @package TopApp_Dynamic_Title
 * @version 1.0.0
 * @author TopApp Tomas Folgado
 */

/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */

.topapp-dt-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ==========================================================================
   LÍNEAS DE TÍTULO
   ========================================================================== */

.topapp-dt-line {
    display: block;
    margin: 0;
    padding: 0;
}

.topapp-dt-line.topapp-dt-relative {
    position: relative;
}

.topapp-dt-line.topapp-dt-absolute {
    position: absolute;
}

/* ==========================================================================
   TEXTO Y CARACTERES
   ========================================================================== */

.topapp-dt-text {
    display: inline-block;
    white-space: nowrap;
}

.topapp-dt-word {
    display: inline-block;
    white-space: nowrap;
}

.topapp-dt-char {
    display: inline-block;
    position: relative;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.topapp-dt-space {
    display: inline-block;
    width: 0.3em;
}

/* Estado inicial para animaciones (oculto) */
.topapp-dt-container[data-animation] .topapp-dt-char {
    opacity: 0;
}

/* Estado visible después de animación */
.topapp-dt-container.topapp-dt-animated .topapp-dt-char {
    opacity: 1;
}

/* ==========================================================================
   CURSOR TYPEWRITER
   ========================================================================== */

.topapp-dt-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: currentColor;
    margin-left: 2px;
    animation: topapp-dt-blink 0.7s infinite;
    vertical-align: middle;
}

@keyframes topapp-dt-blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* ==========================================================================
   EFECTOS DE FLIP
   ========================================================================== */

.topapp-dt-char.topapp-dt-flip {
    transform-origin: center center;
    perspective: 1000px;
}

/* ==========================================================================
   ESTADOS DE HOVER
   ========================================================================== */

.topapp-dt-container.topapp-dt-hover-enabled {
    cursor: pointer;
}

.topapp-dt-container.topapp-dt-hover-enabled .topapp-dt-char {
    transition: color 0.3s ease;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 1024px) {
    .topapp-dt-container {
        overflow-x: hidden;
    }
    
    .topapp-dt-text {
        white-space: normal;
        word-wrap: break-word;
    }
    
    .topapp-dt-word {
        white-space: normal;
    }
}

/* Móvil */
@media screen and (max-width: 767px) {
    .topapp-dt-line.topapp-dt-absolute {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    .topapp-dt-container {
        min-height: auto !important;
    }
}

/* ==========================================================================
   ANIMACIONES PREDEFINIDAS
   ========================================================================== */

/* Fadeup inicial */
.topapp-dt-anim-fadeup {
    opacity: 0;
    transform: translateY(30px);
}

/* Fadein inicial */
.topapp-dt-anim-fadein {
    opacity: 0;
}

/* Scale inicial */
.topapp-dt-anim-scale {
    opacity: 0;
    transform: scale(0);
}

/* Flip inicial */
.topapp-dt-anim-flip {
    opacity: 0;
    transform: rotateX(180deg);
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .topapp-dt-char {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .topapp-dt-cursor {
        animation: none;
    }
}

/* ==========================================================================
   ESTILOS DEL EDITOR DE ELEMENTOR
   ========================================================================== */

.elementor-editor-active .topapp-dt-container .topapp-dt-char {
    opacity: 1;
}

/* Highlight en el editor */
.elementor-editor-active .topapp-dt-line:hover {
    outline: 1px dashed rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.topapp-dt-hidden {
    visibility: hidden;
}

.topapp-dt-visible {
    visibility: visible;
}

/* GPU Acceleration */
.topapp-dt-gpu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}