/* A little lunar gravity. All resting poses retain the supplied PDF geometry. */
[data-reveal],
[data-float] {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  [data-motion-boot="true"] [data-reveal],
  [data-motion-ready="true"] [data-motion-state="pending"] {
    opacity: 0;
  }

  [data-motion-ready="true"] [data-motion-state="entering"] {
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(.2, .75, .25, 1);
    animation-delay: var(--motion-delay, 0ms);
    animation-fill-mode: both;
  }

  [data-motion-ready="true"] [data-reveal="rise"][data-motion-state="entering"] {
    animation-name: mooom-arrive-rise;
  }

  [data-motion-ready="true"] [data-reveal="fade"][data-motion-state="entering"] {
    animation-name: mooom-arrive-fade;
    animation-duration: 850ms;
    animation-timing-function: cubic-bezier(.25, .1, .25, 1);
  }

  [data-motion-ready="true"] [data-reveal="characters"][data-motion-state="entering"] [data-character] {
    animation: mooom-character-in 520ms cubic-bezier(.25, .1, .25, 1) both;
    animation-delay: var(--character-delay, 0ms);
  }

  [data-motion-ready="true"] [data-reveal="characters"][data-motion-state="entering"] [data-copy-role="subcopy"] {
    animation: mooom-subcopy-in 620ms cubic-bezier(.2, .75, .25, 1) both;
    animation-delay: var(--subcopy-delay, 850ms);
  }

  [data-motion-ready="true"] [data-reveal="stamp"][data-motion-state="entering"] {
    animation-name: mooom-arrive-stamp;
    animation-duration: 520ms;
  }

  [data-motion-ready="true"] [data-reveal="drop"][data-motion-state="entering"] {
    animation-name: mooom-arrive-drop;
    animation-duration: 780ms;
    animation-timing-function: linear;
  }

  [data-motion-ready="true"] [data-reveal="settle"][data-motion-state="entering"] {
    animation-name: mooom-arrive-settle;
    animation-duration: 700ms;
  }

  [data-motion-ready="true"] [data-float] {
    --float-x: 2px;
    --float-y: -4px;
    --float-turn: .6deg;
    animation: mooom-low-gravity 7.6s ease-in-out infinite;
    animation-play-state: paused;
  }

  [data-motion-ready="true"] [data-float="1"] {
    --float-x: -2px;
    --float-y: -3px;
    --float-turn: -.5deg;
    animation-duration: 6.4s;
  }

  [data-motion-ready="true"] [data-float="2"] {
    --float-x: -1px;
    --float-turn: -.4deg;
    animation-duration: 8.8s;
  }

  [data-motion-ready="true"] [data-float="3"] {
    --float-x: 1px;
    --float-y: -3px;
    --float-turn: .5deg;
    animation-duration: 7s;
  }

  [data-motion-ready="true"] [data-motion-state="complete"] [data-float][data-motion-visible="true"] {
    animation-play-state: running;
  }

  :root[data-motion-ready="true"][data-motion-paused="true"] [data-motion-state="entering"],
  :root[data-motion-ready="true"][data-motion-paused="true"] [data-character],
  :root[data-motion-ready="true"][data-motion-paused="true"] [data-copy-role="subcopy"],
  :root[data-motion-ready="true"][data-motion-paused="true"] [data-float] {
    animation-play-state: paused;
  }
}

@keyframes mooom-character-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mooom-subcopy-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mooom-arrive-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mooom-arrive-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes mooom-arrive-stamp {
  0% { opacity: 0; transform: translateY(9px) scale(.96); }
  72% { opacity: 1; transform: scale(1.012); }
  100% { opacity: 1; transform: none; }
}

@keyframes mooom-arrive-drop {
  0% { opacity: 0; transform: translateY(-76px) rotate(var(--motion-tilt, -3deg)); }
  24% { opacity: 1; }
  64% { opacity: 1; transform: translateY(4px) rotate(0deg); }
  81% { opacity: 1; transform: translateY(-5px) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes mooom-arrive-settle {
  0% { opacity: 0; transform: translateY(22px) rotate(var(--motion-tilt, -3deg)) scale(.97); }
  78% { opacity: 1; transform: translateY(-2px) rotate(0deg) scale(1); }
  100% { opacity: 1; transform: none; }
}

@keyframes mooom-low-gravity {
  0%, 100% { transform: none; }
  50% { transform: translate(var(--float-x), var(--float-y)) rotate(var(--float-turn)); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-character],
  [data-copy-role="subcopy"],
  [data-float] {
    opacity: 1;
    animation: none;
    transform: none;
  }
}