// pics by fanart.tv

main
  .logo
    svg(viewBox="0 0 1024 276.742")
      path(d="M140.803 258.904c-15.404 2.705-31.079 3.516-47.294 5.676l-49.458-144.856v151.073c-15.404 1.621-29.457 3.783-44.051 5.945v-276.742h41.08l56.212 157.021v-157.021h43.511v258.904zm85.131-157.558c16.757 0 42.431-.811 57.835-.811v43.24c-19.189 0-41.619 0-57.835.811v64.322c25.405-1.621 50.809-3.785 76.482-4.596v41.617l-119.724 9.461v-255.39h119.724v43.241h-76.482v58.105zm237.284-58.104h-44.862v198.908c-14.594 0-29.188 0-43.239.539v-199.447h-44.862v-43.242h132.965l-.002 43.242zm70.266 55.132h59.187v43.24h-59.187v98.104h-42.433v-239.718h120.808v43.241h-78.375v55.133zm148.641 103.507c24.594.539 49.456 2.434 73.51 3.783v42.701c-38.646-2.434-77.293-4.863-116.75-5.676v-242.689h43.24v201.881zm109.994 49.457c13.783.812 28.377 1.623 42.43 3.242v-254.58h-42.43v251.338zm231.881-251.338l-54.863 131.615 54.863 145.127c-16.217-2.162-32.432-5.135-48.648-7.838l-31.078-79.994-31.617 73.51c-15.678-2.705-30.812-3.516-46.484-5.678l55.672-126.75-50.269-129.992h46.482l28.377 72.699 30.27-72.699h47.295z")

  section
    h2 Top Movies 2019
    ul
      li.item01
        .img(style="background-image: url(https://fanart.tv/fanart/movies/466272/moviethumb/once-upon-a-time-in-hollywood-5dfeb7beb0d22.jpg)")
          img(src="https://fanart.tv/fanart/movies/466272/moviebackground/untitled-manson-murders-project-5c58b437a6e65.jpg")
        .card
          h3 Once upon a time in... Hollywood
          .info 
            .match 99% Match
            .age TV-14
            .dur 2h 40min 
          .tags 
            span Comedy
            span Drama
            span Action

      li.item02
        .img(style="background-image: url(https://fanart.tv/fanart/movies/475557/moviethumb/joker-5db693c454a3e.jpg)")
          img(src="https://fanart.tv/fanart/movies/475557/moviebackground/joker-5d68337505352.jpg")
        .card
          h3 Joker
          .info 
            .match 95% Match
            .age TV-14
            .dur 2h 2min 
          .tags 
            span Crime
            span Drama
            span Thriller

      li.item03
        .img(style="background-image: url(https://fanart.tv/fanart/movies/496243/moviethumb/parasite-5d2d5ab30c73d.jpg)")
          img(src="https://fanart.tv/fanart/movies/496243/moviebackground/parasite-5df5fb5439d1d.jpg")
        .card
          h3 Parasite
          .info 
            .match 98% Match
            .age TV-14
            .dur 2h 12min 
          .tags 
            span Comedy
            span Crime
            span Drama

      li.item04
        .img(style="background-image: url(https://fanart.tv/fanart/movies/359724/moviethumb/ford-v-ferrari-5db74ab5a49b9.jpg)")
          img(src="https://fanart.tv/fanart/movies/359724/moviebackground/go-like-hell-5d0839e2ecc25.jpg")
        .card
          h3 Ford v. Ferrari
          .info 
            .match 96% Match
            .age TV-PG
            .dur 2h 32min 
          .tags 
            span Action
            span Biography
            span Drama

      li.item05
        .img(style="background-image: url(https://fanart.tv/fanart/movies/398978/moviethumb/the-irishman-5ded4b24803d2.jpg)")
          img(src="https://fanart.tv/fanart/movies/398978/moviebackground/the-irishman-5de15d18d48f4.jpg")
        .card
          h3 The Irishman
          .info 
            .match 92% Match
            .age TV-MA
            .dur 3h 29min 
          .tags 
            span Biography
            span Crime
            span Drama

      li.item06
        .img(style="background-image: url(https://fanart.tv/fanart/movies/492188/moviethumb/marriage-story-5dd0c5d3db138.jpg)")
          img(src="https://fanart.tv/fanart/movies/492188/moviebackground/marriage-story-5def5bf3a229b.jpg")
        .card
          h3 Marriage Story
          .info 
            .match 94% Match
            .age TV-14
            .dur 2h 17min 
          .tags 
            span Comedy
            span Drama
            span Romance

  section
    h2 Top Tv Shows 2019
    ul
      li.item01
        .img(style="background-image: url(https://fanart.tv/fanart/tv/360893/tvthumb/chernobyl-5d9f83da0b06d.jpg)")
          img(src="https://fanart.tv/fanart/tv/360893/showbackground/chernobyl-5cee1a264b23a.jpg")
        .card
          h3 Chernobyl
          .info 
            .match 99% Match
            .age TV-14
            .dur 1 Season 
          .tags 
            span Drama
            span History
            span Thriller

      li.item02
        .img(style="background-image: url(https://fanart.tv/fanart/tv/355567/tvthumb/the-boys-5d50fd5fe5f13.jpg)")
          img(src="https://fanart.tv/fanart/tv/355567/showbackground/the-boys-5d4c66a61f5cb.jpg")
        .card
          h3 The Boys
          .info 
            .match 98% Match
            .age TV-14
            .dur 1 Season
          .tags 
            span Action
            span Comedy
            span Crime

      li.item03
        .img(style="background-image: url(https://fanart.tv/fanart/tv/314614/tvthumb/fleabag-5808829144e0d.jpg)")
          img(src="https://fanart.tv/fanart/tv/314614/showbackground/fleabag-5bbfae2909224.jpg")
        .card
          h3 Fleabag
          .info 
            .match 98% Match
            .age TV-14
            .dur 2 Seasons
          .tags 
            span Comedy
            span Drama
            span Romance

      li.item04
        .img(style="background-image: url(https://fanart.tv/fanart/tv/328708/tvthumb/mindhunter-5b1257a535a01.jpg)")
          img(src="https://fanart.tv/fanart/tv/328708/showbackground/mindhunter-5b125a7844f6a.jpg")
        .card
          h3 Mindhunter
          .info 
            .match 94% Match
            .age TV-14
            .dur 2 Seasons
          .tags 
            span Crime 
            span Drama
            span Thriller

      li.item05
        .img(style="background-image: url(https://fanart.tv/fanart/tv/305288/tvthumb/stranger-things-5d1e691923280.jpg)")
          img(src="https://fanart.tv/fanart/tv/305288/showbackground/stranger-things-5d2f417e8faae.jpg")
        .card
          h3 Stranger Things
          .info 
            .match 93% Match
            .age TV-PG
            .dur 3 Seasons 
          .tags 
            span Drama
            span Fantasy
            span Horror
            
      li.item06
        .img(style="background-image: url(https://fanart.tv/fanart/tv/270915/tvthumb/peaky-blinders-5277bdad6f903.jpg)")
          img(src="https://fanart.tv/fanart/tv/270915/showbackground/peaky-blinders-5277be064c089.jpg")
        .card
          h3 Peaky Blinders 
          .info 
            .match 87% Match
            .age TV-14
            .dur 5 Seasons 
          .tags 
            span Crime
            span Drama
            span Action

