/* ============================================================
   Mote — The breathing orb (brand cornerstone, the only ambient loop)
   Pure CSS. JS only toggles pause / reduced state.
   ============================================================ */

.orb {
  --orb-size: 280px;
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: none;
}

/* Soft glowing halo: blurred amber field behind the core */
.orb__halo {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              var(--glow-amber) 0%,
              rgba(242,166,90,0.22) 38%,
              rgba(224,122,62,0.10) 60%,
              transparent 72%);
  filter: blur(28px);
  opacity: 0.42;
  transform: scale(1.15);
  z-index: -1;
  animation: orb-halo var(--breathe) var(--ease-inout) infinite;
}

/* Crisp, fully opaque luminous core */
.orb__core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%,
              #FFF4DC 0%,
              var(--orb-core) 26%,
              var(--amber) 58%,
              var(--ember) 78%,
              rgba(194,95,26,0.0) 100%);
  box-shadow:
    inset 0 0 36px rgba(255,236,200,0.35),
    0 0 60px rgba(242,166,90,0.28);
  animation: orb-breathe var(--breathe) var(--ease-inout) infinite;
}

/* A single faint travelling shimmer on the core surface (still one element) */
.orb__core::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 42%);
  opacity: 0.5;
  mix-blend-mode: screen;
}

@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes orb-halo {
  0%, 100% { opacity: 0.32; transform: scale(1.12); }
  50%      { opacity: 0.50; transform: scale(1.24); }
}

/* Size helpers */
.orb--hero   { --orb-size: clamp(220px, 40vw, 440px); }
.orb--md     { --orb-size: clamp(120px, 20vw, 200px); }
.orb--sm     { --orb-size: 64px; }

/* Dim variant (empty / "no sessions yet" mood) */
.orb--dim .orb__core { filter: brightness(0.62) saturate(0.9); }
.orb--dim .orb__halo { opacity: 0.22; }

/* --- Stop the breath: reduced-motion, Low Power, manual pause --- */
@media (prefers-reduced-motion: reduce) {
  .orb__core { animation: none; transform: none; }
  .orb__halo { animation: none; opacity: 0.4; transform: scale(1.15); }
}
html[data-calm="true"] .orb__core,
html[data-paused="true"] .orb__core { animation-play-state: paused; }
html[data-calm="true"] .orb__halo,
html[data-paused="true"] .orb__halo { animation-play-state: paused; }

/* --- Ambient motion pause/play control --- */
.motion-toggle {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 1.6rem);
  bottom: clamp(0.9rem, 2.5vw, 1.6rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.motion-toggle:hover { color: var(--ink); border-color: var(--amber); }
.motion-toggle__icon { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--glow-amber); flex: none; }
html[data-paused="true"] .motion-toggle__icon { background: var(--ink-3); box-shadow: none; }