/*
 * Fari HTML character performance layer.
 *
 * This file intentionally stays independent from the preserved visual source.
 * JavaScript drives semantic states and a few numeric CSS variables; CSS owns
 * the rendering so a future Rive artboard can replace this layer cleanly.
 */

.angel.fari-character-ready {
  --fari-mouth-open: 0;
  --fari-energy: .28;
  --fari-input-level: 0;
  --fari-gaze-x: 0px;
  --fari-gaze-y: 0px;
  --fari-speech-accent: 0;
  --fari-mouth-scale-x: .88;
  --fari-mouth-scale-y: .2;
  --fari-core-glow: 17px;
  --fari-accent-glow: 0px;
  --fari-listen-opacity: .35;
  --fari-listen-scale: .86;
  --fari-energy-opacity: .6;
  --fari-input-ring-opacity: .28;
  --fari-input-ring-scale: 1.45;
  --fari-body-scale-x: 1;
  --fari-body-scale-y: 1;
  --fari-speaking-ring-scale: 1.4;
  --fari-image-scale: 1;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.angel.fari-character-ready:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 7px rgba(109, 216, 213, .45);
}

.angel.fari-character-ready .eye {
  translate: var(--fari-gaze-x) var(--fari-gaze-y);
  transition: translate 180ms ease-out;
}

.angel.fari-character-ready .eye::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
}

.angel.fari-character-ready .smile {
  transform-origin: 50% 50%;
  transition:
    width 120ms ease-out,
    height 120ms ease-out,
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    transform 80ms ease-out;
}

.angel.fari-character-ready .core {
  filter: brightness(calc(.85 + var(--fari-energy)));
  box-shadow:
    0 0 var(--fari-core-glow) rgba(245, 210, 123, .72),
    0 0 var(--fari-accent-glow) rgba(128, 230, 223, .88);
}

.fari-voice-rings {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 93px;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.fari-voice-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(144, 231, 219, .72);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.45);
}

.fari-tap-sparks {
  position: absolute;
  z-index: 9;
  inset: -30px;
  pointer-events: none;
}

