/* ==========================================================================
   TurbonX BD — TX Pet (site-wide mascot + messenger panel)
   The mascot is the artist's own artwork (assets/img/pet/*, split into
   layers from "TX Pet.png"): a silver glass blob. It looks exactly the same in
   light and dark mode — the artwork is never recoloured or inverted. Only the
   messenger panel below follows the theme, through the normal design tokens.
   Mood is set by tx-pet.js as [data-mood]: neutral (default), hover, pleased,
   happy, content / bliss (being carried / stroked), sad + angry (mild, form
   mistakes), dizzy (shaken hard), sleepy.
   ========================================================================== */

.tx-pet {
  --pet-w: 64px;
  position: fixed;
  width: var(--pet-w);
  aspect-ratio: 1128 / 1096;
  z-index: var(--z-pet);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.18));
}
@media (max-width: 639px) { .tx-pet { --pet-w: 46px; } }
.tx-pet.is-dragging { cursor: grabbing; }

/* --- resting transparency: left alone for 3s it eases to ~72% so the page shows through --- */
.tx-pet { transition: opacity 260ms ease, translate 420ms var(--ease-out); }
.tx-pet.is-faded { opacity: 0.72; transition: opacity 3s ease-in-out, translate 420ms var(--ease-out); }

/* --- docked at a screen border: tucked in about a third and leaning round the corner ---
   (its saved left/top stay fully on-screen; this is only a translate + a 3D lean, and
   about a third is hidden so both eyes and the mouth stay in view). */
/* How much hides differs per edge because the artwork box isn't symmetrical: its left
   third is mostly the empty sparkle corner (so hiding that costs little), while the
   right and bottom edges are solid body — those tuck in less, and lean less, so it
   never disappears too far into the border. */
.tx-pet { --hide: 0.28; }
.tx-pet[data-dock="left"]   { --hide: 0.30; translate: calc(var(--pet-w) * var(--hide) * -1 - 8px) 0; }
.tx-pet[data-dock="right"]  { --hide: 0.21; translate: calc(var(--pet-w) * var(--hide) + 8px) 0; }
.tx-pet[data-dock="top"]    { --hide: 0.26; translate: 0 calc(var(--pet-w) * var(--hide) * -1 - 8px); }
.tx-pet[data-dock="bottom"] { --hide: 0.20; translate: 0 calc(var(--pet-w) * var(--hide) + 8px); }
.tx-pet.is-peeking[data-dock] { --hide: 0.10; }          /* now and then it leans further out to look around */
.tx-pet.is-out[data-dock] { translate: 0 0; }             /* hovered / panel open / alert: steps fully out */
.tx-pet[data-dock="left"]   .tx-pet__art { transform: perspective(360px) rotateY(20deg) rotate(-3deg); }
.tx-pet[data-dock="right"]  .tx-pet__art { transform: perspective(360px) rotateY(-20deg) rotate(3deg); }
.tx-pet[data-dock="top"]    .tx-pet__art { transform: perspective(360px) rotateX(16deg); }
.tx-pet[data-dock="bottom"] .tx-pet__art { transform: perspective(360px) rotateX(-16deg); }
.tx-pet.is-out[data-dock] .tx-pet__art { transform: none; }
.tx-pet__badge { transition: left 320ms var(--ease-out), top 320ms var(--ease-out); }

/* --- looking out of the screen at the person: eyes wide and straight ahead, a little head dip --- */
.tx-pet__eye { scale: var(--eye-s, 1); transition: transform 150ms var(--ease-out), scale 220ms var(--ease-out); }
.tx-pet.is-facing { --eye-s: 1.07; }
.tx-pet.is-facing .tx-pet__art { translate: 0 2.5%; }

/* --- hopping out of the way of important content: a quick springy move + a little whoosh --- */
.tx-pet.is-hopping { transition: left 520ms cubic-bezier(0.2, 1.35, 0.4, 1), top 520ms cubic-bezier(0.2, 1.35, 0.4, 1), opacity 260ms ease, translate 420ms var(--ease-out); }
.tx-pet__art.is-whoosh,
.tx-pet[data-mood] .tx-pet__art.is-whoosh { animation: tx-pet-whoosh 0.55s var(--ease-out) 1; }
@keyframes tx-pet-whoosh { 0% { scale: 1; } 25% { scale: 1.16 0.86; } 60% { scale: 0.94 1.06; } 100% { scale: 1; } }

