/* Leveragency · Web v2 · componente: el orb del agente de voz.

   Técnica (la del reel que pasó Ari, 2026-09-13): el orb NO es una imagen ni un shader.
   Es una VENTANA: un círculo con overflow:hidden, y detrás dos conic-gradients más grandes
   que la ventana (inset negativo, así nunca se ve un borde), los dos con blur, girando en
   sentidos opuestos a velocidades que no son divisibles entre sí (7s y 11s). Por eso los
   dos patrones no vuelven a coincidir igual nunca y el movimiento se lee orgánico en vez
   de loopeado.

   Lo único que se cambia del reel es la paleta: ahí es azul/violeta, acá son los tonos de
   la marca (ámbar, terracota, dorado) sobre el panel tinta.

   ⚠️ Este archivo es la ÚNICA excepción de la web a "sin gradientes y sin blur" (tools/audit.py
   lo saltea a propósito): el orb ES un gradiente con blur, no hay otra forma de hacerlo.
   No copiar el patrón a otras secciones.

   Estados que le pone voz-live.js a .vz-orb-wrap:
     (sin clase)    idle        respira lento
     is-conectando  abriendo    pulso de espera, apagado
     is-escuchando  escuchando  se hincha con el nivel real del micrófono (--vz-nivel)
     is-hablando    hablando    más brillo, gira más rápido, el halo late
*/

.vz-orb-wrap{
  --vz-nivel:0;                 /* 0..1, lo escribe el medidor de micrófono */
  --vz-d:clamp(108px,25vw,146px);
  position:relative;
  width:var(--vz-d);height:var(--vz-d);
  display:grid;place-items:center;
  margin:0 auto;
  isolation:isolate;
  /* Dos escalas que se componen sin pisarse:
       el WRAP  -> la escala de ESTADO (chico apagado, crece al activarse), lenta y suave
       el ORB   -> la escala de VOZ (--vz-nivel), rápida, para seguir el audio
     Separarlas evita el conflicto de tener una transición lenta y una rápida en la misma
     propiedad del mismo elemento. */
  transition:transform 1.15s var(--ease);
}

/* ---------- el halo: vive AFUERA del círculo, por eso no lo clipea ---------- */
.vz-orb-halo{
  position:absolute;inset:-22%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(224,139,60,.42) 0%, rgba(193,90,23,.22) 42%, rgba(193,90,23,0) 70%);
  filter:blur(18px);
  opacity:.55;
  z-index:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  will-change:opacity,transform;
}

/* ---------- la ventana ---------- */
.vz-orb{
  position:relative;
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;                /* ESTO es lo que hace el truco */
  z-index:1;
  background:#241B15;             /* tinta un punto más cálida, para que el gradiente no flote */
  /* Las dos sombras internas son lo que lo hace leer como ESFERA y no como disco: una sombra
     abajo a la derecha y una luz arriba a la izquierda, como si le pegara una lámpara. */
  box-shadow:
    inset -10px -16px 30px rgba(28,16,8,.55),
    inset 10px 12px 26px rgba(251,240,220,.14),
    inset 0 0 0 1px rgba(244,239,230,.10),
    0 16px 34px -20px rgba(0,0,0,.85);
  transition:transform .18s var(--ease),filter .45s var(--ease);
  will-change:transform;
}

/* ---------- los dos conic-gradients de atrás ---------- */
.vz-orb::before,
.vz-orb::after{
  content:"";
  position:absolute;
  inset:-40%;                     /* más grande que la ventana: nunca se ve un borde */
  border-radius:50%;
  filter:blur(13px);   /* 20px sobre un orb de este tamaño borronea las aspas y queda una bola plana */
  will-change:transform;
}

