Le carte che si raddrizzano

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The cards that straighten up</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bitcount-prop-single@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the services of a made-up games studio, Pixmoor, on three overlapping cards. Each card comes up tilted and
       off to one side, the next one the other way, and straightens as it reaches the top of the screen; its title
       turns from thin round dots into solid square pixels as it does. Leaving, the card tips over the other way -->
  <main class="pagina">
    <header class="apertura">
      <p class="occhiello">Pixmoor, what we make</p>
      <h1 class="apertura__titolo">Three things, done properly.</h1>
      <p class="scendi">Scroll</p>
    </header>

    <section class="mazzo" aria-label="Services">
      <article class="carta carta--chiara" data-carta>
        <div class="carta__dentro" data-dentro>
          <h2 class="carta__titolo" data-titolo>Level design</h2>
          <ul class="carta__voci">
            <li>Worlds</li>
            <li>Puzzles</li>
            <li>Pacing</li>
          </ul>
          <p class="carta__testo">Maps that teach without a tutorial, and a last room people talk about.</p>
        </div>
      </article>

      <article class="carta carta--scura" data-carta>
        <div class="carta__dentro" data-dentro>
          <h2 class="carta__titolo" data-titolo>Characters</h2>
          <ul class="carta__voci">
            <li>Sprites</li>
            <li>Animation</li>
            <li>Voices</li>
          </ul>
          <p class="carta__testo">Heroes with a walk you would know from across the screen.</p>
        </div>
      </article>

      <article class="carta carta--accento" data-carta>
        <div class="carta__dentro" data-dentro>
          <h2 class="carta__titolo" data-titolo>Trailers</h2>
          <ul class="carta__voci">
            <li>Teasers</li>
            <li>Launch</li>
            <li>Store pages</li>
          </ul>
          <p class="carta__testo">Ninety seconds that sell the feeling of the first hour.</p>
        </div>
      </article>
    </section>

    <footer class="chiusura">
      <p class="chiusura__titolo">Got a game?</p>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>
  <script src="script.js"></script>
</body>
</html>