/* ═══════════════════════════════════════════════════
   Gali Scroll Animation — CSS
   ═══════════════════════════════════════════════════ */

/* ── Container ── */
#gali-scroll {
  position: fixed;
  z-index: 8;
  pointer-events: none;
  width: 80px;
  height: 120px;
  will-change: transform;
  /* Start hidden until GSAP positions it */
  opacity: 0;
}

#gali-scroll svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Pose visibility ── */
#gali-scroll .gali-pose { opacity: 0; transition: opacity 0.3s ease; }
#gali-scroll .gali-pose.active { opacity: 1; }

/* ── Idle animations (applied to sub-parts) ── */
@keyframes gali-ear-twitch {
  0%, 85%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-6deg); }
  91% { transform: rotate(4deg); }
  94% { transform: rotate(-3deg); }
}

@keyframes gali-tail-sway {
  0%, 100% { transform: rotate(0deg); transform-origin: -10px 10px; }
  30% { transform: rotate(8deg); transform-origin: -10px 10px; }
  70% { transform: rotate(-5deg); transform-origin: -10px 10px; }
}

@keyframes gali-walk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes gali-curious-head {
  0%, 100% { transform: rotate(0deg) translate(0, -192px); }
  50% { transform: rotate(-12deg) translate(4px, -192px); }
}

/* Sitting idle — ear twitch + tail sway */
#gali-scroll[data-pose="sit"] .gali-tail {
  animation: gali-tail-sway 4s ease-in-out infinite;
}
#gali-scroll[data-pose="sit"] .gali-ear-left {
  animation: gali-ear-twitch 6s ease-in-out infinite;
}
#gali-scroll[data-pose="sit"] .gali-ear-right {
  animation: gali-ear-twitch 6s ease-in-out infinite 0.15s;
}

/* Walking — bob up and down */
#gali-scroll[data-pose="walk"] .gali-body-group {
  animation: gali-walk-bob 0.5s ease-in-out infinite;
}
#gali-scroll[data-pose="walk"] .gali-tail {
  animation: gali-tail-sway 2s ease-in-out infinite;
}

/* Curious — head tilt */
#gali-scroll[data-pose="curious"] .gali-head {
  animation: gali-curious-head 3s ease-in-out infinite;
}
#gali-scroll[data-pose="curious"] .gali-tail {
  animation: gali-tail-sway 3s ease-in-out infinite;
}

/* ── Flip for walking left ── */
#gali-scroll.facing-left svg {
  transform: scaleX(-1);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #gali-scroll { display: none !important; }
}

/* ── Mobile: smaller cat ── */
@media (max-width: 768px) {
  #gali-scroll {
    width: 50px;
    height: 75px;
  }
}