/* Estilos personalizados para efectos que Tailwind no soporta de forma nativa o que requieren control granular */

/* Fondo animado interactivo */
.radial-glow {
    background: radial-gradient(circle 800px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 210, 255, 0.08), rgba(181, 95, 230, 0.05), transparent 80%);
}

/* Glassmorphism premium con bordes brillantes */
.glass-card {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 12px 40px 0 rgba(0, 210, 255, 0.15);
}

/* Efecto de borde de gradiente neón para las tarjetas principales */
.neon-border-blue {
    position: relative;
}
.neon-border-blue::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to right, #00d2ff, rgba(0, 210, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.neon-border-violet {
    position: relative;
}
.neon-border-violet::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to right, #b55fe6, rgba(181, 95, 230, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.neon-border-green {
    position: relative;
}
.neon-border-green::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Efecto 3D hover interactivo */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card-3d-inner {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ocultar barra de scroll en navegadores */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animación de vibración para respuestas incorrectas en el Quiz */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.shake-animation {
    animation: shake 0.4s ease-in-out;
}

/* Estilo para los nodos de la pirámide */
.pyramid-clip-1 {
    clip-path: polygon(15% 0%, 85% 0%, 90% 100%, 10% 100%);
}
.pyramid-clip-2 {
    clip-path: polygon(10% 0%, 90% 0%, 95% 100%, 5% 100%);
}
.pyramid-clip-3 {
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
}
.pyramid-clip-4 {
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
}

/* Gradientes de texto animados */
.text-gradient-electric {
    background: linear-gradient(45deg, #00d2ff, #b55fe6, #10b981);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* Estilos personalizados para animaciones de entrada en scroll */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo especial para la consola interactiva */
.console-glow {
    box-shadow: inset 0 0 15px rgba(0, 210, 255, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Líneas guía del árbol colapsable */
.tree-line-guide {
    border-left: 1.5px dashed rgba(0, 210, 255, 0.2);
    transition: border-color 0.3s ease;
}
.tree-line-guide:hover {
    border-left-color: rgba(181, 95, 230, 0.4);
}

/* Rotación de flechas indicadoras con transiciones suaves */
.arrow-transition {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ítem activo del árbol: resplandor neón cyberpunk */
.tree-item-active {
    color: #ffffff !important;
    background: rgba(0, 210, 255, 0.12) !important;
    border-color: rgba(0, 210, 255, 0.4) !important;
    box-shadow: inset 0 0 10px rgba(0, 210, 255, 0.2), 0 0 8px rgba(0, 210, 255, 0.15);
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.4);
}

/* Contenedor de foto de perfil con doble círculo brillante neón */
.profile-neon-ring-outer {
    position: relative;
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d2ff 0%, #b55fe6 100%);
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.35), 0 0 25px rgba(181, 95, 230, 0.35);
    transition: all 0.5s ease-in-out;
}
.profile-neon-ring-outer:hover {
    box-shadow: 0 0 35px rgba(0, 210, 255, 0.55), 0 0 35px rgba(181, 95, 230, 0.55);
    transform: rotate(3deg) scale(1.02);
}
.profile-neon-ring-inner {
    padding: 4px;
    border-radius: 50%;
    background: #0b0f19;
    box-shadow: inset 0 0 20px rgba(181, 95, 230, 0.3);
}

/* Animación del icono de habilidades con glow personalizado */
.skill-icon-animate {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease, opacity 0.5s ease;
    transform-origin: center;
}

.group:hover .skill-icon-animate {
    transform: scale(1.2) translateY(-6px) rotate(-12deg);
    opacity: 0.45;
}

/* Específicos para cada habilidad para compatibilidad total con Safari/Chrome */
.group:hover .skill-icon-design-grafico {
    -webkit-filter: blur(2px) drop-shadow(0 0 12px rgba(181, 95, 230, 0.65));
    filter: blur(2px) drop-shadow(0 0 12px rgba(181, 95, 230, 0.65));
}
.group:hover .skill-icon-design-web {
    -webkit-filter: blur(2px) drop-shadow(0 0 12px rgba(0, 210, 255, 0.65));
    filter: blur(2px) drop-shadow(0 0 12px rgba(0, 210, 255, 0.65));
}
.group:hover .skill-icon-video {
    -webkit-filter: blur(2px) drop-shadow(0 0 12px rgba(181, 95, 230, 0.65));
    filter: blur(2px) drop-shadow(0 0 12px rgba(181, 95, 230, 0.65));
}
.group:hover .skill-icon-automation {
    -webkit-filter: blur(2px) drop-shadow(0 0 12px rgba(16, 185, 129, 0.65));
    filter: blur(2px) drop-shadow(0 0 12px rgba(16, 185, 129, 0.65));
}

/* Estilos base para Lenis Smooth Scroll */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}