@import url("/assets/fonts/font-face.css");

:root {
    --accent: rgb(237, 79, 58);
    --accent-gradient: linear-gradient(45deg, var(--accent), #ff00d0);
}

html {
    font-family: Aspekta, sans-serif;
    color: white;
    background-color: #0f0f0f;
}

main {
    margin: auto;
    max-width: 50vw;

    p,
    li {
        font-size: 1.25rem;
        font-weight: 500;
    }

}


.gradient-text {
    background-image: var(--accent-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    background-position: 0%;
}

header {
    padding: 1.5rem;
    padding-bottom: 0;

    margin: auto;
    max-width: 50vw;


    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: start;
    gap: 1rem;

    div {
        display: flex;
        flex-direction: column;

        h1 {
            line-height: 3rem;
            font-size: 3rem;
            font-weight: 800;
            margin: 0;
        }

        h2 {
            margin: 0;
        }
    }

    .socials-bar {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: flex-end;

        a {
            text-decoration: none;
        }
    }
}

@media screen and (max-width: 1500px) {
    main {
        max-width: 70vw;
    }

    header {
        max-width: 70vw;
    }
}

@media screen and (max-width: 1000px) {
    main {
        max-width: 90vw;
    }

    header {
        max-width: 90vw;
    }
}

@media screen and (max-width: 512px) {
    header {
        gap: 0.5rem;

        div {
            h1 {
                font-size: 10vw;
                line-height: 10vw;
            }

            h2 {
                font-size: 4.5vw;
            }
        }

        .socials-bar {
            flex-direction: column;
        }
    }
}

.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.2;
}

.grain-overlay::after {
  content:"";
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
  height: 300%;
  width: 300%;
  position: fixed;
  opacity:0.1;
   animation: animateGrain 8s steps(10) infinite;
}

@keyframes animateGrain{
  0%, 100% { transform:translate(0, 0) }
  10%{
    transform:translate(-5%,-10%)
  }
  20%{
    transform:translate(-15%,-20%)
  }
  30%{
    transform:translate(-5%,-10%)
  }
  40%{
    transform:translate(-15%,-20%)
  }
  
  50%{
    transform:translate(-5%,-10%)
  }
  60%{
    transform:translate(-15%,-20%)
  }
  70%{
    transform:translate(-5%,-10%)
  }
  80%{
    transform:translate(-15%,-20%)
  }
  90%{
    transform:translate(-5%,-10%)
  }
  100%{
    transform:translate(-15%,-20%)
  }
 
}


/* Hover Effects */

main h1,
main h2 {
    position: relative;
    display: inline-block;
    cursor: default;
    transition: color 0.3s ease;
}

main h1::after,
main h2::after {
    content:'';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-out;
}

main h1:hover::after,
main h2:hover::after {
    transform: scaleX(1);
}

main li {
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: default;
}

main li:hover {
    color: var(--accent);
    transform: translateX(8px);
}

.socials-bar a {
    transition: transform 0.3s ease, filter 0.3s ease;
    display: inline-block;
}

.socials-bar a:hover {
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0 0 8px var(--accent));
}

main p {
    transition: color 0.3s ease;
    cursor: default;
}

main p:hover {
    color: rgba(255, 255, 255, 0.9);
}

main section {
    animation: fadeInUp 0.8s ease-out;
}

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