/* styles.css — transparent overlay + a roaming, cross-faded watercolor cat.
 *
 * Layer roles (so JS positioning, breathing, walk-bob & pet-squish never fight):
 *   .cat       -> JS sets transform: translate3d(x,y) scaleX(facing)   [position + flip]
 *   .cat-inner -> gentle breathing (scale)
 *   .cat-pose  -> walk-bob (while walking) / pet-squish (one-shot)
 *   img.f      -> one image per pose, cross-faded by [data-pose]
 */

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: transparent; overflow: hidden;
  pointer-events: none;                 /* only .cat is a click target */
  -webkit-user-select: none; user-select: none; cursor: default;
}

/* JS positions this every frame (starts top-left; transform moves it to the floor). */
.cat {
  position: fixed; left: 0; top: 0;   /* fixed (not absolute) so the cat stays glued to the fixed .desk scene even if the page ever scrolls */
  width: 184px; height: 184px;
  pointer-events: auto;                 /* the cat IS clickable (to pet it) */
  touch-action: none;                   /* a finger drag picks up the cat */
  transform-origin: 50% 100%;
  -webkit-user-drag: none;
  /* NOTE: a custom hand cursor was attempted here but macOS will not let this
   * transparent / always-on-top(screen-saver) / non-focusable / click-through
   * overlay own the cursor — neither `cursor: url(...)` nor `cursor: none` is
   * honored (the OS keeps drawing its arrow). Would need native NSCursor code
   * or a focusable-window rearchitecture. Left as default for now. */
}

/* the teaser wand follows the cursor (string anchor = the arrow tip) and sways
 * like a pendulum; renderer.js sets translate+rotate and toggles .show. */
#wand {
  position: fixed; left: 0; top: 0;
  width: 45px; height: 158px;
  transform-origin: 22px 0;             /* the rod top = the cursor point (real feather-wand PNG) */
  pointer-events: none;
  opacity: 0;
  z-index: 9998;
  will-change: transform;
  transition: opacity 0.22s ease;
  -webkit-user-drag: none;
}

.cat.cat-break-active:not(.held), .cat.cat-break-returning {
  transition: transform .62s cubic-bezier(.22, 1, .36, 1);
}

