<main>
  <article>
    <div class="elevator__wrapper">
      <div class="elevator__container" data-elevator-open="false">
        <div class="elevator__call-button"></div>
        <div class="elevator__up-button"></div>
        <div class="elevator__down-button"></div><svg class='elevator' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.95 46.33">
  <g transform="translate(-24.19 -107.24)">
    <defs>
      <clipPath id='doors'>
        <rect y="121.28" x="35.57" height="32.28" width="32.81"/>
      </clipPath>
      <clipPath id='cursor'>
        <rect y="121.28" x="35.57" height="32.28" width="38.81"/>
      </clipPath>
      <clipPath id='glass'>
        <rect y="121.28" x="35.57" height="19" width="32.81"/>
      </clipPath>
    </defs>
    <!-- <rect y="116.52" x="30.81" height="37.04" width="42.33"/> -->
    <path class='elevator__frame' d="M30.8 116.5v37.06h4.77v-32.28h32.8v32.29h4.77V116.5H35.57v-.01z"/>
    <g class='elevator__dial'>
      <path class='elevator__dial-face' d="M51.97 107.24a6.61 6.61 0 00-6.61 6.61h13.23a6.61 6.61 0 00-6.62-6.61z"/>
      <rect class='elevator__dial-dial' ry=".31" y="108.62" x="51.64" height="4.5" width=".66"/>
    </g>
    <g class='elevator__panel'>
      <rect class='elevator__plate' y="138.6" x="24.19" height="5.29" width="3.97" />
      <path class='elevator__call' d="M26.17 143.31l-1.32-1.59h2.65l-1.33 1.59z" />
      <path class='elevator__call' d="M26.17 139.18l1.33 1.58h-2.65l1.32-1.58z" />
    </g>
    <g class='elevator__opening'>
      <rect class='elevator__back' y="142.97" x="35.57" height="10.58" width="32.81"/>
      <rect class='elevator__bar' y="138.31" x="35.57" height="5.72" width="32.81"/>
      <rect class='elevator__glass' y="121.28" x="35.57" height="19" width="32.81"/>
      <path class='elevator__up' d="M49.33 141.52l1.32 1.6H48l1.33-1.6z" />
      <path class='elevator__down' d="M54.62 143.11l-1.33-1.59h2.65l-1.32 1.6z"/>
      <g clip-path="url(#glass)">
        <path class='elevator__cursor-reflection' d="M53.37 133.17a.53.53 0 01.7.26l1.21 2.63.95-.45-1.21-2.62a.52.52 0 01.25-.7l.15-.05 1.2-.24-4.34-3.65v5.68l.96-.77.13-.09m1.88 4.07a.52.52 0 01-.7-.25l-1.15-2.5-1.32 1.06a.5.5 0 01-.33.12.53.53 0 01-.53-.53v-7.9a.53.53 0 01.53-.54c.13 0 .25.05.34.13l6.06 5.07a.53.53 0 01-.23.93l-1.67.32 1.16 2.5c.14.26.02.57-.25.7z"/>
      </g>
      <path class='elevator__glass-shine' d="M39.45 121.28l-3.88 3.88v11.38l15.25-15.26z" />
      <path class='elevator__glass-shine' d="M54.57 121.28l-19 19h5.82l19-19z" />
      <g clip-path="url(#cursor)">
        <path class='elevator__cursor' d="M49.46 141.44a.53.53 0 01.7.25l1.21 2.63.95-.44-1.22-2.63a.52.52 0 01.26-.7l.14-.04 1.22-.24-4.35-3.66v5.69l.96-.78.13-.08m1.88 4.06a.52.52 0 01-.7-.25l-1.15-2.5-1.32 1.07a.5.5 0 01-.33.11.53.53 0 01-.53-.52v-7.91a.53.53 0 01.53-.53c.13 0 .25.05.34.12l6.06 5.08a.53.53 0 01-.23.92l-1.67.33 1.16 2.5c.14.26.01.57-.25.69z"/>
      </g>
      <g clip-path="url(#doors)">
        <g class='elevator__door elevator__door--left' transform="translate(-52.65 -7.63)">
          <rect class='elevator__door-body' width="16.4" height="32.28" x="88.22" y="128.91" />
          <path class='elevator__door-shine' d="M98.15 128.9l-9.93 9.93v9.64l16.4-16.4v-3.16z" />
          <path class='elevator__door-shine' d="M104.62 135.8l-16.4 16.41v4.35l16.4-16.4z" />
        </g>
        <g class='elevator__door elevator__door--right' transform="translate(-52.65 -7.63)">
          <rect class='elevator__door-body' y="128.91" x="104.62" height="32.28" width="16.4" />
          <path class='elevator__door-shine' d="M111.53 128.9l-6.9 6.9v4.36l10.93-10.94-.32-.31z" />
          <path class='elevator__door-shine' d="M104.62 128.9v3.17l3.17-3.16z"/>
        </g>
      </g>
    </g>
  </g>
