/* Each shape keeps its own rhythm. Individual transforms leave hover and
   the mobile layout's stagger independent of the continuous motion. */
.home-view{position:relative}
.type-board{margin-top:30px}
.motion-toggle{position:absolute;right:4.1%;top:-15px;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:8px;background:transparent;color:#66675e;border-radius:50%}
.motion-toggle:hover{background:#efefe7}
.motion-toggle svg{width:18px;height:18px}
.play-symbol,.motion-toggle[aria-pressed=true] .pause-symbol{display:none}
.motion-toggle[aria-pressed=true] .play-symbol{display:block}
.type-shape{
  --motion-scale:1;
  animation-duration:var(--motion-duration,8s);
  animation-delay:var(--motion-delay,0s);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.type-shape[data-motion=float]{animation-name:shape-float}
.type-shape[data-motion=rock]{animation-name:shape-rock}
.type-shape[data-motion=drift]{animation-name:shape-drift}
.type-shape[data-motion=bob]{animation-name:shape-bob}
.type-shape.motion-visible{animation-play-state:running}
.type-shape:hover,.type-shape:focus-visible,.type-shape:active,
.dialog-open .type-shape,.motion-paused .type-shape,.page-hidden .type-shape{animation-play-state:paused}
@keyframes shape-float{
  0%,100%{translate:0 0}
  50%{translate:0 calc(-1 * var(--motion-distance) * var(--motion-scale))}
}
@keyframes shape-rock{
  0%,100%{rotate:calc(-1 * var(--motion-tilt))}
  50%{rotate:var(--motion-tilt)}
}
@keyframes shape-drift{
  0%,100%{translate:calc(-.6 * var(--motion-distance) * var(--motion-scale)) 0;rotate:calc(-1 * var(--motion-tilt))}
  33%{translate:0 calc(-1 * var(--motion-distance) * var(--motion-scale));rotate:0deg}
  66%{translate:calc(.6 * var(--motion-distance) * var(--motion-scale)) 0;rotate:var(--motion-tilt)}
}
@keyframes shape-bob{
  0%,100%{translate:0 0;rotate:calc(-1 * var(--motion-tilt))}
  45%{translate:0 calc(-1 * var(--motion-distance) * var(--motion-scale));rotate:var(--motion-tilt)}
  70%{translate:0 calc(-.25 * var(--motion-distance) * var(--motion-scale));rotate:0deg}
}
@media(max-width:700px){
  .type-board{margin-top:36px}
  .motion-toggle{right:6%;top:-27px}
  .type-shape{--motion-scale:.65}
}
@media(prefers-reduced-motion:reduce){
  .type-shape{animation:none!important;translate:none;rotate:none}
  .motion-toggle{display:none}
  .type-shape:hover,.type-shape:focus-visible{transform:translateY(var(--mobile-offset,0px)) rotate(var(--rotation,0deg))}
}