/* Живой робот, этап 1: базовые состояния (ТЗ «Уроки — Живой робот»). Слои приходят атрибутами data-* на .face-stack (robot.js).
   Правила ТЗ: персонаж живой даже в покое; обычные состояния мягкие; малая амплитуда; плавные переходы; только transform и opacity. */
.face-motion, .face-emote, .face-deform { width: 100%; height: 100%; display: grid; place-items: center; transform-origin: 50% 70%; }
.face-motion { will-change: transform; }
.face-stack .thought, .face-stack .waves { pointer-events: none; }

/* Парение и покачивание: покой и готовность */
@keyframes rb-float { 0%, 100% { transform: translateY(-3px) rotate(-0.6deg); } 50% { transform: translateY(3px) rotate(0.6deg); } }
@keyframes rb-sway { 0%, 100% { transform: translateY(-2px) rotate(-1.4deg); } 50% { transform: translateY(2px) rotate(1.4deg); } }
@keyframes rb-think { 0%, 100% { transform: rotate(-8deg) translateY(-1px); } 50% { transform: rotate(-11deg) translateY(1px); } }
.face-stack[data-base="idle"] .face-motion { animation: rb-float 5.4s ease-in-out infinite; }
.face-stack[data-base="ready"] .face-motion { animation: rb-sway 4.6s ease-in-out infinite; }
/* Слушает: наклон вперёд, лёгкое приближение, пульс по громкости голоса ребёнка */
.face-stack[data-base="listening"] .face-motion { transform: translateY(3px) rotate(-5deg) scale(calc(1.07 + var(--level, 0) * 0.05)); transition: transform 0.35s ease-out; }
/* Думает: задумчивый наклон, взгляд вверх */
.face-stack[data-base="thinking"] .face-motion { animation: rb-think 3.4s ease-in-out infinite; }
/* Говорит: мягкое подпружинивание в такт громкости */
.face-stack[data-base="speaking"] .face-motion { transform: translateY(calc(var(--level, 0) * -6px)) scale(calc(1 + var(--level, 0) * 0.03)); transition: transform 0.1s ease-out; }
.face-stack[data-base="muted"] .face-motion { transform: rotate(3deg) translateY(2px); transition: transform 0.4s ease; }

/* Глаза по состояниям */
.face-stack[data-base="listening"] { --es: 1.1; }
.face-stack[data-base="thinking"] { --gy: -9px; --gx: 5px; --es: 0.95; }
.face-stack[data-base="speaking"] { --es: 1.04; }

