Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section id="phone">
  <article id="screen">
    <header>
      <article id='top-icons'>
        <article class='topbar left'>
          <div id='clock'></div>
        </article>
        <article class='topbar right'>
          <div><svg viewBox="0 0 100 100">
              <path d="M28.984,67.871h3.282c1.262,0,2.288-1.026,2.288-2.288v-7.012c0-1.262-1.026-2.288-2.288-2.288h-3.282 
        c-1.261,0-2.288,1.026-2.288,2.288v7.012C26.697,66.844,27.723,67.871,28.984,67.871z" />
              <path d="M38.678,67.871h3.257c1.269,0,2.3-1.032,2.3-2.3V52.49c0-1.269-1.032-2.3-2.3-2.3h-3.257c-1.269,0-2.3,
        1.032-2.3,2.3V65.57 C36.377,66.839,37.409,67.871,38.678,67.871z" />
              <path d="M48.362,67.871h3.25c1.271,0,2.304-1.033,2.304-2.304V46.47c0-1.271-1.033-2.304-2.304-2.304h-3.25
        c-1.271,0-2.304,1.034-2.304,2.304v19.097C46.059,66.837,47.092,67.871,48.362,67.871z" />
              <path d="M58.035,67.871h3.266c1.266,0,2.296-1.03,2.296-2.295V40.462c0-1.266-1.03-2.296-2.296-2.296h-3.266
        c-1.266,0-2.296,1.03-2.296,2.296v25.113C55.739,66.841,56.769,67.871,58.035,67.871z" />
              <path d="M67.775,67.871h3.148c1.302,0,2.362-1.06,2.362-2.362V34.491c0-1.302-1.06-2.362-2.362-2.362h-3.148
        c-1.302,0-2.362,1.06-2.362,2.362v31.018C65.413,66.811,66.473,67.871,67.775,67.871z" />
            </svg></div>
          <div><svg viewBox="0 0 470 470">

              <path d="M170.667,336.6l64,64l64-64C263.36,301.293,205.973,301.293,170.667,336.6z" />
              <path d="M85.333,251.267L128,293.933c58.88-58.88,154.453-58.88,213.333,0L384,251.267
				C301.547,168.813,167.787,168.813,85.333,251.267z" />
              <path d="M0,165.933L42.667,208.6c106.027-106.027,277.973-106.027,384,0l42.667-42.667C339.733,36.333,
			129.6,36.333,0,165.933z" />
            </svg>
          </div>
          <div>
            <svg viewBox="0 0 77 30">
              <g>
                <rect x="3.83" y="3.83" width="64.63" height="25.35" rx="1.63" ry="1.63" />
                <path d="M74.49,9.79H72.3V5.46A5.47,5.47,0,0,0,66.83,0H5.47A5.47,5.47,0,0,0,0,5.46V27.56A5.47,5.47,0,0,0,
            5.47,33H66.83a5.47,5.47,0,0,0,5.46-5.46V23h2.19a2.67,2.67,0,0,0,2.67-2.67V12.46A2.67,2.67,0,0,0,74.49,
            9.79ZM70.3,27.56A3.47,3.47,0,0,1,66.83,31H5.47A3.47,3.47,0,0,1,2,27.56V5.46A3.47,3.47,0,0,1,5.47,
            2H66.83A3.47,3.47,0,0,1,70.3,5.46Zm4.87-7.25a.67.67,0,0,1-.67.67H72.3V11.79h2.19a.68.68,0,0,1,.67.67Z" />
              </g>
            </svg>
          </div>
        </article>
      </article>
      <article id='search'>
        <div id='searchbar'>
          <input list='movies' placeholder='Search'>
          <button id='search-icon'>
            <svg id='vector' viewBox="0 0 30.239 30.239">
              <g id='glass' fill='#B4BFFD'>
                <path d="M20.194,3.46c-4.613-4.613-12.121-4.613-16.734,0c-4.612,4.614-4.612,12.121,0,16.735
		c4.108,4.107,10.506,4.547,15.116,1.34c0.097,0.459,0.319,0.897,0.676,1.254l6.718,6.718c0.979,0.977,2.561,0.977,3.535,0
		c0.978-0.978,0.978-2.56,0-3.535l-6.718-6.72c-0.355-0.354-0.794-0.577-1.253-0.674C24.743,13.967,24.303,7.57,20.194,3.46z
		 M18.073,18.074c-3.444,3.444-9.049,3.444-12.492,0c-3.442-3.444-3.442-9.048,0-12.492c3.443-3.443,9.048-3.443,12.492,0
		C21.517,9.026,21.517,14.63,18.073,18.074z" />
              </g>
            </svg>
          </button>
        </div>
        <datalist id='movies'>
        </datalist>
      </article>
    </header>
    <main>
      <h3>Now Playing</h3>
      <article id='card-gallery'>
        <div class='movie-card one'>
          <div class="poster"></div>
          <article class='movie-info'>
            <div class='imdb'>
              <div class='logo'>
                IMDb
              </div>
              <div class='grade'>

              </div>
            </div>
            <h4 class='movie-title'></h4>
            <article class="tags">
            </article>
          </article>
          <a href='#'></a>
        </div>
        <div id='test' class='movie-card two'>
          <div class="poster"></div>
          <article class='movie-info'>
            <div class='imdb'>
              <div class='logo'>
                IMDb
              </div>
              <div class='grade'>

              </div>
            </div>
            <h4 class='movie-title'></h4>
            <article class="tags">
            </article>
          </article>
          <a href='#'></a>
        </div>
        <div class='movie-card three'>
          <div class="poster"></div>
          <article class='movie-info'>
            <div class='imdb'>
              <div class='logo'>
                IMDb
              </div>
              <div class='grade'>

              </div>
            </div>
            <h4 class='movie-title'></h4>
            <article class="tags">
            </article>
          </article>
          <a href='#'></a>
        </div>
        <div class='movie-card four'>
          <div class="poster"></div>
          <article class='movie-info'>
            <div class='imdb'>
              <div class='logo'>
                IMDb
              </div>
              <div class='grade'>

              </div>
            </div>
            <h4 class='movie-title'></h4>
            <article class="tags">
            </article>
          </article>
          <a href='#'></a>
        </div>
        <div class='movie-card five'>
          <div class="poster"></div>
          <article class='movie-info'>
            <div class='imdb'>
              <div class='logo'>
                IMDb
              </div>
              <div class='grade'>

              </div>
            </div>
            <h4 class='movie-title'></h4>
            <article class="tags">
            </article>
          </article>
          <a href='#'></a>
        </div>
        <div class='movie-card six'>
          <div class="poster"></div>
          <article class='movie-info'>
            <div class='imdb'>
              <div class='logo'>
                IMDb
              </div>
              <div class='grade'>

              </div>
            </div>
            <h4 class='movie-title'></h4>
            <article class="tags">
            </article>
          </article>
          <a href='#'></a>
        </div>
        <div id='spacer'></div>
      </article>

    </main>
    <footer>
      <nav>
        <ul>
          <li><a href='#'><svg viewBox='0 0 192 192'>
                <path class='icon' fill='#627d8b' d="m155.109 74.028a4 4 0 0 0 -3.48-2.028h-52.4l8.785-67.123a4.023 4.023 0 0 0 -7.373-2.614l-63.724 
    111.642a4 4 0 0 0 3.407 6.095h51.617l-6.962 67.224a4.024 4.024 0 0 0 7.411 2.461l62.671-111.63a4 4 0 0 0 
    .048-4.027z" />
              </svg>
              <h4>Trending</h4>
            </a>
          </li>
          <li><a href='#'><svg viewBox='0 0 58 58'>
                <path class='icon' fill='#627d8b' d="M57,6H1C0.448,6,0,6.447,0,7v44c0,0.553,0.448,1,1,1h56c0.552,0,1-0.447,1-1V7C58,6.447,57.552,6,57,6z M10,50H2v-9h8V50z
	 M10,39H2v-9h8V39z M10,28H2v-9h8V28z M10,17H2V8h8V17z M36.537,29.844l-11,7C25.374,36.947,25.187,37,25,37
	c-0.166,0-0.331-0.041-0.481-0.123C24.199,36.701,24,36.365,24,36V22c0-0.365,0.199-0.701,0.519-0.877
	c0.32-0.175,0.71-0.162,1.019,0.033l11,7C36.825,28.34,37,28.658,37,29S36.825,29.66,36.537,29.844z M56,50h-8v-9h8V50z M56,39h-8
	v-9h8V39z M56,28h-8v-9h8V28z M56,17h-8V8h8V17z" />
              </svg></a></li>
          <li><a href='#'><svg viewBox='0 0 8.5 8.5'>
                <path fill='rgba(0,0,0,0.4)' d="M 0.0599 5.3151 A 0.2646 0.2646 0 0 0 0.0775 5.6703 L 0.8068 6.3996 A 0.2646 0.2646 0 0 0 1.1799 6.3993 
    L 1.2807 6.2984 C 1.5297 6.0494 1.9182 6.0494 2.1672 6.2984 C 2.4162 6.5474 2.4162 6.9359 2.1672 7.1849 L 2.0664 
    7.2858 A 0.2646 0.2646 0 0 0 2.0675 7.6603 L 2.7954 8.3882 A 0.2646 0.2646 0 0 0 3.1699 8.3893 L 4.7525 6.8067 
    L 1.6604 3.7146 L 0.0778 5.2972 A 0.2646 0.2646 0 0 0 0.0599 5.3151 Z" />
                <path class='icon' fill='#627d8b' d="M 2.0346 3.3405 L 5.1267 6.4325 L 8.3886 
    3.1705 A 0.2646 0.2646 0 0 0 8.3886 2.7949 L 7.6608 2.067 A 0.2646 0.2646 0 0 0 7.2851 2.067 L 7.1846 2.1675 
    C 6.9356 2.4165 6.5468 2.4169 6.2978 2.1679 C 6.0488 1.9189 6.0491 1.53 6.2982 1.281 L 6.3986 1.1805 A 0.2646 
    0.2646 0 0 0 6.4001 0.8063 L 5.6708 0.077 A 0.2646 0.2646 0 0 0 5.2966 0.0785 Z Z Z" />
              </svg></a></li>
          <li><a href='#'><svg viewBox='0 0 100 100'>

                <path fill='rgba(0,0,0,0.4)' d="M76.31,5H34.8a5.16,5.16,0,0,0-5.11,5.21v.34H70.76a5.16,5.16,0,0,1,5.1,5.21V83.66a5.15,5.15,0,0,0,
    5.55-5.19V10.24A5.15,5.15,0,0,0,76.31,5Z" />
                <path class='icon' fill='#627d8b' d="M65.2,16.13H23.69a5.15,5.15,0,0,0-5.1,5.21V89.77a5.1,5.1,0,0,0,8,4.28L41.93,83.22a5,5,0,0,1,5.88,
    0L62.23,93.81a5.11,5.11,0,0,0,8.08-4.24V21.34A5.16,5.16,0,0,0,65.2,16.13Z" />

              </svg></a></li>
        </ul>
      </nav>
    </footer>

    <!-- Second layer for expanded card with details, cast and trailer gallery-->
    <article id='first-layer'>
      <div class='big-poster'>

      </div>
      <button class='close-card'>
        <svg viewBox='0 0 100 100'>
          <g transform="translate(0,-952.36218)">
            <path d="m 50.000001,962.36216 
        c -22.10908,0 -40,17.88103 -40,40.00004 0,22.1085 17.8915,40 40,40 22.118968,0 39.999998,
        -17.8909 39.999998,-40 0,-22.11959 -17.88046,-40.00004 -39.999998,-40.00004 z m -15.25,23 
        a 2.0002,2.0002 0 0 1 0.21875,0 2.0002,2.0002 0 0 1 1.4375,0.59375 l 13.59375,13.5625 13.562498,
        -13.5625 a 2.0002,2.0002 0 0 1 1.375,-0.59375 2.0002,2.0002 0 0 1 1.46875,3.4375 l -13.593748,
        13.59374 13.593748,13.5625 a 2.0108526,2.0108526 0 1 1 -2.84375,2.8438 l -13.562498,-13.5938 
        -13.59375,13.5938 a 2.0108526,2.0108526 0 0 1 -2.84375,-2.8438 l 13.5625,-13.5625 -13.5625,
        -13.59374 a 2.0002,2.0002 0 0 1 1.1875,-3.4375 z" fill="#E6EBEF" fill-opacity="1" fill-rule="evenodd" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible" />
          </g>
        </svg>
      </button>
      <div class='big-movie-info'>
        <div class='imdb'>
          <div class='logo'>
            IMDb
          </div>
          <div class='grade'>

          </div>
        </div>
        <h4 class='movie-title'></h4>
        <article class="tags">
        </article>
        <div class='info-last'></div>
      </div>

      <article id='bottom-screen'>
        <article id='mid-nav'>
          <a class='one' href='#'>SHOWTIMES</a>
          <a class='two' href='#'>DETAILS</a>
          <div id='nav-layer'></div>
          <svg>
            <rect id="text-bg" width="50%" height="100%" fill="#4c17ff" x="50%" y="0" rx='7' fill-opacity="1" mask="url(#knockout-text)" />
            <mask id="knockout-text">
              <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
              <text x="25%" y="57.5%" fill="#000" font-size='11px' font-weight='700' text-anchor="middle">SHOWTIMES</text>
              <text x="75%" y="57.5%" fill="#000" font-size='11px' font-weight='700' text-anchor="middle">DETAILS</text>
            </mask>
          </svg>
        </article>
        <section id='dual-wrapper'>
          <article class='dual-screen left'>
            <div id='movie-copy'>
              <h4>Story</h4>
              <p></p>
            </div>
            <div id="cast-wrap">
              <h4>Cast</h4>
              <article class='reel cast'>
                <div class='item'>
                  <div class='shot'></div>
                  <article class='details'>
                    <h5>copy</h5>
                    <p>copy</p>
                  </article>
                </div>
                <div class='item'>
                  <div class='shot'></div>
                  <article class='details'>
                    <h5>copy</h5>
                    <p>copy</p>
                  </article>
                </div>
                <div class='item'>
                  <div class='shot'></div>
                  <article class='details'>
                    <h5>copy</h5>
                    <p>copy</p>
                  </article>
                </div>
                <div class='item'>
                  <div class='shot'></div>
                  <article class='details'>
                    <h5>copy</h5>
                    <p>copy</p>
                  </article>
                </div>
                <div class='item'>
                  <div class='shot'></div>
                  <article class='details'>
                    <h5>copy</h5>
                    <p>copy</p>
                  </article>
                </div>
              </article>
            </div>
            <div id='trailer-wrap'>
              <h4>Trailers</h4>
              <article class='reel trailer'>
                <div class='item'>
                  <div class='video-thumb'></div>
                </div>
                <div class='item'>
                  <div class='video-thumb'></div>
                </div>
              </article>
            </div>
          </article>
          <article class='dual-screen right'>
            <div id="date-picker">
              <h4>Date</h4>
              <article class='reel date'>

              </article>
            </div>
            <div id='theaters-wrap'>

            </div>
          </article>
        </section>
      </article>
    </article>
    <article id='fixed-layer'>
      <button class='back-arrow'>
        <svg viewBox='0 0 512 512'>
          <path fill='white' d="M 506.134 241.843 C 506.128 241.837 506.123 241.83 506.116 241.824 L 401.612 137.824 C 393.783 130.033 381.12 130.062 373.327 137.892 
		C 365.535 145.721 365.565 158.384 373.394 166.176 L 443.558 236 H 20 C 8.954 236 0 244.954 0 256 C 0 267.046 8.954 276 20 276 H 443.557 L 373.395 345.824 
		C 365.566 353.616 365.536 366.279 373.328 374.108 C 381.121 381.939 393.785 381.966 401.613 374.176 L 506.117 270.176 C 506.123 270.17 506.128 270.163 
		506.135 270.157 C 513.968 262.339 513.943 249.635 506.134 241.843 Z" />
        </svg>
      </button>
    </article>
  </article>
