<section class="timeline">
  <article>
    <img src="https://assets.codepen.io/159218/the-legend-of-zelda.png" alt="" />
    <div>
      <h2>The legend of Zelda</h2>
      <time>1986</time> -
      <strong>NES</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/zelda-2-the-adventure-of-link.jpg" alt="" />
    <div>
      <h2>The Adventure of Link</h2>
      <time>1987</time> -
      <strong>NES</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/a-link-to-the-past.jpg" alt="" />
    <div>
      <h2>A Link to the Past</h2>
      <time>1991</time> -
      <strong>SNES</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/links-awakening.png" alt="" />
    <div>
      <h2>Link's Awakening</h2>
      <time>1993</time> -
      <strong>Game Boy</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/ocarina-of-time.jpg" alt="" />
    <div>
      <h2>Ocarina of Time</h2>
      <time>1998</time> -
      <strong>Nintendo 64</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/majoras-mask.jpg" alt="" />
    <div>
      <h2>Majora's Mask</h2>
      <time>2000</time> -
      <strong>Nintendo 64</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/oracle-of-seasons.jpg" alt="" />
    <div>
      <h2>Oracle of Seasons</h2>
      <time>2001</time> -
      <strong>Game Boy Color</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/oracle-of-ages.jpg" alt="" />
    <div>
      <h2>Oracle of Ages</h2>
      <time>2001</time> -
      <strong>Game Boy Color</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/the-wind-waker.jpg" alt="" />
    <div>
      <h2>The Wind Waker</h2>
      <time>2002</time> -
      <strong>GameCube</strong>
    </div>
  </article>

  <article>
    <img src="https://assets.codepen.io/159218/the-minish-cap.jpg" alt="" />
    <div>
      <h2>The Minish Cap</h2>
      <time>2004</time> -
      <strong>GBA</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/four-swords-adventures.jpg" alt="" />
    <div>
      <h2>Four Swords Adventures</h2>
      <time>2005</time> -
      <strong>GameCube</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/twilight-princess.jpg" alt="" />
    <div>
      <h2>Twilight Princess</h2>
      <time>2006</time> -
      <strong>WII</strong>
    </div>
  </article>

  <article>
    <img src="https://assets.codepen.io/159218/phantom-hourglass.jpg" alt="" />
    <div>
      <h2>Phantom Hourglass</h2>
      <time>2007</time> -
      <strong>DS</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/spirit-tracks.jpg" alt="" />
    <div>
      <h2>Spirit Tracks</h2>
      <time>2009</time> -
      <strong>DS</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/skyward-sword.jpg" alt="" />
    <div>
      <h2>Skyward Sword</h2>
      <time>2011</time> -
      <strong>WII</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/a-link-between-worlds.jpg" alt="" />
    <div>
      <h2>Link Between Worlds</h2>
      <time>2013</time> -
      <strong>3DS</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/tri-force-heroes.jpg" alt="" />
    <div>
      <h2>Tri-force Heroes</h2>
      <time>2015</time> -
      <strong>3DS</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/breath-of-the-wild.jpg" alt="" />
    <div>
      <h2>Breath of the Wild</h2>
      <time>2017</time> -
      <strong>WII U</strong>
    </div>
  </article>
  <article>
    <img src="https://assets.codepen.io/159218/tears-of-the-kingdom.jpg" alt="" />
    <div>
      <h2>Tears of the Kingdom</h2>
      <time>2023</time> -
      <strong>Switch</strong>
    </div>
  </article>
</section>

@layer base, timeline, keyframes;

@layer timeline {
  .timeline {
    position: relative;
    display: flex;
    gap: var(--gap);
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    width: 100%;
    min-height: 100vh;
    padding-inline: calc((100vw - var(--item-size)) / 2);

    & article {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 0 0 var(--item-size);
      padding: 2vh 0;
      width: var(--item-size);
      scroll-snap-align: center;
      scroll-snap-stop: always;
      animation: reveal linear both;
      animation-timeline: view(inline);

      & div {
        width: 100%;
        background: oklab(0.2 -0.07 0.05);
        margin-top: -1px;
        padding: 16px;
        border-radius: 0 0 20px 20px;
        animation: info linear both;
        animation-timeline: view(inline);
        z-index: -1;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
      }
    }
  }

  img {
    display: block;
    line-height: 1;
    width: 100%;
    /*   aspect-ratio: 1; */
    object-fit: cover;
    animation: imageEnter linear both;
    animation-timeline: view(inline);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  }
}

@layer keyframes {
  @keyframes reveal {
    0%,
    100% {
      translate: 0 -25%;
      scale: 0.7;
      opacity: 0.2;
    }
    50% {
      scale: 1;
      translate: 0;
      opacity: 1;
    }
  }

  @keyframes info {
    0%,
    40%,
    60%,
    100% {
      opacity: 0;
      transform: translateY(-100%);
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  @keyframes imageEnter {
    0% {
      scale: 0.2;
      rotate: 70deg;
      border-radius: 0;
    }

    40%,
    60% {
      scale: 1;
      rotate: 0deg;
      border-radius: 20px 20px 0 0;
    }
    100% {
      scale: 0.2;
      rotate: -70deg;
      border-radius: 0;
    }
  }
}

@layer base {
  @import url("https://fonts.googleapis.com/css2?family=Lugrasimo&family=Roboto:wght@300;500&display=swap");

  :root {
    --item-size: 80vw;
    --gap: 2vw;
    @media (width >= 500px) {
      --item-size: 50vw;
      --gap: 5vw;
    }
    @media (width >= 680px) {
      --item-size: 28vw;
    }
    @media (width >= 1200px) {
      --item-size: 24vw;
    }
    @media (width >= 1400px) {
      --item-size: 18vw;
    }
    @media (width >= 1800px) {
      --item-size: 14vw;
    }
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", sans-serif;
    color: #fafafa;
    font-weight: 300;
    background-image: url("https://assets.codepen.io/159218/desktop-1024x576.jpg"),
      radial-gradient(
        500px circle at 50% 50% in oklab,
        oklch(100% 0.5 109) 0%,
        31%,
        oklch(72% 0.5 100) 100%
      );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
  }

  h2 {
    font-family: "Lugrasimo", cursive;
    font-weight: 400;
    margin: 0 0 16px 0;
    padding: 0;
    background-image: linear-gradient(
      to bottom right in oklab,
      oklch(100% 0.5 109) 0%,
      oklch(72% 0.5 100) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
  }

  strong {
    font-weight: 500;
  }

  .timeline::-webkit-scrollbar {
    width: 5px;
    height: 8px;
  }
  .timeline::-webkit-scrollbar-track {
    background: oklch(50% 0.5 100);
  }
  .timeline::-webkit-scrollbar-thumb {
    background: oklch(80% 0.5 109);
  }
  .timeline::-webkit-scrollbar-thumb:hover {
    background: oklch(70% 0.5 109);
  }
  /* wallpaper by wallpapersafari */
}

@media (prefers-reduced-motion) {
  * {
    animation: none;
  }
}