/* Точки «думаю…» */
.face-stack .td { fill: #f08a5d; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.face-stack[data-base="thinking"] .td { animation: rb-dot 1.2s ease-in-out infinite; }
.face-stack[data-base="thinking"] .t2 { animation-delay: 0.2s; }
.face-stack[data-base="thinking"] .t3 { animation-delay: 0.4s; }
@keyframes rb-dot { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* Звуковые волны по бокам, пока ребёнок говорит: чем громче, тем заметнее */
.face-stack .wave { fill: none; stroke: #f08a5d; stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity 0.25s ease; }
.face-stack[data-base="listening"] .wave { opacity: calc(0.18 + var(--level, 0) * 1.1); }
.face-stack[data-base="listening"] .wl2, .face-stack[data-base="listening"] .wr2 { opacity: calc(var(--level, 0) * 1.3); }

/* Пульсирующее свечение при речи репетитора (мягкий ореол, без красного) */
.orb::after { content: ""; position: absolute; inset: -45%; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(246 160 110 / 0.34), rgb(246 160 110 / 0)); transition: opacity 0.4s ease; }
.orb.speaking::after { opacity: calc(0.35 + var(--level, 0) * 0.65); }

/* ===== Этап 2: эмоции (слой data-emotion) ===== */
/* Лицо: глаза-дужки и формы рта появляются плавно; без эмоции их нет, остаются глаза и рот речи */
.face-stack .eh { pointer-events: none; fill: none; stroke: var(--face-ink); stroke-width: 13; stroke-linecap: round; opacity: 0; transition: opacity 0.14s; }
.face-stack .m-smile, .face-stack .m-wave { fill: none; stroke: var(--face-ink); stroke-width: 10; stroke-linecap: round; opacity: 0; transition: opacity 0.14s; }
.face-stack .m-open, .face-stack .m-o { fill: var(--face-ink); opacity: 0; transition: opacity 0.14s; transform-box: fill-box; transform-origin: 50% 40%; }
.face-stack .eye-w { transition: opacity 0.14s; }
.orb.speaking .face-stack .m-smile, .orb.speaking .face-stack .m-open, .orb.speaking .face-stack .m-o, .orb.speaking .face-stack .m-wave { opacity: 0 !important; } /* пока говорит, рот речи важнее формы эмоции */

/* Радость: глаза-дужки, широкая улыбка, прыжок, лучики поярче */
.face-stack[data-emotion="happy"] .eye-w { opacity: 0; }
.face-stack[data-emotion="happy"] .eyes-arc .eh { opacity: 1; }
.face-stack[data-emotion="happy"] .m-open { opacity: 1; }
.face-stack[data-emotion="happy"] .face-emote { animation: rb-hop 0.55s cubic-bezier(.3,.7,.4,1) 1; }
.face-stack[data-emotion="happy"] .sparks { transform: scale(1.25); }
@keyframes rb-hop { 0% { transform: translateY(0) scale(1, 1); } 22% { transform: translateY(2px) scale(1.05, 0.93); } 55% { transform: translateY(-13px) scale(0.97, 1.05); } 80% { transform: translateY(0) scale(1.04, 0.95); } 100% { transform: translateY(0) scale(1, 1); } }
/* Удивление: глаза крупнее и выше, круглый рот, короткое вытягивание и возврат */
.face-stack[data-emotion="surprised"] { --es: 1.2; --gy: -3px; }
.face-stack[data-emotion="surprised"] .m-o { opacity: 1; }
.face-stack[data-emotion="surprised"] .face-emote { animation: rb-surprise 0.5s ease-out 1; }
@keyframes rb-surprise { 0% { transform: scale(1, 1); } 25% { transform: scale(0.93, 1.13); } 60% { transform: scale(1.03, 0.98); } 100% { transform: scale(1, 1); } }
/* Подбадривает: тёплая улыбка и закрытые глаза-дужки, мягкий кивок */
.face-stack[data-emotion="encouraging"] .eye-w { opacity: 0; }
.face-stack[data-emotion="encouraging"] .eyes-arc .eh { opacity: 1; }
.face-stack[data-emotion="encouraging"] .m-smile { opacity: 1; }
.face-stack[data-emotion="encouraging"] .face-emote { animation: rb-nod 0.9s ease-in-out 1; }
@keyframes rb-nod { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(5px) rotate(4deg); } 65% { transform: translateY(1px) rotate(-3deg); } }
/* Игривость: подмигивание правым глазом, лукавая улыбка набок, наклон */
.face-stack[data-emotion="playful"] .ey.r { transform: translate(var(--gx, 0px), var(--gy, 0px)) scaleY(0.13); }
.face-stack[data-emotion="playful"] .m-smile { opacity: 1; transform: rotate(-9deg); transform-box: fill-box; transform-origin: 50% 50%; }
.face-stack[data-emotion="playful"] .face-emote { transform: rotate(5deg); transition: transform 0.25s ease; }
/* Недоумение: один глаз больше другого, волнистый рот, наклон в другую сторону */
.face-stack[data-emotion="confused"] .ey.l { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1.18); }
.face-stack[data-emotion="confused"] .ey.r { transform: translate(var(--gx, 0px), -5px) scale(0.78); }
.face-stack[data-emotion="confused"] .m-wave { opacity: 1; }
.face-stack[data-emotion="confused"] .face-emote { transform: rotate(-6deg); transition: transform 0.25s ease; }

