/* ============================================================================
   Claire presence orb.
   An abstract, warm, ambient sphere that reads as "her presence" without
   pretending to be a face. Layered blurred radial-gradient blobs drift slowly
   inside a circular mask (a living plasma), under a soft core highlight and an
   outer bloom. Everything is dim and nocturnal by design.

   Reusable at any size: set width/height on the .orb element (it's square /
   circular). Mood is set via [data-mood] on the .orb element; ClaireOrb.setMood
   (orb.js) flips it. Motion respects prefers-reduced-motion.
   ============================================================================ */

/* Video orb (the real Sora-rendered neutron star). The clip is on black; a
   screen blend drops the black out so only the glow shows, reading as a
   floating orb with no square edge. No border-radius clip needed. */
.orb-vid {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
  display: block;
}
.orb-vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: screen;
  pointer-events: none;
  /* Crop to a true circle and feather the edge: fully visible in the center,
     dimming to nothing toward the rim so the square corners vanish and the orb
     melts into the black background. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
      #000 50%, rgba(0,0,0,0.45) 64%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 50%,
      #000 50%, rgba(0,0,0,0.45) 64%, transparent 74%);
}

.orb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: visible;            /* let the bloom spill past the mask */
  flex: none;
  /* Default palette: cool plasma (cyan / magenta-purple / teal over deep navy),
     bright cyan-white core. Matches the reference mockup. */
  --orb-c1: #6fd8ff;            /* cyan highlight */
  --orb-c2: #b85cff;            /* magenta-purple */
  --orb-c3: #38b8e0;            /* teal-blue */
  --orb-bg: #0a1326;            /* deep navy interior */
  --orb-speed: 1;               /* motion multiplier (higher = slower) */
  --orb-dim: 1;                 /* brightness multiplier */
}

/* The circular body that clips the drifting blobs. */
.orb-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* Mask the body into a circle. iOS Safari gives the animated/blurred inner
     blobs their own compositing layers, which ESCAPE a plain border-radius +
     overflow:hidden clip (the orb then reads as a fuzzy square). A mask clips
     composited descendants reliably where overflow:hidden does not. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 99%, transparent 100%);
  background: radial-gradient(circle at 50% 55%, var(--orb-bg), #0a0807 78%);
  animation: orb-breathe calc(7s * var(--orb-speed)) ease-in-out infinite;
}

/* Drifting plasma blobs. Each is a big blurred radial gradient that orbits on
   its own slow cycle; together they make the interior feel alive. */
.orb-blob {
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  filter: blur(10px);
  opacity: calc(0.92 * var(--orb-dim));
  mix-blend-mode: screen;       /* colored light adds on the dark interior */
  will-change: transform;
}
.orb-blob.b1 {
  left: -22%; top: -12%;
  background: radial-gradient(circle at 38% 38%, var(--orb-c1), transparent 60%);
  animation: orb-drift-1 calc(11s * var(--orb-speed)) ease-in-out infinite;
}
.orb-blob.b2 {
  left: 8%; top: 4%;
  background: radial-gradient(circle at 60% 55%, var(--orb-c2), transparent 62%);
  animation: orb-drift-2 calc(14s * var(--orb-speed)) ease-in-out infinite;
}
.orb-blob.b3 {
  left: -8%; top: 18%;
  background: radial-gradient(circle at 50% 45%, var(--orb-c3), transparent 64%);
  animation: orb-drift-3 calc(17s * var(--orb-speed)) ease-in-out infinite;
}

/* Soft inner highlight so the sphere has a gentle top-lit core. */
.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 40%,
    rgba(224, 248, 255, calc(0.62 * var(--orb-dim))) 0%,
    rgba(190, 236, 255, calc(0.22 * var(--orb-dim))) 26%,
    rgba(190, 236, 255, 0) 50%);
  pointer-events: none;
}

/* A faint rim so the orb separates from the background without a hard edge. */
.orb-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Outer bloom: a soft colored glow that bleeds past the orb into the dark. */
.orb-bloom {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--orb-c1) 0%, transparent 58%);
  filter: blur(18px);
  opacity: calc(0.32 * var(--orb-dim));
  z-index: -1;
  pointer-events: none;
  animation: orb-breathe calc(7s * var(--orb-speed)) ease-in-out infinite;
}

/* ---- Mood palettes (cool variants of the plasma) ------------------------- */
/* warm/affectionate: push magenta/rose into the plasma, a touch brighter. */
.orb[data-mood="warm"] {
  --orb-c1: #8fd6ff;
  --orb-c2: #d764ff;
  --orb-c3: #6a86ff;
  --orb-dim: 1.08;
  --orb-speed: 1;
}
/* low / late / nocturnal: deep indigo, slower and dimmer. */
.orb[data-mood="low"] {
  --orb-c1: #5aa6d6;
  --orb-c2: #7b5ca8;
  --orb-c3: #3a6aa8;
  --orb-bg: #080e1c;
  --orb-dim: 0.74;
  --orb-speed: 1.55;
}
/* listening / live (Session, she's attending): brighter cyan, more active. */
.orb[data-mood="listening"] {
  --orb-c1: #8fe6ff;
  --orb-c2: #b86cff;
  --orb-c3: #49c6e0;
  --orb-dim: 1.1;
  --orb-speed: 0.82;
}

/* ---- Motion -------------------------------------------------------------- */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33%      { transform: translate(10%, 8%) scale(1.08); }
  66%      { transform: translate(4%, 14%) scale(0.96); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  40%      { transform: translate(-12%, 6%) scale(1.1); }
  70%      { transform: translate(-6%, -8%) scale(0.94); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  50%      { transform: translate(8%, -10%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .orb-body, .orb-bloom, .orb-blob { animation: none; }
}