</section>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap')

overlay()
  position: absolute
  top: 0
  left: 0
  inset: 0

cleanScroll()
  scrollbar-width: none
  overflow: -moz-scrollbars-none

  &::-webkit-scrollbar
    width: 0 !important
    display: none

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

imdb()
  display: flex
  justify-content: space-between
  align-items: center
  width: 50px
  height: 17px
  margin-top: 4px
  font-family: 'Roboto Condensed', sans-serif
  font-size: 11px
  color: var(--brand-grey)

logo()
  display: flex
  justify-content: center
  align-items: center
  width: 62.5%
  height: 100%
  border: 1px solid var(--brand-grey)
  border-radius: 3px

movie-title()
  margin-top: 8px
  font-size: 12px
  font-weight: 700
  ellipsis()

tags()
  margin-top: 7px
  font-size: 10px
  color: var(--brand-grey)

*
  box-sizing: border-box

a
  text-decoration: none

button
  background: none
  border: 0
  cursor: pointer

svg
  pointer-events: none

body
  --toned-white: #E6EBEF
  --brand-c: #3250fa
  --light-brand-c: #B4BFFD
  --brand-grey: #627d8b
  --layer-zero-opacity: 1
  --layer-one-opacity: 0
  --layer-two-opacity: 0
  display: flex
  height: 100vh
  background: black
  font-family: sans-serif

  #phone
    display: flex
    width: 270px
    height: 546px
    margin: auto
    position: relative
    transform: scale(1.1)
    overflow: hidden

    &::after
      content: ''
      width: 100%
      height: 100%
      overlay()
      background-image: url('https://res.cloudinary.com/dugd5fjqo/image/upload/v1607102532/iphone-frame_c4jo6n.png')
      background-size: 101%
      background-position: 50% 75%
      background-repeat: no-repeat
      pointer-events: none
      z-index: 2

    #screen
      display: grid
      grid-template-columns: 100%
      grid-template-rows: 12.5% 77.5%
      grid-template-areas: 'header'
      'main'
      width: 90%
      height: 94%
      margin: auto
      position: relative
      background: var(--toned-white)
      border-radius: 30px
      overflow: hidden

      #first-layer
        width: 98%
        min-height: 100%
        position: absolute
        left: 1%
        pointer-events: none
        opacity: var(--layer-one-opacity)
        overflow-x: hidden
        overflow-y: scroll
        cleanScroll()

        .big-poster
          width: 100%
          height: 67.5%
          overlay()
          background-size: cover
          background-position: center
          border-radius: 15px
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)

        .close-card
          width: 25px
          height: 25px
          position: fixed
          top: 25px
          right: 25px
          border-radius: 50%
          z-index: 1

          svg
            width: 100%
            height: 100%
            overlay()
            opacity: 0

        .big-movie-info
          width: 100%
          height: 57px
          position: absolute
          top: calc(67.5% + 14px)
          left: 5%

          .imdb
            imdb()

            .logo
              logo()

            .grade
              font-size: 12px

        .movie-title
          width: 82.5%
          movie-title()

        .tags
          tags()

        .info-last
          width: 100%
          margin-top: 7px
          position: absolute
          color: var(--brand-grey)
          font-size: 10px
          opacity: 0

      #bottom-screen
        display: flex
        flex-flow: column nowrap
        align-items: center
        width: 100%
        height: auto
        position: absolute
        top: 90%
        left: 0

      #mid-nav
        display: flex
        width: 90%
        height: 35px
        position: relative
        background: white
        border-radius: 7px

        a
          display: flex
          justify-content: center
          align-items: center
          width: 50%
          height: 100%
          margin: auto
          text-decoration: none
          color: black
          font-size: 11px
          font-weight: 700

        #nav-layer
          width: 47.5%
          height: 95%
          position: absolute
          top: 2.5%
          left: 1.25%
          background: white
          border-radius: 7px
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
          pointer-events: none

        svg
          width: 101%
          height: 102%
          position: absolute
          top: -1%
          left: -0.5%

      #dual-wrapper
        width: 100%
        height: auto
        position: relative

        .dual-screen
          display: grid
          width: 100%
          height: auto
          padding-bottom: 75px
          position: absolute

          h4
            margin-left: 5%
            font-size: 13px
            font-weight: 800

          .reel
            display: flex
            width: 100%
            min-height: 47.5px
            margin-top: 15px
            overflow-x: auto
            overflow-y: hidden
            cleanScroll()

          &.left
            display: grid
            left: 0
            grid-template-columns: 100%
            grid-auto-rows: min-content
            grid-gap: 25px

            #movie-copy
              margin-top: 30px

              p
                width: 90%
                margin-top: 15px
                margin-left: 5%
                color: rgba(0, 0, 0, 0.85)
                font-size: 10px
                font-weight: 400
                line-height: 135%

            .reel
              .item
                display: flex
                min-width: 55%
                height: 100%
                position: relative
                background: white
                margin-left: 10px
                border-radius: 10px

            #cast-wrap
              display: flex
              flex-flow: column nowrap
              justify-content: space-between

              .reel.cast
                .item
                  .shot
                    width: 35%
                    height: 100%
                    background-size: cover
                    background-position: center
                    border-radius: 10px

                  .details
                    display: flex
                    flex-wrap: wrap
                    align-items: center
                    align-content: center
                    width: 62.5%
                    height: 100%
                    padding-left: 8px

                    *
                      width: 100%
                      margin: auto
                      text-align: left
                      ellipsis()

                    h5
                      font-size: 9px
                      font-weight: 600
                      margin-top: 4px
                      margin-bottom: 2px

                    p
                      margin-top: 2px
                      font-size: 9px
                      color: var(--brand-grey)

            #trailer-wrap
              display: flex
              flex-flow: column nowrap
              justify-content: space-between

              .reel.trailer
                height: 100px

                .item
                  cursor: pointer

                  .video-thumb
                    width: 100%
                    height: 100%
                    position: relative
                    background-color: black
                    background-size: cover
                    background-position: center
                    border-radius: 10px

                    &::after
                      content: ''
                      width: 35px
                      height: 35px
                      position: absolute
                      top: 50%
                      left: 50%
                      background-image: url('https://res.cloudinary.com/dugd5fjqo/image/upload/v1609863950/play-black_fhzx1h.svg')
                      background-size: 50%
                      background-position: 55% 55%
                      background-repeat: no-repeat
                      background-color: var(--toned-white)
                      border-radius: 50%
                      transform: translate(-50%, -50%)
                      transition: opacity 0.1s linear

                    &.open::after
                      opacity: 0

          &.right
            left: 100%
            grid-template-columns: 100%
            grid-auto-rows: min-content
            grid-gap: 25px

            #date-picker
              margin-top: 25px

      &.two
        position: fixed
        opacity: 0.3

      header
        grid-area: 'header'
        opacity: var(--layer-zero-opacity)
        transition: opacity 0.2s linear

        *
          display: flex

        #top-icons
          justify-content: space-between
          width: 100%
          height: 27.5%
          padding: 0 4.5%

          .topbar
            display: flex
            justify-content: space-evenly
            align-items: flex-end
            width: 21%
            height: 100%

            &.left
              #clock
                font-size: 10px

            &.right
              div
                width: 12px
                height: 12px
                position: relative

                svg
                  width: 100%
                  height: 100%
                  overlay()

                &:nth-of-type(1)
                  svg
                    transform: scale(2)

        #search
          width: 100%
          height: 72.5%
          margin-top: 5px

          #searchbar
            width: 90%
            height: 62.5%
            margin: auto
            position: relative
            background: white
            border-radius: 5px
            transition: box-shadow 0.1s linear

            &:hover
              box-shadow: 0 0 0 1px var(--light-brand-c)

            input
              width: 85%
              height: 100%
              position: relative
              border: 0
              text-indent: 14px
              font-size: 12px
              line-height: 100%
              outline: none
              border-top-left-radius: 5px
              border-bottom-left-radius: 5px

              &::placeholder
                font-size: 14px
                color: var(--brand-grey)
                opacity: 1
                // background: green

              &:hover+#search-icon, &:focus+#search-icon
                svg
                  #glass
                    fill: #3250fa

            #search-icon
              display: flex
              width: 15%
              height: 100%
              position: absolute
              right: 0
              cursor: pointer

              svg
                width: 95%
                height: 95%
                margin: auto

                #glass
                  transition: fill 0.1s linear

          datalist
            position: absolute
            visibility: hidden

      main
        grid-area: 'main'
        display: flex
        flex-flow: column nowrap
        justify-content: space-evenly
        overflow: hidden

        h3
          margin-left: 13px
          font-size: 16px
          font-weight: 700
          opacity: var(--layer-zero-opacity)
          transition: opacity 0.2s linear

        #card-gallery
          width: 100%
          height: 82.5%
          position: relative
          overflow-x: scroll
          overflow-y: hidden
          cleanScroll()

          #spacer
            width: 6%
            height: 100%
            position: absolute
            left: 462.5%
            background: none

          .movie-card
            display: flex
            flex-flow: column nowrap
            justify-content: space-between
            width: 75%
            height: 100%
            position: absolute
            overflow: hidden

            a
              width: 95%
              height: 80%
              position: absolute

            .poster
              width: 95%
              height: 80%
              border-radius: 12px
              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
              background-size: cover
              background-position: center

            .movie-info
              width: 100%
              height: 17.5%
              margin-top: 10px

              .imdb
                imdb()

                .logo
                  logo()

                .grade
                  font-size: 12px

              .movie-title
                width: 75%
                movie-title()

              .tags
                tags()

            &.one
              left: 8%

            &.two
              left: 82.5%

            &.three
              left: 157.5%

            &.four
              left: 232.5%

            &.five
              left: 307.5%

            &.six
              left: 382.5%

      #fixed-layer
        width: 89%
        height: 94%
        position: fixed
        top: 3%
        left: 5.5%
        opacity: var(--layer-two-opacity)
        pointer-events: none
        overflow: hidden
        z-index: 1

        .video-thumb
          &::after
            content: ''
            width: 100%
            height: 100%
            overlay()
            background: black
            border-radius: 25px
            opacity: 0
            transition: opacity 0.1s linear
            pointer-events: none

          &.active::after
            opacity: 1

          video
            width: 100%
            height: 100%
            background: black
            object-fit: cover

            &:focus
              outline: 0

            &::-webkit-media-controls-fullscreen-button
              display: none

        .back-arrow
          width: 40px
          height: 40px
          position: absolute
          top: 12px
          left: 15px
          opacity: 0
          z-index: 1

      footer
        width: 87.5%
        background: white
        height: 10%
        position: fixed
        top: 87%
        left: 50%
        transform: translate(-50%)
        z-index: 1
        border-top-left-radius: 16px
        border-top-right-radius: 16px

        nav
          width: 100%
          height: 100%

          ul
            display: flex
            justify-content: space-evenly
            align-items: center
            width: 100%
            height: 100%

            li
              display: flex
              width: 22px
              height: 22px
              transform: translatey(-40%)

              &:nth-of-type(1)
                width: 30%

                a
                  justify-content: space-between

                  &.active
                    h4
                      color: var(--brand-c)

                  svg
                    width: 30%

                  h4
                    width: 67.5%
                    font-size: 11px
                    color: #627d8b
                    transition: color 0.1s linear
                    pointer-events: none

              a
                display: flex
                align-items: center
                width: 100%
                height: 100%

                &.active
                  svg
                    .icon
                      fill: var(--brand-c)

                svg
                  width: 100%
                  height: 100%

                  .icon
                    transition: fill 0.1s linear
              
            
