*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-track {
    background: #202627;
}

*::-webkit-scrollbar-thumb {
    background-color: #525152;
    border-radius: 12px;
    border: 2px double #201f1f;
}

html, body{
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(33,33,41,1) 0%, rgba(26,26,36,1) 0%, rgba(19,24,25,1) 50%, rgba(26,26,36,1) 100%, rgba(33,33,64,1) 100%);
}

header{
    margin: 0;
}

nav{
    width: auto;
    height: 150px;
    background: url(../img/header.png);
}

h1, h2{
    user-select: none;
}

.gradiente-start{
    position: relative;
    width: 100%;
    height: 80px;
    background: linear-gradient(360deg,rgba(42, 123, 155, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(55, 61, 60, 0) 50%, rgba(39, 39, 48, 0.4) 100%);
    z-index: 1;
}

.barra, .barra-footer{
    position: relative;
    width: 80%;
    height: 3px;
    background-color: rgb(77, 74, 74);
    box-shadow: 5px 1px 35px rgb(121, 118, 118);
    margin-left: auto;
    margin-right: auto;
    margin-top: -4em;
    margin-bottom: 1em;
    z-index: 2;
    border-radius: 6px;
}

.titulo-container{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

.titulo-container h1{
    display: block;
    transition: all 200ms; 

    text-align: center;
    
    background: linear-gradient(
        to right,
        #e97da8 10%,
        #e283b2 40%,
        #c16ca0 70%,
        #d168a2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate, textGlow 2s ease-in-out infinite alternate;
}

#cherry{
    transition: all 200ms; 
    
    background: linear-gradient(
        to right,
        #e97da8 10%,
        #e283b2 40%,
        #c16ca0 70%,
        #d168a2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate, textGlow 2s ease-in-out infinite alternate;
}

.titulo-container h2{
    color: rgb(228, 224, 224);
    text-shadow: 0 0 20px rgb(228, 224, 224);
    font-size: 24px;
    text-align: center;
}

.bloques-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    gap: 1em;
    padding: 1em;
}

.bloque-container{
    width: auto;
    width: 400px;
    height: 200px;
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(35, 35, 43, 1) 0%, rgba(30, 30, 32, 1) 100%, rgba(40, 40, 88, 1) 100%);
    box-shadow: 5px 1px 35px rgb(31, 29, 29);
    border-radius: 8px;
    text-overflow: clip;
    transition: all 200ms;
}

.bloque-container:hover{
    transform: scale(1.1);
    box-shadow: 0 0 40px rgb(44, 43, 43);
    margin-left: 1em;
    margin-right: 1em;
}

.bloque-container h1{
    text-align: center;
    color: rgb(212, 205, 205);
    text-shadow: 0 0 20px rgb(182, 172, 172);
    font-size: 24px;
    padding-top: 0.5em;
}

.bloque-container p{
    color: rgb(209, 203, 203);
    padding: 1em;
    overflow-wrap: break-word;
    word-break: break-word; 
    white-space: normal;
}

.bloque-container-habilidades{
    width: 100%;
    text-align: center;
}

.bloque-container-habilidades p{
    margin-left: auto;
    margin-right: auto;
    max-width: 250px;
}

.bloque-container-habilidades i{
    color: rgba(83, 81, 81, 0.877);
    padding: 0 5px;
    font-size: 20px;
    transition: all 200ms;
}

#html{
    color: #e4ae4a;
    text-shadow: 0 0 16px #e4ae4a;
}

#css{
    color: #64a1da;
    text-shadow: 0 0 16px #64a1da;
}

#javascript{
    color: #e2db70;
    text-shadow: 0 0 16px #e2db70;
}

#php{
    color: #7a75d3;
    text-shadow: 0 0 16px #7a75d3;
}

.bloque-container-imagenes{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    padding: 1em;
}

.bloque-container-imagenes-imagen{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bloque-container-imagenes-imagen img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 16px;
}

#fate{
    filter: drop-shadow(0 0 16px rgb(107, 103, 103));
}

#cs2{
    filter: drop-shadow(0 0 16px rgb(66, 66, 45));
}

.bloque-container-imagenes-imagen p{
    text-align: center;
    font-size: 13px;
    font-style: italic;
    padding: 0 !important;

    transition: all 200ms; 
    
    background: linear-gradient(
        to right,
        #f5f5f5 0%,   /* casi blanco brillante */
        #999494 25%,  /* gris medio */
        #7a7777 50%,  /* gris oscuro */
        #999494 75%,  /* vuelve a gris medio */
        #f5f5f5 100%  /* reflejo brillante */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 2s ease-in-out infinite alternate, textGlow2 2s ease-in-out infinite alternate;
}

/* bloque mis habilidades */

.bloque-mishabilidades:hover .bloque-container-habilidades i{
    color: rgb(207, 201, 201);
    filter: drop-shadow(0 0 8px rgb(107, 103, 103));
    transform: scale(1.1);
}

/* mis proyectos */

#tachibana{
    color: #a3e485;
    text-shadow: 0 0 16px #93ce78;
}

#cs2-website{
    color: #e7d779;
    text-shadow: 0 0 16px #d4c56e;
}

#fourchan{
    transition: all 200ms; 
    
    background: linear-gradient(
        to right,
        #98e165 10%,   
        #7fc97f 40%,   
        #b5d19c 70%,   
        #70d670 100%   
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate, textGlow3 2s ease-in-out infinite alternate;
}

