/* ──────────────────────────────────────────────────────────────
   ENTITY — Logo Engine
   The logo is the monogram. The monogram is the letter E.
   Constructed from exactly 3 horizontal bars. No vertical stem.

   Scale tokens — apply as class on parent container:
     .s4   t=4px    16px scale
     .s6   t=6px    32px scale
     .s10  t=10px   64px scale

   States:  idle · active · completing · learning · error · paused
   Colour and motion are MONOGRAM-ONLY — text is inert.
   ────────────────────────────────────────────────────────────── */

.lockup {
  display: inline-flex;
  align-items: center;
}
.mono {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
}
.bar {
  display: block;
  border-radius: 1.5px;
  position: relative;
  overflow: hidden;
}
.ntity {
  color: rgba(255,255,255,0.85);   /* fixed — never receives state colour */
  font-family: 'DM Sans', sans-serif;
  line-height: 1;
  user-select: none;
}

/* ── SCALE 16px — t=4px ─────────────────────────── */
.s4 .mono   { gap: 4px; width: 12px; }
.s4 .bar    { height: 4px; width: 12px; }
.s4 .lockup { gap: 4px; }
.s4 .ntity  { font-size: 20px; font-weight: 500; letter-spacing: -0.040em; }

/* ── SCALE 32px — t=6px ─────────────────────────── */
.s6 .mono   { gap: 6px; width: 18px; }
.s6 .bar    { height: 6px; width: 18px; }
.s6 .lockup { gap: 6px; }
.s6 .ntity  { font-size: 30px; font-weight: 600; letter-spacing: -0.055em; }

/* ── SCALE 64px — t=10px ────────────────────────── */
.s10 .mono   { gap: 10px; width: 30px; }
.s10 .bar    { height: 10px; width: 30px; }
.s10 .lockup { gap: 9px; }
.s10 .ntity  { font-size: 50px; font-weight: 700; letter-spacing: -0.065em; }

/* ── IDLE ───────────────────────────────────────── */
.idle .bar { background: rgba(255,255,255,0.2); opacity: 0.55; }

/* ── ACTIVE — scan highlight left→right, phased ──── */
@keyframes ent-scan {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
.active .bar { background: rgba(0,230,255,0.12); }
.active .bar::after {
  content: ''; position: absolute; inset: 0; width: 55%;
  background: linear-gradient(90deg, transparent, #00E6FF 50%, transparent);
  animation: ent-scan 1.2s linear infinite;
  border-radius: inherit;
}
.active .bar:nth-child(2)::after { animation-delay: .3s; }
.active .bar:nth-child(3)::after { animation-delay: .6s; }

/* ── COMPLETING — accelerating scan with right-edge glow ──── */
@keyframes ent-complete {
  0%   { transform: translateX(-120%); opacity: .7; }
  65%  { opacity: 1; }
  100% { transform: translateX(200%); opacity: 0; }
}
.completing .bar { background: rgba(0,230,255,0.1); }
.completing .bar::after {
  content: ''; position: absolute; inset: 0; width: 48%;
  background: linear-gradient(90deg, transparent, #00E6FF 75%, rgba(0,230,255,0.3));
  animation: ent-complete 1.5s ease-in infinite;
  border-radius: inherit;
}
.completing .bar:nth-child(2)::after { animation-delay: .14s; }
.completing .bar:nth-child(3)::after { animation-delay: .28s; }

/* ── LEARNING — dual soft pulses, staggered ─────── */
@keyframes ent-pulse-l {
  0%,100% { transform: translateX(-120%); opacity: 0; }
  15%     { opacity: .9; }
  85%     { opacity: .4; }
  95%     { transform: translateX(180%); opacity: 0; }
}
.learning .bar { background: rgba(0,255,163,0.1); }
.learning .bar::after, .learning .bar::before {
  content: ''; position: absolute; inset: 0; width: 28%;
  background: linear-gradient(90deg, transparent, #00FFA3, transparent);
  animation: ent-pulse-l 1.5s ease-in-out infinite;
  border-radius: inherit;
}
.learning .bar::before              { animation-delay: .75s; opacity: .55; }
.learning .bar:nth-child(2)::after  { animation-delay: .5s; }
.learning .bar:nth-child(2)::before { animation-delay: 1.25s; }
.learning .bar:nth-child(3)::after  { animation-delay: 1.0s; }
.learning .bar:nth-child(3)::before { animation-delay: .25s; }

/* ── ERROR — flicker + jitter ───────────────────── */
@keyframes ent-flicker {
  0%,100% { opacity: 1; } 20% { opacity: .4; } 45% { opacity: 1; } 70% { opacity: .3; }
}
@keyframes ent-jitter {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-1.5px); }
  50%     { transform: translateX(1px); }
  75%     { transform: translateX(-.5px); }
}
.error .bar {
  background: #FF404D;
  animation: ent-flicker .35s step-end infinite, ent-jitter .35s ease-in-out infinite;
}
.error .bar:nth-child(2) { animation-delay: .1s, .1s; }
.error .bar:nth-child(3) { animation-delay: .2s, .2s; }

/* ── PAUSED — desaturated, no motion ────────────── */
.paused .bar { background: rgba(255,255,255,0.12); opacity: .22; }