.cat-break-card {
  position: fixed; top: 34px; left: 50%; z-index: 100020;
  transform: translateX(-50%); width: min(330px, calc(100vw - 24px)); box-sizing: border-box;
  display: grid; gap: 7px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.74);
  border-radius: 18px; color: #262318; background: rgba(255,250,235,.94);
  box-shadow: 0 14px 34px rgba(30,24,14,.22); backdrop-filter: blur(14px);
  font: 600 14px/1.25 -apple-system,"PingFang TC",system-ui,sans-serif;
  pointer-events: auto; text-align: center;
}
.cat-break-card[hidden] { display: none; }
.cat-break-card strong { font-size: 17px; }
.cat-break-card > span { color: #625b49; font-variant-numeric: tabular-nums; }
.cat-break-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cat-break-actions button { border: 1px solid #c7bda5; border-radius: 999px; padding: 7px 12px; background: #fff; color: #332f24; font: inherit; cursor: pointer; }
.cat-break-actions button:focus-visible { outline: 3px solid #567e35; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cat.cat-break-active:not(.held), .cat.cat-break-returning { transition-duration: .01ms; }
}
#wand.show { opacity: 1; }

/* 🎾 fetch ball — click to throw; only clickable while it sits idle on the floor.
 * renderer.js sets translate(x,y) and toggles .show. */
#fetchball {
  position: fixed; left: 0; top: 0;
  font-size: 40px; line-height: 1;
  pointer-events: auto; cursor: pointer;
  opacity: 0; z-index: 9997;
  filter: drop-shadow(0 5px 5px rgba(40,30,15,0.35));
  will-change: transform; transition: opacity 0.25s ease;
  -webkit-user-drag: none; user-select: none;
}
#fetchball.show { opacity: 1; }

/* 💩 a little pile the dog leaves behind, slowly fading */
.poo-pile {
  position: fixed; left: 0; top: 0; font-size: 22px; line-height: 1;
  pointer-events: none; z-index: 50; user-select: none;
  filter: drop-shadow(0 2px 2px rgba(40,30,15,0.3));
  animation: pooFade 7s ease-out forwards;
}
@keyframes pooFade {
  0% { opacity: 0; transform: translateY(-8px) scale(0.5); }
  10% { opacity: 1; transform: none; }
  76% { opacity: 1; }
  100% { opacity: 0; }
}

/* 🐕💦 pee stream + splashing puddle — shows while the dog holds the pee pose.
 * Origin / angle / length were dialled in by the user with the tuner (2026-06-21):
 * rotate(30deg) aims the stream toward where the user dragged the landing point.
 * To re-aim, change the rotate() below and match the puddle's counter-rotation
 * (negate it). Bold (5px, mostly-opaque gold, glow) to read at ~184px pet size. */
.cat-pee {
  position: absolute; top: 64%; left: 28%; width: 5px; height: 0; z-index: 6;
  transform-origin: top center; transform: rotate(30deg);
  background: linear-gradient(to bottom, rgba(248,214,84,0.35), rgba(247,202,58,0.97));
  border-radius: 3px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(208,158,28,0.85));
}
.cat[data-pose="pee"] .cat-pee { animation: peeStream 2.6s ease-out forwards; }
.cat-pee::after {                       /* splashing puddle at the foot of the stream */
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%) rotate(-30deg);   /* counter the stream tilt → puddle lies flat */
  width: 0; height: 6px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(247,206,70,0.92), rgba(247,206,70,0.22));
  box-shadow: 0 0 3px rgba(208,158,28,0.6);
}
.cat[data-pose="pee"] .cat-pee::after { animation: peePuddle 2.6s ease-out forwards; }
@keyframes peeStream {
  0% { height: 0; opacity: 0; } 14% { height: 62px; opacity: 1; }
  86% { height: 62px; opacity: 1; } 100% { height: 62px; opacity: 0; }
}
@keyframes peePuddle {
  0%, 12% { width: 0; opacity: 0; } 30% { opacity: 1; } 100% { width: 36px; opacity: 0.8; }
}
/* 🧸 floor toys (🦴 bone for the dog · ⚽ ball + 🧸 teddy for the BB) — sit on the
 * floor; the matching pet wanders over and plays. renderer.js sets translate + show. */
.floor-toy {
  position: fixed; left: 0; top: 0; width: 52px; height: 52px; z-index: 60;
  font-size: 34px; line-height: 52px; text-align: center;       /* emoji fallback, centred */
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  pointer-events: auto; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 3px 3px rgba(40,30,15,0.35)); will-change: transform;
  transition: opacity 0.16s ease;
}
.floor-toy.img { font-size: 0; }       /* a real PNG is set as background → hide the emoji glyph */
.floor-toy:active { cursor: grabbing; }
.floor-toy.in-use { opacity: 0; pointer-events: none; }
.floor-toy[data-toy="churu"] { width: 42px; height: 72px; }
.floor-toy[data-toy="bowl"] {
  width: 58px; height: 28px; box-sizing: border-box; font-size: 0;
  background: #d9c7ae; border: 2px solid #816d5b;
  border-radius: 50% 50% 38% 38%;
}
.floor-toy[data-toy="bowl"]::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 10px;
  background: #55b8d8; border: 1px solid #2785a8; border-radius: 50%;
}
.floor-toy[data-toy="bowl"]::after {
  content: ""; position: absolute; left: 18px; top: 6px; width: 19px; height: 4px;
  border-top: 2px solid rgba(255,255,255,0.8); border-radius: 50%;
}