$white: #fff;
$black: #141414;
$match: #46D369;
$logo: #E50914;

* {box-sizing: border-box; outline: 0px;}
ul,ol {list-style: none; padding: 0px; margin: 0px;}
h2 {margin: 0px; padding: 0px;}

body {margin: 0px; font-family: "Montserrat"; color: $white; background: $black;}


main {
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 4vw;
  overflow-x: hidden;
}

.logo {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  padding: 3vw 4vw;
  background: rgba($white, .02);
  svg {
    display: block;
    position: relative;
    width: 10vw;
    path {fill: $logo;}
  }
}

section{
  display: block;
  position: relative;
  top: 8vw;
  margin-bottom: 6vw;
  h2 {
    display: block;
    width: 100%; 
    //text-align: center;
    font-size: 1.2vw;
    font-weight: 600;
    margin-bottom: .8vw;
    margin-left: 4px;
  }
  ul {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    white-space: nowrap;
    font-size: 0;
    &:hover li:not(.hover) {opacity: 0.3;}
    li {
      display: inline-block;
      height: auto;
      padding: 2px;
      overflow: hidden; 
      cursor: pointer;
      .img {
        display: block;
        position: relative;
        width: 100%;
        height: 0px;
        padding-top: 56.25%;
        background-size: cover;
        transform-origin: top right;
        &:after {
          content:"";
          display: block;
          position: absolute;
          top: -10px;
          left: -10px;
          z-index: 1;
          width: calc(100% + 20px);
          height: calc(100% + 20px);
          opacity: 0;
          background: linear-gradient(to bottom, rgba($black,0) 0%,rgba($black,1) 100%);
          transition: all .5s ease .2s
        }
        img {
          display: block;
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          opacity: 0;
        }
      }
      .card {
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 1;
        width: 100%;
        height: auto;
        padding: 10px;
        text-shadow: 0 1px 1px rgba($black, 0.6);
        opacity: 0;
        h3 {
          display: block;
          width: 100%;
          font-size: .7vw;
          font-weight: 600;
          margin-bottom: .3vw;
        }
        .info {
          display: block;
          width: 100%;
          margin-bottom: .3vw;
          font-size: 0;
          .match {
            display: inline-block;
            width: auto;
            font-size: .5vw;
            font-weight: 600;
            margin-right: .4vw;
            color: $match;
          }
          .age {
            display: inline-block;
            position: relative;
            width: auto;
            font-size: .5vw;
            padding: 0 0.4em;
            margin-right: .4vw;
            border: solid 1px rgba($white, 0.4);
          }
          .dur {
            display: inline-block;
            width: auto;
            font-size: .5vw;
          }
        }
        .tags {
          display: block;
          width: 100%;
          span {
            display: inline-block;
            width: auto;
            font-size: .5vw;
            margin: 0 .3vw 0 0;
            &:after {
              content:"●";
              display: inline-block;
              margin: 0 0 0 .3vw;
              font-size: .8 xvw;
              text-shadow: 0 1px 1px rgba(0, 0, 0, 0);
              color: rgba($white, 0.4);
            }
            &:last-child:after {
              display: none;
            }
          }
        }
      }
      &:hover {
        .img:after {
          opacity: 1;
        }
        img {
          opacity: 1;
        }
        .card {
          opacity: 1;
        }
      }

      &:first-child {transform-origin: 0px center;}
      &:last-child {transform-origin: 100% center;}
    }
  }
}
  
