/* Modular pet rig — parts, growth, anchored gear */

.tg-pet--rig {
  display: grid;
  place-items: center;
  --tg-growth: 1;
  --tg-rig-size: min(94%, 22.5rem);
  overflow: visible;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
}

.tg-rig {
  position: relative;
  width: var(--tg-rig-size);
  aspect-ratio: 1;
  transform: scale(var(--tg-growth, 1));
  transform-origin: 50% 90%;
  will-change: transform;
}

.tg-part {
  position: absolute;
  left: calc(var(--tg-px, 50) * 1%);
  top: calc(var(--tg-py, 50) * 1%);
  width: calc(var(--tg-pw, 40) * 1%);
  height: calc(var(--tg-ph, 40) * 1%);
  transform: translate(-50%, -50%);
  transform-origin: var(--tg-origin, 50% 50%);
  z-index: var(--tg-pz, 3);
  pointer-events: none;
}

/* Part art fills its part box. Slots do NOT — they are positioned from the
   anchor custom properties below, so they must never receive `inset`. */
.tg-part__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.tg-slot {
  position: absolute;
  display: grid;
  place-items: center;
}

.tg-part__art img,
.tg-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.tg-slot {
  z-index: 2;
  /* `inset: auto` used to sit below these two lines to cancel the shared
     `inset: 0`. Because `inset` is the shorthand for top/right/bottom/left, it
     also reset left/top to auto — silently discarding EVERY anchor value the
     server computes and applyGearAnchors() pushes. Gear collapsed to the
     top-left of its parent part. The shared rule no longer touches .tg-slot. */
  left: calc(var(--tg-sx, 50) * 1%);
  top: calc(var(--tg-sy, 50) * 1%);
  width: calc(var(--tg-sw, 60) * 1%);
  /* Height comes from the artwork's own aspect ratio rather than an independent
     percentage. The authored --tg-sh had no relation to the SVG canvas, so
     object-fit: contain letterboxed every slot by a different amount — and by a
     different amount per growth stage, since part boxes reshape. Deriving height
     from width keeps the box congruent with the art at every stage. */
  aspect-ratio: var(--tg-sar, 1);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: var(--tg-sorigin, 50% 50%);
}

.tg-part__art {
  z-index: 1;
}

/* Stage silhouette polish — soft LCD blob read */
.tg-pet[data-stage="hatchling"] .tg-rig {
  filter: saturate(1.06) brightness(1.02);
}

.tg-pet[data-stage="juvenile"] .tg-rig {
  filter: saturate(1.04);
}

.tg-pet[data-stage="adult"] .tg-rig {
  filter: saturate(1.08) contrast(1.03);
}

/* Form bands morph silhouette without fighting part pivot animations */
.tg-pet[data-form$="_grow"] .tg-part--head .tg-part__art {
  transform: scale(1.04);
}

.tg-pet[data-form$="_bloom"] .tg-part--head .tg-part__art {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(200, 245, 66, 0.35));
}

.tg-pet[data-form$="_bloom"] .tg-part--torso .tg-part__art {
  transform: scale(1.05, 1.1);
}

.tg-pet[data-form$="_bloom"] .tg-part--arm-l .tg-part__art,
.tg-pet[data-form$="_bloom"] .tg-part--arm-r .tg-part__art {
  transform: scale(1.04);
}

.tg-pet[data-anim="idle_look"] .tg-part--head,
.tg-pet[data-express="look"] .tg-part--head {
  animation: tg-part-look 1s ease both;
}

.tg-pet[data-anim="idle_yawn"] .tg-part--head {
  animation: tg-part-yawn 1.1s ease both;
}