/* 🐕💩 a poop dropping out at the rear during the squat (the lingering pile is .poo-pile) */
.cat-poo {
  position: absolute; left: 27%; bottom: 26%; font-size: 18px; line-height: 1;
  opacity: 0; pointer-events: none; z-index: 6; user-select: none;
  filter: drop-shadow(0 1px 1px rgba(40,30,15,0.35));
}
.cat[data-pose="poop"] .cat-poo { animation: pooDrop 4.4s ease-in forwards; }
@keyframes pooDrop {
  0%, 38% { opacity: 0; transform: translateY(-6px) scale(0.4); }
  50% { opacity: 1; transform: translateY(-6px) scale(1); }
  86% { opacity: 1; transform: translateY(14px) scale(1); }
  100% { opacity: 0; transform: translateY(20px) scale(1); }
}

.cat-inner {                            /* breathing — per-pet rate/phase (set by renderer) so a
                                           group of pets doesn't breathe in mechanical unison */
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  animation: breathe var(--breatheDur, 4.4s) ease-in-out infinite;
  animation-delay: var(--breatheDelay, 0s);
}
@keyframes breathe { 0%,100% { transform: scale(1.000); } 50% { transform: scale(1.018); } }

/* 🍃 idle sway: a gentle weight-shift while a pet is just sitting/standing. Lives on
   .cat-pose, which is otherwise idle (walk-bob / pet-squish / zoom / headbump all
   OVERRIDE this via more-specific selectors), so it only shows during calm poses —
   this is what makes a NON-roaming sitter (e.g. the BB) still feel alive. Composes
   with breathing because they're on different layers. Per-pet rate/phase via vars. */
.cat-pose {                             /* idle sway · walk-bob · pet-squish */
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  animation: idleSway var(--swayDur, 6.5s) ease-in-out infinite;
  animation-delay: var(--swayDelay, 0s);
}
@keyframes idleSway {
  0%, 100% { transform: rotate(-0.6deg); }
  50%      { transform: rotate(0.6deg) translateY(-1px); }
}
.cat[data-pose="walk"] .cat-pose { animation: walkBob 0.5s ease-in-out infinite; }
@keyframes walkBob {           /* single-frame gait: bob + weight-shifting waddle so
                                  it reads as walking, not sliding */
  0%   { transform: translateY(0)    translateX(0)     scaleY(1.00) rotate(-1.6deg); }
  25%  { transform: translateY(-6px) translateX(-1.5px) scaleY(0.98) rotate(0deg); }
  50%  { transform: translateY(0)    translateX(0)     scaleY(1.00) rotate(1.6deg); }
  75%  { transform: translateY(-6px) translateX(1.5px)  scaleY(0.98) rotate(0deg); }
  100% { transform: translateY(0)    translateX(0)     scaleY(1.00) rotate(-1.6deg); }
}
.cat.pet .cat-pose { animation: petSquish 0.3s ease; }
@keyframes petSquish { 50% { transform: scale(1.06, 0.94); } }

/* 😌 SLOW blink ("cat kiss"): lengthen the pose cross-fade so the eyes close &
 * open languidly while the brain holds the blink pose far longer than a flutter. */
.cat.slow-blink .f { transition-duration: 0.5s; }

/* 🐱 HEAD-BUMP (頭錘/bunting): the cat leans its head up toward your cursor as if
 * bumping into your hand. renderer sets --bump-x to lean toward the cursor side. */
.cat.headbump .cat-pose { animation: headBump 0.42s ease; }
@keyframes headBump {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(var(--bump-x, 0px), -10px) scale(1.04, 0.97); }
  70%  { transform: translate(calc(var(--bump-x, 0px) * 0.4), -3px); }
  100% { transform: translate(0, 0); }
}
.cat.headbump .cat-heart { animation: heartPop 0.8s ease-out; }