/* ===== Этап 2: эффекты (слой data-effect) ===== */
.face-stack .sp, .face-stack .cf, .face-stack .rx { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.face-stack .sp { fill: #f6b73c; }
.face-stack .sp.s2, .face-stack .sp.s4 { fill: #f08a5d; }
.face-stack .rx { fill: none; stroke: #f08a5d; stroke-width: 6; stroke-linecap: round; }
/* Свечение: мягкий оранжевый ореол вокруг лица (не красный, без резких краёв) */
.face-stack[data-effect="glow"] .face-shell { filter: drop-shadow(0 0 12px rgb(246 150 100 / 0.85)) drop-shadow(0 0 28px rgb(246 150 100 / 0.5)); }
.face-stack .face-shell { transition: filter 0.4s ease; }
/* Искорки: четыре звёздочки вспыхивают по очереди */
.face-stack[data-effect="sparkles"] .sp { animation: rb-sparkle 1.3s ease-in-out infinite; }
.face-stack[data-effect="sparkles"] .s2 { animation-delay: 0.25s; }
.face-stack[data-effect="sparkles"] .s3 { animation-delay: 0.5s; }
.face-stack[data-effect="sparkles"] .s4 { animation-delay: 0.75s; }
@keyframes rb-sparkle { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0); } 40% { opacity: 1; transform: scale(1.7) rotate(35deg); } 70% { opacity: 0.7; transform: scale(1.3) rotate(60deg); } }
/* Конфетти: короткий праздничный залп сверху, каждый кусочек летит по своей траектории */
.face-stack[data-effect="confetti"] .cf { fill: var(--c); animation: rb-confetti 1.5s cubic-bezier(.2,.7,.4,1) var(--d) 1 both; }
@keyframes rb-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.3); } 12% { opacity: 1; transform: translate(calc(var(--dx) * 0.25), calc(var(--dy) * -0.25)) rotate(calc(var(--r) * 0.2)) scale(1.45); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.45); } }
/* Звуковые волны: пульсируют сами, не по громкости */
.face-stack[data-effect="soundWave"] .wave { opacity: 0.9; animation: rb-wave 0.9s ease-in-out infinite; }
.face-stack[data-effect="soundWave"] .wl2, .face-stack[data-effect="soundWave"] .wr2 { animation-delay: 0.2s; }
@keyframes rb-wave { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* Точки «думает…» на любом состоянии */
.face-stack[data-effect="thoughtDots"] .td { animation: rb-dot 1.2s ease-in-out infinite; }
.face-stack[data-effect="thoughtDots"] .t2 { animation-delay: 0.2s; }
.face-stack[data-effect="thoughtDots"] .t3 { animation-delay: 0.4s; }
/* Лучики: радость, идея, важный момент: пять лучей пульсируют */
.face-stack[data-effect="rays"] .rx { animation: rb-ray 0.8s ease-in-out infinite alternate; }
.face-stack[data-effect="rays"] .rx:nth-child(2) { animation-delay: 0.15s; }
.face-stack[data-effect="rays"] .rx:nth-child(3) { animation-delay: 0.3s; }
.face-stack[data-effect="rays"] .sparks { transform: scale(1.3); }
.face-stack .sparks { transition: transform 0.25s ease; transform-box: fill-box; transform-origin: 15% 85%; }
@keyframes rb-ray { from { opacity: 0.3; transform: scale(0.85); } to { opacity: 1; transform: scale(1.12); } }

/* ===== Этап 3: сильные деформации, забавные формы, комичные реакции (слой data-deform) ===== */
/* Правило ТЗ: короткие комичные акценты 0,2–0,8 с (формы и реакции до пары секунд), потом возврат к базовой форме. Включает и убирает robot.js */
.face-stack .face-shell { transition: filter 0.4s ease, opacity 0.12s; }
.face-stack .fm { fill: #fff; stroke: var(--face-ink); stroke-width: 15; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.face-stack .f-star { fill: #ffd95a; }
.face-stack .f-donut circle { fill: #f4a640; stroke: var(--face-ink); stroke-width: 15; }
.face-stack .f-donut .hole { fill: #f8f5f0; }
.face-stack:is([data-deform="heart"], [data-deform="star"], [data-deform="cloud"], [data-deform="fluff"], [data-deform="donut"], [data-deform="rocket"], [data-deform="ghost"]) .face-shell { opacity: 0; }
.face-stack[data-deform="heart"] .f-heart, .face-stack[data-deform="star"] .f-star, .face-stack[data-deform="cloud"] .f-cloud, .face-stack[data-deform="fluff"] .f-fluff,
.face-stack[data-deform="donut"] .f-donut, .face-stack[data-deform="rocket"] .f-rocket, .face-stack[data-deform="ghost"] .f-ghost { opacity: 1; }
.face-stack:is([data-deform="heart"], [data-deform="star"], [data-deform="cloud"], [data-deform="fluff"], [data-deform="donut"], [data-deform="rocket"], [data-deform="ghost"]) .face-deform { animation: rb-formpop 0.6s cubic-bezier(.3,.8,.4,1.2) 1; }
@keyframes rb-formpop { 0% { transform: scale(0.55) rotate(-10deg); } 60% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.face-stack[data-deform="heart"] { --fy: -6px; }
.face-stack[data-deform="star"] { --fy: 4px; --es: 0.9; }
.face-stack[data-deform="cloud"] { --fy: 6px; --es: 0.92; }
.face-stack[data-deform="donut"] { --fy: -36px; --es: 0.62; }
.face-stack[data-deform="rocket"] { --fy: 34px; --es: 0.8; }
.face-stack:is([data-deform="donut"], [data-deform="rocket"]) .mouth { opacity: 0 !important; }
.face-stack[data-deform="ghost"] .m-o { opacity: 1; }
.face-stack[data-deform="heart"] .eyes-arc .eh, .face-stack[data-deform="star"] .eyes-arc .eh { opacity: 1; }
.face-stack:is([data-deform="heart"], [data-deform="star"]) .eye-w { opacity: 0; }
.face-stack[data-deform="heart"] .m-smile, .face-stack[data-deform="star"] .m-smile, .face-stack[data-deform="cloud"] .m-smile { opacity: 1; }
.face-stack[data-deform="cloud"] .eyes-arc .eh { opacity: 1; }
.face-stack[data-deform="cloud"] .eye-w { opacity: 0; }

/* Деформации: только transform на слое .face-deform */
.face-stack[data-deform="stretch"] .face-deform { animation: rb-d-stretch 0.7s ease-in-out 1; }
@keyframes rb-d-stretch { 0%, 100% { transform: scale(1); } 30% { transform: scale(0.7, 1.5); } 62% { transform: scale(0.8, 1.38); } }
.face-stack[data-deform="squash"] .face-deform { animation: rb-d-squash 0.8s ease-in-out 1; }
@keyframes rb-d-squash { 0%, 100% { transform: scale(1) translateY(0); } 28% { transform: scale(1.5, 0.52) translateY(18px); } 65% { transform: scale(1.42, 0.58) translateY(16px); } }
.face-stack[data-deform="puff"] .face-deform { animation: rb-d-puff 0.7s ease-in-out 1; }
@keyframes rb-d-puff { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.38); } 62% { transform: scale(1.3); } }
.face-stack[data-deform="squeeze"] .face-deform { animation: rb-d-squeeze 0.7s ease-in-out 1; }
@keyframes rb-d-squeeze { 0%, 100% { transform: scale(1); } 28% { transform: scale(0.74); } 72% { transform: scale(0.77); } }
.face-stack[data-deform="squeeze"] .eye-w { opacity: 0; }
.face-stack[data-deform="squeeze"] .eyes-gt .eh { opacity: 1; }
.face-stack[data-deform="jelly"] .face-deform { animation: rb-d-jelly 0.85s ease-in-out 1; }
@keyframes rb-d-jelly { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16, 0.86); } 32% { transform: scale(0.88, 1.14); } 50% { transform: scale(1.1, 0.92); } 68% { transform: scale(0.95, 1.06); } 84% { transform: scale(1.03, 0.98); } }
.face-stack[data-deform="jelly"] .eye-w { opacity: 0; }
.face-stack[data-deform="jelly"] .eyes-arc .eh { opacity: 1; }
.face-stack[data-deform="jelly"] .m-open { opacity: 1; }
.face-stack[data-deform="spring"] .face-deform { animation: rb-d-spring 0.8s ease-in-out 1; }
@keyframes rb-d-spring { 0%, 100% { transform: translateY(0) scale(1); } 18% { transform: translateY(8px) scale(1.18, 0.78); } 45% { transform: translateY(-28px) scale(0.88, 1.22); } 70% { transform: translateY(0) scale(1.1, 0.88); } 85% { transform: translateY(-6px) scale(0.97, 1.04); } }
.face-stack[data-deform="melt"] .face-deform { animation: rb-d-melt 0.9s ease-in-out 1; }
@keyframes rb-d-melt { 0%, 100% { transform: scale(1) translateY(0); } 42% { transform: scale(1.38, 0.46) translateY(22px); } 78% { transform: scale(1.34, 0.5) translateY(20px); } }
.face-stack[data-deform="melt"] .eye-w { opacity: 0; }
.face-stack[data-deform="melt"] .eyes-arc .eh { opacity: 1; }
.face-stack[data-deform="melt"] .m-wave { opacity: 1; }
.face-stack[data-deform="shake"] .face-deform { animation: rb-d-shake 0.6s linear 1; }
@keyframes rb-d-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(-4px, 1px) rotate(-2deg); } 20% { transform: translate(4px, -1px) rotate(2deg); } 30% { transform: translate(-4px, 0) rotate(-2.5deg); } 40% { transform: translate(4px, 1px) rotate(2.5deg); } 50% { transform: translate(-3px, -1px) rotate(-2deg); } 60% { transform: translate(3px, 1px) rotate(2deg); } 70% { transform: translate(-2px, 0) rotate(-1deg); } 80% { transform: translate(2px, 0) rotate(1deg); } }
.face-stack[data-deform="twist"] .face-deform { animation: rb-d-twist 0.85s ease-in-out 1; }
@keyframes rb-d-twist { 0%, 100% { transform: rotate(0) skew(0, 0) scale(1); } 28% { transform: rotate(-16deg) skew(18deg, -8deg) scale(0.94); } 58% { transform: rotate(11deg) skew(-14deg, 6deg) scale(0.96); } }
.face-stack[data-deform="spin"] .face-deform { animation: rb-d-spin 0.8s cubic-bezier(.5,0,.3,1) 1; }
@keyframes rb-d-spin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } to { transform: rotate(360deg) scale(1); } }
.face-stack[data-deform="bounce"] .face-deform { animation: rb-d-bounce 0.75s ease-out 1; }
@keyframes rb-d-bounce { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(-30px) scale(0.94, 1.08); } 38% { transform: translateY(0) scale(1.12, 0.88); } 58% { transform: translateY(-11px) scale(0.98, 1.03); } 78% { transform: translateY(0) scale(1.05, 0.95); } }
.face-stack:is([data-deform="bounce"], [data-deform="spring"]) .eyes-arc .eh { opacity: 1; }
.face-stack:is([data-deform="bounce"]) .eye-w { opacity: 0; }

