/* Hero illustration: a tuxedo Maine Coon pushes things off the table; each
   one picks up a task label as it falls. Pure CSS, no script.
   Timing: three items take turns in one 12s loop (4s each); the cat's own
   motion (arm, head, puff of dust) repeats every 4s. */

/* Wide screens: copy on the left, the cat on the right. */
.hero-inner.has-art { max-width: 74rem; }
/* Narrow screens: the cat leads, the copy follows. */
.hero-inner.has-art { display: flex; flex-direction: column; align-items: center; }
.hero-cat { order: -1; width: min(100%, 27rem); margin: 0 auto 1.25rem; }
.hero-cat svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-cat text { font-family: inherit; font-weight: 600; font-size: 18px; fill: #eef2f7; }
@media (min-width: 1000px) {
  .hero-inner.has-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 2.5rem;
    text-align: left;
  }
  .hero-inner.has-art .hero-cat { order: 2; width: 100%; margin: 0; }
  .hero-inner.has-art .hero-points,
  .hero-inner.has-art .hero-actions { justify-content: flex-start; }
}

.hc-arm   { transform-origin: 0 0; animation: hc-arm 4s linear infinite; }
/* The arm stretches along its length; the round ends undo that stretch so
   the paw stays a paw. */
.hc-round { transform-box: fill-box; transform-origin: 50% 50%; animation: hc-round 4s linear infinite; }
.hc-head  { transform-origin: 420px 214px; animation: hc-head 4s ease-in-out infinite; }
.hc-ear   { transform-origin: 470px 118px; animation: hc-ear 7s linear infinite; }
.hc-tail  { transform-origin: 352px 346px; animation: hc-tail 3.4s ease-in-out infinite alternate; }
.hc-lid   { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: hc-blink 6s linear infinite; }
.hc-puff  { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: hc-puff 4s linear infinite; }
.hc-item  { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: hc-item 12s linear infinite; }
.hc-tag   { transform-box: fill-box; transform-origin: 0 50%; opacity: 0; animation: hc-tag 12s linear infinite; }
.hc-n2    { animation-delay: 4s; }
.hc-n3    { animation-delay: 8s; }

/* rest -> reach -> slow, deliberate push -> back. Values are the
   shoulder-to-paw angle and length for each pose. */
@keyframes hc-arm {
  0%, 15%   { transform: rotate(81.9deg) scaleX(1); }
  30%       { transform: rotate(40.1deg) scaleX(1.355); }
  55%, 60%  { transform: rotate(26.6deg) scaleX(1.951); }
  75%, 100% { transform: rotate(81.9deg) scaleX(1); }
}
@keyframes hc-round {
  0%, 15%   { transform: scaleX(1); }
  30%       { transform: scaleX(0.738); }
  55%, 60%  { transform: scaleX(0.5126); }
  75%, 100% { transform: scaleX(1); }
}
@keyframes hc-head {
  0%, 18%   { transform: rotate(0deg); }
  34%, 58%  { transform: rotate(4.5deg); }
  74%, 100% { transform: rotate(0deg); }
}
@keyframes hc-ear {
  0%, 62%, 70%, 100% { transform: rotate(0deg); }
  64%, 68% { transform: rotate(9deg); }
  66%      { transform: rotate(-3deg); }
}
@keyframes hc-tail {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(5deg); }
}
@keyframes hc-blink {
  0%, 92%, 100% { transform: scaleY(0); }
  95.5%         { transform: scaleY(1); }
}
@keyframes hc-puff {
  0%, 82%  { opacity: 0; transform: scale(0.3); }
  84%      { opacity: 0.55; transform: scale(0.6); }
  96%, 100% { opacity: 0; transform: scale(1.5); }
}
/* One item's 4s turn is the first third of the 12s loop. */
@keyframes hc-item {
  0%     { opacity: 0; transform: translate(0, -8px) rotate(0deg) scale(0.7); }
  2.6%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1.04); }
  3.6%, 10% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  18.3%  { opacity: 1; transform: translate(60px, 0) rotate(0deg) scale(1); animation-timing-function: ease-in; }
  20.7%  { opacity: 1; transform: translate(72px, 12px) rotate(40deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  27.5%  { opacity: 1; transform: translate(92px, 196px) rotate(205deg) scale(1); animation-timing-function: ease-out; }
  28.6%  { opacity: 1; transform: translate(95px, 182px) rotate(219deg) scale(1); animation-timing-function: ease-in; }
  29.7%, 32% { opacity: 1; transform: translate(98px, 196px) rotate(230deg) scale(1); }
  33.3%, 100% { opacity: 0; transform: translate(98px, 196px) rotate(230deg) scale(1); }
}
@keyframes hc-tag {
  0%, 18.3% { opacity: 0; transform: translate(60px, 0) scale(0.6); animation-timing-function: ease-in; }
  20.7%  { opacity: 1; transform: translate(72px, 12px) scale(1.06); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  27.5%  { opacity: 1; transform: translate(92px, 196px) scale(1); animation-timing-function: ease-out; }
  28.6%  { opacity: 1; transform: translate(95px, 182px) scale(1); animation-timing-function: ease-in; }
  29.7%, 32% { opacity: 1; transform: translate(98px, 196px) scale(1); }
  33.3%, 100% { opacity: 0; transform: translate(98px, 196px) scale(1); }
}

/* Still frame: one thing mid-fall, already labeled. */
@media (prefers-reduced-motion: reduce) {
  .hc-arm, .hc-round, .hc-head, .hc-ear, .hc-tail, .hc-lid, .hc-puff, .hc-item, .hc-tag { animation: none; }
  .hc-arm  { transform: rotate(26.6deg) scaleX(1.951); }
  .hc-round { transform: scaleX(0.5126); }
  .hc-head { transform: rotate(4.5deg); }
  .hc-item.hc-n1 { opacity: 1; transform: translate(80px, 96px) rotate(118deg); }
  .hc-tag.hc-n1  { opacity: 1; transform: translate(80px, 96px); }
}