</svg>

      </div>
    </div>
    <h1 id="home"><span>Awesome Inc.</span>Privacy Policy</h1>
    <p>At Website Name, accessible at Website.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Website Name and how we use it.</p>
    <p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us through email at Email@Website.com</p>
    <p>This privacy policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in Website Name. This policy is not applicable to any information collected offline or via channels other than this website.</p>
    <p><strong>Consent</strong></p>
    <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms.</p>
    <p><strong>Information we collect</strong></p>
    <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
    <p>If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
    <p>When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.</p>
    <p><strong>How we use your information</strong></p>
    <p>We use the information we collect in various ways, including to:</p>
    <ul>
      <li>Provide, operate, and maintain our webste</li>
      <li>Improve, personalize, and expand our webste</li>
      <li>Understand and analyze how you use our webste</li>
      <li>Develop new products, services, features, and functionality</li>
      <li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
      <li>Send you emails</li>
      <li>Find and prevent fraud</li>
    </ul>
    <p><strong>Log Files</strong></p>
    <p><span>Website Name</span> follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services&apos; analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users&apos; movement on the website, and gathering demographic information.</p>
    <h3>Cookies and Web Beacons</h3>
    <p>Like any other website,<span>Website Name</span> uses &lsquo;cookies&apos;. These cookies are used to store information including visitors&apos; preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users&apos; experience by customizing our web page content based on visitors&apos; browser type and/or other information.</p>
    <h3>DoubleClick DART Cookie</h3>
    <p>Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL &ndash;</p>
    <p>Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.</p>
    <ul>
      <li>
        <p>Google</p>
      </li>
    </ul>
    <p><strong>Advertising Partners Privacy Policies</strong></p>
    <p>You may consult this list to find the Privacy Policy for each of the advertising partners of<span>Website Name</span>.</p>
    <p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on<span>Website Name</span>, which are sent directly to users&apos; browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
    <p>Note that<span>Website Name</span> has no access to or control over these cookies that are used by third-party advertisers.</p>
    <p><strong>Third-Party Privacy Policies</strong></p>
    <p><span>Website Name</span>&apos;s Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options. You may find a complete list of these Privacy Policies and their links here: Privacy Policy Links.</p>
    <p>You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers&apos; respective websites. What Are Cookies?</p>
    <p><strong>CCPA Privacy Policy (Do Not Sell My Personal Information)</strong></p>
    <p>Under the CCPA, among other rights, California consumers have the right to:</p>
    <p>Request that a business that collects a consumer&apos;s personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.</p>
    <p>Request that a business delete any personal data about the consumer that a business has collected.</p>
    <p>Request that a business that sells a consumer&apos;s personal data, not sell the consumer&apos;s personal data.</p>
    <p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
    <p><strong>GDPR Privacy Policy (Data Protection Rights)</strong></p>
    <p>We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:</p>
    <p>The right to access &ndash; You have the right to request copies of your personal data. We may charge you a small fee for this service.</p>
    <p>The right to rectification &ndash; You have the right to request that we correct any information you believe is inaccurate. You also have the right to request that we complete the information you believe is incomplete.</p>
    <p>The right to erasure &ndash; You have the right to request that we erase your personal data, under certain conditions.</p>
    <p>The right to restrict processing &ndash; You have the right to request that we restrict the processing of your personal data, under certain conditions.</p>
    <p>The right to object to processing &ndash; You have the right to object to our processing of your personal data, under certain conditions.</p>
    <p>The right to data portability &ndash; You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.</p>
    <p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
    <p><strong>Children&apos;s Information</strong></p>
    <p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
    <p><span>Website Name</span> does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
    <p>At Website Name, accessible at Website.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Website Name and how we use it.</p>
    <p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us through email at Email@Website.com</p>
    <p>This privacy policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in Website Name. This policy is not applicable to any information collected offline or via channels other than this website.</p>
    <p><strong>Consent</strong></p>
    <p>By using our website, you hereby consent to our Privacy Policy and agree to its terms.</p>
    <p><strong>Information we collect</strong></p>
    <p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
    <p>If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
    <p>When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.</p>
    <p><strong>How we use your information</strong></p>
    <p>We use the information we collect in various ways, including to:</p>
    <ul>
      <li>Provide, operate, and maintain our webste</li>
      <li>Improve, personalize, and expand our webste</li>
      <li>Understand and analyze how you use our webste</li>
      <li>Develop new products, services, features, and functionality</li>
      <li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
      <li>Send you emails</li>
      <li>Find and prevent fraud</li>
    </ul>
    <p><strong>Log Files</strong></p>
    <p><span>Website Name</span> follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services&apos; analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users&apos; movement on the website, and gathering demographic information.</p>
    <h3>Cookies and Web Beacons</h3>
    <p>Like any other website,<span>Website Name</span> uses &lsquo;cookies&apos;. These cookies are used to store information including visitors&apos; preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users&apos; experience by customizing our web page content based on visitors&apos; browser type and/or other information.</p>
    <h3>DoubleClick DART Cookie</h3>
    <p>Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL &ndash;</p>
    <p>Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.</p>
    <ul>
      <li>
        <p>Google</p>
      </li>
    </ul>
    <p><strong>Advertising Partners Privacy Policies</strong></p>
    <p>You may consult this list to find the Privacy Policy for each of the advertising partners of<span>Website Name</span>.</p>
    <p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on<span>Website Name</span>, which are sent directly to users&apos; browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
    <p>Note that<span>Website Name</span> has no access to or control over these cookies that are used by third-party advertisers.</p>
    <p><strong>Third-Party Privacy Policies</strong></p>
    <p><span>Website Name</span>&apos;s Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options. You may find a complete list of these Privacy Policies and their links here: Privacy Policy Links.</p>
    <p>You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers&apos; respective websites. What Are Cookies?</p>
    <p><strong>CCPA Privacy Policy (Do Not Sell My Personal Information)</strong></p>
    <p>Under the CCPA, among other rights, California consumers have the right to:</p>
    <p>Request that a business that collects a consumer&apos;s personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.</p>
    <p>Request that a business delete any personal data about the consumer that a business has collected.</p>
    <p>Request that a business that sells a consumer&apos;s personal data, not sell the consumer&apos;s personal data.</p>
    <p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
    <p><strong>GDPR Privacy Policy (Data Protection Rights)</strong></p>
    <p>We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:</p>
    <p>The right to access &ndash; You have the right to request copies of your personal data. We may charge you a small fee for this service.</p>
    <p>The right to rectification &ndash; You have the right to request that we correct any information you believe is inaccurate. You also have the right to request that we complete the information you believe is incomplete.</p>
    <p>The right to erasure &ndash; You have the right to request that we erase your personal data, under certain conditions.</p>
    <p>The right to restrict processing &ndash; You have the right to request that we restrict the processing of your personal data, under certain conditions.</p>
    <p>The right to object to processing &ndash; You have the right to object to our processing of your personal data, under certain conditions.</p>
    <p>The right to data portability &ndash; You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.</p>
    <p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
    <p><strong>Children&apos;s Information</strong></p>
    <p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
    <p><span>Website Name</span> does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
    <footer>
      <button class="agree">Agree</button>
    </footer>
  </article>
