/* EnergyCore.css - premium fused heartbeat core */

.ai-brain-container {
  position: relative;
  width: 100%;
  max-width: 186px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  contain: layout style;
}

.hextech-core-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
  transform-origin: center;
  transition: transform 0.09s cubic-bezier(0.16, 1, 0.3, 1);
}

.hextech-energy-core {
  --core-speed: 2.55s;
  --core-glow-alpha: 0.48;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.hextech-energy-core::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--elo-tone-5, #ffffff) 20%, transparent) 0%, color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 22%, transparent) 28%, transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--elo-tone-2, #33ecff) 14%, transparent) 0%, transparent 72%);
  opacity: var(--core-glow-alpha);
  filter: blur(24px);
  animation: hx-heartbeat-aura var(--core-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.hextech-energy-core::after {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 62%);
  filter: blur(14px);
  opacity: 0.62;
  animation: hx-heartbeat-inner var(--core-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.hx-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  will-change: transform, opacity;
}

.hx-ring-outer {
  inset: 12px;
  border-top-color: color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 34%, transparent);
  border-bottom-color: color-mix(in srgb, var(--elo-tone-2, #33ecff) 18%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 9%, transparent);
  /* Reage ao áudio: de quase invisível (0.32) até totalmente visível (1.0) */
  opacity: calc(0.32 + var(--core-react, 0) * 0.68);
  animation: hx-orbit-slow calc(var(--core-speed) * 1.5) linear infinite;
}

.hx-ring-inner {
  inset: 28px;
  border-left-color: color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 28%, transparent);
  border-right-color: color-mix(in srgb, var(--elo-tone-5, #ffffff) 18%, transparent);
  opacity: calc(0.22 + var(--core-react, 0) * 0.55);
  animation: hx-orbit-reverse calc(var(--core-speed) * 1.22) linear infinite;
}

.hx-ring-diagonal {
  inset: 44px;
  border-top-color: color-mix(in srgb, var(--elo-tone-2, #33ecff) 24%, transparent);
  opacity: calc(0.15 + var(--core-react, 0) * 0.42);
  animation: hx-orbit-slow calc(var(--core-speed) * 0.95) ease-in-out infinite alternate;
}

.hx-brain-pulse {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.hx-brain-pulse-a {
  inset: 14px;
  background: radial-gradient(circle, color-mix(in srgb, var(--elo-tone-5, #ffffff) 10%, transparent) 0%, color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 18%, transparent) 40%, transparent 72%);
  filter: blur(16px);
  opacity: 0.22;
  animation: hx-heartbeat-shell var(--core-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.hx-brain-pulse-b {
  inset: 24px;
  background: radial-gradient(circle, color-mix(in srgb, var(--elo-tone-5, #ffffff) 12%, transparent) 0%, color-mix(in srgb, var(--elo-tone-2, #33ecff) 12%, transparent) 42%, transparent 76%);
  filter: blur(12px);
  opacity: 0.18;
  animation: hx-heartbeat-shell var(--core-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite reverse;
}

.hx-core-flare {
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.94) 0%, color-mix(in srgb, var(--elo-tone-5, #ffffff) 46%, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 54%) 42%, transparent 100%);
  /* blur diminui com micro-picos: voz articulada → flare nítido */
  filter: blur(calc(7px - var(--core-micro, 0) * 4px));
  /* glow controlado por CSS vars atualizadas a cada frame pelo RAF */
  box-shadow:
    0 0 var(--core-flare-glow, 16px) rgba(255, 255, 255, var(--core-flare-white-alpha, 0.52)),
    0 0 var(--core-outer-glow, 34px) color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 34%, transparent);
  animation: hx-heartbeat-core var(--core-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.brain-video-layer {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.985;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 10%, transparent));
  animation: hx-heartbeat-shell var(--core-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  
  /* Suavizacao 3x nas bordas externas do video para infundir com o cenario */
  -webkit-mask-image: radial-gradient(circle, black 35%, rgba(0,0,0,0.4) 60%, transparent 80%);
  mask-image: radial-gradient(circle, black 35%, rgba(0,0,0,0.4) 60%, transparent 80%);
}

.brain-video-layer::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 52%, rgba(7, 10, 16, 0.05) 66%, rgba(7, 10, 16, 0.22) 100%),
    radial-gradient(circle, transparent 60%, color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 9%, transparent) 76%, transparent 92%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}

.brain-video-layer::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 48%, rgba(255,255,255,0.035) 66%, rgba(255,255,255,0.015) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.brain-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  filter: contrast(1.72) brightness(1.38) saturate(1.02);
  opacity: 0.995;
  transform: scale(1.2);
  transform-origin: center;
  transition: transform 0.15s cubic-bezier(0.33, 1, 0.68, 1), filter 0.15s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform, filter; /* Melhora a fluidez para 120fps percebidos */
}

.ai-brain-container.speaking .hextech-core-wrapper {
  transform: scale(1.015);
}

.ai-brain-container.speaking .brain-video-layer {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 22%, transparent));
}

.ai-brain-container.speaking .hextech-energy-core::before {
  opacity: calc(var(--core-glow-alpha) * 1.28);
  filter: blur(28px);
}

.ai-brain-container.speaking .hx-ring-outer {
  opacity: 0.54;
}

.ai-brain-container.speaking .hx-core-flare {
  box-shadow:
    0 0 18px rgba(255,255,255,0.64),
    0 0 42px color-mix(in srgb, var(--elo-tone-1, var(--elo-primary, #00e5ff)) 48%, transparent);
}

@keyframes hx-orbit-slow {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@keyframes hx-orbit-reverse {
  from { transform: rotateZ(360deg) rotateX(45deg); }
  to { transform: rotateZ(0deg) rotateX(45deg); }
}

@keyframes hx-heartbeat-core {
  0%, 18%, 100% { transform: scale(0.96); opacity: 0.92; }
  7% { transform: scale(1.06); opacity: 1; }
  12% { transform: scale(0.995); opacity: 0.96; }
  26% { transform: scale(1.03); opacity: 0.98; }
  34% { transform: scale(0.985); opacity: 0.94; }
}

@keyframes hx-heartbeat-aura {
  0%, 18%, 100% { transform: scale(0.98); opacity: var(--core-glow-alpha); }
  7% { transform: scale(1.045); opacity: calc(var(--core-glow-alpha) * 1.18); }
  12% { transform: scale(1); opacity: calc(var(--core-glow-alpha) * 1.04); }
  26% { transform: scale(1.028); opacity: calc(var(--core-glow-alpha) * 1.1); }
  34% { transform: scale(0.992); opacity: calc(var(--core-glow-alpha) * 0.98); }
}

@keyframes hx-heartbeat-inner {
  0%, 18%, 100% { transform: scale(0.98); opacity: 0.48; }
  7% { transform: scale(1.03); opacity: 0.62; }
  26% { transform: scale(1.018); opacity: 0.55; }
}

@keyframes hx-heartbeat-shell {
  0%, 18%, 100% { transform: scale(0.988); opacity: 0.9; }
  7% { transform: scale(1.03); opacity: 1; }
  12% { transform: scale(1.008); opacity: 0.96; }
  26% { transform: scale(1.018); opacity: 0.97; }
  34% { transform: scale(0.996); opacity: 0.93; }
}

/* Landing host only; EnergyCore visual definitions above match the call component. */
.lp-call-brain { width: 100%; height: 100%; display: grid; place-items: center; }
.lp-call-brain .ai-brain-container { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .lp-call-brain *, .lp-call-brain *::before, .lp-call-brain *::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .lp-brain__flow { animation: none !important; }
}