/* ═══════════════════════════════════════════════════════════════════════════
   UTU PORTAL GEODISC ENGINE — MAARA TownMesh
   Algorithmic Lo Shu portal sensing · seven-chant welcome · entropy flow
   -1 / 0 / +1 rulial triad · geodesic alignment · care-gratitude-pride
   asante SANA, MAaRA SABBA! — welcome seven times, Chogoria
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Welcome Chant Overlay ─────────────────────────────────────────────── */
#utu-geodisc-chant {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 50% 52%,
    rgba(43, 18, 63, 0.97) 0%,
    rgba(6, 4, 14, 0.99) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 1.5s ease, visibility 1.5s ease;
  pointer-events: all;
  cursor: default;
  user-select: none;
}

#utu-geodisc-chant.utu-chant-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Chant Inner Content ───────────────────────────────────────────────── */
#utu-chant-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* Gate 5 pulsing orb above text */
#utu-chant-gate {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd36a;
  box-shadow:
    0 0 18px rgba(255, 211, 106, 0.90),
    0 0 48px rgba(255, 211, 106, 0.35);
  margin-bottom: 20px;
  animation: utu-gate-pulse 1.3s ease-in-out infinite;
}

@keyframes utu-gate-pulse {
  0%, 100% { transform: scale(1.0); opacity: 1.0; box-shadow: 0 0 18px rgba(255,211,106,0.90), 0 0 48px rgba(255,211,106,0.35); }
  50%       { transform: scale(1.7); opacity: 0.82; box-shadow: 0 0 32px rgba(255,211,106,0.55), 0 0 80px rgba(255,211,106,0.18); }
}

/* Seven-fold welcome — gratitude line */
#utu-chant-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.8rem, 5.5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffd36a;
  text-align: center;
  text-shadow:
    0 0 40px rgba(255, 211, 106, 0.60),
    0 0 80px rgba(255, 211, 106, 0.22);
  transition: transform 0.20s ease, color 0.55s ease;
}

/* SABBA — pride line */
#utu-chant-text2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.90);
  text-align: center;
  text-shadow: 0 0 36px rgba(255, 255, 255, 0.35);
  transition: transform 0.20s ease, color 0.55s ease;
}

/* Pulse scale flash */
.utu-chant-flash {
  transform: scale(1.07) !important;
}

/* Sub label */
#utu-chant-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 211, 106, 0.40);
  text-align: center;
  margin-top: 6px;
}

/* Pulse count dots */
#utu-chant-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 211, 106, 0.32);
  margin-top: 4px;
  transition: color 0.4s ease;
}

/* ── Expanding Chant Rings ─────────────────────────────────────────────── */
.utu-chant-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  animation: utu-ring-out 2.4s ease-out forwards;
}

@keyframes utu-ring-out {
  0%   { width: 80px;  height: 80px;  opacity: 0.80; }
  100% { width: 720px; height: 720px; opacity: 0;    }
}

/* ── GeoDisc Canvas ────────────────────────────────────────────────────── */
#utu-geodisc-canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 2.2s ease;
  border-radius: 50%;
}

#utu-geodisc-canvas.utu-disc-ready {
  opacity: 1;
}

/* ── Portal Node Glow Layers ───────────────────────────────────────────── */
.utu-portal-node {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  border: 1.5px solid transparent;
  transition:
    border-color  0.9s ease,
    box-shadow    0.9s ease,
    opacity       0.9s ease;
}

/* Community care (-1): sky blue */
.utu-portal-node[data-triad="-1"] {
  border-color: rgba(14, 165, 233, var(--geo-glow, 0.15));
  box-shadow:
    0 0 16px rgba(14, 165, 233, calc(var(--geo-glow, 0.15) * 0.75)) inset,
    0 0 32px rgba(14, 165, 233, calc(var(--geo-glow, 0.15) * 0.28));
}

/* Gate 5 balance (0): warm gold */
.utu-portal-node[data-triad="0"] {
  border-color: rgba(255, 211, 106, var(--geo-glow, 0.15));
  box-shadow:
    0 0 16px rgba(255, 211, 106, calc(var(--geo-glow, 0.15) * 0.75)) inset,
    0 0 32px rgba(255, 211, 106, calc(var(--geo-glow, 0.15) * 0.28));
}

/* Commerce flow (+1): emerald */
.utu-portal-node[data-triad="1"] {
  border-color: rgba(16, 185, 129, var(--geo-glow, 0.15));
  box-shadow:
    0 0 16px rgba(16, 185, 129, calc(var(--geo-glow, 0.15) * 0.75)) inset,
    0 0 32px rgba(16, 185, 129, calc(var(--geo-glow, 0.15) * 0.28));
}

/* Invitation pulse — unvisited portals breathe gently */
.utu-portal-node.utu-portal-invite {
  animation: utu-invite-breathe 4.2s ease-in-out infinite;
}

@keyframes utu-invite-breathe {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1.00; }
}

