@charset "utf-8";

/*
 * Main visual animation
 * Routes, positions and timing follow the supplied 2017 reference page.
 * The original JavaScript motion has been translated to CSS animations.
 */
body {
  background-image: none !important;
}

#main {
  overflow: hidden;
  background: none !important;
  isolation: isolate;
}

#main p.img {
  z-index: 30;
  pointer-events: none;
}

.main-scene {
  position: absolute;
  top: 260px;
  left: 50%;
  width: min(1200px, 100%);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  pointer-events: none;
  contain: layout paint;
  container-type: size;
}

.main-scene__layer,
.main-scene__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.main-scene__sky {
  z-index: 10;
  animation: scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) .8s forwards;
}

.main-scene__layer--far {
  z-index: 20;
  animation: scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) .5s forwards;
}

.main-scene__layer--middle {
  z-index: 32;
  animation: scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) .3s forwards;
}

.main-scene__layer--front {
  z-index: 52;
  animation: scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) .15s forwards;
}

.main-scene__object,
.main-scene__sprite {
  position: absolute;
  z-index: auto;
  display: block;
  opacity: 0;
  background-repeat: no-repeat;
  will-change: transform, opacity, background-position;
}

.main-scene__object img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Layer 1: 15-second steps across the ten reference positions. */
.main-scene__airship {
  z-index: 11;
  top: 13.128%;
  left: -12.038%;
  width: 8.75%;
  aspect-ratio: 140 / 80;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 1.8s forwards,
    airship-route 150s linear 1.8s forwards;
}

/* Layer 3 */
.sprite--family {
  z-index: 30;
  top: 35.375%;
  left: 38.6875%;
  width: 4.125%;
  aspect-ratio: 66 / 56;
  background-image: url("/img/main/parent-and-child.svg");
  background-size: 300% 100%;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 3s forwards,
    frames-family 1.2s steps(1, end) 4s forwards;
}

.main-scene__balloon-flight {
  z-index: 31;
  top: 32.5%;
  left: 40.8125%;
  width: 2.25%;
  aspect-ratio: 36 / 42;
  animation:
    scene-show 0s 5.2s forwards,
    balloon-route 75s linear 5.2s forwards;
}

.sprite--balloon {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: url("/img/main/balloon.svg");
  background-size: 400% 100%;
  animation: frames-balloon 2.1s steps(1, end) 5.2s infinite;
}

.sprite--parked-car {
  z-index: 33;
  top: 56.125%;
  left: 50.25%;
  width: 7.5%;
  aspect-ratio: 120 / 100;
  background-image: url("/img/main/car_01.svg");
  background-size: 400% 100%;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 1.9s forwards,
    frames-car-door 3.6s steps(1, end) 3.9s forwards;
}

.sprite--pedestrian {
  z-index: 34;
  top: 56.125%;
  left: 50.25%;
  width: 5%;
  aspect-ratio: 80 / 100;
  background-image: url("/img/main/man_01.svg");
  background-size: 500% 100%;
  animation:
    scene-show 0s 6.3s forwards,
    frames-walk-5 1.6s steps(1, end) 6.3s infinite,
    pedestrian-route 60s linear 6.3s forwards;
}

.sprite--shop-door {
  z-index: 35;
  top: 60.25%;
  left: 58.8125%;
  width: 6.25%;
  aspect-ratio: 100 / 120;
  background-image: url("/img/main/shop_01.svg");
  background-size: 400% 100%;
  animation:
    scene-show 0s 10s forwards,
    frames-shop 4.2s steps(1, end) 10s forwards,
    shop-door-hide 0s 11.8s forwards;
}

.sprite--shopper {
  z-index: 36;
  top: 67.625%;
  left: 61.4375%;
  width: 3.4375%;
  aspect-ratio: 55 / 76;
  background-image: url("/img/main/woman_shopping.svg");
  background-size: 500% 100%;
  animation:
    scene-show 0s 11.8s forwards,
    frames-shopper-forward 1.5s steps(1, end) 11.8s infinite,
    shopper-route 60s linear 11.8s forwards;
}

/* Layer 4 */
.main-scene__seller {
  z-index: 40;
  top: 66.75%;
  left: 66.3125%;
  width: 9.875%;
  aspect-ratio: 158 / 120;
  animation: scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 3s forwards;
}

.sprite--bus {
  z-index: 43;
  top: 91.509%;
  left: 106.089%;
  width: 6.25%;
  aspect-ratio: 1;
  background-image: url("/img/main/car_02.svg");
  background-size: contain;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 2.8s forwards,
    bus-route 30s linear 2.8s forwards;
}

