/* MathFilm — Layered PNG Puppet v1 (generic .tutor-layered-png / .tlp-*) */

.tutor-character-host {
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  top: 5%;
  bottom: 8%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.tutor-layered-png.tutor-puppet-v2 {
  --tlp-breath: .5;
  --tlp-sway: 0deg;
  --tlp-talk: 0;
  --tlp-speech: 0;
  --tlp-eye-x: 0px;
  --tlp-eye-y: 0px;
  --tlp-mouth-open: 0;
  --tlp-accent: #2f6bff;
  --tlp-aspect: 1086 / 1448;
  --tlp-hand-left: 12.15%;
  --tlp-hand-top: 30.5%;
  --tlp-hand-width: 21.45%;
  --tlp-hand-ox: 86%;
  --tlp-hand-oy: 82%;
  width: min(78%, 340px);
  max-height: 100%;
  aspect-ratio: var(--tlp-aspect);
  position: relative;
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  pointer-events: none;
  isolation: isolate;
}

.tlp-stage {
  position: absolute;
  inset: 0;
  transform:
    translate3d(0, calc((var(--tlp-breath) - 0.5) * -5.4px + var(--tlp-talk) * -2px), 0)
    rotate(var(--tlp-sway));
  transform-origin: 50% 96%;
}

.tlp-stage img {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.tlp-base,
.tlp-eyes,
.tlp-mouth-stack,
.tlp-mouth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.tlp-mouth-stack {
  z-index: 4;
  pointer-events: none;
  transform: translateY(var(--tlp-mouth-y, 0px));
}

.tlp-base {
  z-index: 1;
}

.tlp-eyes {
  z-index: 3;
}

.tlp-eyes-open {
  opacity: 1;
}

.tlp-eyes-closed {
  opacity: 0;
}

.tutor-layered-png.is-blinking .tlp-eyes-open {
  opacity: 0;
}

.tutor-layered-png.is-blinking .tlp-eyes-closed {
  opacity: 1;
}

.tlp-mouth {
  z-index: 4;
  opacity: 0;
  transition: none;
}

/* Rive canvas host — same stage footprint as layered PNG. */
.tutor-rive-puppet.tutor-puppet-v2 {
  --tlp-breath: .5;
  --tlp-sway: 0deg;
  --tlp-talk: 0;
  --tlp-speech: 0;
  --tlp-accent: #2f6bff;
  width: min(78%, 340px);
  max-height: 100%;
  aspect-ratio: 1086 / 1448;
  position: relative;
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  pointer-events: none;
  isolation: isolate;
  transform: none;
}

.tutor-rive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tlp-hand {
  z-index: 5;
  left: var(--tlp-hand-left);
  top: var(--tlp-hand-top);
  width: var(--tlp-hand-width);
  height: auto;
  transform-origin: var(--tlp-hand-ox) var(--tlp-hand-oy);
  transform: none;
  display: none; /* half-body Lan pack has no separate hand layer */
}

.tutor-layered-png[data-state="idle"] .tlp-hand,
.tutor-layered-png[data-state="speaking"] .tlp-hand,
.tutor-layered-png[data-state="listening"] .tlp-hand {
  animation: none;
}

.tutor-layered-png[data-expression="thinking"] .tlp-stage,
.tutor-layered-png[data-expression="happy"] .tlp-stage,
.tutor-layered-png[data-gesture="celebrate"] .tlp-stage {
  animation: none;
}

.tutor-layered-png[data-gesture="wave"] .tlp-hand,
.tutor-layered-png[data-gesture="point"] .tlp-hand {
  animation: none;
}

.tlp-aura {
  position: absolute;
  z-index: -1;
  left: 14%;
  right: 14%;
  bottom: 1%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tlp-accent) 20%, transparent), transparent 70%);
  filter: blur(10px);
}

@keyframes tlp-hand-idle {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  45% { transform: rotate(-1.6deg) translate(-1px, -1px); }
  70% { transform: rotate(.8deg) translate(0, -1px); }
}

@keyframes tlp-hand-talk {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(3.5deg) translateY(-2px); }
}

@keyframes tlp-hand-wave {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(13deg); }
}

@keyframes tlp-hand-point {
  0%, 100% { transform: rotate(0deg) translate(0, 0); opacity: 1; }
  30%, 72% { transform: rotate(-5deg) translate(2px, -4px); opacity: 1; }
}

@keyframes tlp-happy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-5px) scale(1.006); }
}

@keyframes tlp-celebrate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  24% { transform: translateY(-7px) rotate(-1deg); }
  48% { transform: translateY(-2px) rotate(1.2deg); }
  72% { transform: translateY(-5px) rotate(-.6deg); }
}

@media (max-width: 767px) {
  .tutor-layered-png.tutor-puppet-v2,
  .tutor-rive-puppet.tutor-puppet-v2 {
    width: min(70%, 250px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutor-layered-png *,
  .tutor-layered-png {
    animation: none !important;
    transition: none !important;
  }
  .tutor-layered-png .tlp-stage,
  .tutor-layered-png .tlp-eyes {
    transform: none !important;
  }
}