/** * cfaoi-avatar3d.css — Styles dédiés à l'avatar 3D Aria (1.1.6) * * Ce fichier reste volontairement léger : la majorité des styles vivent * dans cfaoi-popup.css (frame, anneaux, identité, glow). Ici on regroupe * uniquement les règles 100% liées à la machine à états 3D : * • z-index canvas vs fallback * • effets visuels par état (idle / thinking / talk / sleep) * • respect de prefers-reduced-motion * * Note : cfaoi-popup.css reste la référence canonique. Ce fichier est * chargé EN PLUS, après popup.css, pour éventuellement override. * * 1.1.6 — Le frame est passé d'un cercle 168×168 à un rectangle portrait * (~280×420). On supprime donc l'ancien override du pseudo ::before * (effet conic-gradient circulaire) qui n'existe plus. */ /* État 'sleep' : popup fermé/minimisé. On gèle complètement les anneaux et la pulsation pour l'économie de batterie. */ .cfaoi-pop-avatar-side[data-aria-state="sleep"] .cfaoi-pop-avatar-side-frame { animation-play-state: paused; } /* État 'idle' : explicit reset (au cas où on viendrait de sleep) */ .cfaoi-pop-avatar-side[data-aria-state="idle"] .cfaoi-pop-avatar-side-frame { animation-play-state: running; } /* Pendant le chargement des GLB, on cache l'éventuelle ombre du SVG fallback quand le canvas est prêt à apparaître. Évite un "double rendu" furtif au moment de la transition opacity. */ .cfaoi-pop-avatar-side[data-avatar3d-status="ready"] .cfaoi-pop-avatar3d-fallback-img { animation: none; } /* Le canvas Three.js a besoin d'un fond transparent (alpha:true côté JS), on le force ici au cas où un thème WordPress imposerait un background. */ canvas.cfaoi-pop-avatar3d-canvas { background: transparent !important; } /* ─── 3.13.3 — FONDU EN BAS DU CANVAS : Aria se dissout au lieu d'être coupée net ──────────────────────────────────────────────────────────── Demande de recette, capture annotée d'un trait en travers des jambes. COMMENT LES DEUX POURCENTAGES ONT ÉTÉ ÉTABLIS (et pas estimés à l'œil) : la capture fournie fait 366×512, le canvas 280×420 — impossible de convertir le trait sans calibrer. Le cadrage du module a donc été reproduit à l'identique dans Blender (caméra fov 28°, aspect 280/420, bornes genou/tête, zoom ×0,9, descente de 40 px : le canvas couvre le monde de z=0,666 à z=2,135) puis rendu à 280×420. La chemise mesure 107 px de haut dans ce rendu contre 105 dans la capture, et 112 px de large contre 114 : la capture est donc au rapport 1:1 près du canvas, décalée de 24 px vers le haut. Le trait, à y=359 dans la capture, tombe ainsi à y=387 sur 420, soit 92 % — au-dessus du genou, en bas de cuisse (z ≈ 0,78 m). 3.13.4 — LE DÉBUT DU DÉGRADÉ N'EST PAS UN CHOIX ESTHÉTIQUE, IL EST BORNÉ PAR SES MAINS. Première version : 74 % → 92 %. Refusée en recette, et la cause est mesurable : le dégradé attrapait ses DOIGTS. De la peau claire qui devient translucide sur fond sombre se remarque infiniment plus qu'un pantalon noir — ses mains paraissaient délavées, et c'est ça qui faisait « pas terrible », pas la longueur du dégradé. Le point de main le plus bas a donc été calculé sur les QUATRE clips, image par image : z = 0,951 m, soit 80,6 % du canvas (majeur droit, Attente_Appui, image 100). Le dégradé doit commencer SOUS cette valeur. Avec la fin imposée à 92 % par le trait de la recette, il ne reste que 11,6 % de marge : d'où 82 % → 93 %, qui laisse 1,4 % de garde sous les doigts. Vérifié au rendu sur l'image la plus défavorable. À savoir si les animations changent : ce 82 % dépend de la position des mains dans les clips. Une nouvelle attente aux bras plus bas exigerait de le recalculer — la fonction est dans `tools/aria2_anim_author.py`. (Au passage, le genou est à 107 % : il est HORS CADRE, on ne le voit jamais. Le trait de la recette tombe entre les doigts et le bas du canvas.) Les deux valeurs sont des variables CSS : pour remonter ou descendre la coupure, il n'y a que `--cfaoi-a3d-fondu-fin` à changer, ici même. ⚠️ Le masque est posé sur le CANVAS, pas sur le frame, pour deux raisons : le frame porte aussi l'image de repli (cadrée autrement, ces pourcentages la couperaient n'importe où), et il porte le `drop-shadow` de la respiration — appliqué au frame, il suit désormais la silhouette estompée, ce qui est exactement l'effet voulu. */ .cfaoi-pop-avatar3d-canvas { --cfaoi-a3d-fondu-debut: 82%; --cfaoi-a3d-fondu-fin: 93%; -webkit-mask-image: linear-gradient( to bottom, #000 0, #000 var(--cfaoi-a3d-fondu-debut), rgba(0, 0, 0, 0) var(--cfaoi-a3d-fondu-fin) ); mask-image: linear-gradient( to bottom, #000 0, #000 var(--cfaoi-a3d-fondu-debut), rgba(0, 0, 0, 0) var(--cfaoi-a3d-fondu-fin) ); } /* Respect de l'accessibilité — pas de mouvement spectaculaire si l'utilisateur l'a demandé. Les animations Three.js elles-mêmes continuent (ce sont des animations de personnage, pas du décor). */ @media (prefers-reduced-motion: reduce) { .cfaoi-pop-avatar-side[data-aria-state="thinking"] .cfaoi-pop-avatar-side-frame { animation: none; } } /* ─── 2.4.11 — Refonte premium aside ────────────────────────────────── En 2.4.11 on a sorti tous les effets visuels du `.cfaoi-pop-avatar-side-frame` pour les mettre sur `.cfaoi-pop-avatar-side-stage` (ombre au sol elliptique + halo ambient circulaire derrière l'avatar). Le frame lui- même ne porte plus aucun box-shadow ni filter — c'est juste un conteneur transparent pour le canvas 3D. Conséquences ici : on neutralise les anciens overrides 2.4.10 qui ajoutaient des box-shadow rectangulaires au frame selon les états. La signalétique "talk" est maintenant portée par : - le halo ambient (popup.css, .cfaoi-pop-avatar-side-stage::before quand data-speaking="true") - le dot du badge identité qui passe en cyan - l'animation de l'avatar Three.js (anim 'talk' du GLB) */ .cfaoi-pop-avatar-side[data-aria-state="talk"] .cfaoi-pop-avatar-side-frame, .cfaoi-pop-avatar-side[data-aria-state="idle"] .cfaoi-pop-avatar-side-frame, .cfaoi-pop-avatar-side[data-aria-state="thinking"] .cfaoi-pop-avatar-side-frame, .cfaoi-pop-avatar-side[data-aria-state="sleep"] .cfaoi-pop-avatar-side-frame { box-shadow: none !important; filter: none !important; transition: none; }