.parallax-wrapper
  .hero.parallax-content
    img(
      src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/sterling-davis-4iXagiKXn3Y-unsplash-min.jpg",
      alt="Photo of city during a sunset by Sterling Davis"
    )
    .hero__title
      h1 CSS Parallax Hero
      p Photo by Sterling Davis on <a href="https://unsplash.com/photos/4iXagiKXn3Y" target="_blank">Unsplash</a>
  .main-content
    .scroll-icon-container
      svg.icon--down-arrow(viewBox="0 0 24 24")
        path(
          d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"
        )
    h2 No one's called him Baby Buster since high school.

    p So you take your mom to work every day? Bummer. Moms are such a pain in the ass, huh? It's, like, die already! Pound is tic-tac-toe, right? Heyyyy Uncle Father Oscar. I run a pretty tight ship around here. With a pool table. It's a gaming ship. They're not gonna strip, right? I told them not to, but I can't guarantee their instincts won't kick in. One for the ladies.

    p Did you enjoy your lunch, mom? You drank it fast enough. The worst that could happen is that I could spill coffee all over this $3,000 suit. COME ON. Get rid of the Seaward. Lucille: I'll leave when I'm good and ready.

    p Hey, it was one night of wild passion! And yet you didn't notice her body? I like to look in the mirror. GENE!! [screams] Come on, this is a Bluth family celebration. It's no place for children. Yeah, that's a cultural problem is what it is. You know, your average American male is in a perpetual state of adolescence, you know, arrested development. (Hey. That's the name of the show!) Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? One of the guys told me to take my head out of my BOTTOM and get back to work…my BOTTOM! That's how Tony Wonder lost a nut.

    p Oh, like when they say "poofter" to mean "tourist", yes. I need a fake passport, preferably to France… I like the way they think. Tobias Fünke costume. I know what an erection feels like, Michael. You were just a turd out there, you know? You couldn't kick, and you couldn't run, you know? You were just a turd. I'm not a prostitute. Michael: Then I shall let you live! Second-of-ly, I know you're the big marriage expert. Oh I'm sorry, I forgot, your wife is dead.

    p Each year, Oscar attempts the four hundred mile walk from Newport Beach to Berkeley, California. In the twelve years that he's attempted this, he's never made it farther than UC Irvine. ♪♪ Big yellow joint, big yellow joint, I'll meet you down at the big yellow joint. ♪♪ Someone order 140 pounds of upper body strength? Chickens don't clap!

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,600&display=swap");

:root {
  --hero-gap: 60px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Lora", serif;
}

h1 {
  font-size: calc(0.5rem + 8vmin);
  font-weight: 600;
  font-style: italic;
}

h2 {
  font-size: calc(0.8rem + 4vmin);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}

p {
  font-size: calc(0.8rem + 1.25vmin);
  line-height: 1.65;
}

.caption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  color: white;
  z-index: 2;
  font-size: 0.6rem;
}

.parallax-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 10px;
}

.parallax-content {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--hero-gap));
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    object-fit: cover;
    z-index: 1;
    transform: translateZ(1px);
  }

  .hero__title {
    color: white;
    z-index: 2;
    text-align: center;
    transform: translateZ(-2px) scale(1.2);

    p {
      margin-top: 0.5rem;
      font-size: calc(0.6rem + 0.75vmin);
    }

    a {
      color: white;
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 100%;
    transform: translateZ(8px);
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.013) 8%,
      hsla(0, 0%, 0%, 0.049) 14.8%,
      hsla(0, 0%, 0%, 0.104) 20.8%,
      hsla(0, 0%, 0%, 0.175) 26%,
      hsla(0, 0%, 0%, 0.259) 30.8%,
      hsla(0, 0%, 0%, 0.352) 35.3%,
      hsla(0, 0%, 0%, 0.45) 39.8%,
      hsla(0, 0%, 0%, 0.55) 44.5%,
      hsla(0, 0%, 0%, 0.648) 49.5%,
      hsla(0, 0%, 0%, 0.741) 55.2%,
      hsla(0, 0%, 0%, 0.825) 61.7%,
      hsla(0, 0%, 0%, 0.896) 69.2%,
      hsla(0, 0%, 0%, 0.951) 77.9%,
      hsla(0, 0%, 0%, 0.987) 88.1%,
      hsl(0, 0%, 0%) 100%
    );
    z-index: 3;
  }
}

.main-content {
  position: relative;
  margin: 0 auto;
  padding: var(--hero-gap) 2rem;
  max-width: 725px;
  background-color: white;

  > * + * {
    margin-top: 2rem;
  }
}

.scroll-icon-container {
  --size: 30px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  top: calc(var(--size) * -1);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  border-radius: 0.15rem;
  background-color: inherit;
  box-shadow: 0 6px 12px -3px rgba(black, 0.1);
  z-index: 4;

  .icon--down-arrow {
    width: var(--size);
    height: var(--size);
  }
}