body, html { margin: 0; padding: 0; font-size: 10px;}
* { box-sizing: border-box; }

/* Lazy breakpoint font calculations */
@media (max-width: 1500px) { html { font-size: 9px; } }
@media (max-width: 1200px) { html { font-size: 8px; } }
@media (max-width: 900px) { html { font-size: 6px; } }
@media (max-width: 700px) { html { font-size: 5px; } }
@media (max-width: 600px) { html { font-size: 4px; } }
@media (max-width: 500px) { html { font-size: 3px; } }

.hero {
  height: 100vh;
  display: grid;
  place-items: center;
  
  h1 {
    margin: 0;
    font-size: 15rem;
    font-family: system-ui, sans-serif;
    font-weight: 600;
  }
}

.scroller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  h2 {
    margin: 0;
    font-size: 10rem;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    /* This is just to calculate the colours based on the index, maybe a bit too much, but it is dynamic! */
    color: oklch(calc(0.3 + (0.3 * (var(--item) - 1) / (var(--items) - 1))) 0.3 260);
  }
  h2.sticky {
    position: sticky;
    top: calc(50% - .5lh);
    text-align: right;
    padding-right: 0.25lh;
    color: black;
  }
  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .scroll-text h2 {
    opacity: .1;
  }
  .scroll-text h2 {
    animation: bright;
    animation-range: calc(50% - .75lh) calc(50% + .75lh);
    animation-timeline: view();
    animation-fill-mode: both;
    scroll-snap-align: center;
  }
  .scroll-text li:first-child h2 {
    animation-name: fromBright;
  }
  .scroll-text li:last-child h2 {
    animation-name: toBright;
  }
}

@keyframes fromBright { 
  0% { opacity: 1; } 
  50% { opacity: 1; }
}
@keyframes bright { 
  50% { opacity: 1; }
}
@keyframes toBright { 
  50% {opacity: 1; } 
  100% { opacity: 1; }
}