/* The product's lamp (src/components/AiLamp/LampFace.css, its three phases in
   src/theme/BrandMark.css): build-site.mjs writes them here as they are.
   Below: the editor's tokens it reads, from the site's own (tokens.css). */
/* The lamp's expressions (LampFace.jsx): motion over the phases' warm and
   cool. Transform and opacity only. The lantern's colours by phase are
   BrandMark.css's (.Lantern.is-p*). */

.LampFace {
  --face-warm: color-mix(in oklab, var(--tone-2) 70%, var(--tone));
  --face-cool: var(--machine);
  --face-glow: var(--face-warm);
  overflow: visible;
  flex: none;
}
.LampFace:is(.is-p2, .is-p3) {
  --face-glow: var(--face-cool);
}
.LampFace * {
  transform-box: fill-box;
}

/* --- parts, at rest --- */
.LampFace .F-halo-in {
  stop-color: var(--face-glow);
  stop-opacity: 0.55;
  transition: stop-color var(--duration-morph) var(--ease-out);
}
.LampFace .F-halo-out {
  stop-color: var(--face-glow);
  stop-opacity: 0;
}
.LampFace .F-halo {
  transform-origin: 50% 50%;
  opacity: 0.35;
}
.LampFace .F-flame {
  transform-origin: 50% 90%;
}
.LampFace .F-cool,
.LampFace .F-pale,
.LampFace .F-rings,
.LampFace .F-beam,
.LampFace .F-orbit,
.LampFace .F-rise,
.LampFace .F-burst,
.LampFace .F-smoke,
.LampFace .F-ask {
  opacity: 0;
}
.LampFace .F-cool {
  transition: opacity var(--duration-morph) var(--ease-out);
}
.LampFace:is(.is-p2, .is-p3) .F-cool {
  opacity: 1;
}
.LampFace.is-p3 .F-pale {
  opacity: 1;
}
.LampFace .F-pale {
  fill: color-mix(in oklab, var(--lamp-flame-cool-1) 25%, white);
}
.LampFace .F-core {
  fill: color-mix(in oklab, var(--lamp-flame-warm-1) 50%, white);
  transform-origin: 50% 90%;
}
.LampFace:is(.is-p2, .is-p3) .F-core {
  fill: color-mix(in oklab, var(--lamp-flame-cool-1) 40%, white);
}
.LampFace .F-body {
  transform-origin: 50% 0%;
}
.LampFace :is(.F-orbit, .F-rise, .F-burst) circle {
  fill: var(--face-glow);
}
.LampFace .F-rings circle {
  fill: none;
  stroke: var(--face-glow);
  stroke-width: 1.2;
  transform-origin: 50% 50%;
}
.LampFace .F-smoke {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1.4;
  stroke-linecap: round;
  transform-origin: 50% 100%;
}
.LampFace .F-ask {
  fill: none;
  stroke: var(--face-glow);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 100%;
}
/* The small flame: its outside the lamp's colour (cool only when all cool), its core the flame's. */
.LampFace.is-flame .F-warm {
  fill: var(--tone);
}
.LampFace.is-flame.is-p2 .F-cool {
  opacity: 0;
}
.LampFace.is-flame.is-p3 .F-cool {
  opacity: 1;
}
.LampFace.is-flame .F-core {
  fill: var(--lamp-flame-warm-1);
}
.LampFace.is-flame.is-p2 .F-core {
  fill: var(--lamp-flame-cool-1);
}
.LampFace.is-flame.is-p3 .F-core {
  fill: color-mix(in oklab, var(--lamp-flame-cool-1) 25%, white);
}

/* --- beat: the heartbeat (the brand's mark). Warm, breathing; once a cycle
   the cool light wakes in the flame (less than a thought: no sparks, no
   mark) and settles back. Each lamp its own moment (--beat-delay). --- */
.LampFace {
  --beat-cycle: 8.4s;
  --beat-wake: 0.8;
}
.LampFace .F-halo-cool {
  opacity: 0;
  transform-origin: 50% 50%;
}
.LampFace.is-beat .F-flame {
  animation: face-breathe calc(var(--beat-cycle) / 2) ease-in-out infinite;
  animation-delay: var(--beat-delay, 0s);
}
.LampFace.is-beat .F-halo {
  animation: face-glow-slow calc(var(--beat-cycle) / 2) ease-in-out infinite;
  animation-delay: var(--beat-delay, 0s);
}
.LampFace.is-beat .F-cool {
  animation: face-wake var(--beat-cycle) ease-in-out infinite;
  animation-delay: var(--beat-delay, 0s);
  transition: none;
}
.LampFace.is-beat .F-halo-cool {
  animation: face-wake-glow var(--beat-cycle) ease-in-out infinite;
  animation-delay: var(--beat-delay, 0s);
}
.LampFace.is-flame.is-beat .F-core {
  animation: face-wake-core var(--beat-cycle) ease-in-out infinite;
  animation-delay: var(--beat-delay, 0s);
}