!

JS

              
                console.clear();
gsap.registerPlugin(Flip, ScrollToPlugin, ScrollTrigger);

//Collection of relevant data arrays.
const movieData = {
  pictures: [
    "https://res.cloudinary.com/dugd5fjqo/image/upload/v1607347772/johnwick-3_xfbrny.jpg",
    "https://i.redd.it/7ftviduqdla21.jpg",
    "https://i.redd.it/2brgvjmaewu31.jpg",
    "https://preview.redd.it/s9biogtbp9x31.jpg?auto=webp&s=d5c81f12d940c18ae578709fabff1163474697cc",
    "https://i.redd.it/i49dvm44py121.jpg",
    "https://i.redd.it/dqcvbm8rlfi31.png"
  ],
  gradeArr: ["7.4", "7.5", "8.4", "8.5", "6.9", "6.6"],
  titles: [
    "John Wick: Chapter 3 - Parabellum",
    "Spiderman: Far from Home",
    "Avengers: Endgame",
    "Joker",
    "Captain Marvel",
    "Star Wars: Episode IX - The Rise of Skywalker"
  ],
  tagArr: [
    "Action, Crime, Thriller",
    "Action, Adventure, Sci-Fi",
    "Action, Adventure, Drama",
    "Crime, Drama, Thriller",
    "Action, Adventure, Sci-Fi",
    "Action, Adventure, Fantasy"
  ],
  secInfos: [
    "USA, 2019 / 2h 10min / R",
    "USA, 2019 / 2h 9min / PG-13",
    "USA, 2019 / 3h 1min / PG-13",
    "USA, 2019 / 2h 2min / R",
    "USA, 2019 / 2h 3min / PG-13",
    "USA, 2019 / 2h 21min / PG-13"
  ],
  synopses: [
    "In this third installment of the adrenaline-fueled action franchise, skilled assassin John Wick (Keanu Reeves) returns with a $14 million price tag on his head and an army of bounty-hunting killers on his trail. After killing a member of the shadowy international assassin's guild, the High Table, John Wick is excommunicado, but the world's most ruthless hit men and women await his every turn.",
    "Our friendly neighborhood Super Hero decides to join his best friends Ned, MJ, and the rest of the gang on a European vacation. However, Peter's plan to leave super heroics behind for a few weeks are quickly scrapped when he begrudgingly agrees to help Nick Fury uncover the mystery of several elemental creature attacks, creating havoc across the continent.",
    "After the devastating events of Avengers: Infinity War (2018), the universe is in ruins due to the efforts of the Mad Titan, Thanos. With the help of remaining allies, the Avengers must assemble once more in order to undo Thanos's actions and undo the chaos to the universe, no matter what consequences may be in store, and no matter who they face...",
    "Arthur Fleck works as a clown and is an aspiring stand-up comic. He has mental health issues, part of which involves uncontrollable laughter. Times are tough and, due to his issues and occupation, Arthur has an even worse time than most. Over time these issues bear down on him, shaping his actions, making him ultimately take on the persona he is more known as...Joker.",
    "After crashing an experimental aircraft, Air Force pilot Carol Danvers is discovered by the Kree and trained as a member of the elite Starforce Military under the command of her mentor Yon-Rogg. Six years later, after escaping to Earth while under attack by the Skrulls, Danvers begins to discover there's more to her past. With help from S.H.I.E.L.D. agent Nick Fury, they set out to unravel the truth.",
    "While the First Order continues to ravage the galaxy, Rey finalizes her training as a Jedi. But danger suddenly rises from the ashes as the evil Emperor Palpatine mysteriously returns from the dead. While working with Finn and Poe Dameron to fulfill a new mission, Rey will not only face Kylo Ren once more, but she will also finally discover the truth about her parents as well as a deadly secret that could determine her future and the fate of the ultimate final showdown that is to come."
  ],
  castArr: [
    [
      {
        name: "Keanu Reeves",
        role: "John Wick",
        src:
          "https://m.media-amazon.com/images/M/MV5BNjUxNDcwMTg4Ml5BMl5BanBnXkFtZTcwMjU4NDYyOA@@._V1_UY317_CR15,0,214,317_AL_.jpg"
      },
      {
        name: "Halle Berry",
        role: "Sofia",
        src:
          "https://m.media-amazon.com/images/M/MV5BMjIxNzc5MDAzOV5BMl5BanBnXkFtZTcwMDUxMjMxMw@@._V1_UY1200_CR130,0,630,1200_AL_.jpg"
      },
      {
        name: "Ian McShane",
        role: "Winston",
        src:
          "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNWNrxVV2dune3FuGJGKoa74vrbeymvCApPQ&usqp=CAU"
      },
      {
        name: "Laurence Fishburne",
        role: "Bowery King",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTc0NjczNDc1MV5BMl5BanBnXkFtZTYwMDU0Mjg1._V1_UY1200_CR85,0,630,1200_AL_.jpg"
      },
      {
        name: "Mark Dacascos",
        role: "Zero",
        src:
          "https://m.media-amazon.com/images/M/MV5BN2YwN2Q5YWQtN2ZhMS00ZWZjLWE3YmMtNjNhYmMzZTFmYjE4XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_UY1200_CR77,0,630,1200_AL_.jpg"
      }
    ],
    [
      {
        name: "Tom Holland",
        role: "Peter Parker / Spiderman",
        src:
          "https://m.media-amazon.com/images/M/MV5BNTAzMzA3NjQwOF5BMl5BanBnXkFtZTgwMDUzODQ5MTI@._V1_UY317_CR23,0,214,317_AL_.jpg"
      },
      {
        name: "Samuel L. Jackson",
        role: "Nick Fury",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTQ1NTQwMTYxNl5BMl5BanBnXkFtZTYwMjA1MzY1._V1_UY1200_CR84,0,630,1200_AL_.jpg"
      },
      {
        name: "Jake Gyllenhaal",
        role: "Quentin Beck / Mysterio",
        src:
          "https://m.media-amazon.com/images/M/MV5BNjA0MTU2NDY3MF5BMl5BanBnXkFtZTgwNDU4ODkzMzE@._V1_.jpg"
      },
      {
        name: "Marisa Tomei",
        role: "May Parker",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTUwMjA3OTc3N15BMl5BanBnXkFtZTcwNTA1MzY1Mw@@._V1_UY317_CR12,0,214,317_AL_.jpg"
      },
      {
        name: "Jon Favreau",
        role: "Happy Hogan",
        src:
          "https://m.media-amazon.com/images/M/MV5BNjcwNzg4MjktNDNlMC00M2U1LWJmMjgtZTVkMmI4MDI2MTVmXkEyXkFqcGdeQXVyMjI4MDI0NTM@._V1_UY1200_CR135,0,630,1200_AL_.jpg"
      }
    ],
    [
      {
        name: "Robert Downey Jr.",
        role: "Tony Stark / Iron Man",
        src:
          "https://m.media-amazon.com/images/M/MV5BNzg1MTUyNDYxOF5BMl5BanBnXkFtZTgwNTQ4MTE2MjE@._V1_UY1200_CR83,0,630,1200_AL_.jpg"
      },
      {
        name: "Chris Evans",
        role: "Steve Rogers / Captain America",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTU2NTg1OTQzMF5BMl5BanBnXkFtZTcwNjIyMjkyMg@@._V1_UY1200_CR112,0,630,1200_AL_.jpg"
      },
      {
        name: "Mark Ruffalo",
        role: "Bruce Banner / Hulk",
        src:
          "https://m.media-amazon.com/images/M/MV5BNWIzZTI1ODUtZTUzMC00NTdiLWFlOTYtZTg4MGZkYmU4YzNlXkEyXkFqcGdeQXVyNTExOTk5Nzg@._V1_UY1200_CR85,0,630,1200_AL_.jpg"
      },
      {
        name: "Chris Hemsworth",
        role: "Thor",
        src:
          "https://m.media-amazon.com/images/M/MV5BOTU2MTI0NTIyNV5BMl5BanBnXkFtZTcwMTA4Nzc3OA@@._V1_UY1200_CR85,0,630,1200_AL_.jpg"
      },
      {
        name: "Scarlett Johansson",
        role: "Natasha Romanoff / Black Widow",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTM3OTUwMDYwNl5BMl5BanBnXkFtZTcwNTUyNzc3Nw@@._V1_.jpg"
      }
    ],
    [
      {
        name: "Joaquin Phoenix",
        role: "Arthur Fleck",
        src:
          "https://m.media-amazon.com/images/M/MV5BZGMyY2Q4NTEtMWVkZS00NzcwLTkzNmQtYzBlMWZhZGNhMDhkXkEyXkFqcGdeQXVyNjk1MjYyNTA@._V1_UY1200_CR86,0,630,1200_AL_.jpg"
      },
      {
        name: "Robert De Niro",
        role: "Murray Franklin",
        src:
          "https://m.media-amazon.com/images/M/MV5BMjAwNDU3MzcyOV5BMl5BanBnXkFtZTcwMjc0MTIxMw@@._V1_UY1200_CR139,0,630,1200_AL_.jpg"
      },
      {
        name: "Zazie Beetz",
        role: "Sophie Dumond",
        src:
          "https://m.media-amazon.com/images/M/MV5BMGEwYjU2NDgtZTQwZi00MmI3LWIwNjQtYmRmM2M3MThkMzM4XkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_.jpg"
      },
      {
        name: "Frances Conroy",
        role: "Penny Fleck",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTM4OTIzMTg5MF5BMl5BanBnXkFtZTYwNjA5OTIz._V1_UY1200_CR93,0,630,1200_AL_.jpg"
      },
      {
        name: "Brett Cullen",
        role: "Thomas Wayne",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTI0NzI0MzU1M15BMl5BanBnXkFtZTcwMjM0Mjg3MQ@@._V1_.jpg"
      }
    ],
    [
      {
        name: "Brie Larsson",
        role: "Carol Danvers / Captain Marvel",
        src:
          "https://m.media-amazon.com/images/M/MV5BMjExODkxODU3NF5BMl5BanBnXkFtZTgwNTM0MTk3NjE@._V1_.jpg"
      },
      {
        name: "Samuel L. Jackson",
        role: "Nick Fury",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTQ1NTQwMTYxNl5BMl5BanBnXkFtZTYwMjA1MzY1._V1_UY1200_CR84,0,630,1200_AL_.jpg"
      },
      {
        name: "Ben Mendelsohn",
        role: "Talos / Keller",
        src:
          "https://m.media-amazon.com/images/M/MV5BMjA3NzcyMDcyMF5BMl5BanBnXkFtZTcwNjQwMTczMQ@@._V1_UY1200_CR107,0,630,1200_AL_.jpg"
      },
      {
        name: "Jude Law",
        role: "Yon-Rogg",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTMwOTg5NTQ3NV5BMl5BanBnXkFtZTcwNzM3MDAzNQ@@._V1_.jpg"
      },
      {
        name: "Annette Bening",
        role: "Supreme Intelligence / Dr. Wendy Lawson",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTc4ODQ1ODM5Ml5BMl5BanBnXkFtZTcwOTU2NDk3OQ@@._V1_UY1200_CR85,0,630,1200_AL_.jpg"
      }
    ],
    [
      {
        name: "Carrie Fisher",
        role: "Leia Organa (archive footage)",
        src:
          "https://m.media-amazon.com/images/M/MV5BMjRkZDU2NWUtZDZmZC00YzI0LTgxZGItYWUxZTZlMjVmOWMwXkEyXkFqcGdeQWpnYW1i._V1_SY351_SX624_AL_.jpg"
      },
      {
        name: "Mark Hamill",
        role: "Luke Skywalker / Boolio (voice)",
        src:
          "https://m.media-amazon.com/images/M/MV5BOGY2MjI5MDQtOThmMC00ZGIwLWFmYjgtYWU4MzcxOGEwMGVkXkEyXkFqcGdeQXVyMzM4MjM0Nzg@._V1_UY1200_CR753,0,630,1200_AL_.jpg"
      },
      {
        name: "Adam Driver",
        role: "Kylo Ren",
        src:
          "https://m.media-amazon.com/images/M/MV5BOWViYjUzOWMtMzRkZi00MjNkLTk4M2ItMTVkMDg5MzE2ZDYyXkEyXkFqcGdeQXVyODQwNjM3NDA@._V1_UY1200_CR256,0,630,1200_AL_.jpg"
      },
      {
        name: "Daisy Ridley",
        role: "Rey",
        src:
          "https://m.media-amazon.com/images/M/MV5BMTgzMDk3MjI4OF5BMl5BanBnXkFtZTgwMzQxMDY5NjE@._V1_.jpg"
      },
      {
        name: "John Boyega",
        role: "Finn",
        src:
          "https://m.media-amazon.com/images/M/MV5BMDg4NWZjNmEtZWVmNC00MzdhLTlhOTEtZmViYjdmMzhjMTAyXkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_UY1200_CR165,0,630,1200_AL_.jpg"
      }
    ]
  ],
  trailPics: [
    [
      "https://media.newyorker.com/photos/5cdf1ad7339acf8247bfc768/4:3/w_1888,h_1416,c_limit/Richard-JohnWick.jpg",
      "https://www.wienerzeitung.at/_em_daten/_cache/image/1xRDqOdlZgE4T2ymGcPwVCCsKl0e8SfsO4Lztc7R02FG89eZbOT5KHPjkcf-Pg7D3US2Vbu_wWGD_Mrgiw86pPbz6A8QXcHHor/191025-1309-jw3-d61-19326-r-a4.jpg"
    ],
    [
      "https://static01.nyt.com/images/2019/07/08/arts/08spider-spoilers-1/merlin_157155882_1b06740b-940a-4a63-99e1-31122006d72a-superJumbo.jpg",
      "https://img.cinemablend.com/filter:scale/quill/d/e/e/3/1/6/dee316df8703d16fee2fcec746b4d625a21c49a3.jpg"
    ],
    [
      "https://www.bosshunting.com.au/wp-content/uploads/2020/09/CHT.jpg",
      "https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F06%2Favengersendgame5ce30b0b72b43-2000.jpg"
    ],
    [
      "https://cdn.vox-cdn.com/thumbor/L_zeHuClx96XeJYHGpRi02cJpOE=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19282421/JOKER_MOVIE_REVIEW.jpg",
      "https://www.clydefitchreport.com/wp-content/uploads/2019/10/IMG_5530-e1573333927499.jpg"
    ],
    [
      "https://m.media-amazon.com/images/M/MV5BODlhOGM4MGMtYjBjMi00MWQ2LTk4OWUtYzQ2YzE0NWZkODlkXkEyXkFqcGdeQW1yb3NzZXI@._V1_CR251,0,1419,798_AL_UY268_CR84,0,477,268_AL_.jpg",
      "https://www.indiewire.com/wp-content/uploads/2018/12/CaptainMarvel_06.png"
    ],
    [
      "https://www.denofgeek.com/wp-content/uploads/2020/01/star-wars-the-rise-of-skywalker-rey-kylo-ren.png",
      "https://www.indiewire.com/wp-content/uploads/2019/12/rise-skywalker-ending.jpg"
    ]
  ],
  trailArr: [
    [
      "https://smoothdev35.github.io/trailer-vids/JW3-1.mp4",
      "https://smoothdev35.github.io/trailer-vids/JW3-2.mp4"
    ],
    [
      "https://smoothdev35.github.io/trailer-vids/SPFFH-1.mp4",
      "https://smoothdev35.github.io/trailer-vids/SPFFH-2.mp4"
    ],
    [
      "https://smoothdev35.github.io/trailer-vids/AVGEG-1.mp4",
      "https://smoothdev35.github.io/trailer-vids/AVGEG-2.mp4"
    ],
    [
      "https://smoothdev35.github.io/trailer-vids/JK-1.mp4",
      "https://smoothdev35.github.io/trailer-vids/JK-2.mp4"
    ],
    [
      "https://smoothdev35.github.io/trailer-vids/CPM-1.mp4",
      "https://smoothdev35.github.io/trailer-vids/CPM-2.mp4"
    ],
    [
      "https://smoothdev35.github.io/trailer-vids/SWTROS-1.mp4",
      "https://smoothdev35.github.io/trailer-vids/SWTROS-2.mp4"
    ]
  ]
};

