/* ── Thinking Orb Lite ────────────────────────────────────────────────────
   Pure-CSS state indicator. Nine states, twelve dots, one class swap.
   Colour via currentColor; dot size via --d; .is-sm for 20 px inline.
   ───────────────────────────────────────────────────────────────────── */

/* ── the orb ──────────────────────────────────────────────────────────── */

.tol-orb {
  position: relative;
  width: 64px;
  height: 64px;
  color: var(--text-normal, currentColor);
  flex: none;
}
.tol-orb.is-sm { width: 20px; height: 20px; }

.tol-orb i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--d, 4.5px);
  height: var(--d, 4.5px);
  margin-left: calc(var(--d, 4.5px) / -2);
  margin-top: calc(var(--d, 4.5px) / -2);
  border-radius: 50%;
  background: currentColor;
  will-change: transform, opacity;
}

/* per-dot index, so every state can share one markup shape */
.tol-orb i:nth-child(1)  { --i: 0; }
.tol-orb i:nth-child(2)  { --i: 1; }
.tol-orb i:nth-child(3)  { --i: 2; }
.tol-orb i:nth-child(4)  { --i: 3; }
.tol-orb i:nth-child(5)  { --i: 4; }
.tol-orb i:nth-child(6)  { --i: 5; }
.tol-orb i:nth-child(7)  { --i: 6; }
.tol-orb i:nth-child(8)  { --i: 7; }
.tol-orb i:nth-child(9)  { --i: 8; }
.tol-orb i:nth-child(10) { --i: 9; }
.tol-orb i:nth-child(11) { --i: 10; }
.tol-orb i:nth-child(12) { --i: 11; }

/* ── working — particles on tilted orbits ─────────────────────────────── */
.tol-working i {
  --r: 24px;
  --sq: 0.42;
  animation: tol-orbit 1.7s linear infinite;
  animation-delay: calc(var(--i) * -0.1417s);
}
.tol-working i:nth-child(3n + 2) { --r: 17px; --sq: 0.72; animation-duration: 1.25s; }
.tol-working i:nth-child(3n + 3) { --r: 10px; --sq: 0.30; animation-duration: 2.1s; }
@keyframes tol-orbit {
  0%   { transform: translate(var(--r), 0)                                        scale(1);    opacity: 1; }
  25%  { transform: translate(0, calc(var(--r) * var(--sq)))                      scale(0.78); opacity: 0.5; }
  50%  { transform: translate(calc(var(--r) * -1), 0)                             scale(1);    opacity: 1; }
  75%  { transform: translate(0, calc(var(--r) * var(--sq) * -1))                 scale(0.78); opacity: 0.5; }
  100% { transform: translate(var(--r), 0)                                        scale(1);    opacity: 1; }
}

/* ── searching — a scan meridian sweeps a dotted globe ────────────────── */
.tol-searching i {
  --d: 4px;
  transform: rotate(calc(var(--i) * 30deg)) translateX(23px);
  animation: tol-scan 1.5s linear infinite;
  animation-delay: calc(var(--i) * -0.125s);
}
.tol-searching i:nth-child(2n) { transform: rotate(calc(var(--i) * 30deg)) translateX(13px); }
@keyframes tol-scan {
  0%       { opacity: 1;    }
  20%      { opacity: 0.18; }
  100%     { opacity: 0.18; }
}
.tol-searching::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.28;
  animation: tol-meridian 1.5s linear infinite;
}
@keyframes tol-meridian {
  from { transform: scaleX(1);    opacity: 0.28; }
  50%  { transform: scaleX(0.05); opacity: 0.75; }
  to   { transform: scaleX(1);    opacity: 0.28; }
}

