Il menu a scatola di fiammiferi

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The matchbox menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sofia-sans-condensed@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the menu of a candle maker as a box of matches. Closed, the button is the box: the printed sleeve, the brown
         striker along its sides. Pressed, the box is picked up and the tray slides out of the sleeve; inside lie the
         matches, one per section, each with the name printed along its stick. Chosen, a match is taken out, struck on
         the side of the box, burns for a moment and goes back into its place burnt: the burnt match is the page you
         are on. The flame, the sparks, the smoke and the light are drawn by the script on a canvas -->
    <nav class="mb" aria-label="Mothlight" data-matchbox>
      <span class="mb__frame" aria-hidden="true" data-frame></span>
      <div class="mb__box" data-box>

        <button class="sleeve" type="button" aria-expanded="false" aria-controls="mb-sections" data-sleeve data-autoclic>
          <!-- the top side of the box, with its striker -->
          <span class="sleeve__side" aria-hidden="true">
            <svg class="sleeve__grain" viewBox="0 0 196 13" preserveAspectRatio="none">
              <defs>
                <filter id="mb-sand" x="0" y="0" width="100%" height="100%">
                  <feTurbulence type="fractalNoise" baseFrequency="0.55 0.7" numOctaves="2" seed="7"/>
                  <feColorMatrix type="matrix" values="0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 -2.6 1.55"/>
                  <feComposite in2="SourceGraphic" operator="in"/>
                </filter>
                <filter id="mb-sand-light" x="0" y="0" width="100%" height="100%">
                  <feTurbulence type="fractalNoise" baseFrequency="0.8 0.9" numOctaves="1" seed="21"/>
                  <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 0.86  0 0 0 0 0.66  0 0 0 -3.2 1.62"/>
                  <feComposite in2="SourceGraphic" operator="in"/>
                </filter>
              </defs>
              <rect width="196" height="13" filter="url(#mb-sand)"/>
              <rect width="196" height="13" filter="url(#mb-sand-light)"/>
            </svg>
          </span>
          <!-- the label printed on the sleeve -->
          <span class="sleeve__face" aria-hidden="true">
            <svg class="label" viewBox="0 0 196 132">
              <defs>
                <filter id="mb-paper" x="0" y="0" width="100%" height="100%">
                  <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="3"/>
                  <feColorMatrix type="matrix" values="0 0 0 0 0.36  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.22 -0.05"/>
                  <feComposite in2="SourceGraphic" operator="in"/>
                </filter>
                <radialGradient id="mb-age" cx="0.42" cy="0.4" r="0.75">
                  <stop offset="0.55" stop-color="#5a3a14" stop-opacity="0"/>
                  <stop offset="1" stop-color="#5a3a14" stop-opacity="0.2"/>
                </radialGradient>
              </defs>
              <rect class="label__paper" width="196" height="132"/>
              <rect width="196" height="132" filter="url(#mb-paper)"/>
              <rect width="196" height="132" fill="url(#mb-age)"/>
              <rect class="label__rule" x="6.5" y="6.5" width="183" height="119" rx="3"/>
              <rect class="label__rule label__rule--fine" x="9.6" y="9.6" width="176.8" height="112.8" rx="1.6"/>
              <path class="label__rule label__rule--fine" d="M18 38.5H112"/>
              <!-- the moth, drawn to the light -->
              <g class="moth" transform="translate(150 67)">
                <g class="moth__half">
                  <path class="moth__wing" d="M-2.2-3.6C-9-15.5-24.6-25.4-34.4-20.6-38.8-16.4-35.6-7.6-27.6-2.4-19.6 2-9.6 2.4-2.2 1.2Z"/>
                  <path class="moth__wing" d="M-2.2 1.6C-9.6 3.4-21.6 8.6-22.6 16.4-22 22.4-13 23-7.6 17.2-4.2 13.4-2.4 7.8-2.2 3.4Z"/>
                  <path class="moth__vein" d="M-30.4-15.6C-23.6-12.6-15.4-8.4-5.4-2.2M-27.6-6C-20.2-5-13.4-2.8-5.6-.4M-17.4-19.6C-15-13.4-11.6-7.6-6.2-2.8"/>
                  <path class="moth__eye" d="M-22.4-9.6a4.2 4.2 0 1 1 6.4 3.4"/>
                  <path class="moth__vein" d="M-18.4 15.4C-14 11.6-9.6 7.6-4.8 4.2M-13.6 19.4C-10.6 14.4-7.6 9.4-4.6 5.4"/>
                  <path class="moth__feeler" d="M-1.2-13.4C-4.6-20-9.4-24-15.2-25.6M-6.6-21.4-8.6-19.4M-9.4-23.2-11 -21M-12.4-24.6-13.4-22.2"/>
                </g>
                <g class="moth__half" transform="scale(-1 1)">
                  <path class="moth__wing" d="M-2.2-3.6C-9-15.5-24.6-25.4-34.4-20.6-38.8-16.4-35.6-7.6-27.6-2.4-19.6 2-9.6 2.4-2.2 1.2Z"/>
                  <path class="moth__wing" d="M-2.2 1.6C-9.6 3.4-21.6 8.6-22.6 16.4-22 22.4-13 23-7.6 17.2-4.2 13.4-2.4 7.8-2.2 3.4Z"/>
                  <path class="moth__vein" d="M-30.4-15.6C-23.6-12.6-15.4-8.4-5.4-2.2M-27.6-6C-20.2-5-13.4-2.8-5.6-.4M-17.4-19.6C-15-13.4-11.6-7.6-6.2-2.8"/>
                  <path class="moth__eye" d="M-22.4-9.6a4.2 4.2 0 1 1 6.4 3.4"/>
                  <path class="moth__vein" d="M-18.4 15.4C-14 11.6-9.6 7.6-4.8 4.2M-13.6 19.4C-10.6 14.4-7.6 9.4-4.6 5.4"/>
                  <path class="moth__feeler" d="M-1.2-13.4C-4.6-20-9.4-24-15.2-25.6M-6.6-21.4-8.6-19.4M-9.4-23.2-11 -21M-12.4-24.6-13.4-22.2"/>
                </g>
                <path class="moth__body" d="M0-13.2C1.9-13.2 2.9-10.4 2.9-6.4 2.9 1 2.4 9.6 0 15.4-2.4 9.6-2.9 1-2.9-6.4-2.9-10.4-1.9-13.2 0-13.2Z"/>
                <path class="moth__rings" d="M-2.4-1.4H2.4M-2.3 2.6H2.3M-2 6.6H2M-1.5 10.4H1.5"/>
              </g>
            </svg>
            <span class="label__brand">Mothlight</span>
            <span class="label__word" data-word><span class="label__w">Menu</span></span>
            <span class="label__line">Candle Co. &middot; Hand-poured</span>
          </span>
          <!-- the bottom side, just showing -->
          <span class="sleeve__edge" aria-hidden="true"></span>
          <span class="sr">Menu</span>
        </button>

        <!-- the sleeve's shadow on the tray where it comes out -->
        <span class="mb__shade" aria-hidden="true" data-shade></span>

        <!-- the tray and the matches: each match is a section of the site -->
        <div class="tray" data-tray>
          <span class="tray__floor" aria-hidden="true"></span>
          <ul class="tray__list" id="mb-sections" aria-label="Sections" data-list>
            <li class="slot" data-slot>
              <a class="match" href="#candles" aria-current="page" data-match>
                <span class="match__art"><span class="match__stick"></span><span class="match__name">Candles</span><span class="match__head"><i class="match__sear"></i></span></span>
              </a>
            </li>
            <li class="slot" data-slot>
              <a class="match" href="#gift-sets" data-match>
                <span class="match__art"><span class="match__stick"></span><span class="match__name">Gift sets</span><span class="match__head"><i class="match__sear"></i></span></span>
              </a>
            </li>
            <li class="slot" data-slot>
              <a class="match" href="#workshops" data-match data-autoclic>
                <span class="match__art"><span class="match__stick"></span><span class="match__name">Workshops</span><span class="match__head"><i class="match__sear"></i></span></span>
              </a>
            </li>
            <li class="slot" data-slot>
              <a class="match" href="#our-story" data-match>
                <span class="match__art"><span class="match__stick"></span><span class="match__name">Our story</span><span class="match__head"><i class="match__sear"></i></span></span>
              </a>
            </li>
            <li class="slot" data-slot>
              <a class="match" href="#stockists" data-match data-autoclic>
                <span class="match__art"><span class="match__stick"></span><span class="match__name">Stockists</span><span class="match__head"><i class="match__sear"></i></span></span>
              </a>
            </li>
          </ul>
          <span class="tray__rim" aria-hidden="true"></span>
        </div>

        <!-- the hand: the match that is taken out flies here -->
        <div class="hand" aria-hidden="true" data-hand></div>
      </div>

      <!-- the light of the flame on the box (a light map, in multiply), then the flame, the sparks, the smoke and the
           glow (added in screen) -->
      <canvas class="fx fx--shade" aria-hidden="true" data-fx-shade></canvas>
      <canvas class="fx" aria-hidden="true" data-fx></canvas>
    </nav>
    <p class="sr" aria-live="polite" data-say></p>
  </main>

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