/* Ghost pet companion — ported from Real-Fruit-Snacks/vault (site-assets).
   Sprite + behavior styling verbatim; the settings panel is restyled
   standalone since this site has no settings-menu system. */

#site-pet {
  position: fixed; left: 0; top: 0;
  width: var(--pet-size, 28px); height: var(--pet-size, 28px);
  /* Below the header's stacking context so the ghost never covers the
     open search dropdown or steals a click on a result. */
  z-index: 9; pointer-events: none;
  opacity: var(--pet-base-opacity, 0.7);
  transition: opacity 0.9s ease;
}
#site-pet.pet-nap { opacity: 0.3; }
.pet-tilt { width: 100%; height: 100%; }
.pet-sprite {
  width: 100%; height: 100%;
  pointer-events: auto; cursor: grab;
  touch-action: none;
  animation: pet-bob 2.4s ease-in-out infinite;
}
.pet-sprite:active { cursor: grabbing; }
.pet-sprite svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.pet-body { fill: var(--twb-accent); }
#site-pet[data-color="1"] .pet-body { fill: var(--twb-accent-alt); }
#site-pet[data-color="2"] .pet-body { fill: var(--twb-warm); }
#site-pet[data-color="3"] .pet-body { fill: var(--twb-violet); }
#site-pet[data-color="4"] .pet-body { fill: var(--twb-orange); }
#site-pet[data-color="5"] .pet-body { fill: var(--twb-red); }
.pet-eyes-open rect, .pet-eyes-closed rect { fill: var(--twb-bg-0); }
.pet-eyes-happy path { stroke: var(--twb-bg-0); stroke-width: 1.2; fill: none; }
.pet-eyes-closed, .pet-eyes-happy { display: none; }
.pet-sprite.pet-blink .pet-eyes-open,
#site-pet.pet-nap .pet-eyes-open,
.pet-sprite.pet-happy .pet-eyes-open { display: none; }
.pet-sprite.pet-blink .pet-eyes-closed,
#site-pet.pet-nap .pet-eyes-closed { display: inline; }
.pet-sprite.pet-happy .pet-eyes-happy { display: inline; }
.pet-sprite.pet-happy { animation: pet-boop 0.5s ease-in-out; }
.pet-sprite.pet-sneak { animation-play-state: paused; }
.pet-sprite.pet-spook { animation: pet-spook 0.5s ease-out; }
.pet-sprite.pet-spin { animation: pet-spin 0.74s ease-in-out; }
.pet-sprite.pet-flip { animation: pet-flip 0.74s ease-in-out; }
#site-pet.pet-startled { animation: pet-startle-fade 0.7s ease-out; }
.pet-particle {
  position: absolute; left: 9px; top: -8px;
  font-family: var(--twb-font-mono); font-size: 12px; font-weight: 700;
  pointer-events: none;
  animation: pet-float 1.3s ease-out forwards;
}
.pet-heart { color: var(--twb-red); }
.pet-bang { color: var(--twb-accent); }
.pet-z { color: var(--twb-text-muted); }
.pet-bubble {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px;
  transform: translateX(-50%);
  padding: 3px 7px; font-family: var(--twb-font-mono); font-size: 11px; line-height: 1.2;
  white-space: nowrap; color: var(--twb-text-normal);
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.28);
  pointer-events: none; animation: pet-bubble-in 2.6s ease forwards;
}
.pet-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--twb-bg-2);
}
.pet-bubble-boop, .pet-bubble-good { color: var(--twb-accent); }
html[data-pet="off"] #site-pet { display: none; }

/* ---- opener button (header on man pages, fixed on home) ---- */
#pet-open {
  padding: 4px 8px; cursor: pointer; line-height: 0;
  background: var(--twb-bg-2); color: var(--twb-text-muted);
  border: var(--twb-border-width) solid var(--twb-border);
  border-radius: var(--twb-radius-s); font: inherit;
}
#pet-open:hover { color: var(--twb-text-normal); border-color: var(--twb-border-strong); }
#pet-open svg { width: 14px; height: 14px; display: inline-block; }
#pet-open svg .pet-body { fill: currentColor; }
#pet-open svg .pet-eyes-open rect { fill: var(--twb-bg-2); }
.home #pet-open { position: fixed; top: 12px; right: 58px; }

/* ---- settings panel ---- */
#pet-panel {
  position: fixed; top: 52px; right: 12px; z-index: 30; width: 240px;
  background: var(--twb-bg-2); border: 1px solid var(--twb-border-strong);
  border-radius: var(--twb-radius-m); box-shadow: var(--twb-shadow-pane);
  padding: 4px 0 8px; font-size: 13px;
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 4px; font-weight: 700; color: var(--twb-text-normal);
}
.menu-close {
  background: none; border: none; color: var(--twb-text-muted);
  font: inherit; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.menu-close:hover { color: var(--twb-text-normal); }
.pet-group-label {
  display: block; padding: 2px 12px; margin-top: 6px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--twb-text-faint);
}
.pet-seg { display: flex; margin: 4px 10px 8px; border: 1px solid var(--twb-border); border-radius: var(--twb-radius-s); overflow: hidden; }
.pet-seg button { flex: 1; background: none; border: none; color: var(--twb-text-soft); font: inherit; font-size: 12px; padding: 5px 0; cursor: pointer; }
.pet-seg button.on { background: var(--twb-selection); color: var(--twb-accent); }
.pet-slider { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 12px; font-size: 12px; color: var(--twb-text-soft); }
.pet-slider input[type="range"] { flex: 1; accent-color: var(--twb-accent); }
.pet-swatches { display: flex; gap: 8px; padding: 6px 12px 8px; }
.pet-swatches button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--twb-border); background: var(--sw); cursor: pointer; padding: 0; }
.pet-swatches button.on { outline: 2px solid var(--twb-accent); outline-offset: 2px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; color: var(--twb-text-soft); font: inherit;
  font-size: 12px; padding: 5px 12px; cursor: pointer; text-align: left;
}
.settings-row:hover { background: var(--twb-active-line); color: var(--twb-text-normal); }
.pet-quirk .settings-val::after { content: "Off"; }
.pet-quirk.on .settings-val::after { content: "On"; }
.pet-quirk.on .settings-val { color: var(--twb-accent); }

/* ---- animations ---- */
@keyframes pet-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pet-boop {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
}
@keyframes pet-spook {
  0% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(1.5) scaleX(0.65); }
  60% { transform: scaleY(0.9) scaleX(1.12); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes pet-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
@keyframes pet-flip {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
@keyframes pet-startle-fade {
  0% { opacity: 0.7; }
  30% { opacity: 0.25; }
  100% { opacity: 0.7; }
}
@keyframes pet-float {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-26px); }
}
@keyframes pet-bubble-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
  12%, 82% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-2px); }
}