/* .prelude */

#initial {
  display: flex;
  justify-content: center;
  align-items: end;
  > svg {
    height: 40vh;
    margin-bottom: 10vh;
  }
}

#letter {
  height: fit-content;
  > section {
    height: 50vh;
  }
}

#letter-unseal, #letter-slide {
  height: 30vh;
}

#confetti {
  height: 150vh;
  view-timeline: --confetti;
  overflow: clip;
  > p {
    margin-bottom: 20vh;
  }
}

#friends {
  height: 200vh;
  view-timeline: --friends;
}

#sadly {
  margin-top: 30vh;
}

#pokies > p, #snowcouple > p, #snot > p {
  position: sticky;
  top: 4vh;
  margin-bottom: 50%;
}

#pokies video {
  margin-top: calc(-50% + 5vh);
  height: 80vh;
  max-width: 90vw;
  object-fit: contain;
  z-index: 1;
}

#snowcouple > img {
  margin-top: calc(-50% + 5vh);
}

/* #snowcouple */

#snot {
  margin-top: 50vh;
}

#snot > img {
  position: relative;
  margin-top: -40%;
  max-height: 80vh;
  width: 90vw;
  object-fit: contain;
}

#lucky {
  margin-top: 20vh;
  height: fit-content;
  margin-bottom: -100vh;
}

#timber {
  height: 150vh;
  view-timeline: --timber;
}

#burst {
  margin-top: -45vh;
  height: 150vh;
  view-timeline: --burst;
  overflow: clip;
  contain: paint;
}

#petty {
  .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5vw; }
  img { height: 30vh; }
}

/* #dummy */

#sorry {
  > img { display: block; width: 30vw; }
}

#zoom {
  margin-top: -25vh;
  height: 150vh;
}

#album {
  height: 300vh;
  view-timeline: --album;
  overflow: clip;
  background: linear-gradient(to bottom, transparent 70%, black 100%);
}

#end {
  display: grid;
  place-content: center;
  cursor: pointer;
  background: black;
  span {
    opacity: 0;
    animation: opaque forwards linear;
    animation-timeline: view();
    animation-range: 35% 45%;
  }
}