<header>
  <h1>Scroll-Driven Animations: Image Reveal</h1>
  <p><em>Scroll ↕</em></p>
</header>
<main>
  <ul class="photos">
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-03.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-04.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-05.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-03.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-04.svg" alt="" title="" width="222" height="184" draggable="false"></li>
    <li class="photo"><img src="https://assets.codepen.io/89905/matroshka-05.svg" alt="" title="" width="222" height="184" draggable="false"></li>
  </ul>
</main>
<footer>
  <p>This demo is part of <a href="https://goo.gle/css-wrapped-2023" target="_top">#CSSWrapped2023</a></p>
</footer>

@layer reset, baselayout, components;

@keyframes animate-in {
  from {
    opacity: 0.2;
    scale: 0.8;
    translate: 0 10%;
  }
}

.photo {
  animation: animate-in ease-in both;
  animation-timeline: view();
  animation-range: entry 25% cover calc(50% - 10vh);
}

@layer components {
  ul.photos {
    display: flex;
    flex-direction: column;
    padding: 1em 0;
    gap: 1em;
  }

  .photo {
    transform-origin: 50% 100%;
    border-radius: 1em;
    overflow: hidden;

    background: white;
    display: flex;
    align-items: end;
    border: 0.25em solid #6300ff;
    width: min-content;
    max-width: 100%;
    margin: 0 auto;
  }

  .photo img {
    display: block;
    width: auto;
    height: 50vmin;
    max-height: 20em;
  }

  li:nth-child(5n),
  li:nth-child(7n + 3),
  li:nth-child(3n) {
    grid-row: span 2;
    grid-column: span 2;
  }
}

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

  * {
    margin: 0;
    padding: 0;
  }

  ul[class] {
    list-style: none;
  }
}

@layer baselayout {
  html {
    background: transparent
      linear-gradient(to bottom right, #ff00fa 0%, #0ff 100%);
    background-attachment: fixed;
    font-size: clamp(16px, 2vmax + 1em, 42px);
  }

  html {
    --scrollbar-thumb-color: #e915c7;
    --scrollbar-track-color: rgb(0 0 0 / 0.15);
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  }

  @supports not (scrollbar-color: red blue) {
    html::-webkit-scrollbar {
      width: 1em;
    }
    html::-webkit-scrollbar-track {
      background: var(--scrollbar-track-color);
    }
    html::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb-color);
    }
  }

  body {
    font-family: "Syne", sans-serif;
    padding: 0 1em;
  }

  h1,
  h2 {
    font-family: "Anybody", sans-serif;

    text-decoration: underline;
    text-decoration-color: hsl(156deg 100% 50% / 50%);
    text-decoration-thickness: 0.2rem;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;

    text-wrap: pretty;
    word-break: break-word;

    margin-bottom: 0.5em;
  }

  header,
  footer {
    height: 100dvh;
    display: grid;
    place-content: center;
    text-align: center;
  }

  main {
    max-width: 800px;
    margin: 0 auto;
  }

  label {
    cursor: pointer;
    max-width: max-content;
    user-select: none;
  }
}