/* Spark mascot · marketing-surface mascot component.
   Single source of truth for placing Spark anywhere on the site.
   The classroom uses the SPARK from illustrations.js directly; this stylesheet
   targets the marketing pages where <aikc-spark> placeholders are dropped in.

   Sizes: sm = 32px, md = 64px, lg = 120px. */

.spark-mascot {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  vertical-align: middle;
  line-height: 1;
}

aikc-spark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.spark-mascot-fig {
  flex: 0 0 auto;
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 0;
  animation: spark-bob 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.18));
}

.spark-mascot[data-spark-size="sm"] .spark-mascot-fig { width: 32px; height: 32px; }
.spark-mascot[data-spark-size="md"] .spark-mascot-fig { width: 64px; height: 64px; }
.spark-mascot[data-spark-size="lg"] .spark-mascot-fig { width: 120px; height: 120px; }

.spark-mascot-fig svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes spark-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Cheer gets a small wiggle on top of the bob. */
.spark-mascot[data-spark-expression="cheer"] .spark-mascot-fig {
  animation: spark-wiggle 1.6s ease-in-out infinite;
}

@keyframes spark-wiggle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}

/* Thinking pose tilts gently. */
.spark-mascot[data-spark-expression="thinking"] .spark-mascot-fig {
  animation: spark-tilt 3s ease-in-out infinite;
}

@keyframes spark-tilt {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* Speech bubble · attaches as a sibling of the figure. */
.spark-bubble {
  position: relative;
  background: #fff;
  border: 1px solid #e8e2cf;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  color: #1f2a5c;
  box-shadow: 0 8px 22px rgba(10, 15, 44, 0.08);
  max-width: 260px;
  margin-left: 4px;
  line-height: 1.4;
}

.spark-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid #e8e2cf;
  border-bottom: 1px solid #e8e2cf;
  transform: rotate(45deg);
}

/* Empty-state composition: stack vertically, centered. */
.spark-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 16px;
  color: #34406b;
}

.spark-empty .spark-mascot { flex-direction: column; }
.spark-empty .spark-bubble { margin-left: 0; max-width: 320px; }
.spark-empty .spark-bubble::before { display: none; }

/* Mobile: scale down lg to ~88px to keep balance. */
@media (max-width: 540px) {
  .spark-mascot[data-spark-size="lg"] .spark-mascot-fig { width: 88px; height: 88px; }
  .spark-bubble { max-width: 220px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spark-mascot-fig {
    animation: none !important;
    transform: none !important;
  }
}