/* capa 1 · ámbar → dorado → terracota. Gira a favor del reloj. */
.vz-orb::before{
  /* El swirl se ve por el CONTRASTE de luminosidad, no por la variedad de matices: acá toda la
     paleta es ámbar, así que las aspas salen de alternar un pico claro con un valle casi tinta. */
  background:conic-gradient(from 0deg,
    #C15A17 0deg, #E8B24A 58deg, #FBF0DC 104deg, #E08B3C 150deg,
    #3A2416 206deg, #A3301F 262deg, #E8B24A 312deg, #C15A17 360deg);
  animation:vz-orb-giro-a 7s linear infinite;
}

/* capa 2 · más oscura y con otro reparto. Gira al revés y en 11s: 11 no es múltiplo de 7,
   así que las dos capas nunca vuelven a alinearse igual. Ese desfase es todo el efecto. */
.vz-orb::after{
  background:conic-gradient(from 210deg,
    #2E1B10 0deg, #C15A17 74deg, #FBF0DC 128deg, #8F3D12 190deg,
    #2E1B10 246deg, #E08B3C 310deg, #2E1B10 360deg);
  animation:vz-orb-giro-b 11s linear infinite;
  opacity:.52;
  /* nada de mix-blend-mode:screen: sobre ámbar satura a blanco y se come las dos capas */
}

@keyframes vz-orb-giro-a{to{transform:rotate(360deg)}}
@keyframes vz-orb-giro-b{to{transform:rotate(-360deg)}}

/* ---------- idle: respira ---------- */
.vz-orb-wrap .vz-orb{animation:vz-orb-respira 5.5s var(--ease) infinite}
@keyframes vz-orb-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* ---------- conectando: apagado, más chico y todo más lento ----------
   Las dos capas siguen sin ser divisibles entre sí (16 y 25), así que el patrón tampoco se
   repite mientras está en espera. */
.vz-orb-wrap.is-conectando{transform:scale(.72)}
.vz-orb-wrap.is-conectando .vz-orb{filter:saturate(.35) brightness(.7);animation-duration:9s}
.vz-orb-wrap.is-conectando .vz-orb::before{animation-duration:16s}
.vz-orb-wrap.is-conectando .vz-orb::after{animation-duration:25s}
.vz-orb-wrap.is-conectando .vz-orb-halo{opacity:.2}

/* ---------- escuchando: se hincha con la voz de la persona ----------
   El swell sale del nivel real del micrófono, no de una animación suelta: es lo que hace
   que se sienta que te está escuchando a vos y no que es un gif. */
.vz-orb-wrap.is-escuchando .vz-orb{
  animation:none;
  transform:scale(calc(1 + var(--vz-nivel) * .17));
  /* el suavizado ya lo hace el JS frame a frame: acá una transition larga se siente lenta */
  transition:transform .07s linear,filter .45s var(--ease);
}
.vz-orb-wrap.is-escuchando .vz-orb-halo{
  opacity:calc(.4 + var(--vz-nivel) * .5);
  transform:scale(calc(1 + var(--vz-nivel) * .1));
  transition:opacity .12s linear,transform .12s linear;
}

/* ---------- hablando: se expande con la voz DEL AGENTE, más brillo y gira más rápido ----------
   Mismo mecanismo que escuchando (--vz-nivel), pero el medidor está leyendo el track remoto en
   vez del micrófono. Un poco más de recorrido que al escuchar: es el momento protagonista. */
.vz-orb-wrap.is-hablando .vz-orb{
  filter:saturate(1.22) brightness(1.12);
  animation:none;
  transform:scale(calc(1 + var(--vz-nivel) * .2));
  transition:transform .07s linear,filter .45s var(--ease);
}
.vz-orb-wrap.is-hablando .vz-orb::before{animation-duration:3.4s}
.vz-orb-wrap.is-hablando .vz-orb::after{animation-duration:5.3s}
.vz-orb-wrap.is-hablando .vz-orb-halo{animation:vz-orb-late 1.5s var(--ease) infinite}
@keyframes vz-orb-late{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}

/* ---------- el panel tinta que lo contiene ---------- */
.vz-panel{
  background:var(--tinta);
  border:1px solid #3A2E25;
  border-radius:var(--r-3);
  padding:clamp(24px,4vw,36px) clamp(20px,4vw,32px);
  display:grid;gap:var(--sp-3);
  justify-items:center;
  color:var(--papel);
  box-shadow:var(--sombra-apoyo);
}

/* fila de estado, en mono: la misma capa "instrumento" que el resto de la web */
.vz-panel-estado{
  display:grid;gap:8px;justify-items:center;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#9A8C7C;margin:0;
}
.vz-panel-estado-k{color:#6B5B4C}
.vz-panel-estado-fila{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.vz-panel-estado b{
  font-weight:400;color:var(--ambar-tinta);
  border:1px solid #5A4634;border-radius:var(--r-1);
  padding:3px 7px;background:rgba(224,139,60,.08);
}
.vz-panel-estado .vz-off{color:#6B5B4C;border-color:transparent;background:none;padding:3px 7px}

/* reloj y botón dentro del panel */
.vz-panel-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;flex-wrap:wrap}
.vz-panel-izq{display:inline-flex;align-items:center;gap:14px}
.vz-panel .vz-reloj{color:var(--papel);font-size:22px}
.vz-panel .vz-reloj.is-poco{color:#F0836F}
.vz-panel-vivo{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:#F0836F;
}
.vz-panel .btn-s{
  background:none;color:var(--papel);border-color:#5A4634;
}
.vz-panel .btn-s:hover{border-color:var(--ambar-tinta);color:var(--ambar-tinta)}

/* la línea de qué está pasando, en cristiano */
.vz-panel-dice{
  margin:0;font-size:16.5px;line-height:1.45;color:#D9CEC0;text-align:center;max-width:34ch;
  min-height:1.45em;
}

@media (prefers-reduced-motion:reduce){
  .vz-orb::before,.vz-orb::after,.vz-orb-wrap .vz-orb,.vz-orb-wrap .vz-orb-halo{animation:none}
  .vz-orb-wrap.is-escuchando .vz-orb,.vz-orb-wrap.is-hablando .vz-orb{transform:none}
  .vz-orb,.vz-orb-wrap{transition:none}
}