/* ==========================================================================
   Codealo - Index Page Styles
   Estilos específicos para la página de inicio
   ========================================================================== */

/* Animación de texto letra por letra en el hero */
@keyframes letterReveal {
    from { 
        opacity: 0; 
        transform: translateY(20px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

.letter {
    display: inline-block;
    opacity: 0;
    animation: letterReveal 0.4s ease-out forwards;
}

.letter.space {
    width: 0.25em;
}

/* Dispositivos isométricos en la sección "Qué es Codealo" */
.isometric-device {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.isometric-device::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10px;
    right: -10px;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    transform: rotateX(90deg) translateZ(-10px);
    border-radius: 0 0 10px 10px;
}

/* Mobile menu: drawer from the right */
#mobile-menu-wrapper.mobile-menu-open #mobile-menu {
    transform: translateX(0);
}

#mobile-menu-wrapper.mobile-menu-open #mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .isometric-device {
        transform: scale(0.7);
    }
}