/* ============================================
 * Magic Darkroom · Mascot 麻薯
 *
 * Styles for the cat mascot, cloud bubble, and
 * all mood / color / eye-state / animation variants.
 *
 * Requires: theme/tokens.css, theme/animations.css
 * ============================================ */

/* ---- Container ---- */
.md-mascot-wrap {
  position: relative;
  width: 240px;
  height: 240px;
}

.md-mascot-wrap--sm { width: 160px; height: 160px; }
.md-mascot-wrap--lg { width: 320px; height: 320px; }

/* ---- SVG root ---- */
.md-mascot-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  cursor: pointer;

  --cat: #e89d6f;
  --cat-face: #1c1b1a;
}

/* ---- Color variants ---- */
.md-mascot-svg[data-color="orange"]   { --cat: #e89d6f; }
.md-mascot-svg[data-color="cream"]    { --cat: #f3e7d2; --cat-face: #2a2a2a; }
.md-mascot-svg[data-color="grey"]     { --cat: #b5b5b5; }
.md-mascot-svg[data-color="default"]  { --cat: #5e5e5e; }
.md-mascot-svg[data-color="charcoal"] { --cat: #3f3f3f; }

/* ---- Fill classes (driven by CSS vars) ---- */
.md-mascot-svg .fill       { fill: var(--cat); }
.md-mascot-svg .fill--face,
.md-mascot-svg .fill--eyes { fill: var(--cat-face); }

/* ---- Whole pet breathe ---- */
.md-mascot-svg .pet {
  transform-origin: 240px 460px;
  transform-box: view-box;
  animation: md-mascot-breathe 3.6s ease-in-out infinite;
}

@keyframes md-mascot-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* ---- Head idle tilt ---- */
.md-mascot-svg .pet__head {
  transform-origin: 200px 225px;
  transform-box: view-box;
  animation: md-mascot-head-idle 9s ease-in-out infinite;
}

@keyframes md-mascot-head-idle {
  0%, 58%, 100%  { transform: rotate(0); }
  66%, 74%       { transform: rotate(-5deg); }
  82%, 90%       { transform: rotate(4deg); }
}

/* ============================================
 * Eye states — driven by data-eye attribute
 * ============================================ */
.md-mascot-svg .eye-state {
  opacity: 0;
  transition: opacity 50ms linear;
}

.md-mascot-svg[data-eye="open"]   .eye-open   { opacity: 1; }
.md-mascot-svg[data-eye="half"]   .eye-half   { opacity: 1; }
.md-mascot-svg[data-eye="squint"] .eye-squint { opacity: 1; }
.md-mascot-svg[data-eye="closed"] .eye-closed { opacity: 1; }

/* ============================================
 * Mood overrides
 * ============================================ */

/* -- Sleepy: always closed eyes + droopy head -- */
.md-mascot-svg[data-mood="sleepy"] .eye-state  { opacity: 0 !important; }
.md-mascot-svg[data-mood="sleepy"] .eye-closed { opacity: 1 !important; }
.md-mascot-svg[data-mood="sleepy"] .pet__head  {
  animation: md-mascot-head-droop 4.6s ease-in-out infinite;
}

@keyframes md-mascot-head-droop {
  0%, 100% { transform: rotate(5deg); }
  50%      { transform: rotate(-3deg); }
}

/* -- Happy / Excited: squint eyes -- */
.md-mascot-svg[data-mood="happy"]   .eye-state,
.md-mascot-svg[data-mood="excited"] .eye-state  { opacity: 0 !important; }
.md-mascot-svg[data-mood="happy"]   .eye-squint,
.md-mascot-svg[data-mood="excited"] .eye-squint { opacity: 1 !important; }

/* -- Excited: bobble head -- */
.md-mascot-svg[data-mood="excited"] .pet__head {
  animation: md-mascot-head-bobble 0.8s ease-in-out infinite;
}

@keyframes md-mascot-head-bobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* -- Thinking: half eyes + tilt -- */
.md-mascot-svg[data-mood="thinking"] .eye-state { opacity: 0 !important; }
.md-mascot-svg[data-mood="thinking"] .eye-half  { opacity: 1 !important; }
.md-mascot-svg[data-mood="thinking"] .pet__head {
  animation: md-mascot-head-think 2.6s ease-in-out infinite;
}

@keyframes md-mascot-head-think {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(0); }
}

/* -- Sad / Error: head shake (plays twice then stops) -- */
.md-mascot-svg[data-mood="sad"]   .pet__head,
.md-mascot-svg[data-mood="error"] .pet__head {
  animation: md-mascot-head-shake 0.55s ease-in-out 2;
}

@keyframes md-mascot-head-shake {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

/* ============================================
 * Cloud speech bubble
 * ============================================ */
.md-mascot-cloud {
  background: #fff;
  border-radius: 28px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(42, 42, 42, 0.05);
  position: relative;
  max-width: 300px;
  text-align: center;
  animation: md-mascot-cloud-float 4.2s ease-in-out infinite;
}

/* Bubble tail: two circles */
.md-mascot-cloud::before,
.md-mascot-cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(42, 42, 42, 0.05);
}
.md-mascot-cloud::before { width: 22px; height: 22px; bottom: -10px; left: 44px; }
.md-mascot-cloud::after  { width: 10px; height: 10px; bottom: -26px; left: 54px; }

@keyframes md-mascot-cloud-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Emoji inline in bubble */
.md-mascot-cloud__emoji {
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  line-height: 1;
  margin-right: 8px;
  transform-origin: center;
  animation: md-emoji-pop 0.4s var(--ease-pop);
}

/* Text span */
.md-mascot-cloud__text {
  position: relative;
  z-index: 1;
  display: inline;
  vertical-align: middle;
  min-height: 1.5em;
}

/* ============================================
 * Stage layout: cloud above mascot
 * ============================================ */
.md-mascot-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ============================================
 * Mini mascot (for share page / decorations)
 * ============================================ */
.md-mascot-wrap--mini {
  width: 64px;
  height: 64px;
}
.md-mascot-wrap--mini .md-mascot-svg {
  cursor: default;
}