<main class="main">

  <ul class="main__slider main__slider--countries">

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://images.unsplash.com/photo-1536420124982-bd9d18fc47ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1001&q=80')"></div>
      <h1 class="main__title">Finland</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://images.unsplash.com/photo-1508500709478-37a0e8d6603c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80')"></div>
      <h1 class="main__title">Sweden</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://images.unsplash.com/photo-1544085311-11a028465b03?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80')"></div>
      <h1 class="main__title">Norway</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://images.unsplash.com/photo-1531168556467-80aace0d0144?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')"></div>
      <h1 class="main__title">Iceland</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://images.unsplash.com/photo-1535923766910-e7143cd1a47c?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80')"></div>
      <h1 class="main__title">Denmark</h1>
    </li>
  </ul>

  <ul class="main__slider main__slider--sports" style="visibility:hidden;">

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/golf.svg')"></div>
      <h1 class="main__title">Golf</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/basketball.svg')"></div>
      <h1 class="main__title">Basketball</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/running.svg')"></div>
      <h1 class="main__title">Running</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/football.svg')"></div>
      <h1 class="main__title">Football</h1>
    </li>

    <li class="main__item">
      <div class="main__image" style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/tennis.svg')"></div>
      <h1 class="main__title">Tennis</h1>
    </li>
  </ul>

  <p class="main__credit">Made by <a href="https://supremo.co.uk" target="_blank">Supremo</a></p>

  <a class="main__info" href="#">
      <svg class="main__info-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="12" y1="16" x2="12" y2="12"></line>
        <line x1="12" y1="8" x2="12" y2="8"></line>
      </svg>
    </a>

  <p class="main__info-window">A quick experiment with variable fonts. Variables fonts look to have an interesting future, providing the ability to use all variations of a typeface in a single compressed file and being able to animate between these variations.</p>

  <div class="main__options">
    <a class="main__option countries active" href="#">Countries</a>
    <a class="main__option sports" href="#">Sports</a>
  </div>

</main>

/*
  Simple experiment using variable fonts.
  by Supremo
*/

@font-face {
  font-family: "LeagueSpartanVariable";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/LeagueSpartanVariable.ttf");
}

@font-face {
  font-family: "SourceSerifVariable";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2101521/SourceSerifVariable-Roman.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}

:root {
  --black: #1f1f1f;
}

.main {
  display: flex;
  align-items: center;
  height: 100vh;
  font-family: "LeagueSpartanVariable";
  background: var(--black);
  overflow: hidden;
  transition: background .3s;
}

.main:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("http://ashleydutton.co.uk/assets/images/noise.png");
  opacity: 0.5;
}