//Clock object to handle display of time.
const dynamicClock = {
  wrap: document.querySelector("#clock"),
  parseTime: function () {
    const baseDate = new Date();
    const baseHours = baseDate.getHours();
    const baseMins = baseDate.getMinutes();
    let cleanHours, cleanMins;
    let hourArr = baseHours.toString().split("");
    let minArr = baseMins.toString().split("");
    hourArr.length < 2
      ? (hourArr.unshift("0"), (cleanHours = hourArr.join("")))
      : (cleanHours = baseHours);
    minArr.length < 2
      ? (minArr.unshift("0"), (cleanMins = minArr.join("")))
      : (cleanMins = baseMins);
    this.wrap.innerText = `${cleanHours}:${cleanMins}`;
  },
  init: function () {
    this.parseTime();
    //Parse time every second to update.
    setInterval(() => {
      this.parseTime();
    }, 1000);
  }
};

//Navigation object to handle 'higher' footer navigation.
const footerNav = {
  block: document.querySelector("footer"),
  wrap: document.querySelector("footer nav ul"),
  links: Array.from(document.querySelectorAll("footer nav ul li a")),
  activateLink: function (pos) {
    this.links.forEach((item, i) => {
      i !== pos
        ? item.classList.remove("active")
        : item.classList.add("active");
    });
  },
  init: function () {
    //Default active item is the first.
    this.activateLink(0);
    document.addEventListener("click", (e) => {
      if (e.target.matches("footer nav ul li a")) {
        let index = this.links.indexOf(e.target);
        switch (index) {
          case 0:
            this.activateLink(0);
            break;
          case 1:
            this.activateLink(1);
            break;
          case 2:
            this.activateLink(2);
            break;
          case 3:
            this.activateLink(3);
            break;
        }
      }
    });
  }
};

