/* ==========================================================================
   Шарик «Алексия AI» с глазами и эмоциями — для сайта ai.luxecorp.ru
   Подключать ПОСЛЕ /_ax/ax.css. Работает поверх существующего .ax-orb:
   те же три световых слоя <i>, добавлены глаза, эмоции и 6 цветовых тем.
   Состояние: [data-emotion], тема: [data-orb-theme]. Покадровые значения
   (--o-amp, --o-gx, --o-gy, --o-cx, --o-cy) пишет orb-face.js.
   ========================================================================== */

/* ---------- размеры ---------- */
.ax-orb--sm { width: 96px; height: 96px; }
.ax-orb--md { width: 150px; height: 150px; }
.ax-orb--lg, .ax-orb--xl { width: 230px; height: 230px; }

/* ---------- базовые переменные (тема по умолчанию: Фиолетово-синий) ---------- */
.ax-orb.ax-orb--face {
  --o-size: 150px;
  --o-gs: min(var(--o-size), 170px);          /* масштаб свечения (чтобы большой шарик не «заливал» экран) */
  --o-amp: 0; --o-gx: 0; --o-gy: 0; --o-cx: 0; --o-cy: 0;
  --o-ex: 0; --o-ey: 0; --o-esx: 1; --o-esy: 1;
  --o-erot: 0deg; --o-erot2: 0deg; --o-tilt: 0deg; --o-amp-eye: 0;
  --o-spin: 9s;

  --o-bg: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0, rgba(190,210,255,.9) 6%, rgba(110,140,255,.85) 22%, rgba(110,70,235,.9) 48%, rgba(40,16,110,1) 78%, #0b0620 100%);
  --o-glow: 0 0 calc(var(--o-gs) * .53) calc(var(--o-gs) * .07) rgba(110,100,255,.45), 0 0 calc(var(--o-gs) * 1.33) calc(var(--o-gs) * .27) rgba(130,80,255,.25);
  --o-inset: inset calc(var(--o-size) * -.13) calc(var(--o-size) * -.2) calc(var(--o-size) * .4) rgba(10,0,40,.7);
  --o-c1: rgba(56,214,245,.55);
  --o-c1b: rgba(208,107,255,.55);
  --o-c2: rgba(120,150,255,.6);
  --o-c3: rgba(56,214,245,.45);
  --o-blend: screen;
  --o-layer-opacity: .65;
  --o-eye: #f6f7ff;
  --o-eye-glow: 0 0 calc(var(--o-size) * .06) rgba(200,215,255,.85);

  isolation: isolate;
  background: var(--o-bg);
  box-shadow: var(--o-glow), var(--o-inset);
  /* «дыхание» в такт голосу; отдельное свойство scale не мешает transform: translate(-50%,-50%) из ax.css */
  scale: calc(1 + var(--o-amp) * .06);
  transition: scale .12s ease-out;
}
.ax-orb--face.ax-orb--sm { --o-size: 96px; }
.ax-orb--face.ax-orb--md { --o-size: 150px; }
.ax-orb--face.ax-orb--lg,
.ax-orb--face.ax-orb--xl { --o-size: 230px; }
.ax-orb--face.ax-orb--flat { box-shadow: var(--o-inset); }   /* без внешнего свечения (мелкие превью) */

