/* variables */
:root {
  /* colors */
  --shadow-slate: #050505;
  --pearl-frost: #ededed;
  --green-mantis: #87fb1e;

  /* fonts */
  --font-mono: 'Reddit Mono Variable', monospace;
  --font-sans: 'Thunder Black', sans-serif;
}

/* fonts */
@font-face {
  font-family: 'Thunder Black';
  src: url('https://pub-451c95ff41d14cb081cd173f05d2b9e9.r2.dev/fonts%2FThunder-BlackLC.woff2') format('woff2');
}

@font-face {
  font-family: 'Reddit Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/reddit-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CSS reset */
* {
  margin: unset;
  padding: unset;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--pearl-frost);
}

p {
  text-wrap: pretty;
}

fieldset {
  border: 0;
}

/* CSS */
html {
  scroll-behavior: smooth;
  scroll-padding: 50px;
}

body {
  height: 100vh;
  background-color: var(--shadow-slate);
}

.noise-container {
  position: relative;
  overflow: clip;
}

.content {
  position: relative;
  z-index: 5;
}

.noise-overlay {
  position: absolute;
  inset: -100%;
  background-image: url('https://pub-451c95ff41d14cb081cd173f05d2b9e9.r2.dev/noise-texture.png');
  opacity: 10%;
  z-index: 0;
  /* pointer-events: none; */
  will-change: transform;
  animation: noise 3s steps(4) infinite;
}

.title {
  color: var(--pearl-frost);
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: clamp(6rem, 4.5714rem + 3.5714vw, 8rem);
  text-align: center;
}

.text {
  color: var(--pearl-frost);
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 0.7857rem + 0.2232vw, 1rem);
}

#navbar {
  display: flex;
  position: fixed;
  justify-content: center;
  padding-top: 20px;
  left: 0;
  right: 0;
  z-index: 5;

  nav {
    display: flex;
    border: 1px solid var(--pearl-frost);
    border-radius: 0.5rem;
    text-decoration: none;
    overflow: hidden;
    /* z-index: 9998; */

    .nav-item {
      display: flex;
      justify-content: center;
      position: relative;
      text-decoration: none;
      height: 60px;

      &:visited {
        color: inherit;
      }

      &:hover .nav-item-bg {
        color: var(--green-mantis);
      }

      .nav-indicator {
        z-index: 0;
        background-color: #1cff1d;
        border-radius: 4px;
        width: 36px;
        height: 8px;
        position: absolute;
        top: 100%;
        transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
        transition: transform 300ms ease;
      }

      &:hover .nav-indicator {
        transform: translate3d(0px, -80%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
      }

      .nav-item-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96px;
        height: 100%;
        color: var(--pearl-frost);
        font-family: var(--font-mono);
        font-size: 0.875rem;
        background: rgba(5, 5, 5, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
        transition: color 700ms ease;
      }

    }

    .home {
      border-radius: 0.5rem 0 0 0.5rem;
    }

    .contact {
      border-radius: 0 0.5rem 0.5rem 0;
    }

  }
}

#welcome-section {
  /* Esto hace que la sección ocupe todo el alto de la pantalla */
  display: flex;
  flex-direction: column;
  row-gap: 50px;
  justify-content: space-between;
  height: 100dvh;

  /* Esto permite posicionar absolutamente los spans dentro */
  .hero {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0 20px;

    h1 {
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      max-width: 1024px;
      font-size: clamp(8rem, 3rem + 12.5vw, 15rem);
      padding: 0 20px;


      span {
        &:first-child {
          text-align: left;
        }

        &:last-child {
          text-align: right;
        }
      }
    }

    img {
      max-width: 100%;
      max-height: 680px;
      width: 470px;
      /* height: 680px; */
      object-fit: cover;
      border-radius: 16px;
    }
  }

  p {
    width: 300px;
    margin: 0 0 20px 20px;
  }
}

.scroller {
  width: 120%;
  margin: -60px 0 60px 0;
  transform: rotate(-5deg);

  .scroller-inner {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
  }

  .tag-list {
    list-style: none;
  }

  img {
    width: 380px;
    height: 480px;
    object-fit: cover;
    border-radius: 16px;
  }
}

.scroller[data-animated='true'] .scroller-inner {
  flex-wrap: nowrap;
  width: max-content;
  animation: horizontal-scroll 40s linear infinite;
}

/* projects section */
#projects {
  padding-top: 40px;

  .projects-introduction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 250px;
    padding: 0 20px;
    font-family: var(--font-mono);
    color: var(--pearl-frost);

    p {
      max-width: 70%;
    }

    svg {
      justify-self: end;
      fill: var(--green-mantis);
      height: 200px;
    }
  }

  .projects-grid-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    span {
      color: var(--pearl-frost);
      font-family: var(--font-mono);
      text-transform: uppercase;
      font-size: 0.875rem;
    }
  }

  .projects-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    column-gap: 60px;
    padding: 0 20px;

    .vertical-line {
      position: absolute;
      left: 50%;
      /* Coloca la línea en el medio horizontalmente */
      top: 0;
      bottom: 0;
      border-left: 1px solid var(--pearl-frost);
      /* Ajusta el grosor y el color de la línea aquí */
    }

    .project-tile {
      hr {
        border: none;
        border-top: 1px solid var(--pearl-frost);
        margin: 15px 0;
      }

      .project-wrapper {
        padding: 8px;
        border-radius: 24px;
        background-color: #141414;
        transition: all ease 0.3s;

        img {
          height: 650px;
          width: 100%;
          object-fit: cover;
          border-radius: 16px;
          filter: grayscale(0%);
          transition: all ease 0.3s;
        }

        svg {
          height: 24px;
          color: var(--pearl-frost);
          transition: all 300ms ease;
        }

        &:hover {
          background-color: var(--green-mantis);

          img {
            filter: grayscale(100%);
            transition: all 300ms ease;
          }

          .project-info-icon {
            svg {
              color: var(--shadow-slate);
            }
          }
        }

        .project-info {
          display: grid;
          grid-template-columns: 70% 1fr;

          .project-info-header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 60px;

            h3 {
              font-family: var(--font-mono);
              font-size: 1rem;
              font-weight: 400;
              text-transform: uppercase;
              color: var(--pearl-frost);
              transition: all ease 0.3s;

              .project-wrapper:hover & {
                color: var(--shadow-slate);
              }
            }

            span {
              font-family: var(--font-mono);
              font-size: 0.875rem;
              text-transform: uppercase;
              font-weight: 400;
              color: var(--pearl-frost);
              transition: all ease 0.3s;

              .project-wrapper:hover & {
                color: var(--shadow-slate);
              }
            }
          }

          .project-info-icon {
            text-align: end;
            align-content: center;
          }
        }
      }
    }
  }
}

