@charset "UTF-8";

/* The former hero remains in the front-page content as historical content. */
.home #cover.cover,
.front-top-page #cover.cover { display: none !important; }

.mukojo-hero {
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  background: #fff;
}
.mukojo-hero__stage { position: relative; overflow: hidden; }
.mukojo-hero__stage--desktop {
  display: block;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translateX(-50%);
}
.mukojo-hero__stage--tablet { display: none; }
.mukojo-hero__asset {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translateY(24px) scale(.72);
  transform-origin: center;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mukojo-hero__asset img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

.mukojo-hero__motion {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
}

.mukojo-hero__asset--a {
  animation: mukojo-hero-a-in .62s cubic-bezier(.175, .885, .32, 1.275) var(--hero-delay) both;
}

.mukojo-hero__asset--b {
  --hero-origin-x: 0px;
  --hero-origin-y: 0px;
  --hero-mid-x: 0px;
  --hero-mid-y: 0px;
  animation: mukojo-hero-b-in 1.5s linear var(--hero-delay) both;
}

/* JavaScript is used when available to reproduce the supplied sample's
   centre-to-position motion. The CSS animation above remains a fallback. */
.mukojo-hero--b-js .mukojo-hero__asset--b {
  animation: none;
  opacity: 0;
  transform: none;
}

.mukojo-hero__asset--b .mukojo-hero__motion {
  animation: mukojo-hero-float-1 4s ease-in-out var(--hero-float-delay) infinite;
}

.mukojo-hero__asset--b[data-order="2"] .mukojo-hero__motion,
.mukojo-hero__asset--b[data-order="6"] .mukojo-hero__motion {
  animation-name: mukojo-hero-float-2;
  animation-duration: 5s;
}

.mukojo-hero__asset--b[data-order="3"] .mukojo-hero__motion,
.mukojo-hero__asset--b[data-order="7"] .mukojo-hero__motion {
  animation-name: mukojo-hero-float-3;
  animation-duration: 6s;
}

.mukojo-hero__asset--b[data-order="4"] .mukojo-hero__motion,
.mukojo-hero__asset--b[data-order="8"] .mukojo-hero__motion {
  animation-name: mukojo-hero-float-4;
  animation-duration: 7s;
}

.mukojo-hero__asset--b[data-order="5"] .mukojo-hero__motion,
.mukojo-hero__asset--b[data-order="9"] .mukojo-hero__motion {
  animation-name: mukojo-hero-float-5;
  animation-duration: 5.5s;
}

/* Keep the tablet balls' movement in sync with their corresponding desktop
   ornaments while retaining the tablet-specific artwork and layout. */
.mukojo-hero__stage--tablet .hero768_01 .mukojo-hero__motion { animation-name: mukojo-hero-float-1; animation-duration: 4s; }
.mukojo-hero__stage--tablet .hero768_02 .mukojo-hero__motion { animation-name: mukojo-hero-float-2; animation-duration: 5s; }
.mukojo-hero__stage--tablet .hero768_03 .mukojo-hero__motion { animation-name: mukojo-hero-float-3; animation-duration: 6s; }
.mukojo-hero__stage--tablet .hero768_04 .mukojo-hero__motion { animation-name: mukojo-hero-float-4; animation-duration: 7s; }
.mukojo-hero__stage--tablet .hero768_05 .mukojo-hero__motion { animation-name: mukojo-hero-float-10; animation-duration: 4.2s; animation-delay: calc(var(--hero-float-delay) + 90ms); }
.mukojo-hero__stage--tablet .hero768_06 .mukojo-hero__motion { animation-name: mukojo-hero-float-2; animation-duration: 5s; }
.mukojo-hero__stage--tablet .hero768_07 .mukojo-hero__motion { animation-name: mukojo-hero-float-3; animation-duration: 6s; }
.mukojo-hero__stage--tablet .hero768_08 .mukojo-hero__motion { animation-name: mukojo-hero-float-3; animation-duration: 6s; }

/* Give the desktop ornaments independent cycles rather than sharing a
   data-order movement. hero15 and hero19 stay close to hero20's subtle float. */
.mukojo-hero__stage--desktop .hero14 .mukojo-hero__motion { animation-name: mukojo-hero-float-4; animation-duration: 7s; }
.mukojo-hero__stage--desktop .hero18 .mukojo-hero__motion { animation-name: mukojo-hero-float-9; animation-duration: 6.3s; animation-delay: calc(var(--hero-float-delay) + 340ms); }
.mukojo-hero__stage--desktop .hero15 .mukojo-hero__motion { animation-name: mukojo-hero-float-10; animation-duration: 4.2s; animation-delay: calc(var(--hero-float-delay) + 90ms); }
.mukojo-hero__stage--desktop .hero19 .mukojo-hero__motion { animation-name: mukojo-hero-float-11; animation-duration: 4.7s; animation-delay: calc(var(--hero-float-delay) + 470ms); }
.mukojo-hero__stage--desktop .hero20 .mukojo-hero__motion { animation-name: mukojo-hero-float-1; animation-duration: 4s; animation-delay: calc(var(--hero-float-delay) + 200ms); }

@keyframes mukojo-hero-a-in {
  0% { opacity: 0; transform: translateY(12px) scale(0) rotate(-5deg); }
  72% { opacity: 1; transform: translateY(-2px) scale(1.07) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mukojo-hero-b-in {
  0% { opacity: 0; transform: translate3d(var(--hero-origin-x), var(--hero-origin-y), 0) scale(0) rotate(-8deg); }
  26.667% { opacity: 1; transform: translate3d(var(--hero-mid-x), var(--hero-mid-y), 0) scale(.78) rotate(-3deg); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  53.333% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  59.167% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.00879) rotate(0); }
  65% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.03) rotate(0); }
  70.833% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.05121) rotate(0); }
  76.667% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.06) rotate(0); }
  82.5% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.05121) rotate(0); }
  88.333% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.03) rotate(0); }
  94.167% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.00879) rotate(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}

