#secret-animation {
  /* --k scales the whole scene (art is designed at 507px wide for the giraffe) */
  --k: 1;
  --w: calc(507px * var(--k));
  --travel: calc(100vw + var(--w));        /* from just off the right edge to just off the left edge */
  --pause-at: calc(var(--travel) * 0.407); /* distance covered when the bubble pops up (990 / 2432 in Figma) */
  --drift: calc(163px * var(--k));         /* bubble's slow crawl while it is visible */
  --giraffe-drift: var(--drift);           /* the giraffe's crawl over the same stretch */
  --duration: 9.744951s;
  --kf-giraffe: giraffe-translate;
  --kf-bubble-translate: bubble-translate;
  --kf-bubble-scale: bubble-scale;

  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(490px * var(--k));
  overflow: hidden;
  pointer-events: none;
  z-index: 9;
}

#secret-animation picture {
  display: contents;
}

#secret-animation img {
  display: block;
  width: 100%;
  height: auto;
}

#secret-animation .animation {
  position: absolute;
  left: 100%;
  bottom: 0;
  width: var(--w);
}

#secret-animation .bubble {
  position: absolute;
  left: calc(100% - var(--pause-at));
  bottom: calc(266px * var(--k));
  width: calc(212px * var(--k));
  scale: 0 0;
  /* !important: a site script sets inline pointer-events:none on #secret-animation and all its children */
  pointer-events: auto !important;
}
#secret-animation .bubble img {
  pointer-events: auto !important;
}

#secret-animation.run .animation {
  animation: var(--kf-giraffe) var(--duration) linear 1;
}
#secret-animation.run .bubble {
  animation:
    var(--kf-bubble-translate) var(--duration) linear 1,
    var(--kf-bubble-scale) var(--duration) linear 1;
}

@keyframes giraffe-translate {
  0%       { translate: 0 0; }
  30.32%   { translate: calc(var(--pause-at) * -1) 0; }
  48.316%  { translate: calc((var(--pause-at) + var(--giraffe-drift)) * -1) 0; }
  80.031%  { translate: calc(var(--travel) * -1) 0; }
  100%     { translate: calc(var(--travel) * -1) 0; }
}

@keyframes bubble-translate {
  0%       { translate: 0 0; }
  30.97%   { translate: 0 0; }
  48.035%  { translate: calc(var(--drift) * -1) 0; }
  100%     { translate: calc(var(--drift) * -1) 0; }
}

@keyframes bubble-scale {
  0%       { scale: 0 0; }
  29.461%  { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); scale: 0 0; }
  30.96%   { scale: 1 1; }
  48.025%  { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); scale: 1 1; }
  49.133%  { scale: 0 0; }
  100%     { scale: 0 0; }
}

/* Mobile: timings from the separate mobile Figma sequence (7.799s) */
@media screen and (max-width: 567px) {
  #secret-animation {
    --k: 0.6;
    --pause-at: calc(var(--travel) * 0.276); /* 191 / 692 in Figma */
    --drift: 197px;
    --giraffe-drift: 208px;
    --duration: 7.799s;
    --kf-giraffe: giraffe-translate-m;
    --kf-bubble-translate: bubble-translate-m;
    --kf-bubble-scale: bubble-scale-m;
  }
}

@keyframes giraffe-translate-m {
  0%       { translate: 0 0; }
  9.158%   { translate: 0 0; }
  32.107%  { translate: calc(var(--pause-at) * -1) 0; }
  71.575%  { translate: calc((var(--pause-at) + var(--giraffe-drift)) * -1) 0; }
  90.482%  { translate: calc(var(--travel) * -1) 0; }
  100%     { translate: calc(var(--travel) * -1) 0; }
}

@keyframes bubble-translate-m {
  0%       { translate: 0 0; }
  32.786%  { translate: 0 0; }
  71.575%  { translate: calc(var(--drift) * -1) 0; }
  100%     { translate: calc(var(--drift) * -1) 0; }
}

@keyframes bubble-scale-m {
  0%       { scale: 0 0; }
  30.816%  { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); scale: 0 0; }
  32.688%  { scale: 1 1; }
  71.575%  { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); scale: 1 1; }
  72.96%   { scale: 0 0; }
  100%     { scale: 0 0; }
}