/* ================= ATLAS — orb.css =================
   Circular Atlas chamber: full GIF on top, mirrored
   reflection fading below, ATLAS ONLINE on the seam.
   States: idle | listening | thinking | speaking | error
   (set on #orb-zone as data-state)
==================================================== */

#orb-arch {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #2A0808 0%, var(--nms-deep-red) 45%, transparent 100%);
  /* floating hologram: the rim dissolves into the page on every side —
     tune the percentages to taste: higher first stop = more solid core */
  -webkit-mask-image: radial-gradient(circle, #000 64%, rgba(0,0,0,0.5) 80%, transparent 97%);
  mask-image: radial-gradient(circle, #000 64%, rgba(0,0,0,0.5) 80%, transparent 97%);
}

/* chamber (the GIF) — scaled inside the circle so the white arch crown stays visible */
#orb {
  position: absolute;
  top: 3.2%; left: 8.3%;
  width: 83.4%; height: 46.9%;
  background: url('../assets/atlas-orb.gif');
  background-size: 100% 100%;
  transition: filter 0.5s;
}

/* mirrored reflection fading into the dark */
#orb-mirror {
  position: absolute;
  top: 50.1%; left: 8.3%;
  width: 83.4%; height: 46.9%;
  background: url('../assets/atlas-orb.gif');
  background-size: 100% 100%;
  transform: scaleY(-1);
  opacity: 0.65;
  filter: brightness(0.8);
  /* gentler own-fade — the rim feather handles the final dissolve */
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  pointer-events: none;
}

/* wrap-around chamber canvas (built at runtime by js/orbwrap.js) */
#orb-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: filter 0.5s, opacity 0.6s ease;
}
#orb-arch.wrapped #orb-wrap { opacity: 1; }
#orb-arch.wrapped #orb,
#orb-arch.wrapped #orb-mirror {
  opacity: 0;
  visibility: hidden; /* stops paint cost once faded */
  transition: opacity 0.6s ease, visibility 0s 0.6s;
}

/* shadow rim — content dims into darkness before the alpha feather dissolves it
   (clear to 72% of the radius; widen/narrow by moving that first stop) */
#orb-arch::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle,
    transparent 72%,
    rgba(7, 10, 15, 0.55) 84%,
    rgba(7, 10, 15, 0.93) 100%);
}

/* old arch pillars retired */
.side-light { display: none; }

/* ATLAS ONLINE — centred on the seam, inside the chamber */
#orb-arch #status-line {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  margin: 0;
  background: rgba(5, 8, 12, 0.85);
  padding: 5px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--nms-teal);
  text-transform: uppercase;
  white-space: nowrap;
}

/* state rings overlaying the chamber — centred on the circle */
#orb-rings { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ring {
  position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px;
  margin: -85px 0 0 -85px;
  border: 2px solid transparent;
  border-radius: 50%;
  opacity: 0;
}

/* ---------- IDLE ---------- */
#orb-zone[data-state="idle"] #orb,
#orb-zone[data-state="idle"] #orb-wrap {
  animation: idle-pulse 3s ease-in-out infinite;
}
@keyframes idle-pulse {
  0%, 100% { filter: brightness(0.9) saturate(1); }
  50%      { filter: brightness(1.15) saturate(1.2); }
}
#orb-zone[data-state="idle"] .r1 {
  opacity: 1;
  border-color: rgba(232, 244, 248, 0.25);
  animation: idle-ring 3s ease-in-out infinite;
}
@keyframes idle-ring {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50%      { transform: scale(1.06); opacity: 0.45; }
}

/* ---------- LISTENING ---------- */
#orb-zone[data-state="listening"] #orb,
#orb-zone[data-state="listening"] #orb-wrap {
  animation: listen-pulse 0.8s ease-in-out infinite;
}
@keyframes listen-pulse {
  0%, 100% { filter: brightness(1.05) saturate(1.3); }
  50%      { filter: brightness(1.5) saturate(1.6) hue-rotate(-6deg); }
}
#orb-zone[data-state="listening"] .ring {
  border-color: rgba(255, 255, 255, 0.8);
  animation: ripple 1.4s ease-out infinite;
}
#orb-zone[data-state="listening"] .r2 { animation-delay: 0.45s; }
#orb-zone[data-state="listening"] .r3 { animation-delay: 0.9s; }
@keyframes ripple {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.8);  opacity: 0; }
}

