/* ========================================================
   EFECTOS INTERACTIVOS AVANZADOS
   ======================================================== */

/* Cursor personalizado con efecto de rastro */
body {
    cursor: default;
}

/* Efecto de cursor en elementos interactivos */
button, a, .clickable {
    cursor: pointer;
    position: relative;
}

/* Partículas al hacer clic */
.particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    animation: particle-explode 0.8s ease-out forwards;
}

@keyframes particle-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* Efecto de ondas al hacer clic en cualquier parte */
.click-ripple {
    position: fixed;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.6);
    pointer-events: none;
    z-index: 9998;
    animation: ripple-expand 0.6s ease-out forwards;
}

@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* Efecto de brillo siguiendo el cursor */
.cursor-glow {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent);
    pointer-events: none;
    z-index: 9997;
    transition: transform 0.1s ease;
    mix-blend-mode: screen;
}

/* Efecto de hover en tarjetas con luz */
.card-light-effect {
    position: relative;
    overflow: hidden;
}

.card-light-effect::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.card-light-effect:hover::before {
    opacity: 1;
}

/* Efecto de paralaje suave */
.parallax-element {
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* Botones con efecto de presión 3D */
.button-3d {
    transform-style: preserve-3d;
    transition: transform 0.1s;
}

.button-3d:active {
    transform: translateZ(-10px);
}

/* Efecto de confeti al completar acciones */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 9999;
    animation: confetti-fall 2s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Efecto de destello en elementos importantes */
.flash-effect {
    animation: flash 1.5s ease-in-out infinite;
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }
}

/* Efecto de sacudida para errores */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-error {
    animation: shake 0.5s ease-in-out;
}

/* Efecto de éxito con rebote */
@keyframes bounce-success {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.bounce-success {
    animation: bounce-success 0.5s ease-in-out;
}

/* Efecto de carga con puntos */
.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s steps(4, end) infinite;
}

@keyframes loading-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Efecto de hover con inclinación 3D */
.tilt-3d {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-3d:hover {
    transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
}

/* Efecto de texto escribiéndose */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-secondary);
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-secondary); }
}

/* Efecto de neón pulsante */
.neon-pulse {
    animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(212, 175, 55, 0.5),
            0 0 10px rgba(212, 175, 55, 0.3);
    }
    50% {
        text-shadow: 
            0 0 10px rgba(212, 175, 55, 0.8),
            0 0 20px rgba(212, 175, 55, 0.5),
            0 0 30px rgba(212, 175, 55, 0.3);
    }
}

/* Efecto de desvanecimiento suave */
.fade-in {
    animation: fade-in 0.5s ease-in;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efecto de zoom desde el centro */
.zoom-in {
    animation: zoom-in 0.3s ease-out;
}

@keyframes zoom-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Efecto de rotación suave al hover */
.rotate-hover {
    transition: transform 0.3s ease;
}

.rotate-hover:hover {
    transform: rotate(5deg) scale(1.05);
}

/* Efecto de sombra dinámica */
.dynamic-shadow {
    transition: box-shadow 0.3s ease;
}

.dynamic-shadow:hover {
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.4),
        0 0 40px rgba(6, 182, 212, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1);
}