/* Комичные реакции */
.face-stack .eyes-gt .eh, .face-stack .eyes-xx .eh, .face-stack .eyes-spiral .eh { opacity: 0; }
.face-stack .eyes-spiral .eh { stroke-width: 6.5; }
.face-stack .ball { fill: #fff; stroke: var(--face-ink); stroke-width: 9; opacity: 0; transition: opacity 0.12s; }
.face-stack .pupil { fill: var(--face-ink); opacity: 0; transition: opacity 0.12s; }
.face-stack .tongue { fill: #f27b8f; stroke: var(--face-ink); stroke-width: 7; stroke-linejoin: round; opacity: 0; transition: opacity 0.12s; }
/* Глаза на пол-экрана: вау */
.face-stack[data-deform="bigEyes"] .eye-w { opacity: 0; }
.face-stack[data-deform="bigEyes"] .ball, .face-stack[data-deform="bigEyes"] .pupil { opacity: 1; }
.face-stack[data-deform="bigEyes"] .face-deform { animation: rb-d-bigeyes 0.9s ease-in-out 1; }
@keyframes rb-d-bigeyes { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18); } 70% { transform: scale(1.12); } }
/* Улетает от неожиданности и возвращается */
.face-stack[data-deform="flyAway"] .face-deform { animation: rb-d-fly 1.5s ease-in-out 1; }
@keyframes rb-d-fly { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 32% { transform: translate(150px, -120px) rotate(30deg) scale(0.4); opacity: 0; } 55% { transform: translate(-150px, -60px) rotate(-20deg) scale(0.4); opacity: 0; } 80% { transform: translate(8px, 6px) rotate(3deg) scale(1.06); opacity: 1; } 100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } }
/* Кружится голова */
.face-stack[data-deform="dizzy"] .eye-w { opacity: 0; }
.face-stack[data-deform="dizzy"] .eyes-spiral .eh { opacity: 1; }
.face-stack[data-deform="dizzy"] .eyes-spiral .sp-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: rb-spin-eye 0.9s linear infinite; }
@keyframes rb-spin-eye { to { transform: rotate(360deg); } }
.face-stack[data-deform="dizzy"] .face-deform { animation: rb-d-dizzy 1s ease-in-out infinite; }
@keyframes rb-d-dizzy { 0%, 100% { transform: rotate(-7deg) translateX(-3px); } 50% { transform: rotate(7deg) translateX(3px); } }
.face-stack[data-deform="dizzy"] .sparkles { transform-origin: 120px 100px; animation: rb-orbit 1.4s linear infinite; }
.face-stack[data-deform="dizzy"] .sp { opacity: 1; animation: none; }
@keyframes rb-orbit { to { transform: rotate(360deg); } }
/* Вырубился: крестики вместо глаз, язык, лёг набок */
.face-stack[data-deform="knockout"] .eye-w { opacity: 0; }
.face-stack[data-deform="knockout"] .eyes-xx .eh { opacity: 1; }
.face-stack[data-deform="knockout"] .tongue { opacity: 1; }
.face-stack[data-deform="knockout"] .mouth { opacity: 0 !important; }
.face-stack[data-deform="knockout"] .face-deform { animation: rb-d-ko 0.5s ease-out 1 both; transform: rotate(-14deg) translateY(8px); }
@keyframes rb-d-ko { from { transform: rotate(0) translateY(0); } to { transform: rotate(-14deg) translateY(8px); } }
/* Размножается: появляются полупрозрачные копии по бокам и снова сливаются */
.face-stack .cl { fill: #fff; stroke: var(--face-ink); stroke-width: 12; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.face-stack[data-deform="multiply"] .c1 { animation: rb-cl-l 1.3s ease-in-out 1; }
.face-stack[data-deform="multiply"] .c2 { animation: rb-cl-r 1.3s ease-in-out 1; }
.face-stack[data-deform="multiply"] .c3 { animation: rb-cl-u 1.3s ease-in-out 1; }
@keyframes rb-cl-l { 0%, 100% { opacity: 0; transform: translateX(0); } 40%, 65% { opacity: 0.4; transform: translateX(-52px) scale(0.9); } }
@keyframes rb-cl-r { 0%, 100% { opacity: 0; transform: translateX(0); } 40%, 65% { opacity: 0.4; transform: translateX(52px) scale(0.9); } }
@keyframes rb-cl-u { 0%, 100% { opacity: 0; transform: translateY(0); } 40%, 65% { opacity: 0.3; transform: translateY(-34px) scale(0.8); } }
.face-stack[data-deform="multiply"] .eyes-arc .eh { opacity: 1; }
.face-stack[data-deform="multiply"] .eye-w { opacity: 0; }
/* Рассыпается: лицо распадается на квадратики и собирается обратно */
.face-stack .cr { fill: #fff; stroke: var(--face-ink); stroke-width: 6; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.face-stack[data-deform="scatter"] .cr { animation: rb-crumb 1.8s ease-in-out 1; }
@keyframes rb-crumb { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.6); } 12% { opacity: 1; } 45%, 62% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); } 90% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.7); } 100% { opacity: 0; transform: translate(0, 0) scale(0.6); } }
.face-stack[data-deform="scatter"] :is(.face-shell, .ey, .mouth) { animation: rb-hide-body 1.8s ease-in-out 1; }
@keyframes rb-hide-body { 0%, 100% { opacity: 1; } 10%, 88% { opacity: 0; } }
/* Прячется (глядит из-за края) и вынырывает */
.face-stack[data-deform="hide"] { animation: rb-clip-hide 1.7s ease-in-out 1; }
.face-stack[data-deform="hide"] .face-deform { animation: rb-d-hide 1.7s ease-in-out 1; }
@keyframes rb-clip-hide { 0%, 100% { clip-path: inset(-80% -80% -80% -80%); } 18%, 82% { clip-path: inset(-80% -80% 26% -80%); } }
@keyframes rb-d-hide { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(58%); } 50% { transform: translateY(46%) rotate(4deg); } }
.face-stack[data-deform="pop"] { animation: rb-clip-pop 0.9s ease-out 1; }
.face-stack[data-deform="pop"] .face-deform { animation: rb-d-pop 0.9s cubic-bezier(.3,.8,.4,1.25) 1; }
@keyframes rb-clip-pop { 0% { clip-path: inset(-80% -80% 26% -80%); } 70%, 100% { clip-path: inset(-80% -80% -80% -80%); } }
@keyframes rb-d-pop { 0% { transform: translateY(58%); } 100% { transform: translateY(0); } }

