/* Cat cameo: a cartoon cat that peeks in along the bottom of the home hero,
   startles, and backs off the right edge 25s after the page loads. */

.cat-cameo {
  --cat-fur: #e8935a;
  --cat-fur-deep: #c97347;
  --cat-fur-rim: #d9803f;
  --cat-belly: #fbeedd;
  --cat-pink: #f2a6b8;
  --cat-eye: #21242b;
  position: absolute;
  right: 64px;
  bottom: 6px;
  width: 116px;
  height: 82px;
  z-index: 1;
  pointer-events: none;
}

.cat-cameo-body { position: absolute; inset: 0; transform: translateX(230px); }

.cat-shadow { position: absolute; left: 20px; bottom: -6px; width: 70px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(1px); }

.cat-lines { position: absolute; right: -6px; top: 30px; display: flex; flex-direction: column; gap: 7px; opacity: 0; }
.cat-lines span { display: block; width: 30px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.55); }
.cat-lines span:nth-child(2) { width: 20px; margin-left: 6px; }

.cat-tail { position: absolute; left: 88px; bottom: 21px; width: 65px; height: 12px; border-radius: 10px; background: linear-gradient(180deg, var(--cat-fur), var(--cat-fur-deep)); transform-origin: left center; transform: rotate(8deg); }

.cat-leg { position: absolute; bottom: 2px; width: 10px; height: 16px; border-radius: 5px; background: var(--cat-fur-deep); }
.cat-leg.l1 { left: 26px; } .cat-leg.l2 { left: 42px; } .cat-leg.l3 { left: 60px; } .cat-leg.l4 { left: 76px; }

.cat-body-shape { position: absolute; left: 16px; bottom: 10px; width: 80px; height: 46px; border-radius: 46% 46% 42% 42% / 60% 60% 40% 40%; background: linear-gradient(160deg, var(--cat-fur) 55%, var(--cat-fur-rim)); box-shadow: inset -8px -6px 10px rgba(0,0,0,.12); }
.cat-belly { position: absolute; left: 30px; bottom: 4px; width: 46px; height: 24px; border-radius: 50%; background: var(--cat-belly); opacity: .9; }
.cat-stripe { position: absolute; background: var(--cat-fur-deep); border-radius: 40%; opacity: .55; }
.cat-stripe.s1 { width: 16px; height: 7px; left: 24px; top: 6px; transform: rotate(-14deg); }
.cat-stripe.s2 { width: 18px; height: 7px; left: 46px; top: 2px; transform: rotate(-10deg); }

.cat-head { position: absolute; left: 2px; top: 4px; width: 50px; height: 46px; border-radius: 50% 50% 46% 46%; background: linear-gradient(160deg, var(--cat-fur) 55%, var(--cat-fur-rim)); box-shadow: inset -6px -6px 8px rgba(0,0,0,.12); }

.cat-ear { position: absolute; width: 0; height: 0; border-style: solid; }
.cat-ear.left { top: -11px; left: 2px; border-width: 0 8px 16px 8px; border-color: transparent transparent var(--cat-fur) transparent; transform: rotate(-14deg); transform-origin: bottom center; }
.cat-ear.right { top: -11px; left: 26px; border-width: 0 8px 16px 8px; border-color: transparent transparent var(--cat-fur) transparent; transform: rotate(10deg); transform-origin: bottom center; }
.cat-ear-inner { position: absolute; width: 0; height: 0; border-style: solid; top: 3px; left: -4px; border-width: 0 4px 9px 4px; border-color: transparent transparent var(--cat-pink) transparent; }

.cat-whisker { position: absolute; height: 1px; background: rgba(0,0,0,.45); left: -12px; width: 14px; }
.cat-whisker.w1 { top: 22px; }
.cat-whisker.w2 { top: 26px; }
.cat-whisker.w3 { top: 30px; transform: rotate(8deg); }

.cat-eye { position: absolute; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--cat-eye); }
.cat-eye.left { left: 4px; }
.cat-eye.right { left: 22px; }
.cat-eye::before { content: ""; position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0 #fff; transform: scale(1); }

.cat-nose { position: absolute; top: 30px; left: -3px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--cat-pink); }

.cat-mouth { position: absolute; top: 36px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #6b2f24; transform: scale(0); }

/* shared face timeline */
@keyframes cat-face-eye { 0%, 26% { transform: scaleY(.55); } 32%, 58% { transform: scaleY(1.15) scaleX(1.1); } 72% { transform: scaleY(.7); } 100% { transform: scaleY(.55); } }
@keyframes cat-face-ring { 0%, 26% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 32%, 58% { box-shadow: 0 0 0 3px rgba(255,255,255,.9); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes cat-face-mouth { 0%, 28% { transform: scale(0); } 34%, 56% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes cat-face-lines { 0%, 14% { opacity: 0; } 18%, 28% { opacity: 1; } 36%, 100% { opacity: 0; } 60% { opacity: 1; } 92% { opacity: 0; } }

/* classic-peek movement */
@keyframes cat-move-classic {
  0%   { transform: translateX(230px) scale(1); }
  14%  { transform: translateX(-6px) scale(1.04, .94); }
  18%  { transform: translateX(4px) scale(.97, 1.04); }
  22%  { transform: translateX(0) scale(1); }
  58%  { transform: translateX(0) scale(1); }
  64%  { transform: translateX(6px) scale(1.1, .9); }
  100% { transform: translateX(260px) scale(1.06, .95); }
}
@keyframes cat-ear-classic { 0%, 20% { transform: rotate(var(--ear-rest, 0deg)); } 32%, 58% { transform: rotate(0deg) translateY(-2px); } 100% { transform: rotate(var(--ear-rest, 0deg)); } }
@keyframes cat-tail-classic { 0%, 20% { transform: rotate(8deg); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(10deg); } 100% { transform: rotate(-18deg); } }
@keyframes cat-shadow-classic { 0%, 20% { transform: scaleX(.4); opacity: .3; } 22% { transform: scaleX(1); opacity: .7; } 58% { transform: scaleX(1); opacity: .6; } 100% { transform: scaleX(.5); opacity: .3; } }

.cat-cameo.is-playing .cat-cameo-body { animation: cat-move-classic 3.96s cubic-bezier(.34,1.4,.4,1) forwards; }
.cat-cameo.is-playing .cat-ear        { animation: cat-ear-classic 3.96s linear forwards; }
.cat-cameo.is-playing .cat-tail       { animation: cat-tail-classic 3.96s ease-in-out forwards; }
.cat-cameo.is-playing .cat-shadow     { animation: cat-shadow-classic 3.96s ease-in-out forwards; }
.cat-cameo.is-playing .cat-eye        { animation: cat-face-eye 3.96s ease-in-out forwards; }
.cat-cameo.is-playing .cat-eye::before{ animation: cat-face-ring 3.96s ease-in-out forwards; }
.cat-cameo.is-playing .cat-mouth      { animation: cat-face-mouth 3.96s ease-in-out forwards; }
.cat-cameo.is-playing .cat-lines      { animation: cat-face-lines 3.96s linear forwards; }

@media (max-width: 750px) {
  .cat-cameo { right: 24px; transform: scale(.8); transform-origin: right bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-cameo { display: none; }
}