/* ===================================
   Hover Animation Fix
   Cambia la dirección de las animaciones hover hacia la derecha
   =================================== */

/* ===== NAVEGACIÓN LATERAL - ANIMACIÓN HACIA LA DERECHA ===== */
@media (min-width: 769px) {

    /* Sobrescribir la animación del label */
    .nav-dot .dot-label,
    .dot-label {
        position: absolute !important;
        left: 20px !important;
        white-space: nowrap !important;
        background: rgba(10, 10, 10, 0.95) !important;
        padding: 5px 12px !important;
        border-radius: 6px !important;
        font-size: 0.8rem !important;
        color: var(--text-primary) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(10px) !important; /* Empieza 10px a la derecha */
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        border: 1px solid rgba(139, 92, 246, 0.3) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    /* En hover, el label se mueve más a la derecha */
    .nav-dot:hover .dot-label {
        opacity: 1 !important;
        transform: translateX(20px) !important; /* Se mueve 20px a la derecha */
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3) !important;
    }

    /* Animación del dot con movimiento hacia la derecha */
    .nav-dot .dot {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        transform-origin: center !important;
    }

    .nav-dot:hover .dot {
        transform: scale(1.8) translateX(2px) !important; /* También se mueve ligeramente a la derecha */
    }

    .nav-dot.active .dot {
        transform: scale(1.5) !important;
    }

    /* Si el dot está activo Y en hover */
    .nav-dot.active:hover .dot {
        transform: scale(2) translateX(2px) !important;
    }
}

/* ===== SECTION HOVER EFFECTS - MOVIMIENTO HACIA LA DERECHA ===== */

/* Para las secciones principales */
.section,
section {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.section:hover,
section:hover {
    transform: translateX(5px) !important; /* Mover 5px hacia la derecha en hover */
}

/* Para cards y elementos interactivos */
.project-card,
.skill-item,
.timeline-item,
.contact-card,
.award-item,
.cert-item {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.project-card:hover,
.skill-item:hover,
.timeline-item:hover,
.contact-card:hover,
.award-item:hover,
.cert-item:hover {
    transform: translateX(5px) translateY(-2px) !important; /* Derecha y ligeramente arriba */
}

/* ===== BOTONES - MOVIMIENTO HACIA LA DERECHA ===== */

button,
.btn,
.cta-btn,
a[class*="btn"] {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

button:hover,
.btn:hover,
.cta-btn:hover,
a[class*="btn"]:hover {
    transform: translateX(3px) !important; /* Botones se mueven 3px a la derecha */
}

/* ===== LINKS Y ELEMENTOS DE TEXTO ===== */

a:not(.nav-dot):not([class*="btn"]):not(.kombo-logo) {
    transition: transform 0.2s ease !important;
    display: inline-block;
}

a:not(.nav-dot):not([class*="btn"]):not(.kombo-logo):hover {
    transform: translateX(2px) !important; /* Links se mueven 2px a la derecha */
}

/* ===== ANIMACIÓN ESPECIAL PARA TAGS Y BADGES ===== */

.tech-tag,
.skill-tag,
.project-tech,
.badge {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: inline-block;
}

.tech-tag:hover,
.skill-tag:hover,
.project-tech:hover,
.badge:hover {
    transform: translateX(3px) scale(1.05) !important; /* Derecha y ligeramente más grande */
}

/* ===== ANIMACIÓN DE ENTRADA DESDE LA IZQUIERDA ===== */

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Aplicar animación de entrada */
.nav-dot {
    animation: slideInFromLeft 0.5s ease forwards;
}

.nav-dot:nth-child(1) { animation-delay: 0.1s; }
.nav-dot:nth-child(2) { animation-delay: 0.15s; }
.nav-dot:nth-child(3) { animation-delay: 0.2s; }
.nav-dot:nth-child(4) { animation-delay: 0.25s; }
.nav-dot:nth-child(5) { animation-delay: 0.3s; }
.nav-dot:nth-child(6) { animation-delay: 0.35s; }

/* ===== HOVER EFFECTS PARA ELEMENTOS ESPECÍFICOS ===== */

/* Hero elements */
.hero-title,
.hero-subtitle {
    transition: transform 0.3s ease !important;
}

.hero-title:hover {
    transform: translateX(5px) !important;
}

.hero-subtitle:hover {
    transform: translateX(3px) !important;
}

/* Stats items */
.stat-item {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.stat-item:hover {
    transform: translateX(5px) translateY(-5px) !important;
}

/* ===== MOBILE - DESACTIVAR ANIMACIONES DE HOVER ===== */
@media (max-width: 768px) {
    /* En móvil, no aplicar transformaciones de hover */
    *:hover {
        transform: none !important;
    }

    /* Pero mantener otros efectos como cambios de color */
    .project-card:hover,
    .contact-card:hover {
        /* Solo efectos de color/sombra, sin movimiento */
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
    }
}

/* ===== SMOOTH TRANSITIONS ===== */

/* Asegurar transiciones suaves en todos los elementos interactivos */
* {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ===== SPECIAL HOVER STATES ===== */

/* iPhone showcase hover */
.iphone,
.phone-container {
    transition: transform 0.3s ease !important;
}

.iphone:hover,
.phone-container:hover {
    transform: translateX(10px) rotateY(5deg) !important;
}

/* Experience mode button special hover */
.experience-mode-btn {
    transition: all 0.3s ease !important;
}

.experience-mode-btn:hover {
    transform: translateX(3px) translateY(-2px) !important;
}

/* Theme toggle special hover */
.theme-toggle {
    transition: transform 0.3s ease !important;
}

.theme-toggle:hover {
    transform: rotate(180deg) !important;
}