/* AU-RA · el orbe (módulo reutilizable). Ver README.md.
   .aura-orbe            lo que monta AuraOrbe.montar dentro del elemento de la página
   .aura-orbe-respaldo   el orbe quieto en CSS (sin WebGL o con el contexto perdido)
   .aura-orbe-mini       un orbe vivo chiquito en CSS (íconos de 16–28 px: burbujas, bandas, botones) */
.aura-orbe{position:absolute; inset:0; overflow:hidden; pointer-events:none; contain:strict}
.aura-orbe-lienzo, .aura-orbe-letras{position:absolute; inset:0; width:100%; height:100%; display:block}
.aura-orbe-lienzo[hidden]{display:none}

/* el respaldo: fotosfera de oro, dos hemisferios de luz y la corona; respira despacio */
.aura-orbe-respaldo{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.aura-orbe-respaldo[hidden]{display:none}
.aura-orbe-respaldo i{position:relative; width:min(62%, 62vmin); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(248,239,207,.95) 0, rgba(234,215,156,.75) 22%, rgba(201,169,97,.32) 48%, rgba(62,217,160,.08) 72%, transparent 100%);
  animation:aura-orbe-respira 4s ease-in-out infinite}
.aura-orbe-respaldo i::before, .aura-orbe-respaldo i::after{content:''; position:absolute; top:27%; width:27%; height:44%; border-radius:48% 52% 46% 54%;
  background:radial-gradient(closest-side, rgba(255,250,232,.9), rgba(234,215,156,.35) 70%, transparent); box-shadow:0 0 18px rgba(234,215,156,.35)}
.aura-orbe-respaldo i::before{left:21%}
.aura-orbe-respaldo i::after{right:21%}
.aura-orbe-solo{position:relative; width:100%; height:100%}

/* el mini: un sol con su surco que gira lento; .habla lo enciende con la voz */
.aura-orbe-mini{position:relative; display:inline-block; width:20px; height:20px; border-radius:50%; flex:0 0 auto; vertical-align:middle;
  background:radial-gradient(circle at 50% 50%, #fffaf0 0, #F8EFCF 16%, #EAD79C 38%, rgba(201,169,97,.55) 58%, rgba(62,217,160,.18) 74%, transparent 76%);
  box-shadow:0 0 8px rgba(234,215,156,.45)}
.aura-orbe-mini::before{content:''; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8%, rgba(234,215,156,.55) 10%, transparent 14% 33%, rgba(126,216,196,.45) 36%, transparent 40% 60%, rgba(234,215,156,.5) 63%, transparent 67% 84%, rgba(126,216,196,.4) 87%, transparent 91%);
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 56%, #000 70%, transparent 72%); mask:radial-gradient(circle, transparent 54%, #000 56%, #000 70%, transparent 72%);
  animation:aura-orbe-gira 9s linear infinite}
.aura-orbe-mini::after{content:''; position:absolute; left:calc(50% - .5px); top:24%; width:1px; height:52%; background:rgba(120,90,30,.35); border-radius:1px}
.aura-orbe-mini.habla{animation:aura-orbe-late .42s ease-in-out infinite alternate; box-shadow:0 0 14px rgba(234,215,156,.8)}
.aura-orbe-mini.habla::before{animation-duration:3s}

@keyframes aura-orbe-respira{0%,100%{transform:scale(1); filter:brightness(1)}50%{transform:scale(1.03); filter:brightness(1.08)}}
@keyframes aura-orbe-gira{to{transform:rotate(1turn)}}
@keyframes aura-orbe-late{from{filter:brightness(1)}to{filter:brightness(1.35)}}
@media (prefers-reduced-motion: reduce){
  .aura-orbe-respaldo i, .aura-orbe-mini, .aura-orbe-mini::before{animation:none}
}