/* ── solving — bands scramble in quarter turns, then click back ───────── */
.tol-solving i {
  --d: 6px;
  border-radius: 1.5px;
  transform:
    translate(calc((var(--i) - 5.5) * 0px))
    rotate(calc(var(--i) * 30deg)) translateX(20px);
  animation: tol-rubik 2.2s cubic-bezier(0.7, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * -0.06s);
}
@keyframes tol-rubik {
  0%   { transform: rotate(calc(var(--i) * 30deg))            translateX(20px) rotate(0deg); }
  25%  { transform: rotate(calc(var(--i) * 30deg + 90deg))    translateX(20px) rotate(90deg); }
  50%  { transform: rotate(calc(var(--i) * 30deg + 90deg))    translateX(13px) rotate(90deg); }
  75%  { transform: rotate(calc(var(--i) * 30deg + 270deg))   translateX(20px) rotate(270deg); }
  100% { transform: rotate(calc(var(--i) * 30deg + 360deg))   translateX(20px) rotate(360deg); }
}

/* ── listening — a waveform rolls through latitude rings ──────────────── */
.tol-listening i {
  --d: 4px;
  transform: translateX(calc((var(--i) - 5.5) * 5px));
  animation: tol-wave 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.085s);
}
@keyframes tol-wave {
  0%, 100% { transform: translateX(calc((var(--i) - 5.5) * 5px)) translateY(-11px) scale(0.75); opacity: 0.45; }
  50%      { transform: translateX(calc((var(--i) - 5.5) * 5px)) translateY(11px)  scale(1.15); opacity: 1; }
}

/* ── connecting — a constellation wires itself, packets on the edges ──── */
.tol-connecting i {
  transform: rotate(calc(var(--i) * 60deg)) translateX(22px);
  animation: tol-node 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.117s);
}
.tol-connecting i:nth-child(n + 7) {
  --d: 3px;
  animation: tol-packet 1.4s linear infinite;
  animation-delay: calc((var(--i) - 6) * -0.233s);
}
@keyframes tol-node {
  0%, 100% { opacity: 0.3; transform: rotate(calc(var(--i) * 60deg)) translateX(22px) scale(0.8); }
  50%      { opacity: 1;   transform: rotate(calc(var(--i) * 60deg)) translateX(22px) scale(1.2); }
}
@keyframes tol-packet {
  from { transform: rotate(calc(var(--i) * 60deg)) translateX(4px);  opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: rotate(calc(var(--i) * 60deg)) translateX(24px); opacity: 0; }
}
.tol-connecting::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.18;
}

/* ── weaving — three strands plait around the sphere ──────────────────── */
.tol-weaving i {
  --d: 4px;
  animation: tol-braid 1.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.158s);
}
@keyframes tol-braid {
  0%   { transform: translateX(-24px) translateY(0px)   scale(0.7); opacity: 0.35; }
  25%  { transform: translateX(-8px)  translateY(-9px)  scale(1.1); opacity: 1; }
  50%  { transform: translateX(8px)   translateY(0px)   scale(0.7); opacity: 0.35; }
  75%  { transform: translateX(20px)  translateY(9px)   scale(1.1); opacity: 1; }
  100% { transform: translateX(24px)  translateY(0px)   scale(0.7); opacity: 0; }
}

/* ── composing — an undulating multi-band sash ────────────────────────── */
.tol-composing i {
  --d: 4px;
  --band: -9px;
  --x: calc((var(--i) - 2.5) * 8px);
  animation: tol-ribbon 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.14s);
}
.tol-composing i:nth-child(n + 7) {
  --band: 9px;
  --x: calc((var(--i) - 8.5) * 8px);
  animation-direction: reverse;
}
@keyframes tol-ribbon {
  0%, 100% { transform: translate(var(--x), calc(var(--band) - 5px)) scale(0.7); opacity: 0.4; }
  50%      { transform: translate(var(--x), calc(var(--band) + 5px)) scale(1.25); opacity: 1; }
}

/* ── breathing — a face-on ring slowly morphing ───────────────────────── */
.tol-breathing i {
  transform: rotate(calc(var(--i) * 30deg)) translateX(22px);
  animation: tol-breathe 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.03s);
}
@keyframes tol-breathe {
  0%, 100% { transform: rotate(calc(var(--i) * 30deg)) translateX(16px) scale(0.85); opacity: 0.5; }
  50%      { transform: rotate(calc(var(--i) * 30deg)) translateX(26px) scale(1.15); opacity: 1; }
}