.main__slider {
  position: fixed !important;
  width: 100vw;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.main__slider.slick-initialized .slick-slide {
  display: flex;
  justify-content: center;
}

.main__item.slick-slide {
  position: relative;
  opacity: 0.4;
  transition: opacity 0.5s;
  outline: none;
}

.main__item.slick-current {
  opacity: 1;
}

.main__item.slick-current .main__title {
  animation: grow 0.5s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

.main__item.slick-current .main__image {
  transform: scale(1);
}

.main__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  font-variation-settings: "wght" 200;
  animation: shrink 0.5s;
  animation-fill-mode: forwards;
  cursor: grab;
}

.main__image {
  width: 380px;
  height: 500px;
  transform: scale(0.5);
  transition: transform 0.5s;
  transition-delay: 0.1s;
  background-size: cover;
  background-position: center;
  cursor: grab;
}

.main__image:active, .main__title:active {
  cursor: grabbing;
}

.main__credit {
  position: fixed;
  bottom: 30px;
  right: 50px;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variation-settings: "wght" 200;
}

.main__credit a {
  text-decoration: none;
  font-variation-settings: "wght" 650;
}

.main__info {
  position: fixed;
  top: 50px;
  right: 50px;
}

.main__info:hover + .main__info-window {
  opacity: 1;
  max-height: 200px;
}

.main__info-window {
  position: absolute;
  top: 80px;
  right: 50px;
  width: 300px;
  max-height: 0;
  padding: 20px;
  background: #fff;
  color: var(--black);
  font-size: 14px;
  line-height: 1.4em;
  opacity: 0;
  transition: all 0.3s;
}

.main__options {
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 50px;
}

.main__option {
  position: relative;
  font-size: 14px;
  margin-right: 30px;
  text-decoration: none;
  font-variation-settings: "wght" 300;
  transition: all .3s;
}

.main__option.active {
  font-variation-settings: "wght" 700;
}

.main__option.active:after {
  content: '';
  position: absolute;
  background: #fff;
  height: 1px;
  width: 100%;;
  bottom: -5px;
  left: 0;
}

.main--sports {
  background: #fff;
}

.main--sports:before {
  opacity: 1;
}

.main--sports * {
  color: var(--black);
}

.main--sports .main__item.slick-current .main__title {
  font-family: "SourceSerifVariable";
  animation: none;
}

.main--sports .main__title {
  font-family: "SourceSerifVariable";
}

.main--sports .main__item.slick-current:hover .main__title {
  animation: grow 0.3s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

.main--sports .main__item.slick-current .main__title {
  font-size: 50px;
  animation: shrink 0.5s;
  animation-fill-mode: forwards;
}

.main--sports .main__image {
  width: 500px;
  height: 350px;
  opacity: .7;
  background-size: contain;
  background-repeat: no-repeat;
}

.main--sports .main__option.active:after {
  background: var(--black);
}

.main--sports .main__info-icon {
  stroke: var(--black);
}

.main--sports .main__info-window {
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}


/* Animations */

@keyframes grow {
  0% {
    font-variation-settings: "wght" 200;
    font-size: 50px;
  }
  100% {
    font-variation-settings: "wght" 650;
    font-size: 125px;
  }
}

@keyframes shrink {
  0% {
    font-variation-settings: "wght" 650;
    font-size: 125px;
  }
  100% {
    font-variation-settings: "wght" 200;
    font-size: 50px;
  }
}

/*---------------------------------------*/

@media only screen and (max-width: 650px){
  .main__image {
    height: 350px;
  }

  .main__info {
    top: 20px;
    right: 20px;
  }

  .main__item.slick-slide {
    margin: 0 20px;
  }

  .main__credit {
    bottom: 25px;
    right: 25px;
  }

  .main__options {
    bottom: 25px;
    left: 25px;
  }

  @keyframes grow {
    0% {
      font-variation-settings: "wght" 200;
      font-size: 65px;
    }
    100% {
      font-variation-settings: "wght" 650;
      font-size: 65px;
    }
  }

  @keyframes shrink {
    0% {
      font-variation-settings: "wght" 650;
      font-size: 65px;
    }
    100% {
      font-variation-settings: "wght" 200;
      font-size: 65px;
    }
  }
}

const countries = document.querySelector(".countries"),
  sports = document.querySelector(".sports"),
  countriesSlider = document.querySelector(".main__slider--countries"),
  sportsSlider = document.querySelector(".main__slider--sports"),
  main = document.querySelector(".main");

countries.addEventListener("click", function() {
  countriesSlider.style.visibility = "visible";
  sportsSlider.style.visibility = "hidden";
  main.classList.remove("main--sports");
  this.classList.add("active");
  sports.classList.remove("active");
});

sports.addEventListener("click", function() {
  countriesSlider.style.visibility = "hidden";
  sportsSlider.style.visibility = "visible";
  main.classList.add("main--sports");
  this.classList.add("active");
  countries.classList.remove("active");
});

$(".main__slider").slick({
  centerMode: true,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  initialSlide: 2,
  responsive: [
    {
      breakpoint: 1000,
      settings: {
        slidesToShow: 1,
        fade: true
      }
    }
  ]
});