/* Nori orb v1.3 — the approved HTML/CSS sphere from the Erlow brand guide.
   One fixed circle. Only the light inside it moves.
   State is set with data-state; every change eases over ~1s, so the orb never snaps.

   <span class="nori-orb" data-state="idle" style="--nori-size:40px" role="img" aria-label="Nori">
     <span class="nori-orb__flux"></span>
   </span>
*/
.nori-orb{
  --nori-size:40px;
  --nori-ease:cubic-bezier(.45,0,.25,1);
  --nori-fade:1100ms;
  /* per-state dials (idle defaults) */
  --nori-flux:0;          /* opacity of the faster inner current */
  --nori-glow:1;          /* brightness of the light */
  --nori-sat:1;           /* saturation */
  --nori-cool:0;          /* cool listening tint */
  --nori-lift:0;          /* responding highlight */
  position:relative;display:inline-block;flex:none;vertical-align:middle;
  width:var(--nori-size);height:var(--nori-size);border-radius:50%;
  overflow:hidden;isolation:isolate;line-height:0;
  font-size:var(--nori-size);           /* lets shadows scale in em */
  box-shadow:inset 0 0 .14em #FFFFFF33;
}
/* Base light: the guide's five gradients, slow orbit. Always running, so state changes never restart it. */
.nori-orb::before{
  content:'';position:absolute;inset:-42%;border-radius:50%;
  background:
    radial-gradient(ellipse at 27% 21%,#FFFFFF 0%,#FFFFFF 11%,#FFFFFFE8 19%,transparent 37%),
    radial-gradient(ellipse at 76% 32%,#E5FCFF 0%,#9CDEFF 25%,transparent 54%),
    radial-gradient(ellipse at 23% 79%,#E98CFF 0%,#C47DFF 31%,transparent 59%),
    radial-gradient(ellipse at 68% 82%,#8979F9 0%,transparent 65%),
    linear-gradient(125deg,#FFF,#E2C2FF 53%,#86DFFF);
  animation:nori-light-orbit 10s ease-in-out infinite;
  filter:brightness(var(--nori-glow)) saturate(var(--nori-sat));
  transition:filter var(--nori-fade) var(--nori-ease);
}
/* Inner current: a second, quicker swirl that fades in while Nori works. */
.nori-orb__flux{
  position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse at 70% 30%,#FFFFFFD9 0%,transparent 34%),
    radial-gradient(ellipse at 28% 66%,#C47DFFCC 0%,transparent 46%),
    radial-gradient(ellipse at 74% 78%,#86DFFFB3 0%,transparent 42%);
  mix-blend-mode:soft-light;
  opacity:var(--nori-flux);
  animation:nori-flux-spin 3.4s linear infinite;
  transition:opacity var(--nori-fade) var(--nori-ease);
}
/* Fixed surface: inner shading, a responding highlight and a cool listening wash. Never moves. */
.nori-orb::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,calc(var(--nori-lift)*.55)) 0%,transparent 48%),
    radial-gradient(circle at 50% 50%,rgba(134,223,255,calc(var(--nori-cool)*.4)) 0%,transparent 72%);
  box-shadow:inset -.094em -.13em .22em #7D43CB23,inset .094em .106em .235em #FFFFFF80;
  transition:background var(--nori-fade) var(--nori-ease);
}
/* Small sizes: softer surface shading, as the guide specifies for UI use */
.nori-orb.is-small::after{box-shadow:inset -.1em -.15em .25em #7D43CB23,inset .1em .15em .25em #FFFFFF80}

/* States */
.nori-orb[data-state="idle"]      {--nori-flux:0;  --nori-glow:1;   --nori-sat:1;   --nori-cool:0; --nori-lift:0}
.nori-orb[data-state="thinking"]  {--nori-flux:.9; --nori-glow:1.04;--nori-sat:1.18;--nori-cool:0; --nori-lift:0}
.nori-orb[data-state="responding"]{--nori-flux:.45;--nori-glow:1.1; --nori-sat:1.08;--nori-cool:0; --nori-lift:1}
.nori-orb[data-state="waiting"]   {--nori-flux:0;  --nori-glow:.94; --nori-sat:.78; --nori-cool:0; --nori-lift:0}
.nori-orb[data-state="listening"] {--nori-flux:.3; --nori-glow:1.02;--nori-sat:1;   --nori-cool:1; --nori-lift:0}

/* The custom properties above are registered so the browser can interpolate them where supported */
@property --nori-lift{syntax:'<number>';inherits:true;initial-value:0}
@property --nori-cool{syntax:'<number>';inherits:true;initial-value:0}
.nori-orb{transition:--nori-lift var(--nori-fade) var(--nori-ease),--nori-cool var(--nori-fade) var(--nori-ease)}

@keyframes nori-light-orbit{0%{transform:translate(0,0) rotate(0deg)}20%{transform:translate(-11%,7%) rotate(13deg)}42%{transform:translate(4%,12%) rotate(25deg)}62%{transform:translate(12%,-3%) rotate(40deg)}82%{transform:translate(-6%,-12%) rotate(54deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes nori-flux-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .nori-orb::before,.nori-orb__flux{animation:none}
}