li, li * {transition: all .5s ease .2s}

// select the strip

$("section").each(function() {

  // change the number of the "li" elements and the strip will be fine anyway
  
  var wUl = $(this).find("ul").width();
  var nLi = $(this).find("ul").children().length;
  var wElement = 100 / nLi;

  $("li").css("width", wElement + "%");
  
  // hover "li"

  $(this).find("li").hover(

    // mouse In
    function() {
      $(this).toggleClass("hover");

      var scaleFactor = 1.8;
      var wBigElement = $(this).width() * scaleFactor;
      var translation = (wBigElement - $(this).width()) / 2;
      
      var item = $(this).parent().children();

      $(this).css("transform", "scale(" + scaleFactor + ")");
      
      if ($(this).is(":nth-child(1)")) {
        item.slice(1,nLi).css("transform", "translate(" + translation * 2 + "px,  0px)");
      } 

        for (var i = 2; i <= nLi - 1; i++) {
          if ($(this).is(":nth-child(" + i + ")")) {
            item.slice(0,i-1).css("transform", "translate(-" + translation + "px,  0px)")
             .end().slice(i).css("transform", "translate(" + translation + "px,  0px)");
          } 
        }

      if ($(this).is(":nth-child(" + nLi + ")")) {
        item.slice(0,(nLi-1)).css("transform", "translate(-" + translation * 2 + "px,  0px)");
      }   

    // mouse Out
    }, function() {
        $(this).toggleClass("hover");
        $(this).css("transform", "scale(1)");
        $("li").not(this).css("transform", "translate(0px,  0px)");
    }
  );
});