div.hover-box.variable-font--mousemove
  h1 Diiiiik!
div.hover-box.variable-font--scroll
  h2 HEEEY
  p Lorem ipsum dolor amet gochujang raw denim kogi cloud bread #[a(href="#") hey] poke lo-fi typewriter cardigan banjo. Activated charcoal letterpress hashtag yuccie. Tote bag blog YOLO vexillologist, #[a(href="#") hey] yuccie poke chartreuse succulents hell of hot chicken taxidermy shaman biodiesel. Mustache edison bulb cray ugh everyday carry ethical banjo helvetica forage you probably haven't heard of them fanny pack tacos.

  p Flexitarian PBR&B taxidermy prism mumblecore microdosing lyft YOLO pug williamsburg fashion axe small batch palo santo. Sustainable #[a(href="#") hey] wayfarers poke enamel pin. Iceland skateboard whatever, pop-up forage ramps vexillologist scenester af trust fund la croix everyday carry raclette fingerstache fashion axe. Offal flannel selvage yuccie kale chips blue bottle tattooed hella typewriter #[a(href="#") hey] skateboard hoodie shabby chic poke. Adaptogen pop-up gluten-free neutra ennui cronut gentrify whatever post-ironic.

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900');
@import url('https://rsms.me/inter/inter.css');

* {
  margin: 0;
  box-sizing: border-box;
}
:root {
  --font-weight: 200;
  --opacity: 0;
}

h1 {
  font-family: 'Inter var', sans-serif;
  font-size: calc(100vw / 24 * 3);
  font-variation-settings: 'wght' var(--font-weight), 'slnt' var(--font-slant);
  transition: 0.2s;
  @media (max-width: 600px) {
    font-size: 3rem;
  }
}

h2 {
  font-family: 'Crimson Pro', sans-serif;
  font-size: calc(100vw / 24 * 4);
  font-variation-settings: 'wght' var(--font-weight);
  transition: 0.2s;
  @media (max-width: 600px) {
    font-size: 3rem;
  }
  & + p {
    margin-top: 2rem;
  }
}
p {
  font-family: 'Crimson Pro', sans-serif;
  font-size: 1.2rem;
  a {
    transition: 1s;
    color: inherit;
    font-weight: 500;
    &:hover {
      font-weight: 900;
    }    
  }

  & + p {
    margin-top: 2rem;
  }
}

.hover-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  width: 100vw;
  min-height: 70vh;
  background: black;
  color: white;

  &:first-of-type {
    &:before, &:after{
      font-size: 1rem;
      position: absolute;
      padding: 2rem;
      font-family: Inter, sans-serif;
    }
    &:before {
      content: 'thinner';
      top: 0;
      font-weight: 200;
      padding: 2rem;
    }
    &:after {
      content: 'thicker';
      bottom: 0;
      font-weight: 900;
    }
    h1 {
      &:before, &:after{
        font-size: 1rem;
        position: absolute;
        padding: 2rem;
        font-weight: 200;
      }
      &:before {
        content: 'oblique';
        left: 0;
        font-variation-settings: 'slnt' -10;
      }
      &:after {
        content: 'not-oblique';
        right: 0;
        font-variation-settings: 'slnt' 0;
      }
    }
    
  }
  &:nth-of-type(2) {
    background: transparent;
    color: black;
    align-items: flex-start;
    &:before{
      content: '';
      transition: 0.2s;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
      background: hotpink;
      opacity: var(--opacity);
    }
  }
}

let mousemove = document.querySelector('.variable-font--mousemove');

let scroll = document.querySelector('.variable-font--scroll');

let video = document.querySelector('.variable-font--scale-video');

mousemove.addEventListener('mousemove', function(e) {
  let windowWidth =  window.innerHeight;
  let clientY = e.clientY * 2;
  let fontWeight = clientY;
  let clientX = (window.innerWidth / 10 - e.clientX / 10) / 5;
  let fontSlant = clientX;
  if (fontWeight > 900) fontWeight = 900;
  if (fontWeight < 200) fontWeight = 200;
  
  mousemove.style.setProperty('--font-weight', `${ fontWeight }`);
  mousemove.style.setProperty('--font-slant', `-${ clientX }`);
});

window.addEventListener('scroll', function(e) {
  let windowY = window.scrollY  * 2;
  if (windowY > 1000) windowY = 900;
  if (windowY <= 100) windowY = 200;
  
  scroll.style.setProperty('--font-weight', `${ windowY }`);
  scroll.style.setProperty('--opacity', `${ windowY / 1000 }`);
});