/* ── shaping — a dotted outline morphs circle -> triangle -> square ───── */
.tol-shaping i {
  animation: tol-morph 3.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--i) * -0.02s);
}
@keyframes tol-morph {
  0%, 22%   { transform: rotate(calc(var(--i) * 30deg)) translateX(23px) rotate(calc(var(--i) * -30deg)); }
  33%, 55%  { transform: rotate(calc(var(--i) * 30deg)) translateX(calc(23px - (var(--i) * 0.9px))) rotate(calc(var(--i) * -30deg)) translateY(4px); }
  66%, 88%  { transform: rotate(calc(var(--i) * 30deg)) translateX(calc(17px + (var(--i) * 0.55px))) rotate(calc(var(--i) * -30deg)); }
  100%      { transform: rotate(calc(var(--i) * 30deg)) translateX(23px) rotate(calc(var(--i) * -30deg)); }
}

/* ── inline (20 px) variant ───────────────────────────────────────────── */
.tol-orb.is-sm i { --d: 2.4px; }
.tol-orb.is-sm.tol-working i,
.tol-orb.is-sm.tol-breathing i,
.tol-orb.is-sm.tol-shaping i,
.tol-orb.is-sm.tol-connecting i,
.tol-orb.is-sm.tol-searching i { transform-origin: 50% 50%; }
.tol-orb.is-sm { --r: 7px; }
.tol-orb.is-sm.tol-working  i { animation-name: tol-orbit-sm; }
.tol-orb.is-sm.tol-breathing i { animation-name: tol-breathe-sm; }
@keyframes tol-orbit-sm {
  from { transform: rotate(0deg)   translateX(7px) rotateX(-64deg); opacity: 1; }
  50%  { opacity: 0.45; }
  to   { transform: rotate(360deg) translateX(7px) rotateX(-64deg); opacity: 1; }
}
@keyframes tol-breathe-sm {
  0%, 100% { transform: rotate(calc(var(--i) * 30deg)) translateX(5px) scale(0.85); opacity: 0.5; }
  50%      { transform: rotate(calc(var(--i) * 30deg)) translateX(8px) scale(1.15); opacity: 1; }
}

/* inline-with-text usage */
.tol-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  vertical-align: middle;
}

/* ── accessibility: one static frame ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tol-orb i,
  .tol-searching::after,
  .deep-think-orb i,
  .deep-think-ring {
    animation: none !important;
  }
  .tol-orb i { opacity: 0.85; }
}

/* ── Deep Think Planetary Quantum Orb ──────────────────────────────────
   Multi-ring elliptical orbits with glowing amber core & orbiting planet nodes
   ───────────────────────────────────────────────────────────────────── */
.deep-think-orb {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}
.deep-think-orb.is-sm {
  width: 22px;
  height: 22px;
}

/* Glowing Amber-Violet Sun Core */
.deep-think-core {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ff9e3b 40%, #ff4d4d 75%, rgba(168, 85, 247, 0.4) 100%);
  box-shadow: 0 0 16px #ff9e3b, 0 0 32px rgba(168, 85, 247, 0.6);
  animation: corePulse 2s ease-in-out infinite alternate;
  z-index: 2;
}
.deep-think-orb.is-sm .deep-think-core {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 6px #ff9e3b, 0 0 12px rgba(168, 85, 247, 0.6);
}

@keyframes corePulse {
  0% { transform: scale(0.88); opacity: 0.85; }
  100% { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 0 8px #ff9e3b); }
}

/* 3 Intersecting Tilted Orbital Rings */
.deep-think-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  pointer-events: none;
  transform-style: preserve-3d;
}

/* Ring 1: Magenta / Violet */
.ring-magenta {
  width: 58px;
  height: 58px;
  border-width: 1.5px;
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  transform: rotateX(68deg) rotateY(18deg);
  animation: spinRing1 4s linear infinite;
}
.deep-think-orb.is-sm .ring-magenta {
  width: 20px;
  height: 20px;
  border-width: 1px;
}

