.js-inview {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-inview.is-inview {
  opacity: 1;
  transform: none;
}

.js-inview--photo {
  transform: translateX(36px);
}

.js-inview--photo.is-inview {
  transform: none;
}

.top-fv .js-inview:nth-child(2) {
  transition-delay: 0.15s;
}

.top-fv .js-inview:nth-child(3) {
  transition-delay: 0.3s;
}

.top-fv .js-inview:nth-child(4) {
  transition-delay: 0.45s;
}

.top-vietnam-ttl.js-inview,
.top-sec-ttl.js-inview,
.top-cta-ttl.js-inview,
.js-inview-ttl.js-inview {
  opacity: 1;
  transform: none;
}

.top-ttl-mask {
  display: block;
  overflow: hidden;
}

.top-ttl-mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.55s 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-inview > .top-ttl-mask > span {
  transform: translateY(0);
}

.top-vietnam-ttl.js-inview::after,
.top-sec-ttl.js-inview::after,
.top-cta-ttl.js-inview::after {
  content: "";
  display: block;
  width: 120px;
  height: 2.5px;
  margin: 18px auto 0;
  background: var(--main-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-vietnam-ttl.is-inview::after,
.top-sec-ttl.is-inview::after,
.top-cta-ttl.is-inview::after {
  transform: scaleX(1);
}

.top-cta-ttl.js-inview::after {
  background: rgba(255, 255, 255, 0.7);
}

.top-zoom {
  overflow: hidden;
  border-radius: 10px;
}

.top-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-inview .top-zoom img,
.top-zoom.is-inview img {
  transform: scale(1);
}

.top-vietnam-point .top-zoom,
.top-biz-card .top-zoom {
  width: 100%;
  height: 180px;
}

.top-vietnam-point:nth-child(2),
.top-biz-card:nth-child(2) {
  transition-delay: 0.15s;
}

.top-vietnam-point:nth-child(3),
.top-biz-card:nth-child(3) {
  transition-delay: 0.3s;
}

.top-vietnam-point:nth-child(2) .top-zoom img,
.top-biz-card:nth-child(2) .top-zoom img {
  transition-delay: 0.15s;
}

.top-vietnam-point:nth-child(3) .top-zoom img,
.top-biz-card:nth-child(3) .top-zoom img {
  transition-delay: 0.3s;
}

.top-zoom--square {
  width: 380px;
  height: 380px;
  flex-shrink: 0;
}

.top-cta.js-inview {
  opacity: 1;
  transform: none;
}

.top-cta::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 0;
  background: url("../../img/top/cta_storefront.png") no-repeat 50% 45%;
  background-size: cover;
  transform: scale(1.1);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-cta.is-inview::after {
  transform: scale(1);
}

.top-cta::before {
  z-index: 1;
}

.top-cta-inner {
  z-index: 2;
}

.top-cta-inner .js-inview:nth-child(2) {
  transition-delay: 0.15s;
}

.top-cta-inner .js-inview:nth-child(3) {
  transition-delay: 0.3s;
}

.top-movie-videos .js-inview:nth-child(2) {
  transition-delay: 0.15s;
}

.top-movie-videos .js-inview:nth-child(3) {
  transition-delay: 0.3s;
}

@media (max-width: 800px) {
  .top-zoom--square {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-inview,
  .top-zoom img,
  .top-cta::after,
  .top-ttl-mask > span,
  .top-vietnam-ttl.js-inview::after,
  .top-sec-ttl.js-inview::after,
  .top-cta-ttl.js-inview::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
}