/* ZOOMIES: a faster, bouncier, more tilted gait while sprinting (overrides walkBob) */
.cat.zoom .cat-pose { animation: zoomBob 0.3s ease-in-out infinite; }
@keyframes zoomBob {
  0%   { transform: translateY(0)     scaleY(1.00) rotate(-3deg); }
  25%  { transform: translateY(-11px) scaleY(0.96); }
  50%  { transform: translateY(0)     scaleY(1.00) rotate(3deg); }
  75%  { transform: translateY(-11px) scaleY(0.96); }
  100% { transform: translateY(0)     scaleY(1.00) rotate(-3deg); }
}

/* Multi-frame artwork already carries its footfalls. The legacy single-image
 * bob uses a separate clock and makes those feet float, especially on a sprint.
 * Keep breathing on .cat-inner, and the old bob only for single-frame sets. */
.cat[data-pose="walk"].multi-frame-walk .cat-pose { animation: none; }

/* PAT-PAT (拍): a quick lift distinct from a stroke's gentle squish */
.cat.patted .cat-pose { animation: patLift 0.34s ease-out; }
@keyframes patLift {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-13px) scaleY(1.05); }
  70%  { transform: translateY(0)     scale(1.06, 0.94); }
  100% { transform: translateY(0); }
}

/* Food interactions need to read without labels. The loose floor prop disappears
 * once reached; a mouth-aligned version takes over so the action cannot hide
 * beneath the cat's body. */
.cat-action-prop {
  position: absolute; display: block; opacity: 0; pointer-events: none;
  z-index: 8; box-sizing: border-box;
}
.cat.feeding-churu .cat-action-prop {
  left: 70px; top: 44px; width: 52px; height: 84px; opacity: 1;
  background: url("assets/toys/churu.png") center top / 84px 84px no-repeat;
  transform-origin: 50% 8%;
  animation: churuOffer 0.64s ease-in-out infinite;
}
.cat.feeding-churu .cat-action-prop::after {
  content: ""; position: absolute; left: 22px; top: 8px; width: 8px; height: 10px;
  background: #ee8198; border-radius: 2px 2px 7px 7px;
  animation: churuTongue 0.64s ease-in-out infinite;
}
.cat.feeding-churu .cat-pose { animation: churuLean 0.64s ease-in-out infinite; }
@keyframes churuOffer {
  0%, 100% { transform: translateY(2px) rotate(-5deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes churuTongue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.2; }
  45%, 70% { transform: scaleY(1); opacity: 1; }
}
@keyframes churuLean {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(2px) rotate(0.5deg); }
}

.cat.drinking .cat-action-prop {
  left: 0; bottom: 0; width: 70px; height: 34px; opacity: 1;
  background: #d9c7ae; border: 3px solid #816d5b;
  border-radius: 50% 50% 38% 38%;
  filter: drop-shadow(0 3px 3px rgba(40,30,15,0.28));
}
.cat.drinking .cat-action-prop::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 14px;
  background: #55b8d8; border: 1px solid #2785a8; border-radius: 50%;
}
.cat.drinking .cat-action-prop::after {
  content: ""; position: absolute; left: 20px; top: 7px; width: 25px; height: 6px;
  border-top: 2px solid rgba(255,255,255,0.88); border-bottom: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%; animation: waterRipple 0.6s ease-out infinite;
}
.cat.drinking .cat-pose { animation: drinkLap 0.6s ease-in-out infinite; }
@keyframes drinkLap {
  0%, 100% { transform: translateY(-1px) rotate(-0.4deg); }
  50% { transform: translateY(3px) rotate(0.4deg); }
}
@keyframes waterRipple {
  0% { transform: scaleX(0.55); opacity: 0.2; }
  70% { transform: scaleX(1.15); opacity: 0.9; }
  100% { transform: scaleX(1.3); opacity: 0; }
}