/* --- a warm nod ("go on, you're doing fine") --- */
.tx-pet__art.is-nod,
.tx-pet[data-mood] .tx-pet__art.is-nod { animation: tx-pet-nod 0.9s ease-in-out 2; }
@keyframes tx-pet-nod { 0%, 100% { translate: 0 0; } 35% { translate: 0 7%; } 70% { translate: 0 -1.5%; } }

/* --- slammed into a border: a squashed little "bonk" --- */
.tx-pet__art.is-bonk,
.tx-pet.is-dragging .tx-pet__art.is-bonk,
.tx-pet[data-mood] .tx-pet__art.is-bonk { animation: tx-pet-bonk 0.55s var(--ease-out) 1; }
@keyframes tx-pet-bonk {
  0% { scale: 1; rotate: 0deg; }
  18% { scale: 0.86 1.1; rotate: -7deg; }
  45% { scale: 1.07 0.94; rotate: 5deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* base.css gives every <img> a grey "image well" background — the artwork is
   transparent, so that would paint a box behind the mascot. */
.tx-pet img { display: block; background: none; -webkit-user-drag: none; pointer-events: none; }

/* --- the artwork, layer by layer ------------------------------------------ */
.tx-pet__art {
  position: absolute; inset: 0;
  transform-origin: 62% 62%;
  rotate: var(--tilt, 0deg);
  transition: rotate 200ms var(--ease-out), scale var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out), transform 460ms var(--ease-out);
  animation: tx-pet-breathe 3.8s var(--ease-in-out) infinite;
}
.tx-pet.is-dragging .tx-pet__art { animation: none; scale: 1.06; }
.tx-pet__art.is-settling { animation: tx-pet-settle 0.8s var(--ease-out) 1; }
.tx-pet__art > img, .tx-pet__art > span { position: absolute; }
.tx-pet__body { width: 100%; height: auto; }

@keyframes tx-pet-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }
/* put down after being carried: a soft, satisfied sway — no bounce */
@keyframes tx-pet-settle { 0% { rotate: 0deg; scale: 1.05; } 30% { rotate: -5deg; } 62% { rotate: 3.5deg; scale: 1; } 100% { rotate: 0deg; scale: 1; } }

/* soft shading on the cheeks — only visible when it's really content */
.tx-pet__blush {
  aspect-ratio: 2 / 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.17), rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity 300ms;
}