.tg-pet[data-anim="idle_bounce"] .tg-part--legs,
.tg-pet[data-anim="idle_bounce"] .tg-part--torso {
  animation: tg-part-bounce 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

/* ---- Part-local animations ---- */
.tg-pet[data-anim="wave"] .tg-part--arm-r,
.tg-pet[data-express="wave"] .tg-part--arm-r {
  animation: tg-part-wave 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.tg-pet[data-anim="cheer"] .tg-part--arm-l,
.tg-pet[data-anim="cheer"] .tg-part--arm-r {
  animation: tg-part-cheer-arm 1.2s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.tg-pet[data-anim="cheer"] .tg-part--arm-l {
  animation-delay: 0.05s;
}

.tg-pet[data-anim="pet"] .tg-part--head,
.tg-pet[data-express="nod"] .tg-part--head,
.tg-pet[data-anim="teach"] .tg-part--head {
  animation: tg-part-nod 0.9s ease both;
}

.tg-pet[data-express="shake"] .tg-part--head,
.tg-pet[data-anim="discipline"] .tg-part--head {
  animation: tg-part-shake 0.7s ease both;
}

.tg-pet[data-anim="tickle"] .tg-part--torso,
.tg-pet[data-anim="tickle"] .tg-part--head,
.tg-pet[data-express="giggle"] .tg-part--torso,
.tg-pet[data-express="giggle"] .tg-part--head {
  animation: tg-part-giggle 0.9s ease both;
}

.tg-pet[data-anim="nuzzle"] .tg-part--head,
.tg-pet[data-express="nuzzle"] .tg-part--head {
  animation: tg-part-nuzzle 1.2s ease both;
}

.tg-pet[data-express="cheer"] .tg-part--arm-l,
.tg-pet[data-express="cheer"] .tg-part--arm-r {
  animation: tg-part-cheer-arm 1.15s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.tg-pet[data-express="cheer"] .tg-part--arm-l {
  animation-delay: 0.05s;
}

.tg-pet[data-anim="idle"] .tg-part--arm-l {
  animation: tg-part-breathe-arm 3.4s ease-in-out infinite;
}

.tg-pet[data-anim="idle"] .tg-part--arm-r {
  animation: tg-part-breathe-arm 3.4s ease-in-out infinite reverse;
}

.tg-pet[data-anim="idle"] .tg-part--head {
  animation: tg-part-breathe-head 3.6s ease-in-out infinite;
}

.tg-pet[data-anim="dance"] .tg-part--arm-l {
  animation: tg-part-cheer-arm 0.55s ease-in-out infinite alternate;
}

.tg-pet[data-anim="dance"] .tg-part--arm-r {
  animation: tg-part-wave 0.55s ease-in-out infinite alternate;
}

.tg-pet[data-anim="sleep"] .tg-part--head,
.tg-pet[data-anim="sleep_loop"] .tg-part--head {
  animation: tg-part-sleep-head 1.8s ease both;
}

.tg-pet[data-anim="sleep_loop"] .tg-part--head {
  animation: tg-part-sleep-breathe 3.2s ease-in-out infinite;
}

.tg-pet[data-anim="wake"] .tg-part--arm-l,
.tg-pet[data-anim="wake"] .tg-part--arm-r {
  animation: tg-part-stretch-arm 1.6s ease both;
}

.tg-pet[data-anim="wake"] .tg-part--head {
  animation: tg-part-yawn 1.4s ease both;
}

.tg-pet[data-anim="wake_early"] .tg-part--head {
  animation: tg-part-shake 0.85s ease both;
}

.tg-pet[data-anim="play"] .tg-part--arm-r {
  animation: tg-part-wave 0.85s ease both;
}

.tg-pet[data-anim="play"] .tg-part--legs {
  animation: tg-part-bounce 1.2s cubic-bezier(0.28, 0.15, 0.2, 1) both;
}

/* Secondary action — care verbs (detail without fighting whole-body keyframes) */
.tg-pet[data-anim="feed"] .tg-part--head {
  animation: tg-part-nibble 1.5s ease both;
}

.tg-pet[data-anim="feed"] .tg-part--arm-r {
  animation: tg-part-feed-reach 1.5s ease both;
}

.tg-pet[data-anim="wash"] .tg-part--arm-l,
.tg-pet[data-anim="wash"] .tg-part--arm-r {
  animation: tg-part-wash-scrub 1.5s ease both;
}

.tg-pet[data-anim="wash"] .tg-part--arm-r {
  animation-delay: 0.08s;
}

.tg-pet[data-anim="work"] .tg-part--arm-r {
  animation: tg-part-work-hammer 1.45s ease both;
}

.tg-pet[data-anim="work"] .tg-part--torso {
  animation: tg-part-work-lean 1.45s ease both;
}

.tg-pet[data-anim="teach"] .tg-part--arm-l {
  animation: tg-part-teach-point 1.5s ease both;
}

.tg-pet[data-anim="dance"] .tg-part--legs {
  animation: tg-part-bounce 0.7s ease-in-out infinite;
}

.tg-pet[data-anim="discipline"] .tg-part--arm-r {
  animation: tg-part-stamp-arm 1.2s ease both;
}

.tg-pet[data-anim="hatch"] .tg-part--head {
  animation: tg-part-yawn 1.4s ease both;
}

/* Follow-through: aura / held lag behind primary motion */
.tg-pet[data-anim="play"] .tg-layer--aura,
.tg-pet[data-anim="dance"] .tg-layer--aura,
.tg-pet[data-anim="cheer"] .tg-layer--aura {
  animation: tg-aura-follow 1.2s ease both;
}

.tg-pet[data-anim="feed"] .tg-layer--aura,
.tg-pet[data-anim="pet"] .tg-layer--aura {
  animation: tg-aura-follow 1.1s ease both;
}

.tg-slot--held img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.tg-pet[data-anim="feed"] .tg-slot--held,
.tg-pet[data-anim="play"] .tg-slot--held {
  animation: tg-slot-held-bob 1.1s ease both;
}

.tg-pet[data-anim="dance"] .tg-slot--held,
.tg-pet[data-anim="cheer"] .tg-slot--held {
  animation: tg-slot-held-spin 1.4s ease both;
}

@keyframes tg-part-wave {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(-28deg); }
  55% { transform: translate(-50%, -50%) rotate(18deg); }
  75% { transform: translate(-50%, -50%) rotate(-12deg); }
}

@keyframes tg-part-cheer-arm {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) translateY(0); }
  40% { transform: translate(-50%, -50%) rotate(-35deg) translateY(-12%); }
  70% { transform: translate(-50%, -50%) rotate(20deg) translateY(-6%); }
}

@keyframes tg-part-nod {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  30% { transform: translate(-50%, -50%) rotate(10deg) translateY(6%); }
  60% { transform: translate(-50%, -50%) rotate(-4deg); }
}

@keyframes tg-part-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(-50%, -50%) rotate(-12deg); }
  40% { transform: translate(-50%, -50%) rotate(12deg); }
  60% { transform: translate(-50%, -50%) rotate(-8deg); }
  80% { transform: translate(-50%, -50%) rotate(6deg); }
}