</main>

:root
  --cursor url('https://assets.codepen.io/605876/default-cursor.png?width=20&height=30'), pointer
  --frame hsl(30, 35%, 48%)
  --shine hsla(0, 0%, 100%, 0.5)
  --button hsl(0, 0%, 13%)
  --active hsl(42, 90%, 85%)
  --bar hsl(0, 0%, 70%)
  --back hsl(0, 0%, 44%)
  --door hsl(0, 0%, 48%)
  --face hsl(0, 0%, 65%)
  --glass hsl(180, 60%, 90%)
  --dial hsl(0, 0%, 13%)
*
  cursor var(--cursor) !important
  box-sizing border-box

body
  height 100vh
  font-family sans-serif
  line-height 1.5
  background hsl(0, 0%, 95%)
  color hsl(0, 0%, 20%)
  font-weight 300
  overflow auto
  cursor url('https://assets.codepen.io/605876/default-cursor.png?width=20&height=30'), pointer !important

main
  height 100%
  padding 3rem 0

article
  width 600px
  max-width calc(100% - (140px + 0.5rem))
  padding 0 1rem 0
  overflow hidden
  @media(min-width 992px)
    padding 0
    margin 0 auto

h1 span 
  display block
  text-transform uppercase
  font-variant small-caps
  font-size 1rem
  opacity 0.65
  
