:root {
  --color-primary: #09f;        /* títulos, enlaces principales */
  --color-bg: #e9e1d1;
  --color-bg-hover: #dad9d9;
  --color-text: #333333;
  --color-accent: #00c853;      /* verde brillante */
  --color-secondary: #ffab00;   /* amarillo cálido */
  --color-neutral: #eceff1;     /* gris claro */
  --color-primary-hover: #007ccf;
  --color-btn-mode: #09f;
  --fuente-titulos: "Inter", sans-serif;   
  --fuente-textos: "Anonymous Pro", monospace;
}

.dark {
  --color-primary: #09f;
  --color-bg: #13131d;
  --color-bg-hover: #383846;
  --color-text: #dcdcdc;
  --color-accent: #00c853;
  --color-secondary: #ffab00;
  --color-neutral: #1a1a24;
  --color-primary-hover: #007ccf;
}

#mainHeader{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 160px;
    padding-bottom: 180px; 
    width: 100%;

    color: #00ffbf70; /* verde fosforescente */
    text-shadow: 
    0 0 2px #00ffbf70,
    0 0 3px #00ffbf70,
    0 0 2px #00ffbf70;
    animation: flicker 1.5s;
}


#mainHeader::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0.12) 1px,
    rgba(0,0,0,0.12) 3px
  );
  opacity: 0.85;
  background-size: 100% 6px; /* controla la altura total del patrón */
  animation: scanmove 2s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes scanmove {
  from { background-position: 0 0; }
  to   { background-position: 0 6px; } /* debe coincidir con background-size Y */
}

@keyframes flickerSoft {
  0%   { opacity: 1; }
  50%  { opacity: 0.85; }
  100% { opacity: 1; }
}

@keyframes flickerSoft2 {
  0%   { opacity: 1; }
  100% { opacity: 0.02; }
}


#mainHeader h1{
    font-size: 60px;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    animation: flickerSoft 1.5s infinite alternate;
    z-index: -1;
}

#mainHeader h3{
    font-family: var(--fuente-textos);
    font-weight: 800;
    text-align: center;
    color: var(--color-text);
    text-shadow: 
    0 0 4px #3ecebdbd,
    0 0 5px #3bcc53,
    0 0 7px #36cf28ee;
    animation: flickerSoft 1.5s infinite alternate;
    z-index: -1;
}

#barConsole{
    animation: flickerSoft2 .2s infinite alternate;
}

#mainHeader img{
    height: 200px;
    animation: flickerSoft 1.5s infinite alternate;
    z-index: -1;
}

#mainHeaderButton{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 14px;
    gap: 15px;
}

#mainHeaderButton .btnMain{
    font-size: 12px;
    padding: 12px 12px;
    border-radius: 4px;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: 600;
}

#btnCV{
    background-color: var(--color-bg); 
    color: var(--color-text);
    border: 1px solid var(--color-secondary);
    text-shadow: none;
    &:hover{
        background-color: var(--color-bg-hover);
        cursor: pointer;
    }
}

#btnProjects{
    border: none;
    background-color: var(--color-primary);
    color: #fff;
    text-shadow: none;
    &:hover{
        background-color: var(--color-primary-hover);
        cursor: pointer;
    }
}

/* RESPONSIVE */ 

@media (width <= 800px){
    #mainHeader{
        padding-top: 180px; 
    }

    #mainHeader h1{
        width: 85%;
        font-size: 42px;
        line-height: 40px;
        padding-bottom: 7px;
        text-align: center;
    }

    #mainHeader h1{
        line-height: 40px;
    }


    #mainHeader h3{
        width: 85%;
        font-size: 17px;
    }   
}

@media (width >= 1550px){
    main #mainHeader{
        padding-top: 250px;
    }


    #mainHeader img{
        height: 260px;
    }

    #mainHeader h1{
        font-size: 80px;
    }

    #mainHeader h3{
        font-size: 25px;
    }

    #mainHeaderButton .btnMain{
        padding: 15px 20px;
        font-size: 17px;
    }
}

@media (width <= 474px) {
    #mainHeader h1{
        padding-top: 20px;
        font-size: 30px;
    }

    #mainHeader h1{
        line-height: 40px;
        padding-bottom: 1px;
    }
}

@media (width <= 458px) {
    #mainHeader h1{
        padding-top: 10px;
        font-size: 25px;
    }

    #mainHeader h3{
        font-size: 13px;
    }
}

@media (width <= 365px) {
    #mainHeader h1{
        line-height: 27px;
    }
}


@keyframes glitch-5 {
  0.00%,
  33.33%,
  43.33%,
  66.67%,
  76.67%,
  100.00% {
    transform: none;
    filter: hue-rotate(0);
  }

  33.43%,
  43.23% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(
        2px 3px 0 rgb(0 0 255 / 0.1)
      );
  }

  66.77%,
  76.57% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(
        -3px 0px 0 rgb(0 0 255 / 0.1)
      );
  }
}