/* Home page cheetah cub: zooms in to its spot on the first visit, then sits and blinks. Clicking it makes it zoom off and back.
   Artwork: assets/cub.svg (CC0, blinks on its own). Choreography is triggered by assets/cub.js. */
.cub-wrap { justify-self: center; width: min(330px, 100%); }
.cub { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cub:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 18px; }
.cub-runner, .cub-img { display: block; }
.cub-img { width: 100%; height: auto; transform-origin: 50% 100%; }

/* Speed lines trail behind the cub while it runs. */
.cub-lines { position: absolute; right: 88%; top: 30%; width: 170px; height: 60%; opacity: 0; pointer-events: none; }
.cub-lines i { position: absolute; right: 0; height: 9px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--sky)); }
.cub-lines i:nth-child(1) { top: 8%; width: 70%; }
.cub-lines i:nth-child(2) { top: 40%; width: 100%; height: 11px; background: linear-gradient(90deg, transparent, var(--blue)); }
.cub-lines i:nth-child(3) { top: 72%; width: 55%; }

/* Puff of spot-shaped dust left at take-off and landing. */
.cub-dust { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none; }
.cub-dust i { position: absolute; bottom: 0; width: 34px; height: 24px; border-radius: 50%; background: var(--sky); opacity: 0; }
.cub-dust i:nth-child(1) { left: 0; }
.cub-dust i:nth-child(2) { left: 22%; width: 44px; height: 30px; background: #9BDDF8; }
.cub-dust i:nth-child(3) { left: 48%; background: var(--blue); width: 20px; height: 15px; }
.cub-dust i:nth-child(4) { left: 62%; width: 40px; height: 28px; background: #9BDDF8; }
.cub-dust i:nth-child(5) { left: 30%; bottom: 26px; width: 22px; height: 16px; }

.cub.wait { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cub.enter .cub-runner { animation: cub-enter-run 1.1s both; }
  .cub.enter .cub-img { animation: cub-enter-body 1.1s ease both; }
  .cub.enter .cub-lines { animation: cub-enter-lines 1.1s linear both; }
  .cub.enter .cub-dust i { animation: cub-enter-dust 1.1s ease-out both; }
  .cub.play .cub-runner { animation: cub-run 2.8s both; }
  .cub.play .cub-img { animation: cub-body 2.8s ease both; }
  .cub.play .cub-lines { animation: cub-lines 2.8s linear both; }
  .cub.play .cub-dust i { animation: cub-dust 2.8s ease-out both; }
  .cub.play .cub-dust i:nth-child(2n) { animation-name: cub-dust-alt; }
}

/* First visit (1.1s): zoom in from the left and skid to a stop. */
@keyframes cub-enter-run {
  0% { transform: translateX(-115vw); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  55% { transform: translateX(18px); }
  73% { transform: translateX(-5px); }
  90%, 100% { transform: translateX(0); }
}
@keyframes cub-enter-body {
  0%, 50% { transform: scale(1.75, .8) skewX(-16deg); }
  64% { transform: scale(1.12, .9) skewX(12deg) rotate(-4deg); }
  82% { transform: scale(.97, 1.04) skewX(-3deg); }
  100% { transform: none; }
}
@keyframes cub-enter-lines {
  0%, 42% { opacity: 1; transform: scaleX(1); transform-origin: right; }
  64%, 100% { opacity: 0; transform: scaleX(.2); transform-origin: right; }
}
@keyframes cub-enter-dust {
  0%, 52% { opacity: 0; transform: translate(0, 0) scale(.3); }
  60% { opacity: .9; transform: translate(10px, -4px) scale(.9); }
  100% { opacity: 0; transform: translate(34px, -20px) scale(1.4); }
}

/* On click (2.8s): crouch, zoom off to the right, pause off screen, zoom back in from the left and skid to a stop. */
@keyframes cub-run {
  0% { transform: translateX(0); }
  5% { transform: translateX(-12px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  20% { transform: translateX(115vw); }
  20.01%, 36.7% { transform: translateX(-115vw); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  56.7% { transform: translateX(18px); }
  63.3% { transform: translateX(-5px); }
  70%, 100% { transform: translateX(0); }
}
@keyframes cub-body {
  0% { transform: none; }
  6.7% { transform: scale(1.14, .82); }
  11.7%, 55% { transform: scale(1.75, .8) skewX(-16deg); }
  60% { transform: scale(1.12, .9) skewX(12deg) rotate(-4deg); }
  66.7% { transform: scale(.97, 1.04) skewX(-3deg); }
  73.3%, 100% { transform: none; }
}
@keyframes cub-lines {
  0%, 6.7% { opacity: 0; transform: scaleX(.2); transform-origin: right; }
  10%, 20% { opacity: 1; transform: scaleX(1); transform-origin: right; }
  20.01%, 35% { opacity: 0; }
  36.7%, 51.7% { opacity: 1; transform: scaleX(1); transform-origin: right; }
  60%, 100% { opacity: 0; transform: scaleX(.2); transform-origin: right; }
}
@keyframes cub-dust {
  0%, 6.7% { opacity: 0; transform: translate(0, 0) scale(.3); }
  10% { opacity: .95; transform: translate(-14px, -6px) scale(1); }
  30% { opacity: 0; transform: translate(-50px, -26px) scale(1.7); }
  30.01%, 55% { opacity: 0; transform: translate(0, 0) scale(.3); }
  58.3% { opacity: .9; transform: translate(10px, -4px) scale(.9); }
  76.7%, 100% { opacity: 0; transform: translate(34px, -20px) scale(1.4); }
}
@keyframes cub-dust-alt {
  0%, 6.7% { opacity: 0; transform: translate(0, 0) scale(.3); }
  11.7% { opacity: .9; transform: translate(-24px, -16px) scale(1.1); }
  31.7% { opacity: 0; transform: translate(-70px, -44px) scale(1.5); }
  31.71%, 55% { opacity: 0; transform: translate(0, 0) scale(.3); }
  60% { opacity: .85; transform: translate(18px, -14px) scale(1); }
  78.3%, 100% { opacity: 0; transform: translate(46px, -34px) scale(1.3); }
}

/* Phones and tablets: the heading and the cub share a row, so the paragraph always starts below both. */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; }
  .hero .wrap > div:first-child { display: contents; }
  .hero .kicker, .hero .lede, .hero .actions { grid-column: 1 / -1; }
  .hero h1 { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(2rem, 8.4vw, 2.4rem); }
  .cub-wrap { grid-column: 2; grid-row: 2; width: 132px; margin: -4px -8px 18px 0; align-self: start; }
  .cub-lines { width: 110px; }
}
@media (max-width: 400px) {
  .cub-wrap { width: 118px; margin-right: -14px; }
}
@media (max-width: 359px) {
  .cub-wrap { width: 104px; }
  .hero .kicker { letter-spacing: .14em; }
}