/* one image layer per pose; only the active [data-pose] is visible */
.f {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  transform: translate3d(var(--pose-x, 0px), var(--pose-y, 0px), 0) scale(var(--pose-scale, 1));
  transform-origin: 50% 100%;
  opacity: 0; transition: opacity 0.26s ease;
  pointer-events: none; -webkit-user-drag: none;
  /* keep the cat visible on ANY background without a harsh smudge: a soft
   * NEUTRAL-grey halo (shows on both white and dark backdrops, far gentler on
   * white fur than a black contour) + a soft ground shadow. */
  filter:
    drop-shadow(0 0 2px rgba(95,95,95,0.55))
    drop-shadow(0 0 1px rgba(95,95,95,0.55))
    drop-shadow(0 8px 10px rgba(60,40,20,0.22));
}
.cat[data-pose="sit"]     .sit,
.cat[data-pose="blink"]   .blink,
.cat[data-pose="happy"]   .happy,
.cat[data-pose="loaf"]    .loaf,
.cat[data-pose="groom"]   .groom,
.cat[data-pose="back"]    .back,
.cat[data-pose="sleep"]   .sleep,
.cat[data-pose="stretch"] .stretch,
.cat[data-pose="look"]    .look,
.cat[data-pose="play"]    .play,
.cat[data-pose="eat"]     .eat,
.cat[data-pose="litter"]  .litter,
.cat[data-pose="belly"]   .belly,
.cat[data-pose="pickup"]  .pickup,
.cat[data-pose="pee"]     .pee,
.cat[data-pose="poop"]    .poop,
.cat[data-pose="walk"]    .walk { opacity: 1; }

/* the walk frame faces RIGHT; renderer flips .cat for leftward. Don't cross-fade it
 * (instant pose change feels snappier mid-stroll). */
.cat[data-pose="walk"] .walk,
.cat[data-pose="walk"] .walk2,
.cat[data-pose="walk"] .walk3,
.cat[data-pose="walk"] .walk4 { transition: none; }

/* Four-frame gait. Renderer only advances through frames that loaded. */
.cat[data-pose="walk"] .walk2,
.cat[data-pose="walk"] .walk3,
.cat[data-pose="walk"] .walk4 { opacity: 0; }
.cat[data-pose="walk"].step2 .walk,
.cat[data-pose="walk"].step3 .walk,
.cat[data-pose="walk"].step4 .walk { opacity: 0; }
.cat[data-pose="walk"].step2 .walk2,
.cat[data-pose="walk"].step3 .walk3,
.cat[data-pose="walk"].step4 .walk4 { opacity: 1; }

/* tray 暫停: freeze every motion mid-frame (renderer adds .paused + stops the brain) */
.cat.paused .cat-inner,
.cat.paused .cat-pose,
.cat.paused .cat-zzz { animation-play-state: paused; }

/* floating "z" while asleep */
.cat-zzz {
  position: absolute; top: 8px; right: 26px;
  font-size: 22px; color: #cf9b5e; opacity: 0;
  pointer-events: none; font-family: Georgia, serif; transition: opacity 0.3s ease;
}
.cat[data-pose="sleep"] .cat-zzz { opacity: 1; animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz {
  0%,100% { transform: translateY(0)    scale(0.9); opacity: 0.35; }
  50%     { transform: translateY(-9px) scale(1.1); opacity: 1; }
}

/* STROKE reaction: a heart pops up */
.cat-heart {
  position: absolute; top: 6px; left: 50%;
  font-size: 26px; color: #ff6b81; opacity: 0;
  pointer-events: none; transform: translateX(-50%);
}
.cat.pet .cat-heart { animation: heartPop 0.8s ease-out; }
@keyframes heartPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px)   scale(0.4); }
  30%  { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(0.9); }
}

/* 💭 thought bubble: a little emoji pops above the cat (renderer sets text + .thinking) */
.cat-think {
  position: absolute; top: -6px; left: 50%;
  font-size: 26px; opacity: 0;
  pointer-events: none; transform: translateX(-50%);
}
.cat.thinking .cat-think { animation: thinkPop 2.4s ease-out; }
@keyframes thinkPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px)   scale(0.3); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.1); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-16px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(0.85); }
}

