/*
 * Smile — smileys animés Codex et Claude (piste C « Rangement serein »)
 * Géométrie identique au master logo/smile-symbol-*.svg, en traits pour pouvoir l'animer.
 * Visages (attribut data-face sur le <svg>) :
 *   codex   blanc (currentColor), yeux en tirets : le smiley d'origine
 *   claude  orange Claude, yeux ronds ; ses yeux deviennent des étincelles quand il réfléchit
 * États (attribut data-state sur le <svg>) :
 *   idle  repos      respiration lente + clignement (Claude : clin d'œil étincelle)
 *   work  en cours   une conversation travaille : Codex lit (yeux qui balaient, points qui défilent),
 *                    Claude réfléchit (étincelles qui tournent, bouche qui ondule, tête qui penche)
 *   sync  synchro    les deux rangées glissent et fusionnent (lecture, tri ou synchro de Smile)
 *   wait  à valider  la bouche devient plate, les yeux pulsent
 *   ok    terminé    yeux « ^^ », grand sourire, petit saut
 * Changer de visage joue un demi-tour (classe sm-swap posée par SmileMark.face).
 * Les transitions de forme utilisent la propriété CSS `d` (Chromium / Electron).
 */
.smile-mark { display: block; width: 100%; height: 100%; overflow: visible; color: inherit; transition: color .35s ease; }
.smile-mark[data-face="claude"] { color: var(--smile-claude, #d97757); }
.smile-mark .sm-flip, .smile-mark .sm-body { transform-box: view-box; transform-origin: 128px 128px; }
.smile-mark path { fill: none; stroke: currentColor; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.smile-mark .sm-eye { transform-box: fill-box; transform-origin: center;
  transition: d .45s cubic-bezier(.34, 1.56, .64, 1), stroke-width .3s, opacity .25s, transform .3s; }
.smile-mark .sm-mouth { transition: d .5s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.smile-mark .sm-spark { stroke-width: 18; transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.smile-mark .sm-dot { stroke-width: 32; transform-box: fill-box; transform-origin: center; opacity: 0; transition: opacity .2s; }

/* visage Codex (par défaut) */
.smile-mark .sm-eye-l { d: path("M72 86 C82.67 86 93.33 86 104 86"); }
.smile-mark .sm-eye-r { d: path("M152 86 C162.67 86 173.33 86 184 86"); }
.smile-mark .sm-mouth { d: path("M64 138 C93.2 186 162.8 186 192 138"); }

/* visage Claude : yeux ronds, sourire un peu plus creusé */
.smile-mark[data-face="claude"] .sm-eye { stroke-width: 38; }
.smile-mark[data-face="claude"] .sm-eye-l { d: path("M86 88 C87.33 88 88.67 88 90 88"); }
.smile-mark[data-face="claude"] .sm-eye-r { d: path("M166 88 C167.33 88 168.67 88 170 88"); }
.smile-mark[data-face="claude"] .sm-mouth { d: path("M68 136 C94 192 162 192 188 136"); }

/* changement de visage */
.smile-mark.sm-swap .sm-flip { animation: sm-flip .5s cubic-bezier(.65, 0, .35, 1); }

/* repos */
.smile-mark[data-state="idle"] .sm-body { animation: sm-breathe 4.2s ease-in-out infinite; }
.smile-mark[data-face="codex"][data-state="idle"] .sm-eye { animation: sm-blink 5.2s infinite; }
.smile-mark[data-face="claude"][data-state="idle"] .sm-eye-l { animation: sm-blink 6.4s infinite; }
.smile-mark[data-face="claude"][data-state="idle"] .sm-eye-r { animation: sm-wink 6.4s infinite; }
.smile-mark[data-face="claude"][data-state="idle"] .sm-spark-r { animation: sm-twinkle 6.4s infinite; }

/* en cours — Codex lit */
.smile-mark[data-face="codex"][data-state="work"] .sm-eye { animation: sm-scan 2.4s ease-in-out infinite; }
.smile-mark[data-face="codex"][data-state="work"] .sm-mouth { d: path("M96 152 C106.67 152 149.33 152 160 152"); opacity: 0; }
.smile-mark[data-face="codex"][data-state="work"] .sm-dot { opacity: 1; animation: sm-type 1.2s ease-in-out infinite; }
.smile-mark[data-face="codex"][data-state="work"] .sm-dot-2 { animation-delay: .15s; }
.smile-mark[data-face="codex"][data-state="work"] .sm-dot-3 { animation-delay: .3s; }

/* en cours — Claude réfléchit */
.smile-mark[data-face="claude"][data-state="work"] .sm-body { animation: sm-tilt 3.2s ease-in-out infinite; }
.smile-mark[data-face="claude"][data-state="work"] .sm-eye { opacity: 0; transform: scale(.4); }
.smile-mark[data-face="claude"][data-state="work"] .sm-spark { opacity: 1; transform: scale(1); animation: sm-spin 2.4s linear infinite; }
.smile-mark[data-face="claude"][data-state="work"] .sm-spark-r { animation-delay: -1.2s; }
.smile-mark[data-face="claude"][data-state="work"] .sm-mouth { animation: sm-ponder 1.6s ease-in-out infinite alternate; }

/* synchro */
.smile-mark[data-state="sync"] .sm-eye-l { animation: sm-merge-l 1.9s cubic-bezier(.65, 0, .35, 1) infinite; }
.smile-mark[data-state="sync"] .sm-eye-r { animation: sm-merge-r 1.9s cubic-bezier(.65, 0, .35, 1) infinite; }

/* à valider */
.smile-mark[data-state="wait"] .sm-mouth { d: path("M72 152 C90.7 152 165.3 152 184 152"); }
.smile-mark[data-state="wait"] .sm-eye { animation: sm-pulse 1.3s ease-in-out infinite; }
.smile-mark[data-state="wait"] .sm-body { animation: sm-breathe 1.3s ease-in-out infinite; }

/* terminé */
.smile-mark[data-state="ok"] .sm-eye { stroke-width: 32; }
.smile-mark[data-state="ok"] .sm-eye-l { d: path("M72 94 C79 70 97 70 104 94"); }
.smile-mark[data-state="ok"] .sm-eye-r { d: path("M152 94 C159 70 177 70 184 94"); }
.smile-mark[data-state="ok"] .sm-mouth { d: path("M56 132 C86 196 170 196 200 132"); }
.smile-mark[data-state="ok"] .sm-body { animation: sm-hop .9s cubic-bezier(.65, 0, .35, 1) both; }

@keyframes sm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes sm-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.45); } 97% { transform: scaleY(1); } }
@keyframes sm-wink { 0%, 76%, 100% { opacity: 1; } 79%, 89% { opacity: 0; } 92% { opacity: 1; } }
@keyframes sm-twinkle { 0%, 76%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  80% { opacity: 1; transform: scale(1.1) rotate(40deg); } 88% { opacity: 1; transform: scale(.9) rotate(120deg); }
  92% { opacity: 0; transform: scale(0) rotate(160deg); } }
@keyframes sm-flip { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(.06); } }
@keyframes sm-scan { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-12px); } 70% { transform: translateX(12px); } }
@keyframes sm-type { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-18px); opacity: 1; } }
@keyframes sm-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sm-spin { 0% { transform: rotate(0deg) scale(.85); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(.85); } }
@keyframes sm-ponder { from { d: path("M84 152 C104 136 152 168 172 152"); } to { d: path("M84 152 C104 168 152 136 172 152"); } }
@keyframes sm-merge-l { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(40px); } }
@keyframes sm-merge-r { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(-40px); } }
@keyframes sm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes sm-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 60% { transform: translateY(0); }
  78% { transform: translateY(-5px); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .smile-mark *, .smile-mark { animation: none !important; transition: none !important; }
}