.sprite--road-car {
  z-index: 41;
  top: 54.25%;
  left: 31.25%;
  width: 6.25%;
  aspect-ratio: 1;
  background-image: url("/img/main/car_03.svg");
  background-size: contain;
  animation: scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 2.5s forwards;
}

.sprite--compact {
  z-index: 42;
  top: 57.5%;
  left: 40.5%;
  width: 6.25%;
  aspect-ratio: 1;
  background-image: url("/img/main/car_04.svg");
  background-size: contain;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 2.1s forwards,
    compact-drive 15s linear 32.8s forwards;
}

/* Layer 5 */
.sprite--bicycle {
  z-index: 50;
  top: 82.733%;
  left: 109.972%;
  width: 7.5%;
  aspect-ratio: 120 / 100;
  background-image: url("/img/main/man_bicycle.svg");
  background-size: 300% 100%;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 17.3s forwards,
    frames-bicycle .75s steps(1, end) 17.3s infinite,
    bicycle-entry 30s linear 17.3s forwards;
}

.sprite--dog-walker {
  z-index: 51;
  top: 59.4%;
  left: 18.623%;
  width: 7.5%;
  aspect-ratio: 120 / 100;
  background-image: url("/img/main/woman_walk.svg");
  background-size: 500% 100%;
  animation:
    scene-fade-in 5s cubic-bezier(.13, .43, .165, 1) 2s forwards,
    frames-walk-5 2.4s steps(1, end) 2s infinite,
    dog-walker-route 60s linear 2s forwards;
}

@keyframes scene-fade-in {
  to { opacity: 1; }
}

@keyframes scene-show {
  to { opacity: 1; }
}

@keyframes shop-door-hide {
  to { opacity: 0; }
}

@keyframes airship-route {
  0% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(12.074cqw, 2.579cqh, 0); }
  20% { transform: translate3d(23.038cqw, 3.973cqh, 0); }
  30% { transform: translate3d(36.038cqw, 5.122cqh, 0); }
  40% { transform: translate3d(48.212cqw, 7.727cqh, 0); }
  50% { transform: translate3d(58.963cqw, 8.118cqh, 0); }
  60% { transform: translate3d(70.255cqw, 7.375cqh, 0); }
  70% { transform: translate3d(82.551cqw, 4.075cqh, 0); }
  80% { transform: translate3d(95.412cqw, .664cqh, 0); }
  90% { transform: translate3d(107.663cqw, -3.603cqh, 0); }
  100% { transform: translate3d(120.526cqw, -6.146cqh, 0); }
}

@keyframes balloon-route {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(11.725cqw, -3.278cqh, 0); }
  40% { transform: translate3d(27.033cqw, -6.407cqh, 0); }
  60% { transform: translate3d(23.191cqw, -22.752cqh, 0); }
  80% { transform: translate3d(-1.574cqw, -17.758cqh, 0); }
  100% { transform: translate3d(-46.017cqw, -8.024cqh, 0); }
}

@keyframes pedestrian-route {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-12.646cqw, -4.291cqh, 0); }
  50% { transform: translate3d(-28.381cqw, -9.885cqh, 0); }
  75% { transform: translate3d(-42.42cqw, -15.963cqh, 0); }
  100% { transform: translate3d(-58.738cqw, -22.281cqh, 0); }
}

@keyframes shopper-route {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  25% { transform: translate3d(10.31cqw, -3.82cqh, 0); opacity: 1; }
  50% { transform: translate3d(19.052cqw, 8.308cqh, 0); opacity: 1; }
  75% { transform: translate3d(31.251cqw, 15.137cqh, 0); opacity: 1; }
  99.999% { transform: translate3d(46.253cqw, 17.602cqh, 0); opacity: 1; }
  100% { transform: translate3d(46.253cqw, 17.602cqh, 0); opacity: 0; }
}

@keyframes bus-route {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-88.339cqw, -39.009cqh, 0); }
  100% { transform: translate3d(-154.426cqw, -61.92cqh, 0); }
}

@keyframes compact-drive {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  99.999% { transform: translate3d(65.75cqw, 40.20cqh, 0); opacity: 1; }
  100% { transform: translate3d(65.75cqw, 40.20cqh, 0); opacity: 0; }
}

@keyframes bicycle-entry {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-59.972cqw, -15.233cqh, 0); }
  100% { transform: translate3d(-118.471cqw, -38.576cqh, 0); }
}

@keyframes dog-walker-route {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(18.002cqw, 3.84cqh, 0); }
  50% { transform: translate3d(42.26cqw, 16.185cqh, 0); }
  75% { transform: translate3d(58.982cqw, 23.94cqh, 0); }
  100% { transform: translate3d(85.006cqw, 25.847cqh, 0); }
}

