/* PlainLogic mascot family — slot sizing, motion, and prop styling.
   Pairs with assets/js/mascots.js. Reuses the blink/bob/star hooks from lab.css
   with its own keyframe names so slots also work on pages without lab.css. */

/* Slot sizing: default 56px, header variant 72px. */
.mascot-slot {
  display: inline-block;
  width: 56px;
  line-height: 0;
  vertical-align: middle;
}
.mascot-slot--header { width: 72px; }
.mascot-slot .mascot {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  animation: mascot-bob 5s ease-in-out infinite;
}

/* Blink: same 4.8s rhythm as Pip in lab.css. */
.mascot-slot .mascot-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-blink 4.8s infinite;
}

/* Prop color hooks (paper / ink line / signal accent). */
.mascot-prop {
  fill: var(--paper, #fffaf2);
  stroke: var(--ink, #26231f);
  stroke-width: 4;
}
.mascot-prop-line {
  fill: none;
  stroke: var(--ink, #26231f);
  stroke-width: 4;
  stroke-linecap: round;
}
.mascot-prop-accent {
  fill: var(--signal, #e96342);
  stroke: var(--ink, #26231f);
  stroke-width: 3.5;
}

/* Friendly wave of the right arm on hover / keyboard focus / tap. */
.mascot-arm--wave {
  transform-box: fill-box;
  transform-origin: top left;
}
.mascot-slot:hover .mascot-arm--wave,
.mascot-slot:focus-visible .mascot-arm--wave,
.mascot-slot:active .mascot-arm--wave {
  animation: mascot-wave .8s ease-in-out;
}

/* Radar sweep (situation-room): slow rotation around the dish center. */
.mascot-sweep {
  stroke: var(--signal, #e96342);
  stroke-width: 4;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 120px 20px;
  animation: mascot-sweep 2.8s linear infinite;
}

/* Gear (automation): slow, steady turn. */
.mascot-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-gear 9s linear infinite;
}

/* Header placement: float the mascot beside the headline; the circuit
   trace divider below clears it. */
.page-hero .mascot-slot--header,
.sr-hero .mascot-slot--header {
  float: right;
  margin: 0 0 10px 16px;
}
.trace-wrap--header { clear: both; }

@keyframes mascot-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.08); }
  97% { transform: scaleY(1); }
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes mascot-wave {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-24deg); }
  60% { transform: rotate(12deg); }
}
@keyframes mascot-sweep { to { transform: rotate(360deg); } }
@keyframes mascot-gear { to { transform: rotate(360deg); } }

/* No motion at all when the user prefers still pages. */
@media (prefers-reduced-motion: reduce) {
  .mascot-slot .mascot,
  .mascot-slot .mascot-eyes,
  .mascot-slot .mascot-arm--wave,
  .mascot-slot .mascot-star,
  .mascot-slot .mascot-sweep,
  .mascot-slot .mascot-gear {
    animation: none !important;
  }
}

/* ============ PlainLogic mascot emotions, hero slots, entrances ============
   Emotion faces live in assets/js/mascots.js (<g class="mascot-moods">) and are
   revealed here per data-mood. JS sets moods via
   window.PlainLogicMascots.mood(el, 'celebrate'|'worried'|'panic'|'idle'). */

/* Hero slot: the big featured mascot in page-hero scenes. */
.mascot-slot--hero { width: 120px; }
@media (max-width: 560px) { .mascot-slot--hero { width: 92px; } }

/* Reaction slot: compact mascot beside verdicts, logs, and run panels. */
.mascot-slot--react { width: 64px; }

/* Animated entrance: pop in, wave once, then settle into the idle bob. */
.mascot-slot--entrance .mascot {
  animation: mascot-pop-in .8s cubic-bezier(.2, 1.4, .4, 1) both,
             mascot-bob 5s ease-in-out 1s infinite;
}
.mascot-slot--entrance .mascot-arm--wave {
  animation: mascot-wave .9s ease-in-out .55s 2;
}

/* ---- emotion faces: hidden until the mood calls for them ---- */
.mascot-slot .mood-face { display: none; }
.mascot-slot .mood-sweat { fill: var(--teal, #3fa7b8); }
.mascot-slot[data-mood="celebrate"] .mood-smile,
.mascot-slot[data-mood="worried"] .mood-frown,
.mascot-slot[data-mood="worried"] .mood-sweat,
.mascot-slot[data-mood="panic"] .mood-gasp,
.mascot-slot[data-mood="panic"] .mood-sweat { display: block; }
.mascot-slot[data-mood="celebrate"] .mascot-mouth,
.mascot-slot[data-mood="worried"] .mascot-mouth,
.mascot-slot[data-mood="panic"] .mascot-mouth { display: none; }

/* celebrate: bouncing cheer + non-stop waving. */
.mascot-slot[data-mood="celebrate"] .mascot {
  animation: mascot-cheer .9s ease-in-out infinite;
}
.mascot-slot[data-mood="celebrate"] .mascot-arm--wave {
  animation: mascot-wave .7s ease-in-out infinite;
}

/* worried: nervous tremble + dripping sweat drop. */
.mascot-slot[data-mood="worried"] .mascot {
  animation: mascot-tremble 1.6s ease-in-out infinite;
}
.mascot-slot[data-mood="worried"] .mood-sweat,
.mascot-slot[data-mood="panic"] .mood-sweat {
  transform-box: fill-box;
  transform-origin: top center;
  animation: mascot-sweat-drip 1.8s ease-in infinite;
}

/* panic: fast shake + open-mouth gasp. */
.mascot-slot[data-mood="panic"] .mascot {
  animation: mascot-panic .5s linear infinite;
}

@keyframes mascot-pop-in {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes mascot-cheer {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-14px) scale(1.04); }
  55%      { transform: translateY(0) scale(.98); }
  75%      { transform: translateY(-8px) scale(1.01); }
}
@keyframes mascot-tremble {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}
@keyframes mascot-panic {
  0%, 100% { transform: translateX(0) rotate(0); }
  25%      { transform: translateX(-4px) rotate(-2deg); }
  75%      { transform: translateX(4px) rotate(2deg); }
}
@keyframes mascot-sweat-drip {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  80%  { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* No motion at all when the user prefers still pages — faces still swap,
   since the static expression is information, not animation. */
@media (prefers-reduced-motion: reduce) {
  .mascot-slot--entrance .mascot,
  .mascot-slot[data-mood] .mascot,
  .mascot-slot[data-mood] .mascot-arm--wave,
  .mascot-slot[data-mood] .mood-sweat {
    animation: none !important;
  }
}