/* ---------- THINKING ---------- */
#orb-zone[data-state="thinking"] #orb,
#orb-zone[data-state="thinking"] #orb-wrap {
  animation: think-fragment 1.6s ease-in-out infinite;
}
@keyframes think-fragment {
  0%, 100% { filter: brightness(1) saturate(1.2) hue-rotate(0deg); }
  25%      { filter: brightness(1.3) saturate(1.5) hue-rotate(18deg); }
  50%      { filter: brightness(1.45) saturate(1.7) hue-rotate(30deg); }
  75%      { filter: brightness(1.25) saturate(1.4) hue-rotate(14deg); }
}
#orb-zone[data-state="thinking"] .r1 {
  opacity: 1;
  border-color: rgba(255, 170, 60, 0.85);
  border-top-color: transparent;
  animation: think-spin 1.1s linear infinite;
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.5);
}
#orb-zone[data-state="thinking"] .r2 {
  opacity: 1;
  border-color: rgba(255, 100, 30, 0.5);
  border-bottom-color: transparent;
  animation: think-spin 1.7s linear infinite reverse;
  transform-origin: center;
}
@keyframes think-spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ---------- SPEAKING ---------- */
/* Steady baseline glow — JS adds .word-beat on each spoken word */
#orb-zone[data-state="speaking"] #orb,
#orb-zone[data-state="speaking"] #orb-wrap {
  filter: brightness(1.15) saturate(1.4);
  transition: filter 0.22s ease-out;
}
/* Word-rhythm beat: JS toggles this class on each word boundary */
#orb-zone[data-state="speaking"] #orb.word-beat,
#orb-zone[data-state="speaking"] #orb-wrap.word-beat {
  filter: brightness(1.65) saturate(1.9) contrast(1.1) !important;
  transition: filter 0.06s ease-in !important;
}
/* 5 rings born at the Atlas sphere centre, expanding to the orb edge */
#orb-zone[data-state="speaking"] .ring {
  top: 26.65%; /* #orb sits at top:3.2% h:46.9% → centre at 3.2+23.45=26.65% */
  border-color: rgba(220, 48, 22, 0.9);
  border-width: 2px;
  animation: speak-wave 1.8s ease-out infinite;
}
/* Evenly stagger 5 rings across the full 1.8 s cycle */
#orb-zone[data-state="speaking"] .r2 { animation-delay: 0.36s; }
#orb-zone[data-state="speaking"] .r3 { animation-delay: 0.72s; }
#orb-zone[data-state="speaking"] .r4 { animation-delay: 1.08s; }
#orb-zone[data-state="speaking"] .r5 { animation-delay: 1.44s; }
@keyframes speak-wave {
  /* born as a tiny dot at the very centre */
  0%   { transform: scale(0.04); opacity: 0;    border-width: 3px; }
  /* quickly become visible as the ring grows */
  8%   { opacity: 0.85; }
  /* fade out just as the ring reaches the orb's outer edge (170px × 2 = 340px = orb diameter) */
  100% { transform: scale(2.0);  opacity: 0;    border-width: 1px; }
}

/* ---------- ERROR ---------- */
#orb-zone[data-state="error"] #orb,
#orb-zone[data-state="error"] #orb-wrap {
  animation: error-flicker 2.4s ease-in-out infinite;
}
@keyframes error-flicker {
  0%, 100% { filter: brightness(0.45) saturate(0.5); }
  47%      { filter: brightness(0.55) saturate(0.6); }
  50%      { filter: brightness(0.3)  saturate(0.4); }
  53%      { filter: brightness(0.55) saturate(0.6); }
}
#orb-zone[data-state="error"] .ring { opacity: 0; }

/* status text colour per state */
#orb-zone[data-state="listening"] #status-text { color: var(--nms-red-bright); }
#orb-zone[data-state="thinking"]  #status-text { color: var(--nms-orange); }
#orb-zone[data-state="speaking"]  #status-text { color: var(--nms-teal); }
#orb-zone[data-state="error"]     #status-text { color: #803030; }