/*
Theme Name: Mi Tema Personalizado
Author: Italo Gonzalez
Version: 1.0
*/

/* Estilos base y scroll */
    body {
      margin: 0;
      height: 100vh;
      padding: 0;
      position: relative;
      overflow: hidden; /* Evita doble scroll */
      background: #1a1a1a; /* Color de fondo mientras carga el canvas */
      animation: animate-mouse 0.6s infinite;
    }


    a {
        cursor: url('images-and-videos/cursor/1a.gif'), auto;
    }

    
    /* Contenido principal que permite scroll interno */
    .main-content {
      height: 100vh;
      color: #AAB1BF;
      scroll-behavior: smooth;
      overflow-y: auto;
      z-index: 2;
      animation: animate-mouse 0.6s infinite;

        /* --- Ocultar la barra de desplazamiento --- */

        /* Para navegadores basados en WebKit (Chrome, Safari, Edge antiguo, Opera) */
        &::-webkit-scrollbar {
          display: none;
        }
      
        /* Para Firefox */
        scrollbar-width: none;
      
        /* Para Internet Explorer y Edge (moderno) */
        -ms-overflow-style: none;
    }
    
    @keyframes animate-mouse {
          0%{
            cursor: url('images-and-videos/cursor/1a.gif'), auto;
          }
          25%{
            cursor: url('images-and-videos/cursor/2a.gif'), auto;
          }
          50%{
            cursor: url('images-and-videos/cursor/3a.gif'), auto;
          }
          75%{
            cursor: url('images-and-videos/cursor/4a.gif'), auto;
          }
          100%{
            cursor: url('images-and-videos/cursor/1a.gif'), auto;
          }
    }

    /* Fuentes y animaciones de iconos */
    .font-nav3 {
      font-family: ocr-a-std, monospace;
      font-weight: 400;
      font-style: normal;
      color: #00FF00; /* Título a juego con los trazos */
      text-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
    }

    .font-nav4 {
      font-family: sneakers-pro, sans-serif;
      font-weight: 500;
      font-style: normal;
    }

    .icono {
      transition: 0.3s ease-in;
    }
    .icono:hover {
      transform: scale(1.2);
    }

    /* Barras de Navegaci贸n */
    .nav-bar {
      top: 0%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.5s ease;
      position: sticky;
      z-index: 999;
      background-color: #262626;
      list-style-type: none;
    }
    .nav-bar2 {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.5s ease;
      z-index: 99;
      
      background-image: url('images-and-videos/dou.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    
    .nav-mobile {
    display: none;
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: center; /* Centra verticalmente */
    align-items: center;     /* Centra horizontalmente */
    width: 100%;
    height: 100%; /* Ocupa la altura del padre (.nav-bar2) */
    text-align: center; /* Centra el texto dentro de los elementos */
}
    
    /* model-viewer */
        .al {
            color: aliceblue;
            text-decoration: none;
            font-size: 4rem;
            font-family: sneakers-pro, sans-serif;
            font-weight: 500;
            font-style: normal;
        }

        .conta {
            display: block;
            position: relative;
            width: 600px; /* Ancho del área del diseño */
            height: 400px; /* Alto del área del diseño */
            perspective: 400px; /* Define la intensidad de la perspectiva */
            transform-style: preserve-3d;
        }

        .central-circle {
            position: absolute;
            top: 50%;
            left: 110%;
            transform: translate(-50%, -50%) rotateX(-2deg);
            width: 100vh;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10; /* Asegurar que esté encima */
        }

        .text-element {
            position: absolute;
            padding: 10px 20px;
            border-radius: 5px;
            white-space: nowrap; /* Evitar que el texto se rompa */
            transform-origin: center center; /* El punto de rotación y escala */
            transition: transform 0.3s ease-in-out, background-color 0.3s;
            text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00;
        }
        
    .enlace-neon {
        position: relative; /* Necesario para posicionar el pseudoelemento */
        font-size: 4rem; /* Tamaño del texto */
        font-weight: bold;
        text-transform: uppercase;
        
        /* Sombra de texto para crear el efecto 3D/biselado */
        text-shadow: 
            0 0 5px #7efc75,
            0 0 10px #7efc75,
            -1px 1px 1px #000,
            -2px 2px 1px #000;
        
        transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    /* El pseudoelemento que crea la línea de energía */
    .enlace-neon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -10%; /* Inicia un poco a la izquierda */
        width: 120%; /* Ocupa todo el ancho más un extra */
        height: 4px; /* Grosor de la línea */
        background-color: #d1ffbd; /* Color central de la línea */
        
        /* La clave del efecto: múltiples sombras para el brillo */
        box-shadow: 
            0 0 5px #d1ffbd,
            0 0 15px #d1ffbd,
            0 0 25px #adffad,
            0 0 50px #adffad;
        
        /* Estado inicial: oculto y escalado a 0 */
        transform: scaleX(0);
        transform-origin: center; /* La animación escala desde el centro */
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); /* Transición suave */
    }

    /* --- Animación al pasar el mouse (hover) --- */

    /* Cuando el mouse está encima, la línea aparece */
    .enlace-neon:hover::before {
        transform: scaleX(1); /* Escala al 100% */
        opacity: 1;
        /* Activamos la animación de parpadeo */
        animation: parpadeo-electrico 0.15s infinite alternate;
    }

    /* El texto se vuelve más brillante al pasar el mouse */
    .enlace-neon:hover {
        color: #d1ffbd;
        text-shadow: 
            0 0 10px #7efc75,
            0 0 20px #7efc75,
            0 0 40px #7efc75,
            -1px 1px 1px #000,
            -2px 2px 1px #000;
    }

    /* Keyframes para la animación de parpadeo eléctrico */
    @keyframes parpadeo-electrico {
        0% {
            opacity: 1;
            filter: blur(0);
        }
        100% {
            opacity: 0.7;
            filter: blur(1px); /* Un leve desenfoque para simular la energía */
        }
    }

        /* Posicionamiento y transformación de cada palabra */

        .proyectos {
            top: 20%;
            left: 4%;
            /* rotateY positivo para que la cara frontal apunte hacia la izquierda/afuera */
            transform: translate(-40%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px);
        }
        .proyectos:hover {
            transform: translate(-50%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px) scale(1.05) translateY(-2px);
        }


        .habilidades {
            top: 50%;
            left: 8%;
            /* rotateY positivo para que la cara frontal apunte hacia la izquierda/afuera */
            transform: translate(-50%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px);
        }
        .habilidades:hover {
            transform: translate(-60%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px) scale(1.05) translateY(-2px);
        }

        .sobre-mi {
            top: 80%;
            left: 20%;
            /* rotateY negativo para que la cara frontal apunte hacia la derecha/afuera */
            transform: translate(-50%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px);
        }
        .sobre-mi:hover {
            transform: translate(-60%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px) scale(1.05) translateY(-2px);
        }

        .contacto {
            top: 110%;
            left: 12%; /* Desactivar left para que right funcione */
            /* rotateY negativo para que la cara frontal apunte hacia la derecha/afuera */
            transform: translate(-45%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px);
        }
        .contacto:hover {
            transform: translate(-55%, -50%) rotateY(30deg) translateX(-80px) translateZ(-50px) scale(1.05) translateY(-2px);
        }


        model-viewer {
            width: 100vh;
            height: 100vh;
            display: block;
        }
    /* fin */

    /* Aplicar estilos base a los enlaces del menú */
    .items-left .menu-item a,
    .items-right .menu-item a {
        text-decoration: none !important; /* Forzar por si el tema añade subrayado */
        color: inherit;
        display: inline-block; /* Necesario para que 'transform' funcione bien */
    }
    
    /* Aplicar efecto float a los enlaces del menú */
    .items-left .menu-item a,
    .items-right .menu-item a {
        transition-duration: 0.2s;
        transition-property: transform;
    }
    
    .items-left .menu-item a:hover,
    .items-right .menu-item a:hover {
        transform: translateY(-5px);
    }
    
    /* Aplicar efecto shine a los enlaces del menú */
    .items-left .menu-item a:hover,
    .items-right .menu-item a:hover {
        -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
        -webkit-mask-size: 200%;
        animation: shin 2s infinite;
    }

    /* Animacion de aparicion de bloques */
    @keyframes appear {
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
      to {
        opacity: 1;
        transform: translateX(0px);
      }
    }
    .block {
      animation: appear linear;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
      /* Estilo Glassmorphism */
      backdrop-filter: blur(10px);
      border-radius: 50px;
      padding: 8em; /* Ajustado para mejor legibilidad */
      width: 90%;
      max-width: 80em;
    }



    /* Efectos hover */
    .float {
      transition-duration: 0.2s;
      transition-property: transform;
    }
    .float:hover {
      transform: translateY(-5px);
    }

    .shine:hover {
      -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
      -webkit-mask-size: 200%;
      animation: shin 1s infinite;
    }
    @-webkit-keyframes shin {
      from { -webkit-mask-position: 150%; }
      to { -webkit-mask-position: -50%; }
    }
    
    .fluid {
        width: 60vh;
    }
    
     @media  (max-width: 750px){
         .nav-mobile {
            display: flex;
        }
        .conta {
            display: none;
        }
        .fluid {
            height: auto;
            width: 100%;
        }
    }