/* ===== Этап 4: тематические превращения (слой data-transform) ===== */
/* Правило ТЗ: превращение временное и помогает объяснению; после короткой сценки робот возвращается к базовой форме. Предметы нарисованы вокруг лица, лицо чуть уменьшается, чтобы они поместились */
.face-stack .tf { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 0.18s ease; }
.face-stack .face-svg { transition: transform 0.3s cubic-bezier(.3,.8,.4,1.1); }
.face-stack[data-transform] .face-svg { transform: scale(var(--tfs, 0.8)) translateY(var(--tfy, -4px)); }
/* Масштаб лица под размер предмета: большие предметы (лампочка, облачко, лупа) требуют лицо поменьше */
.face-stack[data-transform="bulb"] { --tfs: 0.62; --tfy: 12px; }
.face-stack[data-transform="thought"] { --tfs: 0.7; --tfy: 4px; }
.face-stack[data-transform="magnifier"], .face-stack[data-transform="microphone"], .face-stack[data-transform="flask"], .face-stack[data-transform="astronaut"] { --tfs: 0.74; }
.face-stack[data-transform="numbers"], .face-stack[data-transform="shapes"] { --tfs: 0.72; --tfy: 8px; }
.face-stack[data-transform="king"], .face-stack[data-transform="scientist"], .face-stack[data-transform="knight"], .face-stack[data-transform="detective"], .face-stack[data-transform="chef"] { --tfs: 0.8; --tfy: 10px; }
.face-stack[data-transform="book"] .tf-book,
.face-stack[data-transform="bulb"] .tf-bulb,
.face-stack[data-transform="magnifier"] .tf-magnifier,
.face-stack[data-transform="microphone"] .tf-mic,
.face-stack[data-transform="numbers"] .tf-numbers,
.face-stack[data-transform="shapes"] .tf-shapes,
.face-stack[data-transform="board"] .tf-board,
.face-stack[data-transform="thought"] .tf-thought,
.face-stack[data-transform="hint"] .tf-hint,
.face-stack[data-transform="headphones"] .tf-headphones,
.face-stack[data-transform="flask"] .tf-flask,
.face-stack[data-transform="ruler"] .tf-ruler,
.face-stack[data-transform="scientist"] .tf-scientist,
.face-stack[data-transform="knight"] .tf-knight,
.face-stack[data-transform="detective"] .tf-detective,
.face-stack[data-transform="chef"] .tf-chef,
.face-stack[data-transform="astronaut"] .tf-astronaut,
.face-stack[data-transform="pirate"] .tf-pirate,
.face-stack[data-transform="superhero"] .tf-superhero, .face-stack[data-transform="superhero"] .tf-hero,
.face-stack[data-transform="king"] .tf-king { opacity: 1; animation: rb-tf-in 0.5s cubic-bezier(.3,.8,.4,1.25) both; }
@keyframes rb-tf-in { from { opacity: 0; transform: scale(0.45) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.face-stack .bulb-glass { fill: #ffeab0; stroke: #f0a030; stroke-width: 10; }
.face-stack .bulb-rays line { stroke: #f0a030; stroke-width: 8; stroke-linecap: round; }
.face-stack[data-transform="bulb"] .bulb-rays { animation: rb-pulse 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes rb-pulse { from { opacity: 0.45; transform: scale(0.95); } to { opacity: 1; transform: scale(1.04); } }
.face-stack .bulb-base { fill: #d98a3d; stroke: #8d5a22; stroke-width: 5; }
.face-stack .cloud-big, .face-stack .cloud-dot { fill: #fff3e6; stroke: #f2a566; stroke-width: 9; stroke-linejoin: round; }
.face-stack .book-pages { fill: #f6c58b; stroke: #e8892f; stroke-width: 8; stroke-linejoin: round; }
.face-stack .book-mid { stroke: #e8892f; stroke-width: 7; }
.face-stack .book-lines { stroke: #e8892f; stroke-width: 4; stroke-linecap: round; fill: none; opacity: 0.7; }
.face-stack .mic-arc { fill: none; stroke: #e8662d; stroke-width: 15; stroke-linecap: round; }
.face-stack .mic-stand { stroke: #e8662d; stroke-width: 12; stroke-linecap: round; }
.face-stack .mic-base { fill: #e8662d; }
.face-stack .mic-wave { fill: none; stroke: #f2a566; stroke-width: 7; stroke-linecap: round; }
.face-stack[data-transform="microphone"] .mic-wave { animation: rb-wave 0.9s ease-in-out infinite; }
.face-stack .num { font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 52px; fill: #f08a5d; stroke: #c75a2c; stroke-width: 2.5; paint-order: stroke; text-anchor: middle; }
.face-stack[data-transform="numbers"] .num { animation: rb-num 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 80%; }
.face-stack[data-transform="numbers"] .n2 { animation-delay: 0.18s; }
.face-stack[data-transform="numbers"] .n3 { animation-delay: 0.36s; }
@keyframes rb-num { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.face-stack .shp { fill: #ffe6d3; stroke: #f08a5d; stroke-width: 8; stroke-linejoin: round; }
.face-stack[data-transform="shapes"] .shp { animation: rb-num 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.face-stack .flask-body { fill: #e9f7ee; stroke: #3f9a62; stroke-width: 8; stroke-linejoin: round; }
.face-stack .flask-liquid { fill: #7fd6a0; }
.face-stack .bubble { fill: #fff; stroke: #3f9a62; stroke-width: 4; }
.face-stack[data-transform="flask"] .bubble { animation: rb-bubble 1.2s ease-in infinite; }
@keyframes rb-bubble { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.face-stack .ruler-body { fill: #f9c783; stroke: #e8892f; stroke-width: 8; stroke-linejoin: round; }
.face-stack .ruler-ticks { stroke: #c46a1a; stroke-width: 5; stroke-linecap: round; }
.face-stack .cape { fill: #f08a5d; stroke: #c75a2c; stroke-width: 6; stroke-linejoin: round; }
.face-stack .lupa-glass { fill: rgb(255 255 255 / 0.16); }
.face-stack .lupa-ring { fill: none; stroke: #f08a5d; stroke-width: 16; }
.face-stack .lupa-handle { stroke: #e08a42; stroke-width: 24; stroke-linecap: round; }
.face-stack .lupa-handle-cap { stroke: #a85a1c; stroke-width: 24; stroke-linecap: round; }
.face-stack .chalk-frame { fill: #c68642; stroke: #9a6428; stroke-width: 5; }
.face-stack .chalk-face { fill: #2f6b4f; }
.face-stack .chalk-text { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 34px; fill: #fff; text-anchor: middle; }
.face-stack .hint-card { fill: #fff3e6; stroke: #f08a5d; stroke-width: 9; }
.face-stack .hint-lines { stroke: #f08a5d; stroke-width: 8; stroke-linecap: round; }
.face-stack .hp-band { fill: none; stroke: #f08a5d; stroke-width: 15; stroke-linecap: round; }
.face-stack .hp-cup { fill: #f08a5d; stroke: #c75a2c; stroke-width: 5; }
.face-stack .hp-wave { fill: none; stroke: #59b7a0; stroke-width: 7; stroke-linecap: round; }
.face-stack[data-transform="headphones"] .hp-wave { animation: rb-wave 0.9s ease-in-out infinite; }
.face-stack .cap-top { fill: #3b3a44; stroke: var(--face-ink); stroke-width: 6; stroke-linejoin: round; }
.face-stack .cap-base { fill: #4a4955; stroke: var(--face-ink); stroke-width: 6; stroke-linejoin: round; }
.face-stack .cap-tassel { stroke: #f6b73c; stroke-width: 6; stroke-linecap: round; fill: none; }
.face-stack .cap-knob { fill: #f6b73c; }
.face-stack .helm { fill: #cfd2d9; stroke: var(--face-ink); stroke-width: 8; stroke-linejoin: round; }
.face-stack .helm-visor { fill: none; stroke: var(--face-ink); stroke-width: 6; stroke-linecap: round; }
.face-stack .helm-plume { fill: #e86a8b; stroke: var(--face-ink); stroke-width: 5; stroke-linejoin: round; }
.face-stack .hat-brim { fill: #a8743f; stroke: var(--face-ink); stroke-width: 6; }
.face-stack .hat-top { fill: #b9834a; stroke: var(--face-ink); stroke-width: 6; stroke-linejoin: round; }
.face-stack .hat-band { fill: none; stroke: #5b3a1d; stroke-width: 8; }
.face-stack .lupa-sm { fill: rgb(255 255 255 / 0.35); stroke: #e8892f; stroke-width: 9; }
.face-stack .lupa-sm-h { stroke: #c46a1a; stroke-width: 12; stroke-linecap: round; }
.face-stack .chef-hat { fill: #fff; stroke: var(--face-ink); stroke-width: 7; stroke-linejoin: round; }
.face-stack .chef-band { stroke: var(--face-ink); stroke-width: 6; }
.face-stack .spatula { stroke: #c9ccd3; stroke-width: 8; stroke-linecap: round; }
.face-stack .spatula-head { fill: #e8892f; stroke: var(--face-ink); stroke-width: 5; }
.face-stack .helmet-glass { fill: rgb(180 210 245 / 0.26); }
.face-stack .helmet-rim { fill: none; stroke: #d7dbe3; stroke-width: 18; }
.face-stack .helmet-shine { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; opacity: 0.85; }
.face-stack .helmet-collar { fill: #d7dbe3; stroke: var(--face-ink); stroke-width: 6; }
.face-stack .bandana { fill: #f08a5d; stroke: var(--face-ink); stroke-width: 6; stroke-linejoin: round; }
.face-stack .bandana-knot { fill: #f08a5d; stroke: var(--face-ink); stroke-width: 5; stroke-linejoin: round; }
.face-stack .patch { fill: var(--face-ink); }
.face-stack .patch-strap { fill: none; stroke: var(--face-ink); stroke-width: 6; stroke-linecap: round; }
.face-stack .mask { fill: #2b3150; stroke: var(--face-ink); stroke-width: 5; stroke-linejoin: round; }
.face-stack .crown { fill: #ffd54a; stroke: var(--face-ink); stroke-width: 7; stroke-linejoin: round; }
.face-stack .gem { stroke: var(--face-ink); stroke-width: 3; }
.face-stack .gem.g1 { fill: #e8556f; } .face-stack .gem.g2 { fill: #4aa3e8; } .face-stack .gem.g3 { fill: #5ac087; }

/* Спокойный вариант: системная настройка или data-reduce на странице витрины */
@media (prefers-reduced-motion: reduce) {
  .face-motion, .face-emote, .face-stack .td, .face-stack .wave, .face-stack .sp, .face-stack .rx { animation: none !important; transition: none !important; }
  .face-stack .cf, .face-stack .cl, .face-stack .cr { display: none; }
  .face-stack .tf, .face-stack .tf * { animation: none !important; }
  .face-deform, .face-stack[data-deform] { animation: none !important; }
  .face-stack[data-deform] .sparkles, .face-stack[data-deform] :is(.sp-eye, .face-shell, .ey, .mouth) { animation: none !important; }
  .face-stack[data-base="listening"] .face-motion, .face-stack[data-base="thinking"] .face-motion { transform: rotate(-4deg); }
}
body[data-reduce] .face-motion, body[data-reduce] .face-emote, body[data-reduce] .face-stack .td, body[data-reduce] .face-stack .sp, body[data-reduce] .face-stack .rx { animation: none !important; }
body[data-reduce] .face-stack :is(.cf, .cl, .cr) { display: none; }
body[data-reduce] .face-stack .tf, body[data-reduce] .face-stack .tf * { animation: none !important; }
body[data-reduce] .face-deform, body[data-reduce] .face-stack[data-deform] { animation: none !important; }

/* Тык в глаз ловит только невидимая зона .hit: слои лица (зрачки, блики, веки) поверх глаз не должны перехватывать нажатие */
.face-stack .face-svg *:not(.hit) { pointer-events: none; }