/* --- wait: a slow breath, now and then a flicker --- */
.LampFace.is-wait .F-flame {
  animation: face-breathe 4s ease-in-out infinite;
}
.LampFace.is-wait .F-halo {
  animation: face-glow-slow 4s ease-in-out infinite;
}

/* --- think: flicker, three sparks circling, the glow pulsing --- */
.LampFace.is-think .F-flame {
  animation: face-flicker 1.1s ease-in-out infinite;
}
.LampFace.is-think .F-halo {
  animation: face-glow-pulse 1.2s ease-in-out infinite;
}
.LampFace.is-think .F-orbit {
  opacity: 1;
}
.LampFace.is-think .F-orbit circle {
  transform-box: view-box;
  transform-origin: 27px 38px;
  animation: face-orbit 2.4s linear infinite;
}
.LampFace.is-think .F-orbit circle:nth-child(2) {
  animation-delay: -0.8s;
  opacity: 0.7;
}
.LampFace.is-think .F-orbit circle:nth-child(3) {
  animation-delay: -1.6s;
  opacity: 0.45;
}

/* --- ask: lean one way, pause, the other; a question mark bobs --- */
.LampFace.is-ask .F-flame {
  animation: face-wonder 2.8s ease-in-out infinite;
}
.LampFace.is-ask .F-body {
  animation: face-tilt 2.8s ease-in-out infinite;
}
.LampFace.is-ask .F-ask {
  opacity: 1;
  animation: face-bob 1.4s ease-in-out infinite;
}
.LampFace.is-ask .F-halo {
  opacity: 0.4;
}

/* --- look: lean toward it, stretch, a beam that way --- */
.LampFace.is-look .F-flame {
  animation: face-look 2.4s var(--ease-out) infinite;
}
.LampFace.is-look .F-body {
  transform: rotate(-3deg);
  transition: transform 0.6s var(--ease-out);
}
.LampFace.is-look .F-beam {
  opacity: 0.6;
  transform-origin: 0% 0%;
  animation: face-beam 2.4s ease-in-out infinite;
}
.LampFace.is-look .F-halo {
  opacity: 0.55;
}

/* --- listen: rings go out, the flame bounces to a voice --- */
.LampFace.is-listen .F-flame {
  animation: face-voice 0.9s steps(1) infinite;
}
.LampFace.is-listen .F-rings {
  opacity: 1;
}
.LampFace.is-listen .F-rings circle {
  animation: face-ring 1.6s ease-out infinite;
}
.LampFace.is-listen .F-rings circle:nth-child(2) {
  animation-delay: 0.8s;
}
.LampFace.is-listen .F-halo {
  opacity: 0.6;
}

/* --- work: a fast pulse, sparks rising, the lamp swaying on its hook --- */
.LampFace.is-work .F-flame {
  animation: face-pulse 0.7s ease-in-out infinite;
}
.LampFace.is-work .F-body {
  animation: face-sway 1.6s ease-in-out infinite;
}
.LampFace.is-work .F-halo {
  animation: face-glow-pulse 0.7s ease-in-out infinite;
}
.LampFace.is-work .F-rise {
  opacity: 1;
}
.LampFace.is-work .F-rise circle {
  animation: face-rise 1.3s ease-out infinite;
}
.LampFace.is-work .F-rise circle:nth-child(2) {
  animation-delay: 0.35s;
}
.LampFace.is-work .F-rise circle:nth-child(3) {
  animation-delay: 0.7s;
}
.LampFace.is-work .F-rise circle:nth-child(4) {
  animation-delay: 1s;
}

/* --- done: one flare, a burst of sparks, then calm --- */
.LampFace.is-done .F-flame {
  animation: face-flare 1.1s var(--ease-out) both;
}
.LampFace.is-done .F-halo {
  animation: face-flash 1.4s var(--ease-out) both;
}
.LampFace.is-done .F-burst {
  opacity: 1;
}
.LampFace.is-done .F-burst circle {
  transform-box: view-box;
  transform-origin: 27px 36px;
  animation: face-burst 1s var(--ease-out) 0.15s both;
}

/* --- skip: a sputter, out, a wisp of smoke --- */
.LampFace.is-skip .F-flame {
  animation: face-sputter 1.6s ease-in both;
}
.LampFace.is-skip .F-halo {
  animation: face-dim 1.6s ease-in both;
}
.LampFace.is-skip .F-smoke {
  animation: face-smoke 2.2s ease-out 1.1s both;
}
.LampFace.is-skip .L-window {
  opacity: 0.6;
}