@keyframes frames-family {
  0%, 33.332% { background-position: 0 0; }
  33.333%, 66.665% { background-position: 50% 0; }
  66.666%, 100% { background-position: 100% 0; }
}

@keyframes frames-balloon {
  0%, 16.665% { background-position: 0 0; }
  16.666%, 33.332% { background-position: 33.333% 0; }
  33.333%, 49.999% { background-position: 66.667% 0; }
  50%, 66.665% { background-position: 100% 0; }
  66.666%, 83.332% { background-position: 66.667% 0; }
  83.333%, 100% { background-position: 33.333% 0; }
}

@keyframes frames-car-door {
  0%, 16.665% { background-position: 0 0; }
  16.666%, 33.332% { background-position: 33.333% 0; }
  33.333%, 49.999% { background-position: 66.667% 0; }
  50%, 66.665% { background-position: 100% 0; }
  66.666%, 83.332% { background-position: 33.333% 0; }
  83.333%, 100% { background-position: 0 0; }
}

@keyframes frames-shop {
  0%, 14.284% { background-position: 0 0; }
  14.285%, 28.57% { background-position: 33.333% 0; }
  28.571%, 42.856% { background-position: 66.667% 0; }
  42.857%, 57.142% { background-position: 100% 0; }
  57.143%, 71.428% { background-position: 66.667% 0; }
  71.429%, 85.713% { background-position: 33.333% 0; }
  85.714%, 100% { background-position: 0 0; }
}

@keyframes frames-walk-5 {
  0%, 12.499% { background-position: 0 0; }
  12.5%, 24.999% { background-position: 25% 0; }
  25%, 37.499% { background-position: 50% 0; }
  37.5%, 49.999% { background-position: 75% 0; }
  50%, 62.499% { background-position: 100% 0; }
  62.5%, 74.999% { background-position: 75% 0; }
  75%, 87.499% { background-position: 50% 0; }
  87.5%, 100% { background-position: 25% 0; }
}

@keyframes frames-shopper-forward {
  0%, 19.999% { background-position: 0 0; }
  20%, 39.999% { background-position: 25% 0; }
  40%, 59.999% { background-position: 50% 0; }
  60%, 79.999% { background-position: 75% 0; }
  80%, 100% { background-position: 100% 0; }
}

@keyframes frames-bicycle {
  0%, 33.332% { background-position: 0 0; }
  33.333%, 66.665% { background-position: 100% 0; }
  66.666%, 100% { background-position: 50% 0; }
}

#business_inner.business-reveal-ready .item_wrap > .item {
  opacity: 0;
  transition: opacity 900ms ease-out;
  will-change: opacity;
}

#business_inner.business-reveal-ready .item_wrap > .item:nth-child(2) {
  transition-delay: 180ms;
}

#business_inner.business-reveal-ready .item_wrap > .item:nth-child(3) {
  transition-delay: 360ms;
}

#business_inner.business-reveal-ready .item_wrap > .item.is-visible {
  opacity: 1;
}

#mission_inner.mission-reveal-ready > h2,
#mission_inner.mission-reveal-ready > .item_01,
#mission_inner.mission-reveal-ready > .item_02 {
  opacity: 0;
  transition: opacity 900ms ease-out;
  will-change: opacity;
}

#mission_inner.mission-reveal-ready > .item_01 {
  transition-delay: 180ms;
}

#mission_inner.mission-reveal-ready > .item_02 {
  transition-delay: 360ms;
}

#mission_inner.mission-reveal-ready > h2.is-visible,
#mission_inner.mission-reveal-ready > .item_01.is-visible,
#mission_inner.mission-reveal-ready > .item_02.is-visible {
  opacity: 1;
}

@media (max-width: 971px) {
  .main-scene { top: 254px; }
}

@media (max-width: 560px) {
  .main-scene {
    top: 180px;
    width: 150%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #business_inner.business-reveal-ready .item_wrap > .item,
  #mission_inner.mission-reveal-ready > h2,
  #mission_inner.mission-reveal-ready > .item_01,
  #mission_inner.mission-reveal-ready > .item_02 {
    opacity: 1;
    transition: none;
  }

  .main-scene__layer,
  .main-scene__sky,
  .main-scene__object,
  .main-scene__sprite {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .main-scene__airship { top: 15.707%; left: .036%; }
  .main-scene__balloon-flight { top: 29.222%; left: 52.538%; }
  .sprite--bus { top: 52.5%; left: 17.75%; }
  .sprite--bicycle { top: 67.5%; left: 50%; }
  .sprite--dog-walker { top: 63.24%; left: 36.625%; }
  .sprite--pedestrian { top: 51.834%; left: 37.604%; }
  .sprite--shopper { top: 63.805%; left: 71.748%; }
}