/* Hero: culori, expresii, poze si miscari. Totul se schimba prin atributele data-* ale containerului. */

.hero { --hh: var(--hero-h); position: relative; height: var(--hh); width: calc(var(--hh) * 0.8264); flex: none; transition: opacity 0.35s; }
.prop:not([data-kind=""]):not([data-kind="steps"]) + .hero { --hh: calc(var(--hero-h) * 0.9); }
.prop[data-kind="steps"] + .hero { --hh: calc(var(--hero-h) * 0.84); margin-bottom: 9vh; }
.hero-svg { width: 100%; height: 100%; overflow: visible; display: block; transform-origin: 50% 92%; transition: filter 0.7s ease; }

.h-body { fill: #2ec4b6; } .h-belly { fill: #cdf6ef; }
.h-star { fill: #ffd23f; stroke: #ffd23f; stroke-width: 6; stroke-linejoin: round; }
.h-cape { fill: #ff6b5e; } .h-leg ellipse { fill: #17786f; }
.h-arm path { fill: none; stroke: #23ada0; stroke-width: 30; stroke-linecap: round; } .h-arm circle { fill: #23ada0; }
.h-mask { fill: #17786f; } .h-eye { fill: #fff; } .h-pupil { fill: #1f2340; } .h-glint { fill: #fff; }
.h-lids path { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.h-cheek { fill: #ff9aa5; }
.h-tuft { fill: none; stroke: #17786f; stroke-width: 9; stroke-linecap: round; }
.h-shadow { fill: rgba(31, 35, 64, 0.14); transition: opacity 0.4s; }
.h-pedestal { opacity: 0; transition: opacity 0.5s; } .h-pedestal rect { fill: #c9ced8; } .h-pedestal rect + rect { fill: #e1e5ec; }
.m-smile, .m-calm { fill: none; stroke: #1f2340; stroke-width: 8; stroke-linecap: round; }
.m-open ellipse, .m-o { fill: #1f2340; } .m-open .h-tongue { fill: #ff7b8b; }

/* urechi si accesorii pentru animale */
.h-ears, .h-feather, .h-whiskers { display: none; }
.h-ears-bunny ellipse { fill: #fbf5ea; } .h-ears-bunny .inner { fill: #ffb3c1; }
.h-ears-bear circle { fill: #9c6b43; } .h-ears-bear .inner { fill: #dcae7e; }
.h-ears-cat path { fill: #f6a04d; stroke: #f6a04d; stroke-width: 10; stroke-linejoin: round; } .h-ears-cat .inner { fill: #ffd3ad; stroke: #ffd3ad; stroke-width: 4; }
.h-feather path { fill: #ff8fb1; }
.h-whiskers path { stroke: #1f2340; stroke-width: 4; stroke-linecap: round; }
.hero[data-ears="bunny"] .h-ears-bunny, .hero[data-ears="bear"] .h-ears-bear, .hero[data-ears="cat"] .h-ears-cat,
.hero[data-ears="cat"] .h-whiskers, .hero[data-ears="feather"] .h-feather { display: block; }
.hero[data-ears="feather"] .h-tuft, .hero[data-ears="bunny"] .h-tuft { display: none; }

/* expresii */
.h-mouth { opacity: 0; } .m-smile { opacity: 1; } .h-lids { opacity: 0; }
.hero[data-mood="calm"] .h-eyes, .hero[data-mood="blow"] .h-eyes { opacity: 0; }
.hero[data-mood="calm"] .h-lids, .hero[data-mood="blow"] .h-lids { opacity: 1; }
.hero[data-mood="calm"] .m-smile, .hero[data-mood="blow"] .m-smile, .hero[data-mood="wow"] .m-smile { opacity: 0; }
.hero[data-mood="calm"] .m-calm, .hero[data-mood="blow"] .m-o, .hero[data-mood="wow"] .m-open { opacity: 1; }
/* gura sincronizata cu vocea */
.m-dyn { opacity: 0; } .m-dyn-hole { fill: #1f2340; } .m-dyn-tongue { fill: #ff7b8b; opacity: 0; }
.hero.speaking .h-mouth { opacity: 0 !important; animation: none !important; }
.hero.speaking .m-dyn { opacity: 1; }
.hero.speaking.mouth-shut .m-dyn { opacity: 0; }
.hero.speaking.mouth-shut .m-smile { opacity: 1 !important; }

/* privirea */
.h-pupil, .h-glint { transition: transform 0.28s cubic-bezier(0.3, 1.3, 0.5, 1); }
.hero[data-look="left"] .h-pupil, .hero[data-look="left"] .h-glint { transform: translate(-9px, 1px); }
.hero[data-look="right"] .h-pupil, .hero[data-look="right"] .h-glint { transform: translate(7px, 1px); }
.hero[data-look="up"] .h-pupil, .hero[data-look="up"] .h-glint { transform: translate(0, -8px); }
.hero[data-look="down"] .h-pupil, .hero[data-look="down"] .h-glint { transform: translate(0, 7px); }

.hero.talking .m-calm, .hero.talking .m-o { opacity: 0; }
.hero.talking .m-smile { opacity: 1; animation: talk-a 0.34s steps(1) infinite; }
.hero.talking .m-open { animation: talk-b 0.34s steps(1) infinite; }
@keyframes talk-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes talk-b { 0% { opacity: 0; } 50% { opacity: 1; } }

/* miscari de baza */
.h-all { transform-origin: 200px 430px; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.h-eyes { transform-origin: 200px 206px; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.08); } }
.h-cape { transform-origin: 200px 200px; animation: cape 3.2s ease-in-out infinite; }
@keyframes cape { 50% { transform: skewX(-2.5deg) scaleX(1.03); } }
.h-armL { transform-origin: 82px 250px; } .h-armR { transform-origin: 318px 250px; }
.h-arm { transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.h-leg { transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.5, 1); }

/* poze */
.hero[data-pose="hidden"] { opacity: 0; }
.hero[data-pose="pop"] .hero-svg { animation: pop 0.75s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes pop { 0% { transform: translateY(36%) scale(0.3); opacity: 0; } 100% { transform: none; opacity: 1; } }

.hero[data-pose="wave"] .h-armR { animation: wave 0.5s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-130deg); } to { transform: rotate(-98deg); } }

.hero[data-pose="up"] .h-armL, .hero[data-pose="cheer"] .h-armL { transform: rotate(125deg); }
.hero[data-pose="up"] .h-armR, .hero[data-pose="cheer"] .h-armR { transform: rotate(-125deg); }
.hero[data-pose="cheer"] .h-all { animation: hop 0.5s ease-out 2; }

.hero[data-pose="belly"] .h-armL { transform: rotate(-58deg); }
.hero[data-pose="belly"] .h-armR { transform: rotate(58deg); }
.hero[data-pose="belly"] .hero-svg { transform: scale(calc(1 + var(--breath, 0) * 0.045)); }
.hero[data-pose="belly"] .h-all { animation: none; }

.hero[data-pose="statue"] .h-armL { transform: rotate(128deg); }
.hero[data-pose="statue"] .h-armR { transform: rotate(38deg); }
.hero[data-pose="statue2"] .h-armL { transform: rotate(104deg); }
.hero[data-pose="statue2"] .h-armR { transform: rotate(-104deg); }

.hero[data-pose="shake"] .h-armL { animation: shake-l 0.2s ease-in-out infinite alternate; }
.hero[data-pose="shake"] .h-armR { animation: shake-r 0.2s ease-in-out infinite alternate; }
.hero[data-pose="shake"] .h-all { animation: wiggle 0.24s ease-in-out infinite alternate; }
@keyframes shake-l { from { transform: rotate(58deg); } to { transform: rotate(96deg); } }
@keyframes shake-r { from { transform: rotate(-96deg); } to { transform: rotate(-58deg); } }
@keyframes wiggle { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

.hero[data-pose="bear"] .h-armL { transform: rotate(26deg); } .hero[data-pose="bear"] .h-armR { transform: rotate(-26deg); }
.hero[data-pose="bear"] .h-all { animation: stomp 1.43s ease-in-out infinite; }
.hero[data-pose="bear"] .h-legL { animation: lift 1.43s ease-in-out infinite; }
.hero[data-pose="bear"] .h-legR { animation: lift 1.43s ease-in-out infinite -0.715s; }
@keyframes stomp { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes lift { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-18px); } }

.hero[data-pose="bunny"] .h-armL { transform: rotate(-36deg); } .hero[data-pose="bunny"] .h-armR { transform: rotate(36deg); }
.hero[data-pose="bunny"] .h-all { animation: hop 0.455s ease-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scaleY(0.97); } 45% { transform: translateY(-40px) scaleY(1.03); } }

.hero[data-pose="flamingo"] .h-armL, .hero[data-pose="flamingo2"] .h-armL { transform: rotate(69deg); }
.hero[data-pose="flamingo"] .h-armR, .hero[data-pose="flamingo2"] .h-armR { transform: rotate(-69deg); }
.hero[data-pose="flamingo"] .h-legR { transform: translate(-26px, -66px); }
.hero[data-pose="flamingo2"] .h-legL { transform: translate(26px, -66px); }
.hero[data-pose="flamingo"] .h-all, .hero[data-pose="flamingo2"] .h-all { animation: sway 2.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

.hero[data-pose="cat"] .h-armL { transform: rotate(142deg); } .hero[data-pose="cat"] .h-armR { transform: rotate(-142deg); }
.hero[data-pose="cat"] .h-all { animation: stretch 2.8s ease-in-out infinite; }
@keyframes stretch { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.07) scaleX(0.97); } }

/* asculta: mana la ureche; hand: o mana sus („am auzit!”) */
.hero[data-pose="listen"] .h-armR { transform: rotate(-146deg); }
.hero[data-pose="listen"] .h-all { animation: sway 5s ease-in-out infinite; }
.hero[data-pose="hand"] .h-armR { transform: rotate(-128deg); }

.hero[data-pose="tiptoe"] .h-all { animation: tiptoe 1s ease-in-out infinite; }
@keyframes tiptoe { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }

.hero[data-pose="dance"] .h-all { animation: groove 1.11s ease-in-out infinite; }
.hero[data-pose="dance"] .h-armL { animation: groove-l 1.11s ease-in-out infinite; }
.hero[data-pose="dance"] .h-armR { animation: groove-r 1.11s ease-in-out infinite; }
@keyframes groove { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes groove-l { 0%, 100% { transform: rotate(80deg); } 50% { transform: rotate(20deg); } }
@keyframes groove-r { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(-80deg); } }

/* statuie: piatra, soclu, nicio miscare */
.hero[data-stone="1"] .hero-svg { filter: grayscale(1) brightness(1.08) contrast(0.9); }
.hero[data-stone="1"] .h-pedestal { opacity: 1; } .hero[data-stone="1"] .h-shadow, .hero[data-stone="1"] .h-cheek { opacity: 0; }
.hero[data-stone="1"] .h-all, .hero[data-stone="1"] .h-eyes, .hero[data-stone="1"] .h-cape { animation: none; }

/* inelul de timp din jurul lui Hero */
.hero-ring { position: absolute; left: 50%; top: 47%; height: 124%; width: 150%; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0; transition: opacity 0.4s; pointer-events: none; color: var(--coral); }
.hero.has-ring .hero-ring { opacity: 1; }
.ring-track { fill: none; stroke: currentColor; stroke-width: 2.4; opacity: 0.22; }
.ring-bar { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.stage[data-theme="stone"] .hero-ring { color: #fff; }

/* animatii linistite */
.calm .h-all, .calm .h-cape, .calm .h-leg, .calm .h-arm { animation: none !important; }
.calm .hero[data-pose="wave"] .h-armR { transform: rotate(-114deg); }
.calm .hero[data-pose="shake"] .h-armL { transform: rotate(76deg); } .calm .hero[data-pose="shake"] .h-armR { transform: rotate(-76deg); }
.calm .hero[data-pose="dance"] .h-armL { transform: rotate(50deg); } .calm .hero[data-pose="dance"] .h-armR { transform: rotate(-50deg); }
.calm .hero[data-pose="pop"] .hero-svg { animation: none; }