@keyframes mukojo-hero-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(5px, -15px, 0) rotate(.25deg); }
}

@keyframes mukojo-hero-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(-8px, -20px, 0) rotate(-.3deg); }
}

@keyframes mukojo-hero-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(10px, -25px, 0) rotate(.35deg); }
}

@keyframes mukojo-hero-float-4 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(-12px, -18px, 0) rotate(-.35deg); }
}

@keyframes mukojo-hero-float-5 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  25%, 75% { transform: translate3d(-35px, -15px, 0) rotate(-.2deg); }
  50% { transform: translate3d(-70px, -20px, 0) rotate(-.35deg); }
}

@keyframes mukojo-hero-float-6 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  45% { transform: translate3d(12px, -12px, 1px) rotate(1.5deg); }
  70% { transform: translate3d(4px, -4px, 0) rotate(.3deg); }
}

@keyframes mukojo-hero-float-7 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  35% { transform: translate3d(-7px, -18px, 0) rotate(-1deg); }
  68% { transform: translate3d(8px, -10px, 0) rotate(.8deg); }
}

@keyframes mukojo-hero-float-8 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  30% { transform: translate3d(9px, -8px, 0) rotate(.7deg); }
  60% { transform: translate3d(-10px, -17px, 0) rotate(-.8deg); }
}

@keyframes mukojo-hero-float-9 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  35% { transform: translate3d(13px, -22px, 0) rotate(1.2deg); }
  70% { transform: translate3d(-8px, -9px, 0) rotate(-.6deg); }
}

@keyframes mukojo-hero-float-10 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(6px, -14px, 0) rotate(.5deg); }
}