@keyframes tg-part-giggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(-52%, -48%) rotate(-6deg); }
  40% { transform: translate(-48%, -52%) rotate(6deg); }
  60% { transform: translate(-51%, -49%) rotate(-4deg); }
  80% { transform: translate(-49%, -51%) rotate(3deg); }
}

@keyframes tg-part-nuzzle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  45% { transform: translate(-42%, -46%) rotate(12deg); }
}

@keyframes tg-part-breathe-arm {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) rotate(4deg); }
}

@keyframes tg-part-breathe-head {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-3%); }
}

@keyframes tg-part-sleep-head {
  0% { transform: translate(-50%, -50%) rotate(0); }
  100% { transform: translate(-50%, -50%) rotate(14deg) translateY(8%); }
}

@keyframes tg-slot-held-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -56%) scale(1.08); }
}

@keyframes tg-part-look {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  35% { transform: translate(-46%, -50%) rotate(-8deg); }
  70% { transform: translate(-54%, -50%) rotate(6deg); }
}

@keyframes tg-part-yawn {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -48%) scale(1.06, 0.94); }
  55% { transform: translate(-50%, -52%) scale(0.98, 1.04); }
}

@keyframes tg-part-bounce {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  40% { transform: translate(-50%, -50%) translateY(-10%); }
  70% { transform: translate(-50%, -50%) translateY(4%); }
}

/* —— Lineage ambient life (continuous while idle) —— */
.tg-pet[data-lineage="ocean"][data-anim="idle"] .tg-part--legs {
  animation: tg-part-fin-sway 3.8s ease-in-out infinite;
}

.tg-pet[data-lineage="ocean"][data-anim="idle"] .tg-part--head {
  animation: tg-part-breathe-head 3.6s ease-in-out infinite, tg-part-gills 4.2s ease-in-out infinite;
}

.tg-pet[data-lineage="ember"][data-anim="idle"] .tg-part--head {
  animation: tg-part-breathe-head 3.2s ease-in-out infinite, tg-part-flame 2.4s ease-in-out infinite;
}

.tg-pet[data-lineage="forest"][data-anim="idle"] .tg-part--head {
  animation: tg-part-breathe-head 3.8s ease-in-out infinite, tg-part-ear-twitch 5.5s ease-in-out infinite;
}

.tg-pet[data-lineage="cyber"][data-anim="idle"] .tg-part--head {
  animation: tg-part-breathe-head 3.4s ease-in-out infinite, tg-part-led-pulse 2.2s ease-in-out infinite;
}

.tg-pet[data-lineage="cosmos"][data-anim="idle"] .tg-part--arm-l,
.tg-pet[data-lineage="cosmos"][data-anim="idle"] .tg-part--arm-r {
  animation: tg-part-wing-drift 4.6s ease-in-out infinite;
}

.tg-pet[data-lineage="cosmos"][data-anim="idle"] .tg-part--arm-r {
  animation-direction: reverse;
}

.tg-pet[data-anim="idle_stretch"] .tg-part--arm-l,
.tg-pet[data-anim="idle_stretch"] .tg-part--arm-r {
  animation: tg-part-stretch-arm 1.1s ease both;
}

.tg-pet[data-anim="idle_wiggle"] .tg-part--torso,
.tg-pet[data-anim="idle_wiggle"] .tg-part--head {
  animation: tg-part-giggle 0.85s ease both;
}