/* --- the small flame: the flame's motion alone --- */
.LampFace.is-flame .F-halo {
  opacity: 0.3;
}
.LampFace.is-flame.is-work .F-rise {
  opacity: 1;
}
.LampFace.is-flame.is-work .F-rise circle {
  animation: face-rise-small 1s ease-out infinite;
}
.LampFace.is-flame.is-work .F-rise circle:nth-child(2) {
  animation-delay: 0.5s;
}
.LampFace.is-flame.is-skip .F-flame {
  animation: face-sputter-small 1.6s ease-in both;
}

@keyframes face-wake {
  0%,
  72%,
  100% {
    opacity: 0;
  }
  80%,
  84% {
    opacity: var(--beat-wake);
  }
}
@keyframes face-wake-glow {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
  81% {
    opacity: calc(var(--beat-wake) * 0.6);
    transform: scale(1.05);
  }
}
@keyframes face-wake-core {
  0%,
  72%,
  100% {
    fill: var(--lamp-flame-warm-1);
  }
  80%,
  84% {
    fill: var(--lamp-flame-cool-1);
  }
}
@keyframes face-breathe {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.85;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  72% {
    transform: scale(0.98) skewX(3deg);
  }
  76% {
    transform: scale(0.96) skewX(-2deg);
  }
}
@keyframes face-glow-slow {
  50% {
    opacity: 0.5;
  }
}
@keyframes face-glow-pulse {
  50% {
    opacity: 0.75;
    transform: scale(1.06);
  }
}
@keyframes face-flicker {
  0%,
  100% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(0.9, 1.08) skewX(-5deg);
  }
  45% {
    transform: scale(1.05, 0.92) skewX(3deg);
  }
  70% {
    transform: scale(0.95, 1.05) skewX(-2deg);
  }
}
@keyframes face-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes face-wonder {
  0%,
  100% {
    transform: rotate(0deg);
  }
  15%,
  35% {
    transform: rotate(-16deg) scale(0.95);
  }
  55%,
  75% {
    transform: rotate(14deg) scale(0.95);
  }
}
@keyframes face-tilt {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  65% {
    transform: rotate(3deg);
  }
}
@keyframes face-bob {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes face-look {
  0% {
    transform: rotate(0deg) scale(1);
  }
  30%,
  100% {
    transform: rotate(18deg) scale(0.95, 1.12);
  }
}
@keyframes face-beam {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.65;
  }
}
@keyframes face-voice {
  0% {
    transform: scale(1, 1);
  }
  15% {
    transform: scale(1.05, 1.2);
  }
  30% {
    transform: scale(0.97, 0.9);
  }
  45% {
    transform: scale(1.04, 1.12);
  }
  60% {
    transform: scale(1, 0.96);
  }
  75% {
    transform: scale(1.06, 1.25);
  }
  90% {
    transform: scale(0.98, 0.94);
  }
}
@keyframes face-ring {
  from {
    transform: scale(0.7);
    opacity: 0.7;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes face-pulse {
  50% {
    transform: scale(1.14, 1.2);
  }
}
@keyframes face-sway {
  0%,
  100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
@keyframes face-rise {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-34px) translateX(2px);
    opacity: 0;
  }
}
@keyframes face-rise-small {
  from {
    transform: translateY(4px);
    opacity: 1;
  }
  to {
    transform: translateY(-6px);
    opacity: 0;
  }
}
@keyframes face-flare {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.45, 1.6);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes face-flash {
  0% {
    opacity: 0.35;
  }
  25% {
    opacity: 0.9;
    transform: scale(1.15);
  }
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
}
@keyframes face-burst {
  from {
    transform: rotate(var(--a)) translateY(0);
    opacity: 1;
  }
  to {
    transform: rotate(var(--a)) translateY(-30px);
    opacity: 0;
  }
}
@keyframes face-sputter {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: scale(0.6, 0.7);
  }
  35% {
    transform: scale(0.9, 0.95);
  }
  55% {
    transform: scale(0.4, 0.5) skewX(6deg);
  }
  70% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.15);
    opacity: 0;
  }
}
@keyframes face-sputter-small {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(0.5);
    opacity: 0.35;
  }
}
@keyframes face-dim {
  to {
    opacity: 0;
  }
}
@keyframes face-smoke {
  from {
    transform: translateY(0) scale(0.6);
    opacity: 0.7;
  }
  to {
    transform: translateY(-14px) scale(1);
    opacity: 0;
  }
}