/* Harmonic drift — injected via <style> tag per portal, applied to node */
.utu-portal-node[data-portal="alerts"]      { animation: utu-drift-alerts      8.1s ease-in-out infinite, utu-invite-breathe 4.2s ease-in-out infinite; }
.utu-portal-node[data-portal="rides"]       { animation: utu-drift-rides        6.7s ease-in-out infinite, utu-invite-breathe 4.2s ease-in-out infinite; }
.utu-portal-node[data-portal="fundraisers"] { animation: utu-drift-fundraisers  9.4s ease-in-out infinite, utu-invite-breathe 4.2s ease-in-out infinite; }
.utu-portal-node[data-portal="baraazas"]    { animation: utu-drift-baraazas     7.5s ease-in-out infinite, utu-invite-breathe 4.2s ease-in-out infinite; }
.utu-portal-node[data-portal="luxe"]        { animation: utu-drift-luxe         8.8s ease-in-out infinite, utu-invite-breathe 4.2s ease-in-out infinite; }
.utu-portal-node[data-portal="rarefind"]    { animation: utu-drift-rarefind     6.2s ease-in-out infinite, utu-invite-breathe 4.2s ease-in-out infinite; }

/* Harmonic drift keyframes — each portal drifts at its Lo Shu frequency */
/* alerts=1/water, phase 180°: slow vertical oscillation */
@keyframes utu-drift-alerts {
  0%, 100% { box-shadow: 0 0 14px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.75)) inset, 0 0 28px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.28)); }
  50%       { box-shadow: 0 0 22px rgba(14,165,233,calc(var(--geo-glow,0.15)*1.20)) inset, 0 0 44px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.48)); }
}
/* rides=3/thunder, phase 270° */
@keyframes utu-drift-rides {
  0%, 100% { box-shadow: 0 0 14px rgba(16,185,129,calc(var(--geo-glow,0.15)*0.75)) inset, 0 0 28px rgba(16,185,129,calc(var(--geo-glow,0.15)*0.28)); }
  50%       { box-shadow: 0 0 22px rgba(16,185,129,calc(var(--geo-glow,0.15)*1.20)) inset, 0 0 44px rgba(16,185,129,calc(var(--geo-glow,0.15)*0.48)); }
}
/* fundraisers=8/mountain, phase 225° */
@keyframes utu-drift-fundraisers {
  0%, 100% { box-shadow: 0 0 14px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.75)) inset, 0 0 28px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.28)); }
  50%       { box-shadow: 0 0 22px rgba(14,165,233,calc(var(--geo-glow,0.15)*1.25)) inset, 0 0 48px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.52)); }
}
/* baraazas=7/lake, phase 90° */
@keyframes utu-drift-baraazas {
  0%, 100% { box-shadow: 0 0 14px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.75)) inset, 0 0 28px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.28)); }
  50%       { box-shadow: 0 0 22px rgba(14,165,233,calc(var(--geo-glow,0.15)*1.18)) inset, 0 0 40px rgba(14,165,233,calc(var(--geo-glow,0.15)*0.45)); }
}
/* luxe=4/wind, phase 315° */
@keyframes utu-drift-luxe {
  0%, 100% { box-shadow: 0 0 14px rgba(16,185,129,calc(var(--geo-glow,0.15)*0.75)) inset, 0 0 28px rgba(16,185,129,calc(var(--geo-glow,0.15)*0.28)); }
  50%       { box-shadow: 0 0 22px rgba(16,185,129,calc(var(--geo-glow,0.15)*1.15)) inset, 0 0 38px rgba(16,185,129,calc(var(--geo-glow,0.15)*0.44)); }
}
/* rarefind=9/fire, phase 0° */
@keyframes utu-drift-rarefind {
  0%, 100% { box-shadow: 0 0 14px rgba(168,85,247,calc(var(--geo-glow,0.15)*0.75)) inset, 0 0 28px rgba(168,85,247,calc(var(--geo-glow,0.15)*0.28)); }
  50%       { box-shadow: 0 0 22px rgba(168,85,247,calc(var(--geo-glow,0.15)*1.25)) inset, 0 0 50px rgba(168,85,247,calc(var(--geo-glow,0.15)*0.55)); }
}

/* ── Triadic Balance Indicator ─────────────────────────────────────────── */
#utu-triad-pill {
  position: fixed;
  bottom: 108px;
  left: 16px;
  z-index: 9996;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(8, 8, 18, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 211, 106, 0.12);
  border-radius: 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 211, 106, 0.72);
  user-select: none;
  pointer-events: none;
  opacity: 0;
  animation: utu-pill-appear 0.7s ease forwards;
  animation-delay: 1.0s;
}

@keyframes utu-pill-appear {
  to { opacity: 1; }
}

#utu-triad-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd36a;
  flex-shrink: 0;
  transition: background 0.65s ease, box-shadow 0.65s ease;
}

#utu-triad-label {
  transition: color 0.65s ease;
  color: rgba(255, 211, 106, 0.72);
}