/* contact section */
#contact {
  display: flex;
  flex-direction: column;
  padding-top: 60px;


  .contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 40px;
    padding: 0 20px;
    margin-top: 40px;

    .contact-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;

      svg {
        color: var(--pearl-frost);
        height: 8rem;
      }

      a {
        color: var(--pearl-frost);
        font-family: var(--font-sans);
        font-size: 3rem;
        text-transform: uppercase;
        text-decoration: none;
      }
    }

    span {
      font-family: var(--font-sans);
      font-size: 8rem;
      color: var(--pearl-frost);
    }

  }

  .marquee {
    width: 100%;
    margin: 100px 0;
    font-family: var(--font-sans);
    font-size: 4rem;
    text-transform: uppercase;
    color: var(--pearl-frost);

    .marquee-inner {
      display: flex;
      flex-wrap: wrap;
      column-gap: 40px;

      li {
        list-style: none;
        display: flex;
      }

      svg {
        width: 24px;
        margin-bottom: 18px;
        /* margin: 0 20px 25px 20px; */
        fill: var(--pearl-frost);
      }
    }
  }

  .marquee[data-animated='true'] .marquee-inner {
    flex-wrap: nowrap;
    width: max-content;
    animation: horizontal-scroll 30s linear infinite;
  }
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  text-align: center;

  span {
    font-size: 0.625rem;
    color: var(--pearl-frost);
    font-family: var(--font-mono);
  }

}

/* animations */
@keyframes noise {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  10% {
    -webkit-transform: translate(-5%, -5%);
    transform: translate(-5%, -5%);
  }

  20% {
    -webkit-transform: translate(-10%, 5%);
    transform: translate(-10%, 5%);
  }

  30% {
    -webkit-transform: translate(5%, -10%);
    transform: translate(5%, -10%);
  }

  40% {
    -webkit-transform: translate(-5%, 15%);
    transform: translate(-5%, 15%);
  }

  50% {
    -webkit-transform: translate(-10%, 5%);
    transform: translate(-10%, 5%);
  }

  60% {
    -webkit-transform: translate(15%, 0);
    transform: translate(15%, 0);
  }

  70% {
    -webkit-transform: translate(0, 10%);
    transform: translate(0, 10%);
  }

  80% {
    -webkit-transform: translate(-15%, 0);
    transform: translate(-15%, 0);
  }

  90% {
    -webkit-transform: translate(10%, 5%);
    transform: translate(10%, 5%);
  }

  100% {
    -webkit-transform: translate(5%, 0);
    transform: translate(5%, 0);
  }
}

@keyframes horizontal-scroll {
  to {
    transform: translate(calc(-50% - 10px));
  }
}

@keyframes scroll {
  to {
    transform: translate(calc(+50% - 10px));
  }
}

/* media queries */

/* dispositivos de 640px de anchura o menos */
@media (width <=640px) {
  #welcome-section {
    .hero {

      h1 {
        span {
          &:first-child {
            text-align: center;
          }

          &:last-child {
            text-align: center;
          }
        }
      }

    }
  }

  .scroller {
    margin: 60px 0 0 0;
  }

  #projects {

    .projects-introduction {
      grid-template-columns: 1fr;
      margin: 20px 0;

      p {
        margin: auto;
        max-width: unset;
      }

      svg {
        margin: 20px auto;
        height: 130px;
      }
    }

    .projects-grid-header {
      & span:last-child {
        display: none;
      }
    }

    .projects-grid {
      grid-template-columns: 1fr;

      .vertical-line {
        display: none;
      }

      & .project-tile:nth-child(3) {
        hr {
          display: none;
        }
      }

      & .project-tile:nth-child(8) {
        hr {
          display: none;
        }
      }
    }
  }
}

#contact {
  .contact-info {
    column-gap: 20px;


    .contact-inner {
      span {
        font-size: 6rem;
      }

      svg {

        height: 6rem;

      }
    }
  }

}


/* dispositivos de 640px de anchura o menos */
@media (width <=1280px) {
  #welcome-section {
    .hero {

      h1 {
        span {
          &:first-child {
            text-align: center;
          }

          &:last-child {
            text-align: center;
          }
        }
      }

      img {
        max-width: 100%;
        max-height: 600px;
        width: 470px;
        /* height: 680px; */
        object-fit: cover;
        border-radius: 16px;
      }
    }
  }

  .scroller {
    margin: 60px 0 0 0;
  }

}