.fari-tap-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--spark-size, 4px);
  height: var(--spark-size, 4px);
  border-radius: 50%;
  background: var(--spark-color, #fff1ba);
  box-shadow: 0 0 9px var(--spark-color, #fff1ba);
  animation: fari-tap-spark 620ms cubic-bezier(.16, .72, .2, 1) forwards;
}

.fari-starlight-mouth {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 65px;
  width: 9px;
  height: 7px;
  border: 1px solid rgba(57, 34, 92, .9);
  border-radius: 48% 48% 55% 55%;
  background: radial-gradient(circle at 50% 78%, #f5a6bd 0 28%, #37205c 34% 100%);
  filter: drop-shadow(0 0 3px rgba(255, 206, 237, .65));
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleX(var(--fari-mouth-scale-x)) scaleY(.1);
  transform-origin: 50% 35%;
}

.angel.asset-starlight.fari-state-speaking .fari-starlight-mouth {
  opacity: .96;
  transform: translateX(-50%) scaleX(var(--fari-mouth-scale-x)) scaleY(var(--fari-mouth-scale-y));
}

.angel.fari-pressed .sprite,
.angel.fari-pressed .spirit-form {
  animation: fari-character-press 180ms cubic-bezier(.2, .8, .2, 1) both !important;
}

.angel.fari-tap-feedback .angel-glow {
  animation: fari-tap-halo 460ms ease-out both !important;
}

.angel.fari-tap-feedback .core {
  animation: fari-tap-core 460ms ease-out both !important;
}

.angel.fari-state-listening .sprite {
  animation: fari-listening-body 2.2s ease-in-out infinite !important;
}

.angel.fari-state-listening .wing.left {
  animation: fari-listening-left 1.8s ease-in-out infinite alternate;
}

.angel.fari-state-listening .wing.right {
  animation: fari-listening-right 1.8s ease-in-out infinite alternate;
}

.angel.fari-state-listening .eye {
  animation-duration: 7.2s;
}

.angel.fari-state-listening .core {
  background: radial-gradient(circle, #fff 0 8%, #a7f7e7 24%, #5dc8c0 51%, transparent 73%);
}

.angel.fari-state-listening .fari-voice-rings {
  opacity: var(--fari-listen-opacity);
  transform: translate(-50%, -50%) scale(var(--fari-listen-scale));
}

.angel.fari-state-listening .fari-voice-rings i {
  animation: fari-listening-ring 1.9s ease-out infinite;
}

.angel.fari-state-listening .fari-voice-rings i:nth-child(2) {
  animation-delay: .62s;
}

.angel.fari-state-listening .fari-voice-rings i:nth-child(3) {
  animation-delay: 1.24s;
}

.angel.fari-state-thinking .sprite {
  animation: fari-thinking-body 2.5s ease-in-out infinite !important;
}

.angel.fari-state-thinking .eye {
  translate: 1px -2px;
  animation: none;
}

.angel.fari-state-thinking .wing.left {
  transform: rotate(42deg) translateY(-2px);
}

.angel.fari-state-thinking .wing.right {
  transform: rotate(-14deg) translateY(1px);
}

.angel.fari-state-thinking .fari-voice-rings {
  opacity: .78;
  animation: fari-thinking-orbit 2.8s linear infinite;
}

.angel.fari-state-thinking .fari-voice-rings i {
  inset: 5px;
  border-style: dashed;
  border-color: rgba(219, 177, 239, .76);
  opacity: .82;
  transform: none;
}

.angel.fari-state-thinking .fari-voice-rings i:nth-child(2) {
  inset: -7px;
  border-color: rgba(129, 220, 220, .46);
}

.angel.fari-state-thinking .fari-voice-rings i:nth-child(3) {
  display: none;
}

.angel.fari-state-speaking .sprite {
  animation: fari-speaking-body 760ms ease-in-out infinite !important;
}

.angel.fari-state-speaking .smile {
  bottom: 0;
  width: 11px;
  height: 9px;
  border: 1.3px solid #244d43;
  border-top-color: rgba(36, 77, 67, .72);
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 78%, #e89aa5 0 28%, #244d43 32% 100%);
  transform: translateX(-50%) scaleX(var(--fari-mouth-scale-x)) scaleY(var(--fari-mouth-scale-y));
}

.angel.fari-state-speaking .wing.left {
  animation: fari-speaking-left 1.45s ease-in-out infinite;
}

.angel.fari-state-speaking .wing.right {
  animation: fari-speaking-right 1.15s ease-in-out infinite .14s;
}

.angel.fari-state-speaking .fari-voice-rings {
  opacity: var(--fari-energy-opacity);
}

.angel.fari-state-speaking .fari-voice-rings i {
  animation: fari-speaking-ring 1.25s ease-out infinite;
}

.angel.fari-state-speaking .fari-voice-rings i:nth-child(2) {
  animation-delay: .42s;
}

.angel.fari-state-speaking .fari-voice-rings i:nth-child(3) {
  animation-delay: .84s;
}

.angel.fari-state-speaking .angel-particles {
  opacity: var(--fari-energy-opacity);
}

.angel.fari-state-interrupted .sprite,
.angel.fari-state-interrupted .spirit-form {
  animation: fari-interrupted 420ms cubic-bezier(.2, .82, .2, 1) both !important;
}

.angel.fari-state-interrupted .smile {
  width: 9px;
  height: 3px;
  border: 0;
  border-bottom: 1.4px solid #244d43;
  background: transparent;
  transform: translateX(-50%) scaleY(1);
}

.angel.fari-state-concerned .sprite {
  animation: fari-concerned-body 3.3s ease-in-out infinite !important;
}

.angel.fari-state-concerned .wing.left {
  transform: rotate(14deg) translateY(3px);
}

.angel.fari-state-concerned .wing.right {
  transform: rotate(-14deg) translateY(3px);
}

.angel.fari-state-concerned .core {
  opacity: .72;
  filter: saturate(.7);
}

/* Flattened alternate forms still receive whole-body, aura, and energy feedback. */
.angel.asset-starlight.fari-state-listening .spirit-form {
  animation: fari-listening-image 2.2s ease-in-out infinite !important;
}

.angel.asset-starlight.fari-state-thinking .spirit-form {
  animation: fari-thinking-image 2.5s ease-in-out infinite !important;
}

.angel.asset-starlight.fari-state-speaking .spirit-form {
  animation: fari-speaking-image 760ms ease-in-out infinite !important;
}

@keyframes fari-character-press {
  0% { transform: translateX(-50%) scale(1); }
  55% { transform: translate(-50%, 4px) scale(.94, .9); }
  100% { transform: translateX(-50%) scale(1.03, 1.04); }
}

@keyframes fari-tap-halo {
  0% { opacity: .35; transform: translate(-50%, -50%) scale(.72); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.28); }
  100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fari-tap-core {
  0% { transform: translateX(-50%) scale(.9); }
  45% { transform: translateX(-50%) scale(1.72); filter: brightness(1.65); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes fari-tap-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35);
  }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.05);
  }
}

