html {
  /* Create a snapping rule on the html element */
  scroll-snap-type: y mandatory;
  -webkit-scroll-snap-type: y mandatory;

  /* Create a timeline scope, so we can target any element on the page */
  timeline-scope: --section, --main, --site-header;
}

/* We'll want to match these colors for the best melty effect */
/* But play around with them (and add a color to section) to see happens */


main {
  view-timeline: --main;
}

.section {
  /* Creating a snapping rule on the section element */
  scroll-snap-align: start;
  scroll-snap-stop: always;

  /* Attach the timeline to the section element*/
  view-timeline: --section;

  /* Set each section to the full dynamic height of the viewport */
  height: 100dvh;
}

.content {
  /* Fix the content, so it doesn't scroll with the section */
  overflow: hidden;
  position: fixed;
  inset: 0;

  /* Animate the content based on the section scrolling */
  --contrast: 4;
  --blur: 0.5rem;

  animation:  zoom-scroll ease-in-out both;
  animation-timeline: --section;
}

/* WIP */
@keyframes zoom-scroll {
  0% {
    filter: blur(5rem);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
  }

  50% {
    filter: blur(0);
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  100% {
    filter: blur(3rem);
    transform: scale(1.5);
    opacity: 0;
    visibility: hidden;
  }
}

/* 
  The actual page styling is in a different stylesheet to not clutter
  this pen with irrelevant or confusing code

  https://codepen.io/giana/pen/rNRzgRj
*/