/* ============================================================
   Fusion Agentic — animations.css
   Bevat:
   1. Eyeris Voice Orb (Jarvis orbit rings + glass sphere)
      Geport vanuit Fusion-S-Dev/Eyeris voice-animation.scss
   2. Generieke utility animaties (pulse, drift, flow, shimmer, …)
   ============================================================ */

/* ============================================================
   1.  EYERIS VOICE ORB
   ============================================================ */

.voice-orb-wrap {
  position: relative;
  width:  var(--orb-size, 480px);
  height: var(--orb-size, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  outline: none;

  /* Ring rotation durations  (very slow in idle) */
  --r4-dur:   60s;  --r4b-dur:  80s;  --r3-dur:  45s;
  --r2-dur:   30s;  --r1-dur:   18s;  --scan-dur: 40s;

  /* Ring opacities */
  --r4-op:  .20;  --r4b-op: .05;  --r3-op: .26;
  --r2-op:  .30;  --r1-op:  .34;  --scan-op: .13;

  /* Ring stroke widths (SVG units, viewBox -100..100) */
  --r4-sw:  5;  --r2-sw: 3.5;

  /* Compass elements + pixel arcs */
  --ruler-dur: 70s;
  --comp-dur:  55s;
  --pix-dur:   28s;
  --pix2-dur:  22s;

  /* Glass sphere */
  --glass-op:    .52;
  --glow-op:     .09;
  --smoke-a-dur: 10s;
  --smoke-b-dur: 15s;
}

.voice-orb-wrap:focus-visible .orb-glass-wrap {
  outline: 2px solid var(--orb-color, #5dc2ee);
  outline-offset: 6px;
  border-radius: 50%;
}

/* Listening */
.voice-orb-wrap.listening {
  --r4-dur:  9s;  --r4b-dur: 13s;  --r3-dur: 7s;
  --r2-dur:  5s;  --r1-dur:  3s;   --scan-dur: 5s;
  --r4-op: .48;  --r3-op: .58;  --r2-op: .62;  --r1-op: .62;  --scan-op: .32;
  --glass-op: 1;  --glow-op: .26;
  --smoke-a-dur: 3.5s;  --smoke-b-dur: 5s;
  --ruler-dur: 16s; --comp-dur: 12s; --pix-dur: 10s; --pix2-dur: 8s;
}

/* Thinking */
.voice-orb-wrap.thinking {
  --r4-dur: 50s;  --r4b-dur: 70s;  --r3-dur: 35s;
  --r2-dur: 22s;  --r1-dur:  2.5s; --scan-dur: 3.5s;
  --r4-op: .15;  --r3-op: .20;  --r2-op: .22;  --r1-op: .52;  --scan-op: .44;
  --r4-sw: 3;
  --glass-op: .70;  --glow-op: .13;
  --smoke-a-dur: 5.5s;  --smoke-b-dur: 8s;
  --ruler-dur: 55s; --comp-dur: 40s; --pix-dur: 45s; --pix2-dur: 35s;
}

/* Speaking */
.voice-orb-wrap.speaking {
  --r4-dur: 7s;   --r4b-dur: 11s;  --r3-dur: 5s;
  --r2-dur: 3.5s; --r1-dur:  2s;   --scan-dur: 3s;
  --r4-op: .52;  --r3-op: .62;  --r2-op: .68;  --r1-op: .68;  --scan-op: .38;
  --r4-sw: 7;  --r2-sw: 5.5;
  --glass-op: 1;  --glow-op: .30;
  --smoke-a-dur: 2s;  --smoke-b-dur: 3s;
  --ruler-dur: 10s; --comp-dur: 8s; --pix-dur: 8s; --pix2-dur: 6s;
}

/* Spawn animation (inside → outside) */
.ring-spawn { transform-box: fill-box; transform-origin: center; }
.voice-orb-wrap.spawn-anim .ring-spawn        { animation: orbSpawnIn .65s cubic-bezier(.22, 1, .36, 1) var(--spawn-del, 0s) both; }
.voice-orb-wrap.spawn-anim .spawn-scan        { --spawn-del: 0.00s; }
.voice-orb-wrap.spawn-anim .spawn-r1          { --spawn-del: 0.15s; }
.voice-orb-wrap.spawn-anim .spawn-r2          { --spawn-del: 0.30s; }
.voice-orb-wrap.spawn-anim .spawn-r3          { --spawn-del: 0.45s; }
.voice-orb-wrap.spawn-anim .spawn-r4          { --spawn-del: 0.60s; }
.voice-orb-wrap.spawn-anim .spawn-r4b         { --spawn-del: 0.68s; }
.voice-orb-wrap.spawn-anim .orb-glass-wrap    { animation: orbSpawnIn .65s cubic-bezier(.22, 1, .36, 1) .05s both; }

@keyframes orbSpawnIn {
  from { opacity: 0; transform: scale(.15); }
  to   { opacity: 1; transform: scale(1);   }
}

/* SVG ring canvas */
.orb-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ring {
  fill: none;
  stroke: var(--orb-color, #5dc2ee);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .7s ease, stroke-width .7s ease;
}

.r4  { stroke-width: var(--r4-sw, 7); opacity: var(--r4-op, .20); animation: orbRotCCW var(--r4-dur, 60s) linear infinite; }
.r4b { stroke-width: 1; opacity: var(--r4b-op, .05); animation: orbRotCW var(--r4b-dur, 80s) linear infinite; }
.r3  { stroke-width: 1.5; opacity: var(--r3-op, .26); animation: orbRotCW var(--r3-dur, 45s) linear infinite; }
.r2  { stroke-width: var(--r2-sw, 3.5); opacity: var(--r2-op, .30); animation: orbRotCCW var(--r2-dur, 30s) linear infinite; }
.r1  { stroke-width: 1.5; opacity: var(--r1-op, .34); animation: orbRotCW var(--r1-dur, 18s) linear infinite; }

.scan {
  stroke-width: 1;
  opacity: var(--scan-op, .13);
  animation:
    orbRotCW var(--scan-dur, 40s) linear infinite,
    orbScanPulse 3.5s ease-in-out infinite;
}

/* Ripple — only during listening */
.rip-a, .rip-b { stroke-width: 1.5; opacity: 0; }
.voice-orb-wrap.listening .rip-a { animation: orbRipple 2.2s ease-out infinite; }
.voice-orb-wrap.listening .rip-b { animation: orbRipple 2.2s ease-out .85s infinite; }

/* Compass groups */
.comp-rot       { transform-box: fill-box; transform-origin: center; }
.comp-ruler-r   { animation: orbRotCW  var(--ruler-dur, 70s) linear infinite; }
.comp-dial-r    { animation: orbRotCCW var(--comp-dur,  55s) linear infinite; }

.ruler-tick       { stroke: var(--orb-color, #5dc2ee); stroke-linecap: square; }
.ruler-tick.major { stroke-width: 1.2; opacity: .38; }
.ruler-tick.minor { stroke-width: .6;  opacity: .18; }

.comp-tick        { stroke: var(--orb-color, #5dc2ee); stroke-linecap: square; }
.comp-tick.major  { stroke-width: 1.2; opacity: .34; }
.comp-tick.minor  { stroke-width: .6;  opacity: .18; }

/* Pixel arcs */
.pix-arc-r { transform-box: fill-box; transform-origin: center; animation: orbRotCW  var(--pix-dur, 28s) linear infinite; }
.pix-arc-l { transform-box: fill-box; transform-origin: center; animation: orbRotCCW var(--pix2-dur, 22s) linear infinite; }
.pix-anchor { fill: none; }

.pix-block {
  fill: var(--orb-color, #5dc2ee);
  opacity: var(--pb-op, .3);
  animation: pixFlash var(--pb-fdur, 6s) ease-in-out infinite var(--pb-del, 0s);
}

.pix-arc-r .pix-block:nth-child(1)  { --pb-op: .65; --pb-fdur:  9.5s; --pb-del: 0.0s; }
.pix-arc-r .pix-block:nth-child(2)  { --pb-op: .54; --pb-fdur: 12.2s; --pb-del: 3.1s; }
.pix-arc-r .pix-block:nth-child(3)  { --pb-op: .43; --pb-fdur: 10.8s; --pb-del: 6.4s; }
.pix-arc-r .pix-block:nth-child(4)  { --pb-op: .34; --pb-fdur: 13.5s; --pb-del: 1.2s; }
.pix-arc-r .pix-block:nth-child(5)  { --pb-op: .26; --pb-fdur: 11.3s; --pb-del: 4.7s; }
.pix-arc-r .pix-block:nth-child(6)  { --pb-op: .19; --pb-fdur:  9.1s; --pb-del: 7.8s; }
.pix-arc-r .pix-block:nth-child(7)  { --pb-op: .13; --pb-fdur: 12.7s; --pb-del: 2.3s; }
.pix-arc-r .pix-block:nth-child(8)  { --pb-op: .09; --pb-fdur: 10.4s; --pb-del: 5.6s; }
.pix-arc-r .pix-block:nth-child(9)  { --pb-op: .06; --pb-fdur: 13.0s; --pb-del: 0.8s; }
.pix-arc-r .pix-block:nth-child(10) { --pb-op: .03; --pb-fdur: 11.8s; --pb-del: 4.2s; }

.pix-arc-l .pix-block:nth-child(1)  { --pb-op: .65; --pb-fdur: 11.0s; --pb-del: 5.2s; }
.pix-arc-l .pix-block:nth-child(2)  { --pb-op: .54; --pb-fdur:  9.8s; --pb-del: 8.3s; }
.pix-arc-l .pix-block:nth-child(3)  { --pb-op: .43; --pb-fdur: 13.3s; --pb-del: 1.7s; }
.pix-arc-l .pix-block:nth-child(4)  { --pb-op: .34; --pb-fdur: 10.2s; --pb-del: 6.5s; }
.pix-arc-l .pix-block:nth-child(5)  { --pb-op: .26; --pb-fdur: 12.5s; --pb-del: 2.9s; }
.pix-arc-l .pix-block:nth-child(6)  { --pb-op: .19; --pb-fdur:  9.6s; --pb-del: 9.4s; }
.pix-arc-l .pix-block:nth-child(7)  { --pb-op: .13; --pb-fdur: 11.7s; --pb-del: 4.0s; }
.pix-arc-l .pix-block:nth-child(8)  { --pb-op: .09; --pb-fdur: 13.8s; --pb-del: 7.1s; }
.pix-arc-l .pix-block:nth-child(9)  { --pb-op: .06; --pb-fdur: 10.6s; --pb-del: 0.6s; }
.pix-arc-l .pix-block:nth-child(10) { --pb-op: .03; --pb-fdur: 12.0s; --pb-del: 3.5s; }

/* Jumper blocks */
.orb-jumper-wrap {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .20s cubic-bezier(.22, .6, .36, 1);
}
.orb-jumper { fill: var(--orb-color, #5dc2ee); opacity: .44; }

/* Glass sphere */
.orb-glass-wrap {
  position: absolute;
  width: 42%;
  height: 42%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-glow {
  position: absolute;
  inset: -80%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--orb-color, #5dc2ee) 55%, transparent) 0%,
    transparent 65%);
  opacity: var(--glow-op, .09);
  transition: opacity .7s ease;
  pointer-events: none;
}

.orb-glass {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  opacity: var(--glass-op, .52);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
  background: radial-gradient(circle at 32% 28%,
    rgba(255,255,255, .07)  0%,
    color-mix(in srgb, var(--orb-color, #5dc2ee) 28%, transparent) 38%,
    rgba(4,  10, 22, .90)  72%,
    rgba(2,   6, 14, .97) 100%);
  border: 1px solid rgba(255,255,255, .10);
  border-top-color:    rgba(255,255,255, .28);
  border-bottom-color: rgba(0,0,0, .30);
  box-shadow:
    inset 0  2px  6px rgba(255,255,255, .05),
    inset 0 -6px 16px rgba(0,0,0, .55);
}

.voice-orb-wrap.speaking .orb-glass { animation: orbGlassPulse .65s ease-in-out infinite; }

.orb-smoke { position: absolute; inset: -35%; border-radius: 50%; pointer-events: none; }

.smoke-a {
  background: radial-gradient(ellipse 68% 48% at 35% 62%,
    color-mix(in srgb, var(--orb-color, #5dc2ee) 65%, transparent) 0%,
    transparent 68%);
  filter: blur(calc(var(--orb-size, 480px) * .046));
  animation: orbSmokeA var(--smoke-a-dur, 10s) ease-in-out infinite;
}

.smoke-b {
  background: radial-gradient(ellipse 48% 68% at 65% 32%,
    color-mix(in srgb, var(--orb-color, #5dc2ee) 50%, transparent) 0%,
    transparent 62%);
  filter: blur(calc(var(--orb-size, 480px) * .062));
  animation: orbSmokeB var(--smoke-b-dur, 15s) ease-in-out infinite;
}

.orb-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 22%,
    rgba(255,255,255, .32)  0%,
    rgba(255,255,255, .10) 18%,
    transparent            44%);
  pointer-events: none;
}

/* ----------  Orb keyframes  ---------- */
@keyframes orbRotCW  { to { transform: rotate( 360deg); } }
@keyframes orbRotCCW { to { transform: rotate(-360deg); } }

@keyframes orbScanPulse {
  0%, 100% { opacity: var(--scan-op, .13); }
  50%       { opacity: calc(var(--scan-op, .13) * 3); }
}

@keyframes orbRipple {
  0%   { transform: scale(.72); opacity: .45; }
  100% { transform: scale(1.38); opacity: 0;  }
}

@keyframes orbSmokeA {
  0%   { transform: rotate(  0deg) scale(1.00); opacity: .70; }
  33%  { transform: rotate(120deg) scale(1.22); opacity: .88; }
  66%  { transform: rotate(240deg) scale(.86);  opacity: .58; }
  100% { transform: rotate(360deg) scale(1.00); opacity: .70; }
}

@keyframes orbSmokeB {
  0%   { transform: rotate(  0deg) scale(.95);  opacity: .52; }
  42%  { transform: rotate(150deg) scale(1.18); opacity: .72; }
  100% { transform: rotate(360deg) scale(.95);  opacity: .52; }
}

@keyframes orbGlassPulse {
  0%, 100% { opacity: .85; transform: scale(1.00); }
  50%       { opacity:  1;  transform: scale(1.06); }
}

@keyframes pixFlash {
  0%,  40% { opacity: var(--pb-op, .3); }
  65%       { opacity: .72; }
  90%       { opacity: var(--pb-op, .3); }
  100%      { opacity: var(--pb-op, .3); }
}

/* ============================================================
   2.  GENERIC UTILITY ANIMATIONS
   ============================================================ */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.08); }
}

@keyframes drift {
  0%   { transform: translate(-50%, 0) rotate(0deg); }
  100% { transform: translate(-48%, 4%) rotate(8deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes flow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes rise-fade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-pulse   { animation: pulse 3s ease-in-out infinite; }
.anim-float   { animation: float 6s ease-in-out infinite; }
.anim-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(93,194,238,0.18) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}