/* Character-led motion and varied Spiffy giraffe scenes. */

.motion-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
  perspective: 600px;
  vertical-align: -.06em;
}

.motion-char {
  display: inline-block;
  transform-origin: 50% 100%;
}

.spiffy-motion .char-reveal .motion-char {
  opacity: .01;
  transform: translateX(105%) rotateY(45deg) rotateZ(90deg);
  will-change: transform, opacity;
}

.spiffy-motion .char-reveal.is-visible .motion-char {
  opacity: 1;
  transform: translateX(0) rotateY(0) rotateZ(0);
  transition:
    transform 1.2s cubic-bezier(.76, 0, .24, 1),
    opacity .24s ease-out;
  transition-delay: calc(var(--char-start, 0ms) + var(--char-delay, 0ms));
}

.spiffy-motion .motion-rise {
  opacity: 0;
  translate: 0 34px;
  will-change: translate, opacity;
}

.spiffy-motion .motion-rise.is-visible {
  opacity: 1;
  translate: 0 0;
  transition:
    translate .9s cubic-bezier(.16, 1, .3, 1),
    opacity .7s ease-out;
  transition-delay: var(--motion-delay, 0ms);
}

/* Keep the recognisable front-facing giraffe in the hero, then vary the poses. */
.valuation-visual .valuation-giraffe-binoculars {
  width: min(43vw, 610px);
  height: auto;
  max-height: none;
  object-fit: contain;
  clip-path: none;
}

.about-motto > span {
  z-index: 3;
  position: relative;
}

.about-motto .about-giraffe-angle {
  z-index: 2;
  right: -2%;
  bottom: clamp(16px, 2.5vw, 44px);
  width: min(32vw, 470px);
  height: auto;
  object-fit: contain;
  clip-path: none;
  transform-origin: 74% 100%;
  animation: aboutGiraffeFloat 7s ease-in-out infinite !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}

@keyframes aboutGiraffeFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  45% { transform: translateY(-18px) rotate(-2deg); }
  72% { transform: translateY(-7px) rotate(-7deg); }
}

/* Relocation hero map draws itself while a second giraffe peeks into the route. */
.relocation-visual .relocation-outline,
.relocation-visual .relocation-route,
.relocation-visual .relocation-stamp {
  z-index: 3;
}

.relocation-visual .relocation-stamp {
  z-index: 5;
}

.relocation-hero-giraffe {
  z-index: 2;
  position: absolute;
  left: 3%;
  bottom: 2%;
  width: min(27vw, 300px);
  filter: drop-shadow(0 20px 18px #16161624);
  pointer-events: none;
  transform: rotate(-5deg);
  opacity: 1;
}

.spiffy-motion .motion-map .relocation-outline {
  opacity: 0;
  translate: -34px 0;
}

.spiffy-motion .motion-map .relocation-route {
  clip-path: inset(0 100% 0 0);
  opacity: .2;
}

.spiffy-motion .motion-map .relocation-route i {
  scale: 0;
}

.spiffy-motion .motion-map .relocation-stamp {
  opacity: 0;
  translate: 0 30px;
}

.spiffy-motion .motion-map .relocation-hero-giraffe {
  opacity: 0;
  transform: translateY(36%) rotate(-9deg);
}

.spiffy-motion .motion-map.is-visible .relocation-outline {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s ease-out, translate 1s cubic-bezier(.16, 1, .3, 1);
}

.spiffy-motion .motion-map.is-visible .relocation-route {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 1.35s .2s cubic-bezier(.76, 0, .24, 1), opacity .4s .2s;
}

.spiffy-motion .motion-map.is-visible .relocation-route i {
  scale: 1;
  transition: scale .48s 1.34s cubic-bezier(.34, 1.56, .64, 1);
}

.spiffy-motion .motion-map.is-visible .relocation-stamp {
  opacity: 1;
  translate: 0 0;
  transition: opacity .6s .9s ease-out, translate .9s .9s cubic-bezier(.16, 1, .3, 1);
}

.spiffy-motion .motion-map.is-visible .relocation-hero-giraffe {
  opacity: 1;
  transform: translateY(0) rotate(-5deg);
  transition: opacity .7s 1.05s ease-out, transform 1.05s 1.05s cubic-bezier(.16, 1, .3, 1);
}

/* A new three-quarter pose gives corporate relocation its own character. */
.corporate-relocation-visual > span {
  z-index: 1;
  position: relative;
}

.corporate-relocation-visual > div {
  z-index: 4;
}

.corporate-giraffe-angle {
  z-index: 2;
  position: absolute;
  right: -3%;
  bottom: -18%;
  width: min(33vw, 430px);
  filter: drop-shadow(-18px 22px 18px #00000035);
  pointer-events: none;
  opacity: 1;
  transform: rotate(4deg);
  transform-origin: 70% 100%;
}

.spiffy-motion .corporate-giraffe-angle {
  opacity: 0;
  transform: translateY(34%) rotate(7deg);
}

.spiffy-motion .corporate-giraffe-angle.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(4deg);
  transition: opacity .65s ease-out, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 1050px) {
  .valuation-visual .valuation-giraffe-binoculars {
    width: min(78vw, 590px);
  }

  .about-motto .about-giraffe-angle {
    width: min(40vw, 430px);
  }

  .relocation-hero-giraffe {
    width: min(34vw, 270px);
  }

  .corporate-giraffe-angle {
    right: 2%;
    width: min(45vw, 410px);
  }
}

@media (max-width: 760px) {
  .valuation-visual .valuation-giraffe-binoculars {
    width: min(88vw, 520px);
    height: auto;
  }

  .about-motto .about-giraffe-angle {
    right: -8%;
    bottom: 12px;
    width: min(72vw, 390px);
    height: auto;
  }

  .relocation-hero-giraffe {
    left: -2%;
    bottom: 4%;
    width: min(38vw, 170px);
  }

  .corporate-giraffe-angle {
    right: -7%;
    bottom: -17%;
    width: min(69vw, 360px);
  }
}

@media (max-width: 410px) {
  .relocation-hero-giraffe {
    left: -7%;
    width: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-char,
  .spiffy-motion .motion-rise,
  .spiffy-motion .motion-map .relocation-outline,
  .spiffy-motion .motion-map .relocation-route,
  .spiffy-motion .motion-map .relocation-stamp,
  .relocation-hero-giraffe,
  .corporate-giraffe-angle {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }

  .motion-char {
    transform: none !important;
  }

  .about-motto .about-giraffe-angle {
    animation: none !important;
    transform: rotate(-5deg) !important;
  }

  .relocation-hero-giraffe {
    transform: rotate(-5deg) !important;
  }

  .corporate-giraffe-angle {
    transform: rotate(4deg) !important;
  }
}