/* Reduced motion: the light's rise and fall only. */
@media (prefers-reduced-motion: reduce) {
  .LampFace *,
  .LampFace .F-orbit circle,
  .LampFace .F-rings circle,
  .LampFace .F-rise circle,
  .LampFace .F-burst circle {
    animation: none !important;
    transform: none !important;
  }
  .LampFace:is(.is-think, .is-work, .is-listen) .F-halo {
    animation: face-glow-slow 2s ease-in-out infinite !important;
  }
  /* The heartbeat: one light wake, once. */
  .LampFace.is-beat .F-halo-cool {
    animation: face-wake-glow var(--beat-cycle) ease-in-out 1 !important;
  }
  .LampFace :is(.F-orbit, .F-rise, .F-burst, .F-rings, .F-smoke) {
    opacity: 0 !important;
  }
}

/* The AI as an icon (Icon's `ai`): the lamp in an icon's square, a little
   taller than it — a lantern is narrow — and never the flame alone (§3d). */
.icon--lamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: none;
  overflow: visible;
}
.icon--lamp > .LampFace {
  width: auto;
  height: max(1.3em, 16px);
  flex: none;
}

/* --- the line lamp (`line`: the brand's line drawing, the site's lamp and
   mark) --- the lantern in strokes, its flame filled; the same phases — warm
   strokes while the person leads, the machine's once it works on its own
   (p3) — and the same motion. Its glow fainter: a drawing, not a body. */
.LampFace.is-line .F-body :is(.L-cap, .L-glass, .L-window) {
  fill: none;
  stroke: var(--line-lamp, var(--tone));
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: stroke var(--lantern-seep) var(--ease-out) var(--lantern-lamp-delay);
}
.LampFace.is-line .F-body .L-window {
  stroke-width: 1.2;
  stroke-opacity: 0.45;
}
.LampFace.is-line.is-p3 .F-body :is(.L-cap, .L-glass, .L-window) {
  stroke: var(--machine);
}
.LampFace.is-line .F-halo,
.LampFace.is-line .F-halo-cool {
  opacity: 0.55;
}

/* The lantern (BrandMark.jsx Lantern) in the lamp's three phases (§2):
   p1 all warm, p2 a cool flame in the warm lamp, p3 all cool (the flame pale
   in a cool lamp). The cool seeps from the flame into the lamp, and back. */
.Lantern {
  --lantern-seep: var(--duration-morph);
  --lantern-lamp-delay: 0ms;
  --lantern-flame-delay: 0ms;
}
.Lantern .L-cap {
  fill: var(--foreground);
}
.Lantern .L-glass {
  fill: var(--tone-2);
}
.Lantern .L-window {
  fill: var(--tone);
}
.Lantern :is(.L-cap, .L-glass, .L-window) {
  transition: fill var(--lantern-seep) var(--ease-out) var(--lantern-lamp-delay);
}
.Lantern :is(.L-flame-cool, .L-flame-pale) {
  opacity: 0;
  transition: opacity var(--lantern-seep) var(--ease-out) var(--lantern-flame-delay);
}
.Lantern .L-flame-pale {
  fill: color-mix(in oklab, var(--lamp-flame-cool-1) 25%, white);
}
.Lantern.is-p1 {
  --lantern-flame-delay: calc(var(--lantern-seep) * 0.6);
}
.Lantern:is(.is-p2, .is-p3) .L-flame-cool {
  opacity: 1;
}
.Lantern.is-p3 {
  --lantern-lamp-delay: calc(var(--lantern-seep) * 0.6);
}
.Lantern.is-p3 .L-flame-pale {
  opacity: 1;
}
.Lantern.is-p3 .L-cap {
  fill: var(--machine);
}
.Lantern.is-p3 .L-glass {
  fill: color-mix(in oklab, var(--machine-2) 30%, var(--lamp-flame-cool-1));
}
.Lantern.is-p3 .L-window {
  fill: var(--machine);
}


[data-lamp] {
  --tone: var(--lamp);
  --tone-2: var(--lamp-2, color-mix(in oklab, var(--lamp) 55%, #ffd27a));
  --lamp-flame-warm-1: color-mix(in oklab, #ffd76a 55%, #fff8e6);
  --lamp-flame-warm-2: color-mix(in oklab, var(--lamp) 35%, #ffc24a);
  --lamp-flame-cool-1: #8fd3ff;
  --lamp-flame-cool-2: #c4b5ff;
  --duration-morph: 0.3s;
  display: inline-block;
  position: relative;
  line-height: 0;
}
/* The big lamp: its lantern's box, its glow and sparks round it (as on the stage). */
[data-lamp]:not([data-size]) > .LampFace,
[data-lamp][data-size='hero'] > .LampFace {
  position: absolute;
  left: -50%;
  top: calc(-22 / 76 * 100%);
}