/* variables */
:root {
  /* colors */
  --merino: #f5efe1;
  --venetian-red: #dd1c1a;
  --honolulu-blue: #007cbe;
  --black: #000000;

  /* fonts variables */
  --font-display: 'Satoshi', sans-serif;
}

/* fonts import */
@font-face {
  font-family: 'Satoshi';
  src: url('https://pub-dc03d1e4e9594fc9b5a85d89c8cbf56f.r2.dev/fonts%2FSatoshi-Variable.woff2') format('woff2 supports variations'),
    url('https://pub-dc03d1e4e9594fc9b5a85d89c8cbf56f.r2.dev/fonts%2FSatoshi-Variable.woff2') format('woff2-variations');
  font-weight: 100 1000;
}

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

h1,
h2,
h3,
h4,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* styles */

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100dvh;
  background-color: var(--merino);
  max-width: 1024px;
  margin: auto;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  .manga-title {
    font-family: var(--font-display);
    font-size: clamp(3.75rem, 2.7273rem + 5.1136vw, 6rem);
    font-weight: 900;
    color: var(--black);
    text-transform: uppercase;
    align-self: flex-end;
  }
}

.hero-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  width: 100%;

  .img-container {
    justify-self: center;
    position: relative;
    background-color: var(--venetian-red);
    width: 450px;
    aspect-ratio: 1/1;
    border-radius: 50%;

    .vagabond {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 350px;
      margin: auto;
      text-align: center;
    }
  }

  .form {
    display: flex;
    justify-content: flex-end;

    h1 {
      text-align: center;
      font-family: var(--font-display);
      font-size: 36px;
      color: var(--black);
    }

    form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: 450px;
      row-gap: 20px;
      padding: 2.5rem;
      border: 10px solid transparent;
      border-image: url('https://pub-dc03d1e4e9594fc9b5a85d89c8cbf56f.r2.dev/images/border-red.png') 30;

      #number {
        padding: 8px;
        font-family: var(--font-display);
        font-size: 25px;
        font-weight: 500;
        background-color: var(--merino);
        border: solid var(--black) 3px;
        width: 100%;

        &:focus {
          outline: 0;
        }
      }

      .btn-container {
        position: relative;
        width: 100%;
        height: 3.125rem;
        overflow: hidden;
        border: 3px solid #000;
        transition: 0.3s;
        font-family: var(--font-display);

        .mask {
          align-content: center;
          position: absolute;
          color: var(--black);
          text-align: center;
          width: 101%;
          font-family: var(--font-display);
          height: 100%;
          overflow: hidden;
        }

        button {
          width: 101%;
          height: 100%;
          font-family: var(--font-display);
          font-size: 16px;
          background: var(--black);
          mask: url(https://pub-dc03d1e4e9594fc9b5a85d89c8cbf56f.r2.dev/images/btn-mask.png);
          mask-size: 3000% 100%;
          border: none;
          color: var(--merino);
          cursor: pointer;
          animation: ani2 0.4s steps(29) forwards;

          &:hover {
            animation: ani 0.4s steps(29) forwards;
          }
        }
      }

      .output-container {
        align-content: center;
        text-align: center;
        min-height: 80px;
        background-color: #f5efe1;

        #output {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 20px;
        }
      }
    }
  }
}

.release-date {
  .palette-colors {
    display: flex;
    column-gap: 5px;

    div {
      margin-top: 10px;
      height: 10px;
      width: 60px;

      &:nth-child(1) {
        background-color: var(--black);
      }

      &:nth-child(2) {
        background-color: var(--honolulu-blue);
      }

      &:nth-child(3) {
        background-color: var(--venetian-red);
      }
    }
  }

  p {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
  }
}

footer {
  /* padding: 0 40px; */

  h3 {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--venetian-red);
    font-weight: 400;

    span {
      font-weight: 700;
    }
  }

  .credits {
    display: grid;
    column-gap: 20px;
    grid-template-columns: repeat(2, 1fr);

    span {
      color: var(--honolulu-blue);
      font-family: var(--font-display);
      font-size: 24px;

      &:nth-child(2) {
        color: inherit;
      }
    }

    .credits-left {
      font-weight: 700;
      display: flex;
      column-gap: 20px;

      span:nth-child(2) {
        font-size: 16px;
        font-weight: 400;
      }
    }

    .credits-right {
      display: flex;
      column-gap: 20px;

      span {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 700;
      }

      ul {
        list-style: none;

        li {
          font-family: var(--font-display);
          font-weight: 400;
        }
      }
    }
  }
}

/* animations */

@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* media queries */

/* dispositivos de 640rem de anchura o menos */
@media (width <=640px) {
  body {
    padding: 0 20px;
    height: unset;
  }

  .content {

    .manga-title {
      align-self: center;
    }
  }

  .hero-container {
    grid-template-columns: 1fr;

    .img-container {
      height: 200px;
      width: 200px;
      order: 2;
      margin: 200px 0;
    }

    & .form {
      display: flex;
      justify-content: center;
    }
  }

  footer {
    h3 {
      margin-bottom: 20px;
    }

    .credits {
      grid-template-columns: 1fr;
      row-gap: 20px;
    }
  }
}