/* Ring 2: Cyan / Teal */
.ring-cyan {
  width: 54px;
  height: 54px;
  border-width: 1.5px;
  border-color: rgba(0, 242, 254, 0.85);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
  transform: rotateX(64deg) rotateY(-28deg);
  animation: spinRing2 3.2s linear infinite reverse;
}
.deep-think-orb.is-sm .ring-cyan {
  width: 18px;
  height: 18px;
  border-width: 1px;
}

/* Ring 3: Amber / Gold */
.ring-gold {
  width: 50px;
  height: 50px;
  border-width: 1.5px;
  border-color: rgba(255, 158, 59, 0.85);
  box-shadow: 0 0 10px rgba(255, 158, 59, 0.4);
  transform: rotateX(72deg) rotateY(2deg);
  animation: spinRing3 2.6s linear infinite;
}
.deep-think-orb.is-sm .ring-gold {
  width: 16px;
  height: 16px;
  border-width: 1px;
}

@keyframes spinRing1 {
  from { transform: rotateX(68deg) rotateY(18deg) rotateZ(0deg); }
  to   { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); }
}
@keyframes spinRing2 {
  from { transform: rotateX(64deg) rotateY(-28deg) rotateZ(0deg); }
  to   { transform: rotateX(64deg) rotateY(-28deg) rotateZ(360deg); }
}
@keyframes spinRing3 {
  from { transform: rotateX(72deg) rotateY(2deg) rotateZ(0deg); }
  to   { transform: rotateX(72deg) rotateY(2deg) rotateZ(360deg); }
}

/* Orbiting Planetary Nodes */
.deep-think-nodes i {
  position: absolute;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 6px #00f2fe;
}
.deep-think-orb i:nth-child(1) { width: 4px; height: 4px; animation: orbitNode1 2.2s linear infinite; }
.deep-think-orb i:nth-child(2) { width: 5px; height: 5px; background: #cbd5e1; animation: orbitNode2 3.4s linear infinite; }
.deep-think-orb i:nth-child(3) { width: 3.5px; height: 3.5px; background: #ff9e3b; animation: orbitNode3 1.8s linear infinite; }
.deep-think-orb i:nth-child(4) { width: 4.5px; height: 4.5px; background: #c084fc; animation: orbitNode1 4.1s linear infinite reverse; }

.deep-think-orb.is-sm i:nth-child(1) { width: 2px; height: 2px; }
.deep-think-orb.is-sm i:nth-child(2) { width: 2.2px; height: 2.2px; }
.deep-think-orb.is-sm i:nth-child(3) { width: 1.8px; height: 1.8px; }
.deep-think-orb.is-sm i:nth-child(4) { width: 2px; height: 2px; }

@keyframes orbitNode1 {
  0%   { transform: rotate(0deg) translateX(26px) rotate(0deg); opacity: 1; }
  50%  { transform: rotate(180deg) translateX(26px) scale(0.7) rotate(-180deg); opacity: 0.4; }
  100% { transform: rotate(360deg) translateX(26px) rotate(-360deg); opacity: 1; }
}
@keyframes orbitNode2 {
  0%   { transform: rotate(45deg) translateX(22px) rotate(-45deg); opacity: 0.5; }
  50%  { transform: rotate(225deg) translateX(22px) scale(1.2) rotate(-225deg); opacity: 1; }
  100% { transform: rotate(405deg) translateX(22px) rotate(-405deg); opacity: 0.5; }
}
@keyframes orbitNode3 {
  0%   { transform: rotate(90deg) translateX(18px) rotate(-90deg); opacity: 1; }
  50%  { transform: rotate(270deg) translateX(18px) scale(0.6) rotate(-270deg); opacity: 0.3; }
  100% { transform: rotate(450deg) translateX(18px) rotate(-450deg); opacity: 1; }
}