@keyframes fari-listening-body {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(0); }
  50% { transform: translate(-50%, 2px) scale(1.018, .985) rotate(-.7deg); }
}

@keyframes fari-listening-left {
  from { transform: rotate(27deg); }
  to { transform: rotate(39deg) translateY(-2px); }
}

@keyframes fari-listening-right {
  from { transform: rotate(-27deg); }
  to { transform: rotate(-39deg) translateY(-2px); }
}

@keyframes fari-listening-ring {
  0% { opacity: 0; transform: scale(.45); }
  24% { opacity: var(--fari-input-ring-opacity); }
  100% { opacity: 0; transform: scale(var(--fari-input-ring-scale)); }
}

@keyframes fari-thinking-body {
  0%, 100% { transform: translateX(-50%) rotate(-1deg); }
  50% { transform: translate(-48%, -4px) rotate(2deg); }
}

@keyframes fari-thinking-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fari-speaking-body {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  42% { transform: translate(-50%, -1px) scale(var(--fari-body-scale-x), var(--fari-body-scale-y)); }
  72% { transform: translate(-50%, 1px) scale(.994, 1.01); }
}

@keyframes fari-speaking-left {
  0%, 100% { transform: rotate(27deg); }
  38% { transform: rotate(42deg) translateY(-3px); }
  65% { transform: rotate(20deg) translateY(1px); }
}

@keyframes fari-speaking-right {
  0%, 100% { transform: rotate(-27deg); }
  45% { transform: rotate(-48deg) translateY(-4px); }
  72% { transform: rotate(-22deg); }
}

@keyframes fari-speaking-ring {
  0% { opacity: .68; transform: scale(.52); }
  100% { opacity: 0; transform: scale(var(--fari-speaking-ring-scale)); }
}

@keyframes fari-interrupted {
  0% { transform: translateX(-50%); }
  36% { transform: translate(-50%, 5px) scale(.95, .91); }
  62% { transform: translate(-50%, -3px) scale(1.035, 1.045); }
  100% { transform: translateX(-50%); }
}

@keyframes fari-concerned-body {
  0%, 100% { transform: translateX(-50%) rotate(-1deg); }
  50% { transform: translate(-50%, 2px) rotate(1deg) scale(.99); }
}

@keyframes fari-listening-image {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translate(-50%, 2px) scale(1.018, .986); }
}

@keyframes fari-thinking-image {
  0%, 100% { transform: translateX(-50%) rotate(-1.2deg); }
  50% { transform: translate(-49%, -4px) rotate(1.8deg); }
}

@keyframes fari-speaking-image {
  0%, 100% { transform: translateX(-50%) scale(1); }
  45% { transform: translate(-50%, -2px) scale(var(--fari-image-scale)); }
  72% { transform: translate(-50%, 1px) scale(.995, 1.008); }
}

.evolved-reduced-motion .angel.fari-character-ready,
.evolved-reduced-motion .angel.fari-character-ready *,
.evolved-reduced-motion .angel.fari-character-ready *::before,
.evolved-reduced-motion .angel.fari-character-ready *::after {
  animation: none !important;
  transition-duration: 0ms !important;
}

.evolved-reduced-motion .angel.fari-character-ready .fari-voice-rings {
  opacity: 0;
}

.evolved-reduced-motion .angel.fari-state-listening .core {
  background: radial-gradient(circle, #fff 0 8%, #a7f7e7 24%, #5dc8c0 51%, transparent 73%);
}

.evolved-reduced-motion .angel.fari-state-speaking .core {
  filter: brightness(1.34);
}

@media (prefers-reduced-motion: reduce) {
  .angel.fari-character-ready,
  .angel.fari-character-ready *,
  .angel.fari-character-ready *::before,
  .angel.fari-character-ready *::after {
    animation: none !important;
    transition-duration: 0ms !important;
  }

  .angel.fari-character-ready .fari-voice-rings,
  .angel.fari-character-ready .fari-tap-sparks {
    display: none;
  }
}