/* The living home banner (src/lib/home-hero.js): everything moves gently, nothing flickers. */
.hh{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);background:#4cc9f0}
.hh .hh-scene{display:block;width:100%;height:auto}
.hh-scene .hh-student,.hh-scene .hh-star,.hh-scene .hh-glow,.hh-scene .hh-spark,.hh-scene .hh-idea,.hh-scene .hh-page,.hh-scene .hh-arrow,.hh-scene .hh-beam,.hh-scene .hh-bubble{transform-box:fill-box;transform-origin:center}

/* the student rises and settles, as if carried by the light */
.hh-student{animation:hhFloat 5s ease-in-out infinite}
@keyframes hhFloat{50%{transform:translateY(-14px)}}
.hh-beam{animation:hhBeam 3.2s ease-in-out infinite}
@keyframes hhBeam{50%{opacity:.6}}
/* the star breathes and turns; the glow swells */
.hh-star{animation:hhStar 3.6s ease-in-out infinite}
@keyframes hhStar{50%{transform:scale(1.14) rotate(12deg)}}
.hh-glow{animation:hhGlow 3.6s ease-in-out infinite}
@keyframes hhGlow{50%{transform:scale(1.35);opacity:.8}}
.hh-spark{animation:hhTwinkle 2.2s ease-in-out infinite}
@keyframes hhTwinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(25deg)}}
/* ideas orbit and bob; the links pulse toward the student like thought */
.hh-idea{animation:hhBob 4.4s ease-in-out infinite}
@keyframes hhBob{33%{transform:translate(4px,-10px)}66%{transform:translate(-5px,-4px)}}
.hh-link{animation:hhFlow 1.6s linear infinite}
@keyframes hhFlow{to{stroke-dashoffset:-24}}
/* pages and arrows keep rising out of the book */
.hh-page{animation:hhPage 6.8s ease-out infinite}
@keyframes hhPage{0%{opacity:0;transform:translateY(40px)}12%{opacity:.95}85%{opacity:.9}100%{opacity:0;transform:translateY(-90px) rotate(10deg)}}
.hh-arrow{animation:hhArrow 1.8s ease-out infinite}
@keyframes hhArrow{0%{opacity:0;transform:translateY(22px)}40%{opacity:.85}100%{opacity:0;transform:translateY(-26px)}}
/* the speech bubble swaps lines with a soft fade */
.hh-bubble{transition:opacity .35s,transform .35s}
.hh-bubble.swap{opacity:0;transform:translateY(6px)}

/* ---- Guru, alive: breathing, blinking, and talking with the lips moving ---- */
.hh-guru *{transform-box:view-box}
.hh-guru .g-body{transform-origin:130px 300px;animation:hhBreathe 4.2s ease-in-out infinite}
@keyframes hhBreathe{50%{transform:translateY(-2.5px) scale(1.006)}}
.hh-guru .g-head{transform-origin:130px 190px;animation:hhSway 7s ease-in-out infinite;transition:transform .5s}
@keyframes hhSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.hh-guru .g-eyes{transform-origin:130px 112px;animation:hhBlink 4.6s infinite}
@keyframes hhBlink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
.hh-guru .g-halo{transform-origin:130px 112px;animation:hhHalo 5s ease-in-out infinite}
@keyframes hhHalo{50%{opacity:.75;transform:scale(1.04)}}
.hh-guru .g-star{transform-origin:130px 28px;animation:hhGStar 3.2s ease-in-out infinite}
@keyframes hhGStar{50%{transform:scale(1.12) rotate(14deg)}}
.hh-guru .g-arm{transform-origin:176px 216px;transition:transform .6s}
.hh-guru .g-brows{transition:transform .3s}
.hh-guru .g-beard{transform-origin:130px 150px;transition:transform .08s}
.hh-guru .m{display:none}.hh-guru .m-rest{display:inline}
.hh-guru[data-v=a] .m-rest,.hh-guru[data-v=o] .m-rest,.hh-guru[data-v=e] .m-rest,.hh-guru[data-v=m] .m-rest{display:none}
.hh-guru[data-v=a] .m-a,.hh-guru[data-v=o] .m-o,.hh-guru[data-v=e] .m-e,.hh-guru[data-v=m] .m-m{display:inline}
.hh-guru[data-v=a] .g-beard,.hh-guru[data-v=o] .g-beard{transform:translateY(2.5px)}
.hh-guru.talking .g-head{animation:hhNod 1.25s ease-in-out infinite}
@keyframes hhNod{0%,100%{transform:rotate(-1deg) translateY(0)}30%{transform:rotate(1.5deg) translateY(1.5px)}60%{transform:rotate(-.5deg) translateY(-1px)}}
.hh-guru.talking .g-arm{animation:hhGesture 2.4s ease-in-out infinite}
@keyframes hhGesture{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-5deg)}}
.hh-guru.talking .g-palm{animation:hhPalm 1.2s ease-in-out infinite;transform-origin:204px 190px}
@keyframes hhPalm{50%{transform:rotate(-10deg)}}
.hh-guru.talking .g-brows{animation:hhBrow 2.2s ease-in-out infinite}
@keyframes hhBrow{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-3px)}}

@media(max-width:760px){.hh{display:none}}
@media(prefers-reduced-motion:reduce){.hh-scene *,.hh-guru *{animation:none!important;transition:none!important}}