/*
 * KENYA TOTEM HEAD — Sacred crown seal for MAARA TownMesh
 * "by Kenya 4/ KENYA'a" — By Kenya for Kenya
 *
 * Sits above all React UI (z=9998), below the GeoDisc chant overlay (z=9999).
 * Four modes: utu (default) · community (-1) · commerce (+1) · diaspora
 * Boot-animated entry, Zeal-bus reactive, GeoDisc chant-pulse.
 */

/* ── Entry animation ─────────────────────────────────────────────────────── */
@keyframes kenya-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(0.88);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── Pulse (chant sync) ──────────────────────────────────────────────────── */
@keyframes kenya-totem-pulse-ring {
  0%   { box-shadow: 0 0 22px rgba(255,215,95,0.28), 0 0 34px rgba(0,120,60,0.20), inset 0 0 18px rgba(255,255,255,0.06); }
  35%  { box-shadow: 0 0 38px rgba(255,215,95,0.70), 0 0 60px rgba(0,190,80,0.44), 0 0 90px rgba(255,215,95,0.24), inset 0 0 28px rgba(255,255,255,0.14); }
  100% { box-shadow: 0 0 22px rgba(255,215,95,0.28), 0 0 34px rgba(0,120,60,0.20), inset 0 0 18px rgba(255,255,255,0.06); }
}

/* ── Lion ember drift ────────────────────────────────────────────────────── */
@keyframes kenya-lion-drift {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,215,95,0.7)); }
  50%       { filter: drop-shadow(0 0 12px rgba(255,215,95,1.0)) brightness(1.15); }
}

/* ── Mode shimmer ────────────────────────────────────────────────────────── */
@keyframes kenya-shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  BASE SHELL                                                               */
/* ══════════════════════════════════════════════════════════════════════════ */

.kenya-totem-head {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  pointer-events: none;

  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;

  padding: 7px 16px 6px;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255,215,95,0.48);

  /* default UTU mode — overridden by JS setMode() */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78),
    rgba(0, 95, 45, 0.68),
    rgba(120, 0, 20, 0.60),
    rgba(0, 0, 0, 0.78)
  );
  box-shadow:
    0 0 22px rgba(255,215,95,0.28),
    0 0 34px rgba(0,120,60,0.20),
    inset 0 0 18px rgba(255,255,255,0.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  animation: kenya-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;

  will-change: transform, box-shadow;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Pulse class (added/removed by JS) ──────────────────────────────────── */
.kenya-totem-head.kenya-totem-pulse {
  animation: kenya-totem-pulse-ring 1.1s ease-out forwards;
}

/* ── Sigil text ──────────────────────────────────────────────────────────── */
.kenya-sigil-text {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.11em;
  color: #fff9df;
  text-shadow:
    0 0 8px rgba(255,215,95,0.55),
    0 0 14px rgba(0,0,0,0.9);
  white-space: nowrap;
  line-height: 1;
  animation: kenya-shimmer 6s ease-in-out infinite;
}

.kenya-sigil-text b {
  color: #ffd85a;
  font-weight: 900;
  font-style: normal;
}

/* ── Lion glyphs ─────────────────────────────────────────────────────────── */
.kenya-totem-lion {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,215,95,0.7));
  animation: kenya-lion-drift 4s ease-in-out infinite;
}

.kenya-totem-lion:last-of-type {
  animation-delay: 2s;
}

/* ── Subtitle row ────────────────────────────────────────────────────────── */
.kenya-totem-subtitle {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd85a;
  opacity: 0.88;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255,215,95,0.40);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  MODE VARIANTS — applied via data-mode attribute                          */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Community (-1 needsensing) — sky/water blue emphasis */
.kenya-totem-head[data-mode="community"] .kenya-sigil-text {
  text-shadow:
    0 0 8px rgba(56,189,248,0.55),
    0 0 14px rgba(0,0,0,0.9);
}
.kenya-totem-head[data-mode="community"] .kenya-sigil-text b {
  color: #67e8f9;
}
.kenya-totem-head[data-mode="community"] .kenya-totem-subtitle {
  color: #67e8f9;
  text-shadow: 0 0 6px rgba(56,189,248,0.40);
}
.kenya-totem-head[data-mode="community"] .kenya-totem-lion {
  filter: drop-shadow(0 0 6px rgba(56,189,248,0.7));
}

/* Commerce (+1 expansion) — warm amber/gold */
.kenya-totem-head[data-mode="commerce"] .kenya-sigil-text {
  color: #fffbee;
  text-shadow:
    0 0 8px rgba(251,191,36,0.65),
    0 0 14px rgba(0,0,0,0.9);
}
.kenya-totem-head[data-mode="commerce"] .kenya-sigil-text b {
  color: #fbbf24;
}
.kenya-totem-head[data-mode="commerce"] .kenya-totem-subtitle {
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251,191,36,0.45);
}
.kenya-totem-head[data-mode="commerce"] .kenya-totem-lion {
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.85));
}

/* Diaspora — purple/cyan corridor */
.kenya-totem-head[data-mode="diaspora"] .kenya-sigil-text {
  color: #f0f9ff;
  text-shadow:
    0 0 8px rgba(103,232,249,0.55),
    0 0 14px rgba(60,20,100,0.9);
}
.kenya-totem-head[data-mode="diaspora"] .kenya-sigil-text b {
  color: #67e8f9;
}
.kenya-totem-head[data-mode="diaspora"] .kenya-totem-subtitle {
  color: #a78bfa;
  text-shadow: 0 0 6px rgba(167,139,250,0.40);
  letter-spacing: 0.22em;
}
.kenya-totem-head[data-mode="diaspora"] .kenya-totem-lion {
  filter: drop-shadow(0 0 8px rgba(103,232,249,0.75));
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  RESPONSIVE                                                               */
/* ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .kenya-totem-head {
    top: 8px;
    padding: 5px 10px 5px;
    column-gap: 7px;
    max-width: 90vw;
  }

  .kenya-sigil-text {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
  }

  .kenya-totem-lion {
    font-size: 0.88rem;
  }

  .kenya-totem-subtitle {
    font-size: 0.44rem;
    letter-spacing: 0.13em;
  }
}

@media (max-width: 400px) {
  .kenya-totem-head {
    top: 6px;
    padding: 4px 8px;
    column-gap: 5px;
  }

  .kenya-sigil-text {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }

  .kenya-totem-subtitle {
    font-size: 0.40rem;
    letter-spacing: 0.10em;
  }
}