/* Click-reaction overlay styles for NEURA's face — pairs with
   assets/neura-face.js. Sized in % of the host element so the same rules
   work unmodified at both the 120px hero face and the 28px banner mini.
   Uses --nf-face/--nf-face-2 (preferred) with --violet/--violet2 and hard
   orange fallbacks so fills never drop to empty rings / hollow crescents. */

[data-neura-face] {
  position: relative;
  overflow: visible;
}

/* --- smile reaction: real "^ ^" happy-arc eyes, not a squished pill ---
   BotFace.svelte's own technique (a white circle with a second, face-colored
   circle offset below it, both clipped to a short window) rendered as an
   inline SVG <clipPath> + two <circle>s in neura-face.js — verified against
   `sharp`-rendered output before shipping, not guessed at. Geometry
   (size/position) is computed and set inline per eye in JS from that eye's
   own live rendered size, so this one ruleset works unmodified on the 12x30
   hero eyes and the 3x8 archive-banner eyes; only the entrance/exit
   animation and the "bite" circle's color live here. */
[data-neura-face] .nf-eye-smile {
  position: absolute;
  pointer-events: none;
  animation: nf-eye-smile-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* <g> inside host SVG (wow brand face): outer translate() places it; inner
   .nf-eye-smile-pop runs the CSS scale animation so translate is preserved. */
[data-neura-face] .nf-eye-smile-svg {
  position: static;
  overflow: visible;
  pointer-events: none;
}
[data-neura-face] .nf-eye-smile-svg .nf-eye-smile-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: nf-eye-smile-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-neura-face] .nf-eye-smile-bite {
  fill: var(--nf-face-2, var(--violet2, #ea580c));
}
@keyframes nf-eye-smile-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  35% {
    opacity: 1;
    transform: scale(1.08);
  }
  50%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* --- shared overlay pieces (typing hands/keyboard, wave hand, bubble) --- */
[data-neura-face] .nf-hand,
[data-neura-face] .nf-kb {
  position: absolute;
  opacity: 0;
  background: linear-gradient(
    135deg,
    var(--nf-face, var(--violet, #fb923c)),
    var(--nf-face-2, var(--violet2, #ea580c))
  );
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
[data-neura-face] .nf-kb {
  left: 50%;
  bottom: -4%;
  width: 50%;
  height: 15%;
  border-radius: 30%;
  transform: translateX(-50%);
}
[data-neura-face] .nf-hand {
  width: 20%;
  height: 20%;
  bottom: 8%;
  border-radius: 50%;
}
[data-neura-face] .nf-hand-l {
  left: 27%;
}
[data-neura-face] .nf-hand-r {
  left: 53%;
}

[data-neura-face] .nf-wave {
  position: absolute;
  width: 30%;
  height: 30%;
  right: -6%;
  top: 2%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    var(--nf-face, var(--violet, #fb923c)),
    var(--nf-face-2, var(--violet2, #ea580c))
  );
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transform-origin: 30% 82%;
}

[data-neura-face] .nf-bubble {
  position: absolute;
  left: 50%;
  top: -22%;
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: #fff;
  /* Face-ink dark orange (not legacy purple) so DAVE/orange sites match. */
  color: var(--nf-face-ink, #9a3412);
  font-weight: 700;
  font-size: clamp(9px, 22%, 14px);
  padding: 0.35em 0.7em;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* --- typing reaction: fade in, bounce hands, fade out --- */
@keyframes nf-fade-settle {
  0%,
  12% {
    opacity: 0;
  }
  20%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes nf-hand-bounce-l {
  0%,
  22% {
    transform: translateY(0);
  }
  26% {
    transform: translateY(-35%);
  }
  30%,
  38% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-35%);
  }
  46%,
  54% {
    transform: translateY(0);
  }
  58% {
    transform: translateY(-35%);
  }
  62%,
  100% {
    transform: translateY(0);
  }
}
@keyframes nf-hand-bounce-r {
  0%,
  26% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-35%);
  }
  34%,
  42% {
    transform: translateY(0);
  }
  46% {
    transform: translateY(-35%);
  }
  50%,
  58% {
    transform: translateY(0);
  }
  62% {
    transform: translateY(-35%);
  }
  66%,
  100% {
    transform: translateY(0);
  }
}
[data-neura-face].nf-type-on .nf-kb {
  animation: nf-fade-settle 4.8s ease-in-out;
}
[data-neura-face].nf-type-on .nf-hand-l {
  animation:
    nf-fade-settle 4.8s ease-in-out,
    nf-hand-bounce-l 4.8s ease-in-out;
}
[data-neura-face].nf-type-on .nf-hand-r {
  animation:
    nf-fade-settle 4.8s ease-in-out,
    nf-hand-bounce-r 4.8s ease-in-out;
}
[data-neura-face].nf-type-on .eye {
  animation: nf-eyes-focus 4.8s ease-in-out;
}
@keyframes nf-eyes-focus {
  0%,
  15% {
    transform: translateY(0);
  }
  22%,
  85% {
    transform: translateY(12%);
  }
  100% {
    transform: translateY(0);
  }
}

/* --- wave reaction: hand rocks side to side, bubble pops in --- */
@keyframes nf-wave-rock {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(30deg);
  }
}
@keyframes nf-wave-fade {
  0%,
  10% {
    opacity: 0;
  }
  18%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes nf-bubble-pop {
  0%,
  10% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }
  28% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
  38%,
  80% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.9);
  }
}
[data-neura-face].nf-wave-on .nf-wave {
  animation:
    nf-wave-fade 2.2s ease-in-out,
    nf-wave-rock 0.6s ease-in-out infinite;
}
[data-neura-face].nf-wave-on .nf-bubble {
  animation: nf-bubble-pop 2.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-neura-face] .eye,
  [data-neura-face] .nf-eye-smile,
  [data-neura-face] .nf-eye-smile-pop,
  [data-neura-face] .nf-hand,
  [data-neura-face] .nf-kb,
  [data-neura-face] .nf-wave,
  [data-neura-face] .nf-bubble {
    animation: none !important;
  }
}