/* ============================================================
   AC COACH MASCOT — shared lesson-orb-with-face styles
   ------------------------------------------------------------
   Pure-CSS orb (NOT the WebGL hero/FAB orb) + minimal face
   overlay (dot eyes + line brows). Self-contained: a static
   <div class="lp-coach-orb is-idle"> renders a calm idle face
   with a CSS blink and NO JS. Size via --lp-coach-size.

   Canonical source for the coach visual. Linked on the homepage
   (index.html) for the AC Learning band. The in-lesson coach is
   styled by the identical rules already in learn.css (the two
   files never load on the same page, so there is no conflict).
   base.css is NOT touched.
   ============================================================ */

.lp-coach {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 2px 0 24px;   /* a little breathing room — a present coach, not a dot */
}
.lp-coach-orb {
  --lp-coach-size: 72px;   /* tunable; face strokes scale by extent, not thickness */
  flex: 0 0 auto;
  width: var(--lp-coach-size);
  height: var(--lp-coach-size);
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 36% 32%, rgba(220, 255, 238, 0.6) 0%, rgba(31, 224, 132, 0.5) 26%,
      rgba(0, 197, 102, 0.32) 52%, rgba(6, 28, 19, 0.25) 78%, rgba(6, 28, 19, 0.1) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 18px rgba(0, 197, 102, 0.35);
  transition: box-shadow 240ms ease;
}
.lp-coach-core {
  position: absolute;
  inset: 30% 0 0 34%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(1px);
}
.lp-coach-orb.is-green { box-shadow: 0 0 0 1px rgba(31, 224, 132, 0.5), 0 0 18px rgba(0, 197, 102, 0.55); }
.lp-coach-orb.is-hot   { box-shadow: 0 0 0 1px rgba(31, 224, 132, 0.7), 0 0 26px rgba(31, 224, 132, 0.7); }
.lp-coach-orb.is-red {
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 220, 228, 0.6) 0%, rgba(255, 90, 120, 0.5) 26%,
      rgba(229, 67, 96, 0.32) 52%, rgba(28, 8, 12, 0.25) 78%, rgba(28, 8, 12, 0.1) 100%);
  box-shadow: 0 0 0 1px rgba(255, 90, 120, 0.55), 0 0 18px rgba(229, 67, 96, 0.55);
}
.lp-coach-orb.is-finale { box-shadow: 0 0 0 1px rgba(31, 224, 132, 0.5), 0 0 18px rgba(0, 197, 102, 0.5); }
/* The face replaces the need for the glint — keep the orb clean. */
.lp-coach-orb .lp-coach-core { display: none; }

/* ── Minimal face overlay (dot eyes + line brows). Layer on top of the orb;
      never touches orb rendering. Mood comes from the parent .is-* class. ── */
.lp-coach-face { position: absolute; inset: 0; pointer-events: none; }
.lp-eye, .lp-brow {
  position: absolute;
  background: rgba(7, 18, 11, 0.82);
  transition: all 180ms ease;
}
/* Extents scale with the orb (--lp-coach-size); stroke thickness stays a fixed
   thin 2px so eyes/brows read crisp and minimal at any size. */
.lp-eye {
  top: 46%;
  width: calc(var(--lp-coach-size) * 0.085);
  height: calc(var(--lp-coach-size) * 0.085);
  border-radius: 50%;
}
.lp-eye-l { left: 34%; }
.lp-eye-r { right: 34%; }
.lp-brow {
  top: 33%;
  width: calc(var(--lp-coach-size) * 0.16);
  height: 2px;
  border-radius: 2px;
}
.lp-brow-l { left: 28%; transform-origin: center; }
.lp-brow-r { right: 28%; transform-origin: center; }

/* correct (happy) — eyes curve to upward arcs, brows lift */
.lp-coach-orb.is-green .lp-eye {
  top: 48%; height: calc(var(--lp-coach-size) * 0.045);
  width: calc(var(--lp-coach-size) * 0.13);
  background: transparent;
  border-top: 2px solid rgba(7, 18, 11, 0.85); border-radius: 50% 50% 0 0;
}
.lp-coach-orb.is-green .lp-brow { top: 28%; }
/* finale (content) — soft happy eyes, calm brows */
.lp-coach-orb.is-finale .lp-eye {
  top: 48%; height: calc(var(--lp-coach-size) * 0.045);
  width: calc(var(--lp-coach-size) * 0.13);
  background: transparent;
  border-top: 2px solid rgba(7, 18, 11, 0.85); border-radius: 50% 50% 0 0;
}
.lp-coach-orb.is-finale .lp-brow { top: 31%; }
/* wrong (sad/sympathetic, NOT angry) — brows angle gently UP at the inner
   corners, eyes softened + downcast. Reads "aw, not quite". */
.lp-coach-orb.is-red .lp-brow-l { top: 31%; transform: rotate(-15deg); }
.lp-coach-orb.is-red .lp-brow-r { top: 31%; transform: rotate(15deg); }
.lp-coach-orb.is-red .lp-eye { top: 51%; opacity: 0.8; }
/* streak 3+ (excited) — brows raised high, eyes wide */
.lp-coach-orb.is-hot .lp-brow { top: 23%; }
.lp-coach-orb.is-hot .lp-eye {
  top: 45%;
  width: calc(var(--lp-coach-size) * 0.1);
  height: calc(var(--lp-coach-size) * 0.1);
}

/* idle blink (only when relaxed) — the homepage mascot uses this, no JS */
.lp-coach-orb.is-idle .lp-eye { animation: lp-blink 4.2s ease-in-out infinite; }
@keyframes lp-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* Mood-specific reactions on the orb (pulse re-triggered by JS in the lesson
   player; harmless/unused for the static homepage mascot). */
.lp-coach-pulse { animation: lp-coach-pop 520ms ease; }
.lp-coach-orb.is-green.lp-coach-pulse  { animation: lp-coach-bounce 520ms ease; }
.lp-coach-orb.is-hot.lp-coach-pulse    { animation: lp-coach-wiggle 480ms ease; }
.lp-coach-orb.is-finale.lp-coach-pulse { animation: lp-coach-nod 900ms ease; }
@keyframes lp-coach-pop    { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes lp-coach-bounce { 0% { transform: translateY(0); } 35% { transform: translateY(-5px); } 70% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes lp-coach-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes lp-coach-nod    { 0% { transform: translateY(0); } 45% { transform: translateY(3px); } 85% { transform: translateY(0); } }

.lp-coach-bubble {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 14px;
}
@media (prefers-reduced-motion: reduce) {
  .lp-coach-pulse, .lp-coach-orb.is-idle .lp-eye { animation: none; }
}