h1
  line-height 1
  font-size 3rem
// Original 185 x 175
.elevator
  height 100%

  &__wrapper
    width 896px
    max-width 100%
    position fixed
    top 0
    left 50%
    transform translate(-50%, 0)
    height 100vh
    -webkit-clip-path inset(0 0 0 80%)
    clip-path inset(0 0 0 80%)

  &__door-body
    fill var(--door)

  &__door-shine
    fill var(--shine)

  &__plate
    fill var(--face)

  &__call
  &__up
  &__down
    fill var(--button)

  &__frame
    fill var(--frame)

  &__dial-face
    fill var(--face)
  &__dial-dial
    fill var(--dial)

  &__glass
    fill var(--glass)
  &__glass-shine
    fill var(--shine)

  &__back
    fill var(--back)

  &__bar
    fill var(--bar)

  &__call-button
    left -16px

    &:hover ~ .elevator .elevator__call
      fill var(--active)

  &__cursor
    fill #000
  &__cursor-reflection
    fill hsla(0, 0%, 0%, 0.5)

  &__up-button
  &__down-button
  &__call-button
    top 72px
    position absolute
    height 44px
    width 44px

  &__down-button
    left 78px

    &:hover ~ .elevator .elevator__down
      fill var(--active)

  &__up-button
    left 34px

    &:hover ~ .elevator .elevator__up
      fill var(--active)

  &__container
    position fixed
    right 0
    top 5rem
    height 130px

  .elevator__cursor
  .elevator__cursor-reflection
    display none

[data-elevator-open=true]

  .elevator__opening *
  .elevator__up-button:hover
  .elevator__down-button:hover
    cursor none !important

  .elevator__up-button:hover ~ .elevator .elevator__cursor
  .elevator__up-button:hover ~ .elevator .elevator__cursor-reflection
  .elevator__down-button:hover ~ .elevator .elevator__cursor
  .elevator__down-button:hover ~ .elevator .elevator__cursor-reflection
  .elevator__opening:hover .elevator__cursor
  .elevator__opening:hover .elevator__cursor-reflection
    display block

[data-elevator-elevating=true] *
  cursor none !important

[data-elevator-elevating=true]
  .elevator .elevator__dial-face
    fill var(--active)
  .elevator__call-button:hover ~ .elevator .elevator__call
    fill var(--button)

footer
  height 100vh
  text-align right
  position relative

h1
  font-size 2rem

  @media(min-width 992px)
    font-size 3rem

strong
  font-weight bold
    
.agree
  top 9rem
  right 0
  position absolute
  padding 16px 32px
  background hsl(90, 60%, 50%)
  color hsl(0, 0%, 100%)
  font-weight bold
  transition background .15s ease
  border 0

  &:hover
    background hsl(90, 60%, 40%)

  &:active
    background hsl(90, 60%, 30%)

const {
  gsap: {
    to,
    set,
    timeline,
    registerPlugin,
    delayedCall,
    utils: { mapRange },
  },
  ScrollTrigger,
} = window

registerPlugin(ScrollTrigger)

const ELEVATOR = document.querySelector('.elevator')
const MAIN = document.querySelector('article')
const CONTAINER = document.querySelector('.elevator__container')
const FAKE_CURSOR = document.querySelector('.elevator__cursor')
const CURSOR_REFLECTION = document.querySelector('.elevator__cursor-reflection')
const CALL = document.querySelector('.elevator__call-button')
const UP = document.querySelector('.elevator__up-button')
const DOWN = document.querySelector('.elevator__down-button')

