/* 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 --violet/--violet2 custom properties already defined by each page's
   own :root. */

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

/* --- smile reaction: real "^ ^" happy-arc eyes, not a squished pill ---
   The classic "closed happy eye" CSS trick: a circle (border-radius:50%)
   with every border side transparent except border-top, which paints a
   thin, naturally-tapering arc across just the top of the circle — no
   fill/clip math that can silently go wrong (a two-circle clip technique
   rendered as a flat-bottomed dome here instead of a crescent; this can't
   produce that failure mode by construction). 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. */
[data-neura-face] .nf-eye-smile {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  border-top-color: #fff;
  pointer-events: none;
  animation: nf-eye-smile-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@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(--violet), var(--violet2));
  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(--violet), var(--violet2));
  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;
  color: #6d28d9;
  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-hand,
  [data-neura-face] .nf-kb,
  [data-neura-face] .nf-wave,
  [data-neura-face] .nf-bubble {
    animation: none !important;
  }
}