/* ========================================
   DROMER - EFFECTS
   Efectos dinámicos y canvas interactivo
   ======================================== */

.fx-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Por encima del bg pero detrás del contenido */
    pointer-events: none; /* Atraviesa los clics hacia los botones */
    opacity: 0;
    animation: fadeInCanvas 1.5s ease forwards 0.5s;
}

/* Asegurar que el contenido siempre quede encima del efecto */
.hero .hero-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   TYPEWRITER EFFECT & REVEAL
   ======================================== */
.tw-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: var(--white);
    animation: blinkCursor 0.8s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 4px;
}

@keyframes blinkCursor {
    50% { opacity: 0; }
}

.tw-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.tw-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: all;
}

@keyframes fadeInCanvas {
    to { opacity: 1; }
}