#cs2-glow{
    transition: all 200ms; 
    
    background: linear-gradient(
        to right,
        #e7d779 10%,   
        #e6d058 40%,   
        #ddc749 70%,   
        #bbaa47 100%   
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate, textGlow4 2s ease-in-out infinite alternate;
}

.bloque-proyecto{
    width: 320px !important;
    position: relative;
}

.bloque-proyecto a{
    text-align: center;
    text-decoration: none;
}

.bloque-proyecto a i{
    display: block;
    color: rgba(83, 81, 81, 0.877);
    padding: 0 5px;
    font-size: 20px;
    transition: all 200ms;
    margin-left: auto;
    margin-right: auto;
}

.bloque-proyecto a i:hover{
    color: rgb(207, 201, 201);
    filter: drop-shadow(0 0 8px rgb(107, 103, 103));
    transform: scale(1.2);
}

.bloque-proyecto-wrapper:hover .bloque-proyecto{
    transform: scale(1) translateY(-10px);
    box-shadow: 0 0 40px rgb(44, 43, 43);
    margin-left: 0;
    margin-right: 0;
}   

/* footer */

footer{
    text-align: center;
}

footer p{
    display: inline-block;
    color: rgba(83, 81, 81, 0.877);
    text-shadow: 0 0 12px rgb(85, 81, 81);
    transition: all 200ms;
    user-select: none;
}

footer p:hover{
    color: rgb(224, 219, 219);
    text-shadow: 0 0 16px rgb(148, 145, 145);
    transform: scale(1.1);
}

.barra-footer{
    width: 30%;
    margin-top: 2em;
    margin-bottom: 0em;
    transition: all 200ms;
}

.barra-footer-hover{
    width: 25% !important;
    background-color: rgb(146, 141, 141) !important;
    box-shadow: 5px 1px 35px rgb(219, 216, 216) !important;
}

.footer-logos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    gap: 1em;
}

.footer-logos *{
    color: rgba(83, 81, 81, 0.877);
    font-size: 20px;
    transition: all 200ms;
}

.footer-logos *:hover{
    color: rgb(207, 201, 201);
    filter: drop-shadow(0 0 8px rgb(107, 103, 103));
    transform: scale(1.2);
}

/* animacion header */
.barra-header-animada{
    animation: barra-header-animacion 2.5s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

@keyframes barra-header-animacion {
    0% {
        width: 0%;
        box-shadow: none;
    }
    100% {
        width: 80%;
        box-shadow: 5px 1px 35px rgb(121, 118, 118);
    }
}

/* animaciones de texto */

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes textGlow {
    0% {
        text-shadow: 0px 0px 25px #e97da8;
    }
    100% {
        text-shadow: 0px 0px 25px #d168a2;
    }
}

@keyframes textGlow2 {
    0% {
        text-shadow: 0px 0px 25px #ccc8c8;
    }
    100% {
        text-shadow: 0px 0px 25px #b3afaf;
    }
}

@keyframes textGlow3 {
    0% {
        text-shadow: 0px 0px 25px #98e165;
    }
    100% {
        text-shadow: 0px 0px 25px #70d670;
    }
}

@keyframes textGlow4 {
    0% {
        text-shadow: 0px 0px 25px #e7d779;
    }
    100% {
        text-shadow: 0px 0px 25px #bbaa47;
    }
}

/* animaciones de bloques */

.titulo-animado {
    opacity: 0;
    transform: translateY(-30px);
    animation: aparecer-desde-arriba 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
}

@keyframes aparecer-desde-arriba {
    0% {
        opacity: 0;
        transform: translateY(-30px);
        filter: blur(3px);
    }
    60% {
        opacity: 1;
        transform: translateY(5px); 
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.bloque-animado {
    animation: aparecer-bloque 1s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

.bloque-animado2{
    animation: aparecer-bloque 1.4s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

.bloque-animado3{
    animation: aparecer-bloque 1.8s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

@keyframes aparecer-bloque {
    0% {
        opacity: 0;
        transform: translateY(-25px);
        filter: blur(1px);
    }
    60% {
        opacity: 1;
        transform: translateY(3px);
        filter: blur(0.5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.titulo-animado-abajo {
    opacity: 0;
    transform: translateY(30px);
    animation: aparecer-desde-abajo 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
}

@keyframes aparecer-desde-abajo {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(1px);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px);
        filter: blur(0.5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.bloque-animado-abajo {
    animation: aparecer-bloque-abajo 1s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

.bloque-animado-abajo2 {
    animation: aparecer-bloque-abajo 1.4s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

@keyframes aparecer-bloque-abajo {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* animacion footer */

.barra-footer-animada{
    animation: barra-footer-animacion 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-fill-mode: none
}

@keyframes barra-footer-animacion {
    0% {
        width: 0%;
        box-shadow: none;
    }
    100% {
        width: 30%;
        box-shadow: 5px 1px 35px rgb(121, 118, 118);
    }
}

.footer-texto-animado {
    opacity: 0;
    transform: translateY(10px);
    animation: aparecer-footer 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-delay: 0.3s; /* opcional: sincroniza con la animación de la línea */
}

@keyframes aparecer-footer {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(3px);
    }
    70% {
        opacity: 1;
        transform: translateY(-2px);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.footer-icono-animado {
    animation: aparecer-icono-suave 1s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
}

@keyframes aparecer-icono-suave {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(3px);
    }
    70% {
        opacity: 1;
        transform: translateY(-2px);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* responsive */

@media (max-width: 900px){
    .bloques-container{
        flex-direction: column;
    }

    .bloque-container{
        width: 80%;
    }

    .titulo-container h2{
        font-size: 20px;
    }
}