#home {
  margin: 0 auto;
  width: 100%;

  .cover {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    background-color: white;

    &.web {
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: calc(20 / 1920 * 100vw) 0;
        font-family: 'Helvetica Neue';
        font-size: calc(160 / 1920 * 100vw);
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: calc(-6.4 / 1920 * 100vw);

        span {
          -webkit-transition: -webkit-mask-position 1s cubic-bezier(0.6, 0, 0.2, 1);
          transition: -webkit-mask-position 1s cubic-bezier(0.6, 0, 0.2, 1);
          -o-transition: mask-position 1s cubic-bezier(0.6, 0, 0.2, 1);
          transition: mask-position 1s cubic-bezier(0.6, 0, 0.2, 1);
          transition: mask-position 1s cubic-bezier(0.6, 0, 0.2, 1),
            -webkit-mask-position 1s cubic-bezier(0.6, 0, 0.2, 1);
          -webkit-mask-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(33.3%, #fff),
            color-stop(66.6%, rgba(255, 255, 255, 0.1))
          );
          -webkit-mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);
          mask-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(33.3%, #fff),
            color-stop(66.6%, rgba(255, 255, 255, 0.1))
          );
          mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);
          -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
          -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;

          &.on {
            -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
          }

          &.skip,
          &.skip * {
            -webkit-mask-image: none;
            mask-image: none;
            mask-position: 0;
          }
        }

        span.f[data-id='10'] {
          padding-right: calc(7 / 1920 * 100vw);
        }

        span.f[data-id='2'],
        span.f[data-id='7'],
        span.f[data-id='9'] {
          display: flex;
          padding: calc(10 / 1920 * 100vw) 0;
          height: calc(160 / 1920 * 100vw);
          box-sizing: border-box;

          .window {
            display: inline-block;
            position: relative;
            z-index: 5;
            width: 0;
            -webkit-transition: width 0.8s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.5s linear;
            -o-transition: width 0.8s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.5s linear;
            transition: width 0.8s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.5s linear;
            border-radius: calc(4 / 1920 * 100vw);
            will-change: width;
            opacity: 0;
            aspect-ratio: 240 / 140;

            video {
              width: 100%;
              height: 100%;
              pointer-events: none;
              border-radius: inherit;
              -o-object-fit: cover;
              object-fit: cover;
            }

            img {
              width: 100%;
              height: 100%;
              pointer-events: none;
              border-radius: inherit;
              -o-object-fit: cover;
              object-fit: cover;
            }
          }
        }

        span.f[data-id='9'] {
          margin: 0 calc(10 / 1920 * 100vw);

          .window {
            transform-origin: left center;
            will-change: transform;
          }
        }

        span.f[data-id='5'] {
          margin: 0 calc(20 / 1920 * 100vw);
        }

        span.f[data-id='2'].on,
        span.f[data-id='7'].on,
        span.f[data-id='9'].on {
          .window {
            width: calc(240 / 1920 * 100vw);
            opacity: 1;
          }
        }

        span.f[data-id='1'].on {
          transition-delay: 0ms;
        }
        span.f[data-id='3'].on {
          transition-delay: 150ms;
        }
        span.f[data-id='4'].on {
          transition-delay: 150ms;
        }
        span.f[data-id='5'].on {
          transition-delay: 300ms;
        }
        span.f[data-id='6'].on {
          transition-delay: 320ms;
        }
        span.f[data-id='8'].on {
          transition-delay: 470ms;
        }
        span.f[data-id='10'].on {
          transition-delay: 600ms;
        }

        span.f[data-id='2'].on {
          animation: expandWidthBounce 1s forwards;
          animation-delay: 750ms;
          .window {
            transition-delay: 750ms;
          }
        }

        span.f[data-id='7'].on {
          animation: expandWidthBounce 1s forwards;
          animation-delay: 900ms;
          .window {
            transition-delay: 900ms;
          }
        }

        span.f[data-id='9'].on {
          animation: expandWidthBounce 1s forwards;
          animation-delay: 1050ms;
          .window {
            transition-delay: 1050ms;
          }
        }
      }
    }
  }
}

@keyframes expandWidthBounce {
  0% {
  }
  50% {
    margin: 0 calc(40 / 1920 * 100vw);
  }
  100% {
    margin: 0 calc(20 / 1920 * 100vw);
  }
}

document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
        document.querySelectorAll('.f').forEach(function (element) {
            element.classList.add('on');
        });
    }, 1500); // 3000ms = 3초
});