//Main UI controller object to handle dynamic scrolling, animation to detailed  and trailer views and data injection.
const dynamicScroll = {
  cssBody: document.body.style,
  fixedLayer: document.querySelector("#fixed-layer"),
  dataList: document.querySelector("#movies"),
  searchField: document.querySelector("#searchbar > input"),
  searchButton: document.querySelector("#search-icon"),
  scroller: document.querySelector("#card-gallery"),
  bigInfo: document.querySelector(".big-movie-info"),
  movieCopy: document.querySelector("#movie-copy p"),
  backArrow: document.querySelector("#fixed-layer > .back-arrow"),
  cards: Array.from(document.querySelectorAll(".movie-card")),
  posters: Array.from(document.querySelectorAll(".movie-card .poster")),
  links: Array.from(document.querySelectorAll(".movie-card a")),
  infos: Array.from(document.querySelectorAll(".movie-info")),
  midNavLinks: Array.from(document.querySelectorAll("#mid-nav a")),
  castItems: Array.from(document.querySelectorAll(".reel.cast .item")),
  trailerItems: Array.from(document.querySelectorAll(".reel.trailer .item")),
  activeIndex: null,
  trailerIndex: null,
  labels: ["start", "two", "three", "four", "five", "end"],
  //Create and pause the timeline for movie cards animation.
  scrollTl: gsap
    .timeline({
      defaults: {
        ease: "none"
      }
    })
    .pause(),
  //Shorthand function to scroll to a specific movie-card.
  scrollFunc: function (pos, off, dur) {
    gsap.to("#card-gallery", {
      scrollTo: {
        x: pos,
        offsetX: off
      },
      ease: "none",
      duration: dur
    });
  },
  //Shorthand function to fade out irrelevant elements during fade transitions. Uses css custom properties.
  fadeAll: function (prop, val) {
    this.cssBody.setProperty(prop, val);
  },
  //Shorthand function to scroll to the selected movie with the search input.
  inputNav: function (tar) {
    let target = tar;
    //Index of active movie card.
    let activeIndex = this.cards.indexOf(
      document.querySelector(".movie-card.active")
    );
    //Index of the selected movie card
    let movieIndex = movieData.titles.indexOf(target);
    let diff;
    if (movieIndex > activeIndex) {
      //Check index difference in forwards direction (right scrolling).
      diff = movieIndex - activeIndex;
      //Adapt scrolling speed and offset to navigate between one or several movie cards.
      switch (diff) {
        case 1:
          movieIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 0, 0.16)
            : this.scrollFunc(this.cards[movieIndex], 54, 0.2);
          break;
        case 2:
          movieIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 0, 0.36)
            : this.scrollFunc(this.cards[movieIndex], 72, 0.4);
          break;
        case 3:
          movieIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 0, 0.56)
            : this.scrollFunc(this.cards[movieIndex], 90, 0.6);
          break;
        case 4:
          movieIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 0, 0.76)
            : this.scrollFunc(this.cards[movieIndex], 108, 0.8);
          break;
        case 5:
          movieIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 0, 0.96)
            : this.scrollFunc(this.cards[movieIndex], 126, 1);
          break;
      }
    } else if (movieIndex < activeIndex) {
      //Check index difference in backwards direction (left scrolling).
      diff = activeIndex - movieIndex;
      //Adapt scrolling speed and offset to navigate between one or several movie cards.
      switch (diff) {
        case 1:
          activeIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 18, 0.16)
            : this.scrollFunc(this.cards[movieIndex], 16, 0.2);
          break;
        case 2:
          activeIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], 0, 0.36)
            : this.scrollFunc(this.cards[movieIndex], -2, 0.4);
          break;
        case 3:
          activeIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], -18, 0.56)
            : this.scrollFunc(this.cards[movieIndex], -20, 0.6);
          break;
        case 4:
          activeIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], -36, 0.76)
            : this.scrollFunc(this.cards[movieIndex], -38, 0.8);
          break;
        case 5:
          activeIndex === this.cards.length - 1
            ? this.scrollFunc(this.cards[movieIndex], -54, 0.96)
            : this.scrollFunc(this.cards[movieIndex], -56, 1);
          break;
      }
    }
  },
  //Add non-click event listeners (and styling) specific to the input search (focus, enter key) to call the input shorthand function to scroll to the selected movie.
  inputFunc: function () {
    this.searchField.addEventListener("focus", () => {
      gsap.set("#searchbar", { boxShadow: "0 0 0 1px var(--brand-c)" });
    });
    this.searchField.addEventListener("blur", () => {
      gsap.set("#searchbar", { boxShadow: "" });
    });

    this.searchField.addEventListener("keydown", (e) => {
      if (e.keyCode === 13) {
        let target = this.searchField.value;
        this.inputNav(target);
      }
    });
  },
  //Shorthand function to populate the scroll timeline.
  passCardTween: function (el, el2, el3, el4, label, duration) {
    this.scrollTl
      .addLabel(label)
      .to(el, {
        scale: 0.85,
        duration: duration
      })
      .to(
        el2,
        {
          scale: 1,
          duration: duration
        },
        `>-${duration}`
      )
      .to(el3, { opacity: 0, duration: duration }, `>-${duration}`)
      .to(el4, { opacity: 1, duration: duration }, `>-${duration}`);
  },
  //Shorthand function to navigate to a tab/section in the middle navigation (showtimes / details).
  dualTween: function (tl, off, off2, off3) {
    tl.to("#nav-layer", { x: off })
      .to(
        "#text-bg",
        {
          attr: {
            x: off2
          }
        },
        ">-.3"
      )
      .to(".dual-screen", { x: off3 }, ">-.3");
  },
  //Function to navigate to chosen tab in the middle navigation.
  toggleMidNav: function (pos) {
    let tl = gsap.timeline({
      defaults: {
        ease: "Power3.in",
        duration: 0.3
      }
    });

    pos === 0
      ? this.dualTween(tl, "0%", "0%", "-100%")
      : this.dualTween(tl, "105%", "50%", "0%");
  },
  loadTrailers: function (el, pos) {
    let trailer = `<video src=${
      movieData.trailArr[this.activeIndex][pos]
    } controls></video>`;
    el.insertAdjacentHTML("beforeend", trailer);
  },
  //Function to populate elements visible after selecting an active movie card. Uses the index of the active card to select relevant data to display.
  fetchInfo: function (pos) {
    const setInnerText = (el, arr, pos) => {
      el.innerText = arr[pos];
    };
    const resizeShot = (el, size, pos) => {
      gsap.set(el, {
        backgroundSize: size,
        backgroundPosition: pos
      });
    };
    setInnerText(this.bigInfo.querySelector(".grade"), movieData.gradeArr, pos);
    setInnerText(
      this.bigInfo.querySelector(".movie-title"),
      movieData.titles,
      pos
    );
    setInnerText(this.bigInfo.querySelector(".tags"), movieData.tagArr, pos);
    setInnerText(
      this.bigInfo.querySelector(".info-last"),
      movieData.secInfos,
      pos
    );
    setInnerText(this.movieCopy, movieData.synopses, pos);

    this.castItems.forEach((item, i) => {
      gsap.set(item.querySelector(".shot"), {
        backgroundImage: `url(${movieData.castArr[this.activeIndex][i].src})`
      });

      item.querySelector("h5").innerText =
        movieData.castArr[this.activeIndex][i].name;
      item.querySelector("p").innerText =
        movieData.castArr[this.activeIndex][i].role;

      //Resize and position actor thumbnails in the cast section.
      switch (this.activeIndex) {
        case 0:
          i === 2
            ? resizeShot(item.querySelector(".shot"), "125%", "75% 0")
            : i === 3
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 20%")
            : i === 4
            ? resizeShot(item.querySelector(".shot"), "195%", "40% 5%")
            : null;
          break;
        case 1:
          i === 0
            ? resizeShot(item.querySelector(".shot"), "120%", "50% 22.5%")
            : i === 1
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 25%")
            : i === 2
            ? resizeShot(item.querySelector(".shot"), "120%", "60% 15%")
            : i === 3
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 20%")
            : i === 4
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 15%")
            : null;
          break;
        case 2:
          i === 0
            ? resizeShot(item.querySelector(".shot"), "125%", "40% 7.5%")
            : i === 1
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 25%")
            : i === 2
            ? resizeShot(item.querySelector(".shot"), "cover", "60% 40%")
            : i === 3
            ? resizeShot(item.querySelector(".shot"), "150%", "64% 10%")
            : i === 4
            ? resizeShot(item.querySelector(".shot"), "110%", "40% 15%")
            : null;
          break;
        case 3:
          i === 0
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 30%")
            : i === 1
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 25%")
            : i === 2
            ? resizeShot(item.querySelector(".shot"), "375%", "48% 12.5%")
            : i === 3
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 10%")
            : i === 4
            ? resizeShot(item.querySelector(".shot"), "110%", "100% 7.5%")
            : null;
          break;
        case 4:
          i === 0
            ? resizeShot(item.querySelector(".shot"), "150%", "60% 17.5%")
            : i === 1
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 25%")
            : i === 2
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 5%")
            : i === 3
            ? resizeShot(item.querySelector(".shot"), "120%", "90% 17.5%")
            : i === 4
            ? resizeShot(item.querySelector(".shot"), "110%", "0 7.5%")
            : null;
          break;
        case 5:
          i === 0
            ? resizeShot(item.querySelector(".shot"), "350%", "7.5%  0")
            : i === 1
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 10%")
            : i === 2
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 5%")
            : i === 3
            ? resizeShot(item.querySelector(".shot"), "150%", "50% 25%")
            : i === 4
            ? resizeShot(item.querySelector(".shot"), "cover", "50% 20%")
            : null;
          break;
      }
    });

    this.trailerItems.forEach((item, i) => {
      gsap.set(item.children[0], {
        backgroundImage: `url(${movieData.trailPics[this.activeIndex][i]})`
      });
    });
  },
  switchOp: function (el, val) {
    gsap.set(el, { opacity: val });
  },
  fadeEl: function (el, val, dur) {
    gsap.to(el, { opacity: val, duration: dur, ease: "none" });
  },
  //Function to execute shared element transition to the vertical section with movie details.
  flipCard: function (el, el2, pos) {
    //Parse data with the active index and display relevant information inside the hidden elements.
    this.fetchInfo(pos);

    //Set the hidden big movie picture right on top of the active movie card.
    Flip.fit(".big-poster", el, {
      absolute: true,
      props: "borderRadius,boxShadow"
    });
    //Set the hidden primary info right on top of the equivalent element from the active card.
    Flip.fit(".big-movie-info", el2, { absolute: true });

    //Hide original elements and show entering elements to see the transition to the next view (big).
    this.cards.forEach((card, i) => {
      i === pos ? this.switchOp(card, 0) : this.fadeEl(card, 0, 0.2);
    });
    this.fadeAll("--layer-zero-opacity", "0");
    this.fadeAll("--layer-one-opacity", "1");

    //Get states from both hidden elements.
    let bigState = Flip.getState(".big-poster", {
      props: "borderRadius,boxShadow",
      absolute: true
    });
    let infoState = Flip.getState(".big-movie-info", {
      absolute: true
    });
    //Set the hidden elements back to their original state(bigger).
    gsap.set(".big-poster", { clearProps: true });
    gsap.set(".big-movie-info", { clearProps: true });
    //Show previously hidden big picture and set relevant background image with the active index.
    gsap.set(".big-poster", {
      backgroundImage: `url(${movieData.pictures[pos]})`
    });
    //Animate now visible elements from 'small' state to 'big' state.
    Flip.from(bigState, {
      duration: 0.4,
      ease: "power3.in",
      absolute: true,
      onComplete: () => {
        //Enable vertical scrolling.
        //gsap.set("#screen", { overflowY: "scroll" });
        //Enable pointer.
        gsap.set("#screen > #first-layer", { pointerEvents: "all" });
        //Show close button to go back to the gallery view.
        this.fadeEl(".close-card svg", 1, 0.1);
      }
    });

    Flip.from(infoState, {
      duration: 0.4,
      absolute: true,
      ease: "power3.in"
    });
    //Reveal last line of primary info.
    setTimeout(() => {
      this.fadeEl(".info-last", 1, 0.1);
    }, 0.2);
  },
  flipBack: function () {
    //Reverse order of operations to apply the FLIP technique to go back to the first view.
    this.fadeEl(".close-card svg", 0, 0.1);

    let picState = Flip.getState(".big-poster", {
      absolute: true,
      props: "borderRadius,boxShadow"
    });

    let subState = Flip.getState(".big-movie-info", { absolute: true });

    setTimeout(() => {
      Flip.fit(".big-poster", this.posters[this.activeIndex], {
        absolute: true,
        props: "borderRadius,boxShadow"
      });
      Flip.fit(".big-movie-info", this.infos[this.activeIndex], {
        absolute: true
      });

      Flip.from(picState, {
        duration: 0.4,
        ease: "power3.in",
        absolute: true,
        onComplete: () => {
          //Hide previous (big) elements (poster,info and bottom content) and show original elements.
          this.cards.forEach((card, i) => {
            i === this.activeIndex
              ? this.switchOp(card, 1)
              : this.fadeEl(card, 1, 0.2);
          });
          this.switchOp(".big-poster", 0);
          this.switchOp(".big-movie-info", 0);
          this.fadeAll("--layer-zero-opacity", "1");
          this.fadeAll("--layer-one-opacity", "0");
          //Disable pointer events.
          gsap.set("#screen > #first-layer", { pointerEvents: "none" });
          //Reset scroll position of cast and trailer galleries.
          gsap.to(".dual-screen.left .reel", 0, {
            scrollTo: {
              x: 0
            }
          });
        }
      });
      Flip.from(subState, {
        duration: 0.4,
        ease: "power3.in"
      });
      //Hide last line of primary info.
      setTimeout(() => {
        this.fadeEl(".info-last", 0, 0.1);
      }, 200);
    }, 100);
  },
  //Expand trailer thumbnail to full-screen loaded video on click
  expandTrailer: function (el, pos) {
    let thumbState = Flip.getState(el, {
      absolute: true,
      props: "backgroundImage, borderRadius"
    });

    el.classList.toggle("open");

    setTimeout(() => {
      document.querySelector("#fixed-layer").appendChild(el);
      this.fadeEl(".big-poster", 0, 0.2);
      this.fadeEl(".big-movie-info", 0, 0.2);
      this.fadeEl("#mid-nav", 0, 0.2);
      this.fadeEl("#movie-copy", 0, 0.2);
      this.fadeEl("#cast-wrap", 0, 0.2);
      this.fadeEl("#trailer-wrap > h4", 0, 0.2);
      this.trailerItems.forEach((item, i) => {
        if (i !== pos) {
          this.fadeEl(item, 0, 0.2);
        }
      });
      this.fadeAll("--layer-two-opacity", 1);
      gsap.set(el, {
        width: "100%",
        height: "100%",
        position: "absolute",
        backgroundImage: `url(${movieData.trailPics[this.activeIndex][pos]})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        borderRadius: "25px"
      });

      Flip.from(thumbState, {
        duration: 0.4,
        ease: "power3.in",
        absolute: true,
        onComplete: () => {
          el.classList.toggle("active");
          gsap.set("#fixed-layer", {
            pointerEvents: "all"
          });

          setTimeout(() => {
            let videoClip = `<video disablePictureInPicture controls controlslist='nodownload nofullscreen' src=${
              movieData.trailArr[this.activeIndex][pos]
            } type='video/mp4'></video>`;
            el.insertAdjacentHTML("beforeend", videoClip);
            setTimeout(() => {
              el.classList.toggle("active");
              gsap.to(this.backArrow, {
                opacity: 1,
                x: "0",
                duration: 0.2,
                ease: "none"
              });
            }, 30);
          }, 150);
        }
      });
    }, 100);
  },
  closeTrailer: function (el, pos) {
    //Reverse and adjust FLIP animation back to first thumbnail view.
    const clip = this.fixedLayer.querySelector(".video-thumb");
    const vid = this.fixedLayer.querySelector("video");
    let target = this.trailerItems[pos];
    let clipState = Flip.getState(clip, { absolute: true });

    gsap.to(this.backArrow, {
      opacity: 0,
      x: "-10%",
      duration: 0.2,
      ease: "none"
    });
    clip.classList.toggle("active");

    setTimeout(() => {
      clip.removeChild(vid);
      clip.classList.toggle("active");

      setTimeout(() => {
        Flip.fit(clip, target, {
          absolute: true,
          props: "borderRadius"
        });

        Flip.from(clipState, {
          duration: 0.4,
          ease: "Power3.in",
          absolute: true,
          onComplete: () => {
            this.fadeEl(".big-poster", 1, 0.2);
            this.fadeEl(".big-movie-info", 1, 0.2);
            this.fadeEl("#mid-nav", 1, 0.2);
            this.fadeEl("#movie-copy", 1, 0.2);
            this.fadeEl("#cast-wrap", 1, 0.2);
            this.fadeEl("#trailer-wrap > h4", 1, 0.2);
            this.trailerItems.forEach((item, i) => {
              if (i !== pos) {
                this.fadeEl(item, 1, 0.2);
              }
            });
            this.fadeAll("--layer-two-opacity", 0);
            gsap.set("#fixed-layer", {
              pointerEvents: "none"
            });
            target.appendChild(clip);
            gsap.set(clip, { clearProps: true });
            gsap.set(clip, {
              backgroundImage: `url(${
                movieData.trailPics[this.activeIndex][pos]
              })`
            });

            target.querySelector(".video-thumb").classList.toggle("open");
          }
        });
      }, 150);
    }, 200);
  },
  //Handle all click interactions.
  handleClicks: function () {
    document.addEventListener(
      "click",
      (e) => {
        //Handles click of search input button.
        if (e.target.matches("#search-icon")) {
          let target = this.searchField.value;
          this.inputNav(target);
        }
        //Handles click of close button (detailed view).
        else if (e.target.matches(".close-card")) {
          if (document.querySelector("#first-layer").scrollTop !== 0) {
            gsap.to("#first-layer", 0.2, {
              scrollTo: {
                y: 0
              },
              onComplete: () => {
                dynamicScroll.flipBack();
              }
            });
          } else {
            dynamicScroll.flipBack();
          }
        }
        //Handles click on middle navigation tab buttons.
        else if (e.target.matches("#mid-nav a")) {
          let index = this.midNavLinks.indexOf(e.target);
          this.toggleMidNav(index);
        }
        //Handles click on movie cards (links).
        else if (e.target.matches(".movie-card a")) {
          //Disable hash redirection.
          e.preventDefault();
          //Get index of active movie card inside its respective array.
          let activeIndex = this.cards.indexOf(
            document.querySelector(".movie-card.active")
          );
          //Get index of selected movie card.
          let currentIndex = this.links.indexOf(e.target);
          //Handle forward navigation between movie cards (only one card every time).
          if (currentIndex > activeIndex) {
            currentIndex === this.cards.length - 1
              ? this.scrollFunc(this.cards[currentIndex], 0, 0.16)
              : this.scrollFunc(this.cards[currentIndex], 54, 0.2);
          } else if (currentIndex < activeIndex) {
            this.scrollFunc(this.cards[currentIndex], 18, 0.2);
          }
          //Handle click on active movie card.
          else if (currentIndex === activeIndex) {
            this.activeIndex = activeIndex;
            this.flipCard(
              this.posters[activeIndex],
              this.infos[activeIndex],
              activeIndex
            );
          }
        } else if (e.target.matches(".video-thumb")) {
          this.trailerIndex = this.trailerItems.indexOf(e.target.parentElement);
          this.expandTrailer(e.target, this.trailerIndex);
        } else if (e.target.matches("#fixed-layer .back-arrow")) {
          this.closeTrailer(e.target, this.trailerIndex);
        }
      },
      false
    );
  },

  init: function () {
    const setInnerText = (els, arr) => {
      document.querySelectorAll(els).forEach((item, i) => {
        item.innerText = `${arr[i]}`;
      });
    };

    //Populate datalist for the search input suggestion with movie titles from our data.
    movieData.titles.forEach((title, i) => {
      let option = `<option value="${title}">${title}</option>`;
      this.dataList.insertAdjacentHTML("beforeend", option);
    });

    //Scale up the first movie card and hide all primary infos but the one of the active first card.

    gsap.set(".movie-card", { scale: 0.85 });
    gsap.set(".movie-card.one", { scale: 1 });
    gsap.set(".movie-info", { opacity: 0 });
    gsap.set(".movie-card.one .movie-info", { opacity: 1 });

    //Set primary data elements (pictures, text)

    document.querySelectorAll(".poster").forEach((item, i) => {
      gsap.set(item, { backgroundImage: `url(${movieData.pictures[i]})` });
    });

    setInnerText(".movie-card .grade", movieData.gradeArr);
    setInnerText(".movie-card .movie-title", movieData.titles);
    setInnerText(".movie-card .tags", movieData.tagArr);

    gsap.set(this.backArrow, {
      opacity: 0,
      x: "-10%",
      rotate: 180
    });

    //Populate scroll timeline wih the movie cards animation.

    for (let i = 0; i < this.cards.length - 1; i++) {
      if (i !== this.cards.length - 2) {
        this.passCardTween(
          this.cards[i],
          this.cards[i + 1],
          this.infos[i],
          this.infos[i + 1],
          this.labels[i],
          0.85
        );
      } else if (i === 0) {
        this.passCardTween(
          this.cards[i],
          this.cards[i + 1],
          this.infos[i],
          this.infos[i + 1],
          this.labels[i],
          0.85
        );
      } else if (i === 3) {
        this.passCardTween(
          this.cards[i],
          this.cards[i + 1],
          this.infos[i],
          this.infos[i + 1],
          this.labels[i],
          0.875
        );
      } else {
        this.passCardTween(
          this.cards[i],
          this.cards[i + 1],
          this.infos[i],
          this.infos[i + 1],
          this.labels[i],
          0.775
        );
        this.scrollTl.addLabel("end");
      }
    }

    //Create trigger to link the scroll timeline directly to the scrollbar (scrub).
    const trigger = ScrollTrigger.create({
      horizontal: true,
      scroller: this.scroller,
      animation: this.scrollTl,
      scrub: true,
      start: 0,
      end: () => `+=${ScrollTrigger.maxScroll(this.scroller, true)}`,
      snap: {
        snapTo: "labels",
        duration: 0.2
      }
    });
    //Handles synchronisation of scrolling animation on resize.
    let progress = 0;
    ScrollTrigger.addEventListener(
      "refreshInit",
      () => (progress = trigger.progress)
    );
    ScrollTrigger.addEventListener("refresh", () => {
      trigger.scroll(progress * ScrollTrigger.maxScroll(this.scroller, true));
    });

    //Create a trigger for every movie card to handle active state.
    this.cards.forEach((card, i) => {
      let st = ScrollTrigger.create({
        horizontal: true,
        scroller: "#card-gallery",
        start: "0 80%",
        end: "0 0",
        trigger: card,
        toggleClass: "active"
      });
    });
    //Set middle tab navigation to the second option (details).
    gsap.set("#nav-layer", { x: "105%" });

    //Call event handler functions.
    this.inputFunc();
    this.handleClicks();
  }
};

//Initiate clock, bottom navigation and scroll animation.
dynamicClock.init();
footerNav.init();
dynamicScroll.init();

              
            
!
999px

Console