/* cat-animation.css
   Single source of truth for the cat SVG animations.
   Requires --intensity to be set in :root by the consuming page.
   Edit animations here; they apply to both cat-test and portfolio/index.
*/

@keyframes cat-float {
  0%, 100% { translate: 0 0; }
  50%       { translate: 0 calc(-0.1px * var(--intensity)); }
}

/* Head tilt: synced to eye wander (13s), rotates opposite to gaze direction */
@keyframes cat-head-tilt {
  0%, 15%    { rotate: 0deg; }
  20%        { rotate: calc(-2.2deg * var(--intensity)); } /* eyes right → head tilts left */
  33%        { rotate: calc(-2.2deg * var(--intensity)); }
  39%        { rotate: 0deg; }
  60%, 68%   { rotate: 0deg; }
  73%        { rotate: calc(2.4deg * var(--intensity)); }  /* eyes left → head tilts right */
  85%        { rotate: calc(2.4deg * var(--intensity)); }
  91%, 100%  { rotate: 0deg; }
}

@keyframes cat-head-breathe {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(calc(1 + 0.035 * var(--intensity))); }
}

@keyframes cat-whisker-left {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(calc(-3.2deg * var(--intensity))); }
}

@keyframes cat-whisker-right {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(calc(3.2deg * var(--intensity))); }
}

/* Both eyes: drift + synchronized blink */
@keyframes cat-eye-blink {
  0%      { transform: translateY(0) scaleY(1); }
  40%     { transform: translateY(calc(0.5px * var(--intensity))) scaleY(1); }
  66%     { transform: translateY(calc(0.3px * var(--intensity))) scaleY(1); }
  68%     { transform: translateY(calc(0.3px * var(--intensity))) scaleY(0.08); }
  70%     { transform: translateY(calc(0.3px * var(--intensity))) scaleY(1); }
  100%    { transform: translateY(0) scaleY(1); }
}

/* Eye wander: left/right drift via individual translate property */
@keyframes cat-eye-wander {
  0%, 15%    { translate: 0 0; }
  20%        { translate: calc(1px * var(--intensity)) 0; }
  33%        { translate: calc(1px * var(--intensity)) 0; }
  39%        { translate: 0 0; }
  60%, 68%   { translate: 0 0; }
  73%        { translate: calc(-1.1px * var(--intensity)) 0; }
  85%        { translate: calc(-1.1px * var(--intensity)) 0; }
  91%, 100%  { translate: 0 0; }
}

/* Individual whisker fan/spread */
@keyframes cat-wt-cw {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(calc(2deg * var(--intensity))); }
}

@keyframes cat-wt-ccw {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(calc(-2deg * var(--intensity))); }
}

/* Inner marks float — resting 1.5px lower */
@keyframes cat-detail {
  0%, 100% { transform: translateY(1.5px); }
  50%       { transform: translateY(calc(2px - 0.35px * var(--intensity))); }
}

/* Detail wander: synced to eye wander (13s), follows head direction (opposite to eyes) */
@keyframes cat-detail-wander {
  0%, 15%    { transform: translateX(0); }
  20%        { transform: translateX(calc(0.4px * var(--intensity))); } /* eyes right → details shift left */
  33%        { transform: translateX(calc(0.4px * var(--intensity))); }
  39%        { transform: translateX(0); }
  60%, 68%   { transform: translateX(0); }
  73%        { transform: translateX(calc(-0.55px * var(--intensity))); } /* eyes left → details shift right */
  85%        { transform: translateX(calc(-0.55px * var(--intensity))); }
  91%, 100%  { transform: translateX(0); }
}

/* Nose: slower, subtler */
@keyframes cat-nose-detail {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(calc(-0.4px * var(--intensity))); }
}

/* Nose wander: same cycle as eye wander, slightly less travel */
@keyframes cat-nose-wander {
  0%, 15%    { translate: 0 0; }
  20%        { translate: calc(1px * var(--intensity)) 0; }
  33%        { translate: calc(1px * var(--intensity)) 0; }
  39%        { translate: 0 0; }
  60%, 68%   { translate: 0 0; }
  73%        { translate: calc(-1.2px * var(--intensity)) 0; }
  85%        { translate: calc(-1.3px * var(--intensity)) 0; }
  91%, 100%  { translate: 0 0; }
}

#cat-head {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    cat-float 4s ease-in-out infinite,
    cat-head-breathe 4s ease-in-out infinite,
    cat-head-tilt 13s ease-in-out infinite;
}

#cat-whiskers-left {
  transform-box: fill-box;
  transform-origin: right center;
  animation: cat-whisker-left 3.5s ease-in-out infinite;
}

#cat-whiskers-right {
  transform-box: fill-box;
  transform-origin: left center;
  animation: cat-whisker-right 3.5s ease-in-out infinite 0.4s;
}

#cat-eye-left,
#cat-eye-right {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    cat-eye-blink 7s ease-in-out infinite,
    cat-eye-wander 13s ease-in-out infinite;
}

#cat-detail-left,
#cat-detail-right {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-detail 5.5s ease-in-out infinite;
}

#cat-detail-left-wand,
#cat-detail-right-wand {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-detail-wander 13s ease-in-out infinite;
}

#cat-whiskers-left-wand,
#cat-whiskers-right-wand {
  animation: cat-detail-wander 13s ease-in-out infinite;
}

#cat-nose {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    cat-nose-detail 6s ease-in-out infinite,
    cat-nose-wander 13s ease-in-out infinite;
}

#wl-1, #wl-2, #wl-3,
#wr-1, #wr-2, #wr-3 {
  transform-box: fill-box;
}

#wl-1 { transform-origin: right center; animation: cat-wt-cw  2.8s ease-in-out infinite; }
#wl-2 { transform-origin: right center; animation: cat-wt-ccw 3.5s ease-in-out infinite 0.7s; }
#wl-3 { transform-origin: right center; animation: cat-wt-ccw 2.6s ease-in-out infinite 1.2s; }

#wr-1 { transform-origin: left center; animation: cat-wt-ccw 2.9s ease-in-out infinite 0.4s; }
#wr-2 { transform-origin: left center; animation: cat-wt-cw  3.3s ease-in-out infinite 1.0s; }
#wr-3 { transform-origin: left center; animation: cat-wt-cw  2.5s ease-in-out infinite 0.6s; }

/* ── Pet / click interaction ──────────────────────────── */
@keyframes cat-squish {
  0%   { transform: scale(1, 1); }
  12%  { transform: scale(1.2, 0.68); }
  30%  { transform: scale(0.93, 1.14); }
  50%  { transform: scale(1.07, 0.92); }
  68%  { transform: scale(0.98, 1.04); }
  84%  { transform: scale(1.02, 0.99); }
  100% { transform: scale(1, 1); }
}

@keyframes cat-eye-squish {
  0%   { transform: scaleX(1) scaleY(1); }
  12%  { transform: scaleX(2.6) scaleY(0.25); }
  60%  { transform: scaleX(2.6) scaleY(0.25); }
  80%  { transform: scaleX(1) scaleY(1); }
  100% { transform: scaleX(1) scaleY(1); }
}

#cat-svg {
  cursor: pointer;
}

#cat-svg.cat-squishing #cat-body {
  transform-box: fill-box;
  transform-origin: center;
  cursor: pointer;
  animation: cat-squish 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

#cat-svg.cat-squishing #cat-eye-left-squish,
#cat-svg.cat-squishing #cat-eye-right-squish {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-eye-squish 0.8s ease-out;
}