/* Picked up: Tonic has a dedicated two-paw reach pose. Its pivot sits between
   the paws so the body hangs below the cursor; other pets keep the fallback. */
.cat.held .cat-pose { animation: dangle 0.9s ease-in-out infinite; }
.cat.held[data-pose="pickup"] .cat-pose {
  transform-origin: 50% 20%;
  animation: heldReach 1.15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes dangle {
  0%,100% { transform: rotate(-5deg); }
  50%     { transform: rotate(5deg); }
}
@keyframes heldReach {
  0%,100% { transform: rotate(-2.2deg); }
  50%     { transform: translateY(1px) rotate(2.2deg); }
}
.cat.held .f { filter: drop-shadow(0 14px 12px rgba(40,25,10,0.28)); }   /* lifted = bigger shadow */

@media (prefers-reduced-motion: reduce) {
  .cat.held .cat-pose { animation: none; }
  .cat.held[data-pose="pickup"] .cat-pose { transform: none; }
}

/* 🔴 laser dot: a glowing red dot that rides the cursor (renderer positions + shows it) */
#laser {
  position: fixed; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #ff8a8a, #ff2d2d 55%, #b00000);
  box-shadow: 0 0 10px 3px rgba(255,40,40,0.7);
  margin: -7px 0 0 -7px;                 /* center on the point */
  pointer-events: none; opacity: 0; z-index: 99990;
  will-change: transform;
}
#laser.show { opacity: 1; }

/* PAT-PAT reaction: two playful visual sparks flutter up. */
.cat-note {
  position: absolute; top: 4px; left: 58%;
  font-size: 22px; color: #6f93d6; opacity: 0;
  pointer-events: none; font-family: Georgia, serif;
}
.cat-note.n2 { left: 40%; font-size: 17px; }
.cat.patted .cat-note  { animation: notePop 0.7s ease-out; }
.cat.patted .cat-note.n2 { animation: notePop 0.7s ease-out 0.08s; }
@keyframes notePop {
  0%   { opacity: 0; transform: translateY(2px)   rotate(-8deg) scale(0.5); }
  35%  { opacity: 1; transform: translateY(-14px) rotate(6deg)  scale(1.1); }
  100% { opacity: 0; transform: translateY(-36px) rotate(12deg) scale(0.85); }
}

/* Public three-cat interaction: each footstep follows its rendered position. */
.cat.cat-break-active.mouse-play-tracking:not(.held) { transition: none; }
.mouse-play-prototype.cat-break-showing .break-demo-controls { display: none; }
/* Prototype gaze uses the same sit calibration and fixed body across directions. */
.cat[data-pose="gaze-left"] .gaze-left,
.cat[data-pose="gaze-right"] .gaze-right { opacity: 1; }
.cat.gaze-ready .gaze-left, .cat.gaze-ready .gaze-right,
.cat.gaze-ready .sit { transition: none; }
/* These are direction keyframes, not a morph: never show overlapping heads. */
.cat.gaze-ready[data-gaze] .f { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cat.gaze-ready .gaze-left, .cat.gaze-ready .gaze-right,
  .cat.gaze-ready .sit { transition: none; }
}

/* Local continuous gaze study: one original-texture surface, no frame overlap. */
.cat[data-pose="gaze-smooth"] .gaze-smooth { opacity: 1; transition: none; }

/* Browser reduced motion: keep the pose and response, without decorative movement. */
@media(prefers-reduced-motion:reduce){
  .cat-inner,.cat-pose,.cat-heart,.cat-note,.cat-think,.cat-zzz,.cat-action-prop,.cat .f{animation:none!important;transition:none!important}
  .cat.pet .cat-pose,.cat.patted .cat-pose,.cat.held .cat-pose{transform:none!important}
  .cat-heart,.cat-note,.cat-think{opacity:0!important}
}