/* A living hero, kept on the same quiet white product stage. */
.cat-page .hero-actions { gap: 24px; }
.cat-auto-note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.cat-auto-note .icon { width: 18px; height: 18px; stroke-width: 1.4; }
.cat-walk-trigger { gap: 8px; white-space: nowrap; }
.cat-walk-trigger .icon { width: 18px; height: 18px; }
.cat-walk-trigger:disabled { opacity: .55; }
.cat-motion-toggle { width: 40px; height: 40px; min-width: 44px; min-height: 44px; border-radius: 50%; background: var(--parchment); color: #515154; }
.cat-motion-toggle .icon { width: 18px; height: 18px; stroke-width: 1.7; }
.cat-play-status { font-size: 12px; color: var(--muted); line-height: 1.6; min-height: 20px; margin: 13px 20px 0; letter-spacing: 0; }
.cat-page .hero-stage { margin-top: 20px; overflow: hidden; }
.cat-page .hero-product-crop { pointer-events: auto; visibility: visible; transition: opacity .3s ease, visibility .3s; }
.cat-idle-actor { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; transform-origin: 50% 85%; cursor: pointer; }
.cat-idle-actor:active { transform: scale(.99); }
.cat-idle-actor:focus-visible { outline-offset: -10px; border-radius: 45%; }
.cat-page .hero-product { animation: none; pointer-events: none; }
.cat-page .hero-model-label { z-index: 3; pointer-events: none; }
.hero-model-label .cat-pet-button { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 17px; padding: 5px 0; font-size: 14px; color: var(--blue); font-weight: 400; letter-spacing: -.2px; pointer-events: auto; }
.cat-pet-button .tiny-icon { width: 14px; height: 14px; }
.cat-walk-area { position: absolute; inset: 0; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
.cat-walk-actor { --sprite-size: 600px; width: calc(var(--sprite-size) * 1.2); height: calc(var(--sprite-size) * 1.15); position: absolute; left: 50%; bottom: calc(var(--sprite-size) * 1.15 * -.045); transform: translateX(-50%) translateX(var(--walk-x,0px)); transform-origin: 50% 50%; will-change: transform; padding: 0; background: #fff; border: 0; cursor: pointer; }
.cat-walk-actor:active { transform: translateX(-50%) translateX(var(--walk-x,0px)); }
.cat-walk-actor:focus-visible { outline-offset: -14px; border-radius: 35%; }
.cat-walk-sprite { position: absolute; left: 50%; bottom: 0; width: calc(var(--sprite-size) * 1.15); height: calc(var(--sprite-size) * 1.15); transform: translateX(-50%); background-image: url('assets/cats/walking-sprite.png'); background-size: 300% 200%; background-position: 0% 0%; background-repeat: no-repeat; background-color: #fff; }
.cat-walk-video { position: absolute; left: 50%; bottom: 0; width: calc(var(--sprite-size) * 1.15); height: calc(var(--sprite-size) * 1.15); transform: translateX(-50%); object-fit: contain; background: #fff; pointer-events: none; opacity: 0; }
#overview[data-cat-media="video"] .cat-walk-video { opacity: 1; }
#overview[data-cat-media="video"] .cat-walk-sprite { visibility: hidden; }
#overview[data-cat-media="video"] .cat-walk-actor { bottom: calc(var(--sprite-size) * 1.15 * -.109375); }
#overview[data-cat-ready="ready"] .hero-product-crop { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
#overview[data-cat-ready="ready"] .cat-walk-area { opacity: 1; visibility: visible; }
#overview[data-cat-ready="ready"] .cat-walk-actor { pointer-events: auto; }
#overview[data-cat-ready="ready"] .hero-model-label { opacity: 0; visibility: hidden; pointer-events: none; }
#overview[data-cat-paused="true"] .hero-product-crop { transform: translateX(-50%); will-change: auto; }
#overview[data-cat-paused="true"] .cat-walk-actor { will-change: auto; }
.pet-heart { position: absolute; width: 23px; height: 23px; color: var(--blue); left: 72%; top: 27%; opacity: 0; pointer-events: none; stroke-width: 1.5; }
.pet-heart-two { left: 80%; top: 31%; width: 16px; height: 16px; }
.pet-heart-three { left: 66%; top: 23%; width: 13px; height: 13px; }
#overview.is-petted .cat-idle-actor { animation: none; }
#overview.is-petted .pet-heart { animation: cat-heart-rise 1s ease-out both; }
#overview.is-petted .pet-heart-two { animation-delay: .12s; }
#overview.is-petted .pet-heart-three { animation-delay: .2s; }
@keyframes cat-happy {
  0%,100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-1.1deg) scale(1.008); }
  48% { transform: rotate(1deg) scale(1.012); }
  74% { transform: rotate(-.5deg) scale(1.005); }
}
@keyframes cat-heart-rise {
  0% { opacity: 0; transform: translateY(7px) scale(.75); }
  18% { opacity: .85; }
  65% { opacity: .6; }
  100% { opacity: 0; transform: translateY(-45px) scale(1.1); }
}
@media (min-width:1600px) { .cat-walk-actor { --sprite-size: 660px; } }
@media (max-width:1100px) { .cat-walk-actor { --sprite-size: 540px; } }
@media (max-width:833px) { .cat-walk-actor { --sprite-size: 490px; } }
@media (max-width:640px) {
  .cat-page .hero-stage { height: 350px; }
  .cat-page .hero-product-crop { height: 350px; width: 290px; }
  .cat-page .hero-actions { gap: 13px; }
  .cat-page .hero-actions > .button { font-size: 14px; padding-inline: 18px; }
  .cat-page .hero-actions .cat-walk-trigger { font-size: 13px; gap: 5px; }
  .cat-walk-trigger .icon { width: 16px; height: 16px; }
  .cat-motion-toggle { flex-shrink: 0; }
  .cat-play-status { font-size: 11px; max-width: 320px; margin-inline: auto; padding-inline: 10px; }
  .cat-auto-note { font-size: 13px; gap: 6px; }
  .cat-walk-actor { --sprite-size: min(390px,calc(100vw - 60px)); }
}
@media (max-width:374px) {
  .cat-page .hero-stage { height: 300px; }
  .cat-page .hero-product-crop { height: 300px; width: 250px; }
  .cat-page .hero-actions { gap: 8px; }
  .cat-page .hero-actions > .button { font-size: 12px; padding-inline: 15px; }
  .cat-page .hero-actions .cat-walk-trigger { font-size: 12px; }
  .cat-walk-actor { --sprite-size: calc(100vw - 60px); }
}
@media (prefers-reduced-motion:reduce) {
  .cat-walk-area, .cat-page .hero-product-crop { transition: none; }
  #overview.is-petted .cat-idle-actor { animation: none; }
  #overview.is-petted .pet-heart { display: none; }
}