/* Lumen: a small glowing ball of light. Mood lives in motion, glow and colour.
   States: idle, listening, thinking, talking, celebrating, puzzled.
   Variant: add .lumen-eyes-off on an ancestor to hide the eyes. */

.lumen { width: 160px; height: 160px; overflow: visible; display: block; }
.lumen--mark { width: var(--lumen-mark); height: var(--lumen-mark); }
.lumen--chat { width: var(--lumen-chat); height: var(--lumen-chat); }
.lumen--small { width: 32px; height: 32px; }
.lumen--large, .lumen--hero { width: var(--lumen-hero); height: var(--lumen-hero); }
.lumen--stage { width: var(--lumen-stage); height: var(--lumen-stage); }

.lumen * { transform-box: fill-box; transform-origin: center; }

/* When lumen3d.js runs, one canvas draws every Lumen and the SVG orb keeps only its box (record 5dhi/R4). */
html[data-lumen3d="on"] svg.lumen > * { display: none; }
.lumen3d-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.lumen-motes { transform-box: view-box; transform-origin: 100px 100px; fill: var(--lumen-gold); opacity: 0; transition: opacity 400ms; }
.lumen-shine { opacity: 0.55; transform: rotate(-32deg); }
.lumen-eye { fill: var(--lumen-eye); transition: transform 250ms ease; }
.lumen-eyes { transition: transform 300ms ease; }
.lumen-eyes-happy { display: none; fill: none; stroke: var(--lumen-eye); stroke-width: 4.5; stroke-linecap: round; }
.lumen[data-state="celebrating"] .lumen-eyes { display: none; }
.lumen[data-state="celebrating"] .lumen-eyes-happy { display: inline; }
.lumen-eyes-off .lumen-eyes, .lumen-eyes-off .lumen-eyes-happy { display: none !important; }
.lumen-halo { transition: opacity 400ms; }

@media (prefers-color-scheme: light) {
  .lumen-core { stroke: var(--lumen-amber); stroke-opacity: 0.35; stroke-width: 1.5; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Idle: a slow float and breath. Everyone gets this. */
  .lumen-body { animation: lumen-float 4.2s ease-in-out infinite; }
  .lumen-halo { animation: lumen-breathe 4.2s ease-in-out infinite; }
  .lumen-eye { animation: lumen-blink 5.3s infinite; }

  /* Listening: brighter, a touch bigger, looking up at you. */
  .lumen[data-state="listening"] .lumen-halo { animation: lumen-breathe-bright 1.8s ease-in-out infinite; }
  .lumen[data-state="listening"] .lumen-core { animation: lumen-swell 1.8s ease-in-out infinite; }
  .lumen[data-state="listening"] .lumen-eyes { transform: translateY(-5px); }

  /* Thinking: motes circle, eyes drift up and to the side. */
  .lumen[data-state="thinking"] .lumen-motes { opacity: 1; animation: lumen-orbit 2.6s linear infinite; }
  .lumen[data-state="thinking"] .lumen-eyes { transform: translate(6px, -6px); }

  /* Talking: an uneven pulse, like speech. */
  .lumen[data-state="talking"] .lumen-core,
  .lumen[data-state="talking"] .lumen-glow { animation: lumen-speak 0.9s ease-in-out infinite; }
  .lumen[data-state="talking"] .lumen-halo { animation: lumen-breathe-bright 0.9s ease-in-out infinite; }

  /* Celebrating: a hop, a squash, and a burst of sparks. */
  .lumen[data-state="celebrating"] .lumen-body { animation: lumen-hop 1.1s cubic-bezier(.3,.7,.4,1) infinite; }
  .lumen[data-state="celebrating"] .lumen-motes { opacity: 1; animation: lumen-burst 1.1s ease-out infinite; }
  .lumen[data-state="celebrating"] .lumen-halo { animation: lumen-breathe-bright 0.55s ease-in-out infinite; }

  /* Puzzled: a tilt and a wobble, a little dimmer, one eye squints. */
  .lumen[data-state="puzzled"] .lumen-body { animation: lumen-wobble 2.4s ease-in-out infinite; }
  .lumen[data-state="puzzled"] .lumen-halo { opacity: 0.55; animation: none; }
  .lumen[data-state="puzzled"] .lumen-eye:first-child { animation: none; transform: scaleY(0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .lumen[data-state="thinking"] .lumen-motes,
  .lumen[data-state="celebrating"] .lumen-motes { opacity: 1; }
  .lumen[data-state="puzzled"] .lumen-halo { opacity: 0.55; }
  .lumen[data-state="listening"] .lumen-eyes { transform: translateY(-5px); }
}

@keyframes lumen-float { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } }
@keyframes lumen-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes lumen-breathe-bright { 0%, 100% { transform: scale(1.02); opacity: 0.95; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes lumen-swell { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.07); } }
@keyframes lumen-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
@keyframes lumen-orbit { to { transform: rotate(360deg); } }
@keyframes lumen-speak {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.07); }
  32% { transform: scale(1.01); }
  55% { transform: scale(1.09); }
  70% { transform: scale(1.02); }
  84% { transform: scale(1.05); }
}
@keyframes lumen-hop {
  0% { transform: translateY(4px) scale(1.08, 0.9); }
  30% { transform: translateY(-26px) scale(0.94, 1.07); }
  55% { transform: translateY(-30px) scale(1, 1); }
  85% { transform: translateY(4px) scale(1.1, 0.88); }
  100% { transform: translateY(4px) scale(1.08, 0.9); }
}
@keyframes lumen-burst {
  0% { transform: scale(0.55); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes lumen-wobble {
  0%, 100% { transform: rotate(-9deg) translateY(2px); }
  50% { transform: rotate(-3deg) translateY(-2px); }
}