const SOUNDS = {
  DING: new Audio('https://assets.codepen.io/605876/elevator-door-ding.mp3'),
  TUNE: new Audio('https://assets.codepen.io/605876/elevator-theme-tune.mp3'),
}

const TIMEOUT = 10

SOUNDS.TUNE.loop = true

const STATE = {
  OPEN: false,
  DOORS_MOVING: false,
  ELEVATING: false,
}

let closer

set('.elevator__dial-dial', {
  transformOrigin: '50% 100%',
  rotate: 90,
  y: -0.5,
})

to('.elevator__dial-dial', {
  rotate: -90,
  scrollTrigger: {
    scrub: true,
    trigger: 'article',
    start: 'top top',
    end: 'bottom bottom',
  },
})

const doorOpener = () => {
  if (STATE.DOORS_MOVING || STATE.ELEVATING) return
  timeline({
    onStart: () => {
      SOUNDS.DING.play()
      if (closer) closer.kill()
      STATE.DOORS_MOVING = true
    },
    onComplete: () => {
      STATE.OPEN = !STATE.OPEN
      STATE.DOORS_MOVING = false
      CONTAINER.dataset.elevatorOpen = STATE.OPEN
      if (STATE.OPEN) closer = delayedCall(TIMEOUT, doorOpener)
    },
  })
    .to(
      '.elevator__door--left',
      { x: `${STATE.OPEN ? '+' : '-'}=16`, duration: 0.5 },
      0
    )
    .to(
      '.elevator__door--right',
      { x: `${STATE.OPEN ? '-' : '+'}=16`, duration: 0.5 },
      0
    )
}

CALL.addEventListener('click', doorOpener)

// -23 to 23
const updateCursorPos = e => {
  const BOUNDS = ELEVATOR.getBoundingClientRect()
  const x = mapRange(0, 100, -23, 26, ((e.x - BOUNDS.x) / BOUNDS.width) * 100)
  const y = mapRange(0, 100, -28, 18, ((e.y - BOUNDS.y) / BOUNDS.height) * 100)
  set(FAKE_CURSOR, { x, y })
  set(CURSOR_REFLECTION, { x: x + 0.00005, y: y - 0.00005 })
}
ELEVATOR.addEventListener('pointermove', updateCursorPos)
UP.addEventListener('pointermove', updateCursorPos)
DOWN.addEventListener('pointermove', updateCursorPos)

const PPS = 0.0025
const elevate = posFunc => () => {
  const pos = posFunc()
  const distance = Math.abs(pos.y - window.scrollY)
  const duration = PPS * distance
  if (!STATE.OPEN || window.scrollY === pos.y || STATE.ELEVATING) return
  timeline({
    onStart: () => {
      set('#cursor rect', { width: 32.81 })
      if (closer) closer.kill()
      STATE.ELEVATING = true
      document.body.dataset.elevatorElevating = true
      document.documentElement.style.setProperty('--cursor', 'none')
    },
    onComplete: () => {
      STATE.ELEVATING = false
      set('#cursor rect', { width: 38.81 })
      document.body.dataset.elevatorElevating = false
      document.documentElement.style.removeProperty('--cursor')
      closer = delayedCall(TIMEOUT, doorOpener)
    },
  })
    .to('.elevator__door--left', { x: `+=16`, duration: 0.5 }, 0)
    .to('.elevator__door--right', { x: `-=16`, duration: 0.5 }, 0)
    .to(window, {
      onStart: () => SOUNDS.TUNE.play(),
      onComplete: () => {
        SOUNDS.TUNE.pause()
        SOUNDS.DING.play()
      },
      scrollTo: pos,
      duration,
      ease: 'Power3.inOut',
    })
    .to('.elevator__door--left', { x: `-=16` }, duration + 0.5)
    .to('.elevator__door--right', { x: `+=16` }, duration + 0.5)
}
UP.addEventListener(
  'click',
  elevate(() => ({ y: 0 }))
)
DOWN.addEventListener(
  'click',
  elevate(() => ({ y: document.body.scrollHeight - document.body.offsetHeight }))
)