@keyframes mukojo-hero-float-11 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  35% { transform: translate3d(-5px, -10px, 0) rotate(-.4deg); }
  70% { transform: translate3d(7px, -16px, 0) rotate(.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mukojo-hero__asset {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .mukojo-hero__motion {
    animation: none !important;
  }
}

/* Preserve the 1920:1080 artwork and crop only its unused white lower area.
   This brings the news section closer without distorting the hero artwork. */
@media screen and (min-width: 1025px) {
  .mukojo-hero { height: 900px; }
}

.mukojo-hero__stage--desktop .hero01 { left: 0.00000%; top: 46.40279%; width: 14.98264%; height: 25.49382%; z-index: 30; }
.mukojo-hero__stage--desktop .hero02 { left: 18.02224%; top: 37.18670%; width: 11.70139%; height: 15.61729%; z-index: 50; }
.mukojo-hero__stage--desktop .hero03 { left: 3.25886%; top: 29.95208%; width: 18.88889%; height: 27.80864%; z-index: 10; }
.mukojo-hero__stage--desktop .hero04 { left: 35.50686%; top: 9.39711%; width: 40.12153%; height: 59.16667%; z-index: 60; }
.mukojo-hero__stage--desktop .hero05 { left: 67.49418%; top: 41.94598%; width: 16.52778%; height: 21.04938%; z-index: 40; }
.mukojo-hero__stage--desktop .hero06 { left: 79.86242%; top: 34.41706%; width: 20.12153%; height: 28.24074%; z-index: 20; }
.mukojo-hero__stage--desktop .hero07 { left: 80.28959%; top: 42.93956%; width: 18.88889%; height: 27.80864%; z-index: 0; }
.mukojo-hero__stage--desktop .hero08 { left: 23.38638%; top: 19.51797%; width: 19.44444%; height: 7.80864%; z-index: 100; }
.mukojo-hero__stage--desktop .hero09 { left: 52.30876%; top: 48.02893%; width: 24.32292%; height: 7.65432%; z-index: 110; }
.mukojo-hero__stage--desktop .hero10 { left: 23.27829%; top: 54.77136%; width: 28.59375%; height: 17.46914%; z-index: 120; }
.mukojo-hero__stage--desktop .hero11 { left: 17.88686%; top: 14.88942%; width: 3.76736%; height: 14.81481%; z-index: 130; }
.mukojo-hero__stage--desktop .hero12 { left: 12.98817%; top: 55.02998%; width: 6.04167%; height: 14.84568%; z-index: 80; }
.mukojo-hero__stage--desktop .hero13 { left: 71.49853%; top: 12.49494%; width: 4.77431%; height: 18.33333%; z-index: 140; }
.mukojo-hero__stage--desktop .hero14 { left: 39.48879%; top: 32.25915%; width: 6.16319%; height: 17.90123%; z-index: 150; }
.mukojo-hero__stage--desktop .hero15 { left: 54.66344%; top: 59.94790%; width: 5.72917%; height: 18.54938%; z-index: 190; }
.mukojo-hero__stage--desktop .hero16 { left: 46.01993%; top: 67.06086%; width: 4.28819%; height: 14.66049%; z-index: 90; }
.mukojo-hero__stage--desktop .hero17 { left: 79.52135%; top: 27.36805%; width: 6.99653%; height: 18.45679%; z-index: 70; }
.mukojo-hero__stage--desktop .hero18 { left: 24.14234%; top: 26.70057%; width: 15.13889%; height: 25.24692%; z-index: 170; }
.mukojo-hero__stage--desktop .hero19 { left: 57.08107%; top: 54.62598%; width: 16.12847%; height: 28.64197%; z-index: 180; }
.mukojo-hero__stage--desktop .hero20 { left: 67.63324%; top: 32.14798%; width: 10.22569%; height: 17.03704%; z-index: 160; }

.mukojo-hero__stage--tablet .hero768_01 { left: 16.37568%; top: 24.22834%; width: 8.72396%; height: 9.04948%; z-index: 140; }
.mukojo-hero__stage--tablet .hero768_02 { left: 23.80928%; top: 11.46128%; width: 11.80556%; height: 14.42058%; z-index: 130; }
.mukojo-hero__stage--tablet .hero768_03 { left: 83.01422%; top: 15.60590%; width: 7.46527%; height: 12.07683%; z-index: 150; }
.mukojo-hero__stage--tablet .hero768_04 { left: 42.68126%; top: 50.50478%; width: 7.76910%; height: 11.23047%; z-index: 160; }
.mukojo-hero__stage--tablet .hero768_05 { left: 42.99661%; top: 81.63741%; width: 10.46007%; height: 14.64844%; z-index: 170; }
.mukojo-hero__stage--tablet .hero768_06 { left: 13.30367%; top: 38.98334%; width: 30.38194%; height: 21.38672%; z-index: 100; }
.mukojo-hero__stage--tablet .hero768_07 { left: 48.42402%; top: 68.63403%; width: 31.81423%; height: 23.89323%; z-index: 120; }
.mukojo-hero__stage--tablet .hero768_08 { left: 69.30529%; top: 40.80929%; width: 20.39931%; height: 14.32292%; z-index: 80; }
.mukojo-hero__stage--tablet .hero768_09 { left: 0; top: 28.53658%; width: 32.11806%; height: 19.69303%; z-index: 0; }
.mukojo-hero__stage--tablet .hero768_10 { left: 0; top: 41.68011%; width: 25.47743%; height: 18.06641%; z-index: 40; }
.mukojo-hero__stage--tablet .hero768_11 { left: 1.62047%; top: 52.97482%; width: 23.35069%; height: 12.85808%; z-index: 60; }
.mukojo-hero__stage--tablet .hero768_12 { left: 21.03665%; top: 14.89825%; width: 69.35764%; height: 45.31250%; z-index: 10; }
.mukojo-hero__stage--tablet .hero768_13 { left: 78.19121%; top: 46.64255%; width: 20.48611%; height: 11.16536%; z-index: 30; }
.mukojo-hero__stage--tablet .hero768_14 { left: 63.73009%; top: 53.51219%; width: 36.24132%; height: 21.45183%; z-index: 50; }
.mukojo-hero__stage--tablet .hero768_15 { left: 57.51764%; top: 63.17831%; width: 34.02777%; height: 21.12630%; z-index: 20; }
.mukojo-hero__stage--tablet .hero768_16 { left: 5.39335%; top: 34.30312%; width: 30.59896%; height: 5.17578%; z-index: 70; }
.mukojo-hero__stage--tablet .hero768_17 { left: 51.99598%; top: 53.45934%; width: 39.45313%; height: 5.07813%; z-index: 90; }
.mukojo-hero__stage--tablet .hero768_18 { left: 14.75882%; top: 63.07020%; width: 57.20486%; height: 17.87109%; z-index: 110; }

/* B assets travel from the centre of each composition to their final positions. */
.mukojo-hero__stage--desktop .hero11.mukojo-hero__asset--b { --hero-origin-x: 580.41px; --hero-origin-y: 299.19px; --hero-mid-x: 336px; --hero-mid-y: 61px; }
.mukojo-hero__stage--desktop .hero12.mukojo-hero__asset--b { --hero-origin-x: 652.63px; --hero-origin-y: -134.49px; --hero-mid-x: 254px; --hero-mid-y: -154px; }
.mukojo-hero__stage--desktop .hero13.mukojo-hero__asset--b { --hero-origin-x: -458.61px; --hero-origin-y: 306.05px; --hero-mid-x: -248px; --hero-mid-y: 46px; }
.mukojo-hero__stage--desktop .hero14.mukojo-hero__asset--b { --hero-origin-x: 142.65px; --hero-origin-y: 94.93px; --hero-mid-x: 102px; --hero-mid-y: -23px; }
.mukojo-hero__stage--desktop .hero15.mukojo-hero__asset--b { --hero-origin-x: -144.54px; --hero-origin-y: -207.60px; --hero-mid-x: 5px; --hero-mid-y: -133px; }
.mukojo-hero__stage--desktop .hero16.mukojo-hero__asset--b { --hero-origin-x: 35.25px; --hero-origin-y: -263.42px; --hero-mid-x: -64px; --hero-mid-y: -121px; }
.mukojo-hero__stage--desktop .hero17.mukojo-hero__asset--b { --hero-origin-x: -633.98px; --hero-origin-y: 144.76px; --hero-mid-x: -288px; --hero-mid-y: -37px; }
.mukojo-hero__stage--desktop .hero18.mukojo-hero__asset--b { --hero-origin-x: 351.13px; --hero-origin-y: 115.30px; --hero-mid-x: 178px; --hero-mid-y: -47px; }
.mukojo-hero__stage--desktop .hero19.mukojo-hero__asset--b { --hero-origin-x: -290.79px; --hero-origin-y: -204.63px; --hero-mid-x: -64px; --hero-mid-y: -168px; }
.mukojo-hero__stage--desktop .hero20.mukojo-hero__asset--b { --hero-origin-x: -436.72px; --hero-origin-y: 100.80px; --hero-mid-x: -205px; --hero-mid-y: -56px; }

.mukojo-hero__stage--tablet .hero768_01.mukojo-hero__asset--b { --hero-origin-x: 29.26vw; --hero-origin-y: 28.33vw; --hero-mid-x: 15.8vw; --hero-mid-y: 8.4vw; }
.mukojo-hero__stage--tablet .hero768_02.mukojo-hero__asset--b { --hero-origin-x: 20.29vw; --hero-origin-y: 41.77vw; --hero-mid-x: 13.5vw; --hero-mid-y: 15.1vw; }
.mukojo-hero__stage--tablet .hero768_03.mukojo-hero__asset--b { --hero-origin-x: -36.75vw; --hero-origin-y: 37.81vw; --hero-mid-x: -19vw; --hero-mid-y: 12.4vw; }
.mukojo-hero__stage--tablet .hero768_04.mukojo-hero__asset--b { --hero-origin-x: 3.43vw; --hero-origin-y: -8.16vw; --hero-mid-x: -3.6vw; --hero-mid-y: -5.5vw; }
.mukojo-hero__stage--tablet .hero768_05.mukojo-hero__asset--b { --hero-origin-x: 1.77vw; --hero-origin-y: -51.95vw; --hero-mid-x: -4.3vw; --hero-mid-y: -22vw; }
.mukojo-hero__stage--tablet .hero768_06.mukojo-hero__asset--b { --hero-origin-x: 21.51vw; --hero-origin-y: 0.43vw; --hero-mid-x: 9.1vw; --hero-mid-y: -4.8vw; }
.mukojo-hero__stage--tablet .hero768_07.mukojo-hero__asset--b { --hero-origin-x: -14.33vw; --hero-origin-y: -40.77vw; --hero-mid-x: -1.3vw; --hero-mid-y: -18.8vw; }
.mukojo-hero__stage--tablet .hero768_08.mukojo-hero__asset--b { --hero-origin-x: -29.50vw; --hero-origin-y: 2.71vw; --hero-mid-x: -12.9vw; --hero-mid-y: -3.9vw; }

/* Switch to the supplied 768px composition at the tablet breakpoint. */
@media screen and (max-width: 1024px) {
  .mukojo-hero__stage--desktop { display: none; }
  .mukojo-hero__stage--tablet {
    display: block;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    transform: none;
  }
}

/* The fixed header only appears after the hero has completely left the viewport. */
.mukojo-home-hero-page .header-container {
  position: absolute;
/*  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .25s ease, transform .25s ease;*/
}

.mukojo-home-hero-page.mukojo-hero-past .header-container {
  position: fixed;
  pointer-events: auto;
  animation: fadeIn .25s ease-in;
}

@keyframes fadeIn {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}