/* ===== GATTINO & GOMITOLO ===== */
.cat-chase {
  position: fixed;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 999;
  pointer-events: none;
}

/* Gattino - posizionato via JS in base allo scroll */
.cat-chase .cat {
  position: absolute;
  top: 80px;
  left: 0;
}

/* === TRE POSE === */
.cat-walking { display: none; transition: transform 0.3s ease; }
.cat-idle    { display: block; }
.cat-caught  { display: none; }

.cat-chase.scrolling .cat-walking { display: block; }
.cat-chase.scrolling .cat-idle    { display: none; }
.cat-chase.scrolling .cat-caught  { display: none; }

.cat-chase.caught .cat-walking { display: none; }
.cat-chase.caught .cat-idle    { display: none; }
.cat-chase.caught .cat-caught  { display: block; }

/* Dondolio del gatto quando è in stato caught */
.cat-chase.caught .cat {
  animation: catRock 2s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes catRock {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

/* Animazione camminata */
.cat-chase.scrolling .cat {
  animation: catWalk 0.35s ease-in-out infinite alternate;
}

@keyframes catWalk {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* Gomitolo */
.cat-chase .yarn-ball {
  position: absolute;
  bottom: 15px;
  left: 14px;
}

/* Filo ondulato */
.yarn-thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

@media (max-width: 768px) {
  .cat-chase {
    display: none;
  }
}