/* --- eyes ------------------------------------------------------------------ */
.tx-pet__eyeball, .tx-pet__arc { display: block; width: 100%; }
.tx-pet__eyeball {
  position: relative;
  transform-origin: 50% 50%;
  animation: tx-pet-blink 5.6s ease-in-out infinite;
  transition: opacity 120ms, translate 200ms var(--ease-out), scale 200ms var(--ease-out);
}
.tx-pet__eyeball img { width: 100%; height: auto; }
.tx-pet__glints { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tx-pet__glints circle { fill: #fff; transition: transform 160ms var(--ease-out); }
/* alternate eye drawings, drawn over the open eye and shown per mood */
.tx-pet__arc, .tx-pet__brow, .tx-pet__spiral { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tx-pet__arc { opacity: 0; transition: opacity 120ms; }
.tx-pet__arc path { fill: none; stroke: #0b0b0b; stroke-width: 15; stroke-linecap: round; }
.tx-pet__brow path { fill: none; stroke: #0b0b0b; stroke-linecap: round; opacity: 0; transition: opacity 140ms; }
.tx-pet__brow .is-angry { stroke-width: 14; }
.tx-pet__brow .is-worry { stroke-width: 11; }
.tx-pet__spiral { opacity: 0; transition: opacity 120ms; }
.tx-pet__spiral path { fill: none; stroke: #0b0b0b; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }

@keyframes tx-pet-blink { 0%, 91%, 100% { scale: 1 1; } 94% { scale: 1 0.08; } }

/* --- mouth: a drawn line normally, the original open smile when happy ---------- */
.tx-pet__mouth { transition: transform 150ms var(--ease-out); }
.tx-pet__mouth-line { display: block; width: 100%; height: auto; overflow: visible; transition: opacity 140ms; }
.tx-pet__mouth-line path { fill: none; stroke: #0b0b0b; stroke-width: 15; stroke-linecap: round; }
.tx-pet__smile { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; scale: 0.9; transform-origin: 50% 30%; transition: opacity 140ms, scale 220ms var(--ease-out); }

/* --- moods ------------------------------------------------------------------- */
/* closed, smiling "^ ^" eyes: happy, content, bliss */
.tx-pet[data-mood="happy"] .tx-pet__eyeball,
.tx-pet[data-mood="content"] .tx-pet__eyeball,
.tx-pet[data-mood="bliss"] .tx-pet__eyeball { opacity: 0; animation: none; }
.tx-pet[data-mood="happy"] .tx-pet__arc,
.tx-pet[data-mood="content"] .tx-pet__arc,
.tx-pet[data-mood="bliss"] .tx-pet__arc { opacity: 1; }

/* pleased: the everyday reaction — a soft squint and a gentle smile, nothing more */
.tx-pet[data-mood="pleased"] .tx-pet__eyeball { animation: none; scale: 1 0.86; }

/* happy: only for a truly good moment (an order went through) */
.tx-pet[data-mood="happy"] .tx-pet__mouth-line { opacity: 0; }
.tx-pet[data-mood="happy"] .tx-pet__smile { opacity: 1; scale: 1; }
.tx-pet[data-mood="happy"] .tx-pet__art { animation: tx-pet-glee 1s var(--ease-in-out) 1; }

/* bliss: stroked gently — purring, blushing, swaying slowly */
.tx-pet[data-mood="bliss"] .tx-pet__blush { opacity: 1; }
.tx-pet[data-mood="bliss"] .tx-pet__art { animation: tx-pet-purr 0.14s ease-in-out infinite alternate, tx-pet-bliss 2.6s var(--ease-in-out) infinite; }

/* mild sad: eyes sink a touch, brows tilt up in the middle; nothing dramatic */
.tx-pet[data-mood="sad"] .tx-pet__eyeball { animation: none; translate: 0 5%; scale: 1 0.9; }
.tx-pet[data-mood="sad"] .tx-pet__brow .is-worry { opacity: 0.85; }
.tx-pet[data-mood="sad"] .tx-pet__art { animation: tx-pet-droop 2s var(--ease-in-out) 1; }

/* grumpy: squinting eyes, slanted brows, a small tight frown and a tiny huff */
.tx-pet[data-mood="angry"] .tx-pet__eyeball { animation: none; translate: 0 4%; scale: 1 0.8; }
.tx-pet[data-mood="angry"] .tx-pet__brow .is-angry { opacity: 1; }
.tx-pet[data-mood="angry"] .tx-pet__art { animation: tx-pet-grump 0.4s ease-in-out 3; }

/* dizzy: swirly eyes, a wonky mouth, stars circling overhead, a woozy sway */
.tx-pet[data-mood="dizzy"] .tx-pet__eyeball { opacity: 0; animation: none; }
.tx-pet[data-mood="dizzy"] .tx-pet__spiral { opacity: 1; }
.tx-pet[data-mood="dizzy"] .tx-pet__spiral path { animation: tx-pet-spin 0.75s linear infinite; }
.tx-pet[data-mood="dizzy"] .tx-pet__mouth-line { transform-origin: 50% 50%; animation: tx-pet-mwob 0.5s ease-in-out infinite alternate; }
.tx-pet[data-mood="dizzy"] .tx-pet__art { animation: tx-pet-woozy 0.85s ease-in-out infinite alternate; }
.tx-pet[data-mood="dizzy"] .tx-pet__orbit { opacity: 1; }

/* asleep: lids nearly shut, slower breathing */
.tx-pet[data-mood="sleepy"] .tx-pet__eyeball { animation: none; translate: 0 12%; scale: 1 0.22; }
.tx-pet[data-mood="sleepy"] .tx-pet__art { animation-duration: 6s; }

@keyframes tx-pet-glee { 0%, 100% { scale: 1; } 30% { scale: 1.05; } 60% { scale: 1.01; } }
@keyframes tx-pet-bliss { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes tx-pet-purr { from { translate: -0.5px 0; } to { translate: 0.5px 0.3px; } }
@keyframes tx-pet-droop { 0%, 100% { scale: 1; translate: 0 0; } 30%, 70% { scale: 0.97; translate: 0 2%; } }
@keyframes tx-pet-grump { 0%, 100% { translate: 0 0; } 25% { translate: -2% 0; } 75% { translate: 2% 0; } }
@keyframes tx-pet-woozy { from { rotate: -9deg; translate: -3% 0; } to { rotate: 9deg; translate: 3% 0; } }
@keyframes tx-pet-spin { to { rotate: 360deg; } }
@keyframes tx-pet-mwob { from { rotate: -7deg; } to { rotate: 7deg; } }

@media (prefers-reduced-motion: reduce) {
  .tx-pet__art, .tx-pet__eyeball, .tx-pet__badge, .tx-pet__spiral path, .tx-pet__orbit i, .tx-pet__mouth-line { animation: none !important; }
}

/* --- stars circling the head when dizzy ---------------------------------------- */
.tx-pet__orbit { position: absolute; left: 55%; top: 1%; width: 0; height: 0; opacity: 0; transition: opacity 200ms; }
.tx-pet__orbit i { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; animation: tx-pet-orbit 1.05s linear infinite; }
.tx-pet__orbit i:nth-child(2) { animation-delay: -0.35s; }
.tx-pet__orbit i:nth-child(3) { animation-delay: -0.7s; }
.tx-pet__orbit svg { display: block; width: 100%; height: 100%; fill: #f2f2f2; stroke: #4d4d4d; stroke-width: 2; stroke-linejoin: round; }
@keyframes tx-pet-orbit {
  0% { translate: 22px 0; scale: 1; }
  25% { translate: 0 6px; scale: 1.25; }
  50% { translate: -22px 0; scale: 1; }
  75% { translate: 0 -6px; scale: 0.75; }
  100% { translate: 22px 0; scale: 1; }
}

/* --- little hearts / sparkles / z's floating beside the face -------------------- */
.tx-pet__fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tx-pet__fx-p {
  position: absolute; opacity: 0;
  animation: tx-pet-float var(--dur, 1.3s) ease-out forwards;
}
.tx-pet__fx-p svg { display: block; width: 100%; height: 100%; fill: #f2f2f2; stroke: #4d4d4d; stroke-width: 1.7; stroke-linejoin: round; }
.tx-pet__fx-p.is-z { color: #4d4d4d; font: 800 12px/1 var(--font-text, sans-serif); text-shadow: 0 0 2px #fff; }
@keyframes tx-pet-float {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--rot)); }
}

/* --- the mascot never changes with the theme: same silver body, same sparkle, same
   particles in light and dark. (Nothing here on purpose — every colour it uses is
   fixed above, and the only theme token near it is the ring around the red count.) --- */

/* --- the sparkle: default badge; becomes a silver plate + glyph for bell/gift/chat --- */
.tx-pet__badge {
  position: absolute;
  aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 50%;
  animation: tx-pet-twinkle 4.2s ease-in-out infinite;
}
.tx-pet__badge-art { display: block; width: 100%; height: 100%; }
.tx-pet__badge-art img { width: 100%; height: 100%; }
.tx-pet__plate {
  display: flex; align-items: center; justify-content: center;
  width: 80%; height: 80%; margin: 10%;
  border-radius: 50%;
  color: #1c1c1c;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e6e6e6 42%, #b4b4b4 100%);
  box-shadow: inset 0 0 0 1px rgba(60, 60, 60, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tx-pet__plate svg { width: 62%; height: 62%; }
.tx-pet__badge-count {
  position: absolute; top: -12%; right: -22%;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 9px; font-weight: 800; line-height: 14px; text-align: center;
  border: 1.5px solid var(--bg-primary);
}
@keyframes tx-pet-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(6deg); } }
.tx-pet__badge.is-alert { animation: tx-pet-nudge 0.55s ease-in-out 3; }
@keyframes tx-pet-nudge { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }

/* The messenger panel (header, tabs, chat, notifications, offers, orders) is in tx-pet-panel.css. */