/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
 
 /* --- Efecto 1: Aumento/Escala Sutil al Pasar el Ratón (Hover) --- */
.text-scale-hover {
    transition: transform 0.3s ease-in-out; /* Transición suave para el efecto */
}

.text-scale-hover:hover {
    transform: scale(1.02); /* Aumenta el texto un 2% */
}

/* --- Efecto 2: Desvanecimiento al Cargar la Página (Fade-in) --- */
/* NOTA: Para un fade-in al hacer scroll, se necesitaría un poco de JS o una librería.
   Este es un simple fade-in al cargar el elemento. */
.text-fade-in {
    opacity: 0; /* Empieza invisible */
    animation: fadeIn 1s ease-out forwards; /* Aplica la animación */
}

/* Define la animación de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Opcional: que suba un poco al aparecer */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Puedes añadir un retraso si quieres que aparezcan secuencialmente */
.text-fade-in.delay-1 { animation-delay: 0.2s; }
.text-fade-in.delay-2 { animation-delay: 0.4s; }
.text-fade-in.delay-3 { animation-delay: 0.6s; }


/* --- Efecto 3: Cambio de Color Sutil al Pasar el Ratón (Hover) --- */
.text-color-hover {
    transition: color 0.3s ease-in-out; /* Transición suave solo para el color */
}

.text-color-hover:hover {
    color: var(--color-accent) !important; /* Cambia al color de acento. ¡important para asegurar que sobrescriba! */
    /* O a cualquier otro color de tu paleta, ej: #FF8C00 */
}

/* --- Efecto 4: Sombra de Texto Sutil (para mejorar legibilidad en banners) --- */
.text-shadow-subtle {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* Sombra ligera: X, Y, blur, color */
}

/* Puedes combinarla con la sombra que ya te di en el Hero */
/* .hero-content h1, .hero-content p {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
} */



/* --- Efecto de Máquina de Escribir (Typing Effect) --- */
.typing-effect {
    overflow: hidden; /* Oculta el texto hasta que se escribe */
    white-space: nowrap; /* Evita que el texto se envuelva */
    border-right: 0.15em solid var(--color-accent); /* Cursor parpadeante */
    font-family: 'monospace', monospace; /* Fuente de ancho fijo para mejor efecto */
    width: 0; /* Empieza con ancho 0 */
    animation:
        typing 3.5s steps(40, end) forwards, /* Animación de escritura */
        blink-caret 0.75s step-end infinite; /* Animación del cursor */
    animation-delay: 0.5s; /* Pequeño retraso antes de que empiece a escribir */
}

/* Define la animación de escritura */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Define la animación del cursor parpadeante */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--color-accent); }
}

/* Puedes añadir un retraso si tienes varios elementos con este efecto */
.typing-effect.delay-1 { animation-delay: 1s; }
.typing-effect.delay-2 { animation-delay: 1.5s; }