/* Yeux de Nono : adaptés de emo-eyes (Hamed Movaghari, licence MIT, voir LICENSE). */
.emo-stage {
  position: absolute;
  left: 0; right: 0;
  top: var(--hm-face-top, 0px);
  bottom: var(--hm-face-bottom, 0px);
  display: flex; align-items: center; justify-content: center;
  gap: 6vw;
  direction: ltr;
  pointer-events: none;
  --emo-color: #FFB454;
  --emo-glow: 255, 180, 84;
}

.emo-eye {
  position: relative;
  width: min(36vmin, 260px);
  height: min(40.8vmin, 295px);
  background: radial-gradient(circle at 50% 45%, #10151a 0%, #07090c 60%, #030405 100%);
  border: 2px solid #1f170c;
  border-radius: 38%;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.9),
    0 0 25px rgba(var(--emo-glow), .07),
    0 0 60px rgba(var(--emo-glow), .04);
  overflow: hidden;
  transition: border-radius .25s ease;
}

.emo-pupil {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  color: var(--emo-color);
  transition: color .3s ease, opacity .2s ease;
  will-change: transform;
}
.emo-pupil svg { width: 100%; height: 100%; overflow: visible; transform: scaleY(1); opacity: 1; transition: transform .22s ease-out, opacity .18s ease; }
.emo-stage.emo-changing .emo-pupil svg { transform: scaleY(.06); opacity: .2; transition-duration: .16s; }

.emo-lid {
  position: absolute;
  left: -5%; top: -5%;
  width: 110%; height: 0;
  background: #05070a;
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
  z-index: 5;
  transition: height .12s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.8);
}
.emo-eye.emo-blink .emo-lid { height: 105%; }

.emo-overlay, .emo-vignette, .emo-flicker { position: absolute; inset: 0; pointer-events: none; }
.emo-overlay {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: multiply;
}
.emo-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); }
.emo-flicker { background: rgba(var(--emo-glow), .02); animation: emo-flick 6s infinite; }
@keyframes emo-flick { 0%,100% { opacity: .3; } 48% { opacity: .3; } 50% { opacity: 1; } 52% { opacity: .3; } }

.emo-art { transform-origin: 50px 50px; filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 9px currentColor); }
.emo-expr { fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.emo-tear { display: none; fill: #6cbfff; }
.emo-blush, .emo-dots { display: none; }

[data-mood="normal"] .emo-art { animation: emo-attentive 4s ease-in-out infinite; }
[data-mood="happy"] .emo-expr { fill: none; stroke-width: 10; }
[data-mood="happy"] .emo-art { animation: emo-delighted 1.8s ease-in-out infinite; }
[data-mood="sad"] .emo-pupil { color: #73baff; }
[data-mood="sad"] .emo-tear { display: block; animation: emo-teardrop 3.2s ease-in infinite; }
[data-mood="sad"] .emo-eye-r .emo-tear { animation-delay: 1.6s; }
[data-mood="angry"] .emo-pupil { color: #ff8066; }
[data-mood="angry"] .emo-art { animation: emo-tense 2.2s ease-in-out infinite; }
[data-mood="surprised"] .emo-pupil { color: #ffd9a3; }
[data-mood="surprised"] .emo-expr { fill: #2e1d06; stroke-width: 9; }
[data-mood="surprised"] .emo-art { animation: emo-startled .45s ease-out; }
[data-mood="sleepy"] .emo-pupil { color: #829ce6; opacity: .65; }
[data-mood="sleepy"] .emo-expr { fill: none; stroke-width: 7; }
[data-mood="sleepy"] .emo-art { animation: emo-dozing 4s ease-in-out infinite; }
[data-mood="love"] .emo-pupil { color: #ff79b7; }
[data-mood="love"] .emo-art { animation: emo-heartbeat 1.5s ease-in-out infinite; }
[data-mood="suspicious"] .emo-pupil { color: #d4f68a; }
[data-mood="suspicious"] .emo-eye-l .emo-art { animation: emo-skeptical 3.5s ease-in-out infinite; }
[data-mood="dizzy"] .emo-pupil { color: #bd9bff; }
[data-mood="dizzy"] .emo-expr { fill: none; stroke-width: 6; }
[data-mood="dizzy"] .emo-art { animation: emo-spiral 5s linear infinite; }
[data-mood="dizzy"] .emo-eye-r .emo-art { animation-direction: reverse; }
[data-mood="cheeky"] .emo-expr { fill: none; stroke-width: 9; }
[data-mood="cheeky"] .emo-eye-r .emo-art { animation: emo-teasing 2.6s ease-in-out infinite; }
[data-mood="bored"] .emo-pupil { color: #91b6be; opacity: .75; }
[data-mood="bored"] .emo-expr { fill: none; stroke-width: 8; }
[data-mood="excited"] .emo-pupil { color: #ffe67e; }
[data-mood="excited"] .emo-art { animation: emo-star-bounce 1.1s ease-in-out infinite; }
[data-mood="excited"] .emo-eye-r .emo-art { animation-delay: .12s; }
[data-mood="shy"] .emo-pupil { color: #ffb5d2; }
[data-mood="shy"] .emo-blush { display: block; stroke: #ff73a2; stroke-width: 4; stroke-linecap: round; animation: emo-blushing 3s ease-in-out infinite; }
[data-mood="thinking"] .emo-pupil { color: #ffcf8a; }
[data-mood="thinking"] .emo-eye-r .emo-dots { display: block; fill: currentColor; }
.emo-dots circle { animation: emo-pondering 1.5s ease-in-out infinite; }
.emo-dots circle:nth-child(2) { animation-delay: .2s; }
.emo-dots circle:nth-child(3) { animation-delay: .4s; }

/* Ajouts pour Nono : écoute (yeux un peu plus grands et attentifs) et parole (petit rebond au rythme de la voix). */
.emo-stage.emo-listening .emo-pupil svg { transform: scale(1.07); }
.emo-stage.emo-listening[data-mood="normal"] .emo-art { animation: emo-attentive 1.6s ease-in-out infinite; }
.emo-stage.emo-talking .emo-art { animation: emo-talk .32s ease-in-out infinite alternate; }

@keyframes emo-heartbeat { 0%, 45%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1.03); } }
@keyframes emo-skeptical { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes emo-spiral { to { transform: rotate(360deg); } }
@keyframes emo-teasing { 0%, 70%, 100% { transform: scaleY(1); } 80%, 90% { transform: scaleY(.15); } }
@keyframes emo-star-bounce { 50% { transform: translateY(-4px) rotate(5deg) scale(1.04); } }
@keyframes emo-blushing { 50% { opacity: .4; } }
@keyframes emo-pondering { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes emo-attentive { 50% { transform: scaleY(.96); } }
@keyframes emo-delighted { 0%, 65%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px); } 40% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes emo-teardrop { 0%, 30% { opacity: 0; transform: translateY(-3px) scaleY(.7); } 45% { opacity: .9; } 90%, 100% { opacity: 0; transform: translateY(9px); } }
@keyframes emo-tense { 50% { transform: scaleY(.9); } }
@keyframes emo-startled { 0% { transform: scale(.65); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes emo-dozing { 50% { transform: translateY(3px) scaleY(.65); opacity: .55; } }
@keyframes emo-talk { from { transform: scaleY(1); } to { transform: scaleY(.84) translateY(2px); } }

@media (prefers-reduced-motion: reduce) {
  .emo-pupil svg { transition: none; }
  .emo-art, .emo-tear, .emo-blush, .emo-dots circle, .emo-flicker { animation: none !important; }
}