.tg-pet[data-anim="idle_preen"] .tg-part--arm-r {
  animation: tg-part-preen 1.05s ease both;
}

.tg-pet[data-anim="idle_preen"] .tg-part--head {
  animation: tg-part-nod 1.05s ease both;
}

@keyframes tg-part-fin-sway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50% { transform: translate(-50%, -50%) rotate(4deg); }
}

@keyframes tg-part-gills {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08) saturate(1.1); }
}

@keyframes tg-part-flame {
  0%, 100% { filter: brightness(1) saturate(1); }
  40% { filter: brightness(1.12) saturate(1.2); }
  70% { filter: brightness(1.04) saturate(1.08); }
}

@keyframes tg-part-ear-twitch {
  0%, 72%, 100% { transform: translate(-50%, -50%) rotate(0); }
  76% { transform: translate(-50%, -50%) rotate(-5deg); }
  82% { transform: translate(-50%, -50%) rotate(4deg); }
  88% { transform: translate(-50%, -50%) rotate(-2deg); }
}

@keyframes tg-part-led-pulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50% { filter: brightness(1.14) drop-shadow(0 0 6px rgba(200, 245, 66, 0.45)); }
}

@keyframes tg-part-wing-drift {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotate(6deg) translateY(-4%); }
}

@keyframes tg-part-stretch-arm {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) translateY(0); }
  40% { transform: translate(-50%, -50%) rotate(-40deg) translateY(-14%); }
  70% { transform: translate(-50%, -50%) rotate(12deg) translateY(-4%); }
}

@keyframes tg-part-preen {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  35% { transform: translate(-50%, -50%) rotate(-50deg) translateY(-8%); }
  60% { transform: translate(-50%, -50%) rotate(-35deg) translateY(-4%); }
}

@keyframes tg-part-nibble {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  22% { transform: translate(-46%, -48%) rotate(8deg) scale(1.04); }
  30%, 40% { transform: translate(-45%, -47%) rotate(10deg) scale(1.05); }
  52% { transform: translate(-48%, -50%) rotate(2deg) scale(0.96, 1.04); }
  68% { transform: translate(-50%, -54%) rotate(-4deg) scale(1.06); }
}

@keyframes tg-part-feed-reach {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-50%, -50%) rotate(-40deg) translateY(-8%); }
  35%, 48% { transform: translate(-50%, -50%) rotate(-45deg) translateY(-10%); }
  70% { transform: translate(-50%, -50%) rotate(8deg); }
}

@keyframes tg-part-wash-scrub {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(-50%, -50%) rotate(-30deg); }
  40% { transform: translate(-50%, -50%) rotate(28deg); }
  60% { transform: translate(-50%, -50%) rotate(-22deg); }
  80% { transform: translate(-50%, -50%) rotate(16deg); }
}

@keyframes tg-part-work-hammer {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) translateY(0); }
  18%, 28% { transform: translate(-50%, -50%) rotate(-55deg) translateY(-12%); }
  40% { transform: translate(-50%, -50%) rotate(25deg) translateY(8%); }
  55% { transform: translate(-50%, -50%) rotate(-40deg) translateY(-8%); }
  68% { transform: translate(-50%, -50%) rotate(18deg) translateY(6%); }
}

@keyframes tg-part-work-lean {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-50%, -50%) rotate(-6deg); }
  42% { transform: translate(-50%, -50%) rotate(8deg); }
  70% { transform: translate(-50%, -50%) rotate(-4deg); }
}

@keyframes tg-part-teach-point {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  30%, 55% { transform: translate(-50%, -50%) rotate(-48deg) translateY(-10%); }
  75% { transform: translate(-50%, -50%) rotate(-12deg); }
}

@keyframes tg-part-stamp-arm {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25%, 35% { transform: translate(-50%, -50%) rotate(-50deg) translateY(-10%); }
  48% { transform: translate(-50%, -50%) rotate(20deg) translateY(6%); }
}

@keyframes tg-part-sleep-breathe {
  0%, 100% { transform: translate(-50%, -50%) rotate(14deg) translateY(8%); }
  50% { transform: translate(-50%, -50%) rotate(16deg) translateY(11%); }
}

@keyframes tg-aura-follow {
  0% { transform: scale(1) translateY(0); opacity: 0.85; }
  35% { transform: scale(1.08) translateY(-6%); opacity: 1; }
  70% { transform: scale(1.04) translateY(-2%); opacity: 0.95; }
  100% { transform: scale(1) translateY(0); opacity: 0.9; }
}

@keyframes tg-slot-held-spin {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  40% { transform: translate(-50%, -58%) rotate(18deg) scale(1.1); }
  70% { transform: translate(-50%, -52%) rotate(-10deg) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .tg-part,
  .tg-slot--held,
  .tg-layer--aura {
    animation: none !important;
  }
}