/* ---------- 6 тем: те же цвета, что в чате и приложении ---------- */
.ax-orb--face[data-orb-theme="white"] {
  --o-bg: radial-gradient(circle at 34% 28%, #ffffff 0, #fbfbfd 18%, #eceef3 45%, #d4d7df 75%, #b4b8c3 100%);
  --o-glow: 0 0 calc(var(--o-gs) * .4) calc(var(--o-gs) * .04) rgba(255,255,255,.28), 0 calc(var(--o-gs) * .04) calc(var(--o-gs) * .18) rgba(0,0,0,.35);
  --o-inset: inset calc(var(--o-size) * -.08) calc(var(--o-size) * -.12) calc(var(--o-size) * .3) rgba(60,66,84,.28);
  --o-c1: rgba(170,180,205,.35); --o-c1b: rgba(205,190,225,.3);
  --o-c2: rgba(180,190,215,.35); --o-c3: rgba(255,255,255,.7);
  --o-blend: multiply; --o-layer-opacity: .55;
  --o-eye: #0a0a0a; --o-eye-glow: none;
}
.ax-orb--face[data-orb-theme="black"] {
  --o-bg: radial-gradient(circle at 34% 28%, #7c808c 0, #3a3e48 16%, #1d2027 45%, #0b0d10 78%, #000 100%);
  --o-glow: 0 calc(var(--o-gs) * .05) calc(var(--o-gs) * .22) rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  --o-inset: inset calc(var(--o-size) * -.1) calc(var(--o-size) * -.16) calc(var(--o-size) * .34) rgba(0,0,0,.75);
  --o-c1: rgba(255,255,255,.12); --o-c1b: rgba(170,180,255,.12);
  --o-c2: rgba(255,255,255,.1);  --o-c3: rgba(255,255,255,.1);
  --o-eye: #f5f5f5; --o-eye-glow: 0 0 calc(var(--o-size) * .04) rgba(255,255,255,.45);
}
.ax-orb--face[data-orb-theme="emerald"] {
  --o-bg: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0, rgba(200,255,235,.9) 6%, rgba(80,224,176,.88) 22%, rgba(15,159,134,.92) 48%, #04423f 78%, #011716 100%);
  --o-glow: 0 0 calc(var(--o-gs) * .53) calc(var(--o-gs) * .07) rgba(40,220,170,.42), 0 0 calc(var(--o-gs) * 1.33) calc(var(--o-gs) * .27) rgba(20,180,160,.22);
  --o-inset: inset calc(var(--o-size) * -.13) calc(var(--o-size) * -.2) calc(var(--o-size) * .4) rgba(0,30,25,.7);
  --o-c1: rgba(120,255,210,.5); --o-c1b: rgba(56,214,245,.5);
  --o-c2: rgba(150,255,190,.5); --o-c3: rgba(220,255,120,.35);
  --o-eye: #f2fffb; --o-eye-glow: 0 0 calc(var(--o-size) * .06) rgba(190,255,235,.85);
}
.ax-orb--face[data-orb-theme="sunset"] {
  --o-bg: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0, rgba(255,228,196,.92) 6%, rgba(255,160,107,.9) 22%, rgba(242,84,125,.92) 48%, #7a1a5c 78%, #24051c 100%);
  --o-glow: 0 0 calc(var(--o-gs) * .53) calc(var(--o-gs) * .07) rgba(255,110,120,.42), 0 0 calc(var(--o-gs) * 1.33) calc(var(--o-gs) * .27) rgba(255,120,60,.2);
  --o-inset: inset calc(var(--o-size) * -.13) calc(var(--o-size) * -.2) calc(var(--o-size) * .4) rgba(50,0,30,.65);
  --o-c1: rgba(255,196,90,.55); --o-c1b: rgba(255,90,170,.55);
  --o-c2: rgba(255,140,110,.55); --o-c3: rgba(255,220,120,.45);
  --o-eye: #fff8f4; --o-eye-glow: 0 0 calc(var(--o-size) * .06) rgba(255,225,205,.85);
}
.ax-orb--face[data-orb-theme="ocean"] {
  --o-bg: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0, rgba(210,244,255,.92) 6%, rgba(92,200,255,.88) 22%, rgba(31,111,224,.92) 48%, #0b2a78 78%, #030a24 100%);
  --o-glow: 0 0 calc(var(--o-gs) * .53) calc(var(--o-gs) * .07) rgba(60,160,255,.45), 0 0 calc(var(--o-gs) * 1.33) calc(var(--o-gs) * .27) rgba(40,120,255,.22);
  --o-inset: inset calc(var(--o-size) * -.13) calc(var(--o-size) * -.2) calc(var(--o-size) * .4) rgba(0,10,45,.7);
  --o-c1: rgba(56,230,245,.55); --o-c1b: rgba(120,140,255,.5);
  --o-c2: rgba(110,200,255,.55); --o-c3: rgba(140,255,240,.4);
  --o-eye: #f4fbff; --o-eye-glow: 0 0 calc(var(--o-size) * .06) rgba(200,235,255,.85);
}

/* ---------- световые слои (перекрашиваем те же <i> из ax.css) ---------- */
.ax-orb.ax-orb--face i {
  mix-blend-mode: var(--o-blend);
  opacity: var(--o-layer-opacity);
  pointer-events: none;
}
.ax-orb.ax-orb--face i:nth-child(1) {
  background: conic-gradient(from 0deg, transparent 0 20%, var(--o-c1) 30%, transparent 45% 70%, var(--o-c1b) 80%, transparent 90%);
  filter: blur(calc(var(--o-size) * .093));
  animation: ax-spin var(--o-spin) linear infinite;
}
.ax-orb.ax-orb--face i:nth-child(2) {
  background: conic-gradient(from 90deg, transparent 0 35%, var(--o-c2) 50%, transparent 65%);
  filter: blur(calc(var(--o-size) * .067));
  animation: ax-spin calc(var(--o-spin) * .667) linear infinite reverse;
}
.ax-orb.ax-orb--face i:nth-child(3) {
  background: radial-gradient(circle at 70% 75%, var(--o-c3), transparent 40%);
  animation: ax-pulse 4s ease-in-out infinite;
}

/* ---------- глаза ---------- */
.ax-orb__eyes {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19%;
  margin-top: -4%;
  pointer-events: none;
  transform: rotate(var(--o-tilt));
  transition: transform .25s ease;
}
.ax-orb__eye {
  --o-erot-own: var(--o-erot);
  display: block;
  width: 15%;
  aspect-ratio: 1 / 1.75;
  transform:
    translate(calc((var(--o-ex) + var(--o-gx) + var(--o-cx)) * var(--o-size)),
              calc((var(--o-ey) + var(--o-gy) + var(--o-cy)) * var(--o-size)))
    rotate(var(--o-erot-own))
    scale(var(--o-esx), calc(var(--o-esy) * (1 + var(--o-amp) * var(--o-amp-eye))));
  transition: transform .14s ease-out;
  will-change: transform;
}
.ax-orb__eye + .ax-orb__eye { --o-erot-own: var(--o-erot2); }
.ax-orb__pupil {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--o-eye);
  box-shadow: var(--o-eye-glow);
  transform-origin: 50% 60%;
  transition: transform .09s ease, border-radius .2s ease, height .2s ease, background-color .2s ease;
}
.ax-orb--face.is-blink .ax-orb__pupil { transform: scaleY(.1); }

/* ---------- эмоции ---------- */
/* idle — по умолчанию (переменные выше) */
.ax-orb--face[data-emotion="listening"] { --o-esx: 1.06; --o-esy: 1.1; --o-amp-eye: .25; }
.ax-orb--face[data-emotion="thinking"]  { --o-ex: -.06; --o-ey: -.07; --o-esy: .82; --o-spin: 3.2s; }
.ax-orb--face[data-emotion="speaking"]  { --o-amp-eye: .35; --o-spin: 6s; }
.ax-orb--face[data-emotion="happy"]     { --o-ey: -.02; --o-amp-eye: .15; --o-spin: 6s; }
.ax-orb--face[data-emotion="happy"] .ax-orb__pupil {      /* глаза-дуги ^ ^ */
  height: 55%;
  background: transparent;
  box-shadow: none;
  border: calc(var(--o-size) * .045) solid var(--o-eye);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.ax-orb--face[data-emotion="surprised"] { --o-esx: 1.22; --o-esy: 1.3; --o-ey: -.015; --o-amp-eye: .15; --o-spin: 6s; }
.ax-orb--face[data-emotion="curious"]   { --o-tilt: -9deg; --o-esy: 1.05; --o-amp-eye: .3; --o-spin: 6s; }
.ax-orb--face[data-emotion="curious"] .ax-orb__eye + .ax-orb__eye { --o-esx: 1.14; --o-esy: 1.2; }
.ax-orb--face[data-emotion="sad"]       { --o-ey: .04; --o-esy: .7; --o-erot: 22deg; --o-erot2: -22deg; --o-amp-eye: .2; --o-spin: 12s; }

/* ---------- контейнер для шарика вне готовых блоков сайта ---------- */
/* .ax-orb в ax.css позиционируется absolute по центру родителя — родителю нужны position и высота */
.ax-orb-slot { position: relative; display: block; width: 100%; height: calc(var(--slot, 150px) * 1.35); }
.ax-orb-slot--sm { --slot: 96px; }
.ax-orb-slot--md { --slot: 150px; }
.ax-orb-slot--lg { --slot: 230px; }

/* ---------- интерактив ---------- */
.ax-orb--face[data-orb-react] { pointer-events: auto; cursor: pointer; z-index: 2; }
/* кольца и дорожка спутников в герое лежат поверх шарика — пропускаем сквозь них курсор */
.ax-orbit__ring, .ax-orbit__track { pointer-events: none; }
.ax-orbit__track .ax-sat { pointer-events: auto; }

/* ---------- меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .ax-orb.ax-orb--face i { animation: none !important; }
  .ax-orb.ax-orb--face,
  .ax-orb--face .ax-orb__eyes,
  .ax-orb--face .ax-orb__eye,
  .ax-orb--face .ax-orb__pupil { transition: none !important; }
}