/* A quiet night sky belongs to the hero, never to application controls. */
.ref-hero{background:radial-gradient(ellipse at 78% 10%,#bca26c14,transparent 42%),radial-gradient(ellipse at 9% 2%,#76865c22,transparent 52%),linear-gradient(180deg,#101b17,#22372c 57%,#3d493a)}
.night-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;isolation:isolate}
.sky-stars{position:absolute;inset:0;animation:sky-drift 32s ease-in-out infinite}
.sky-stars>i{position:absolute;left:var(--sx);top:var(--sy);width:var(--ss);height:var(--ss);border-radius:50%;background:#f8e9c5;opacity:.55;animation:sky-twinkle 6.5s ease-in-out infinite;animation-delay:var(--sd);box-shadow:0 0 4px #f6d89d2b}
.sky-moon{position:absolute;width:145px;height:145px;top:112px;right:16%;filter:drop-shadow(0 0 26px #d3b47516);animation:moon-drift 24s ease-in-out infinite;opacity:.85}
.sky-moon svg{height:100%;width:100%}.sky-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 19%,#d8ba7c0b,transparent 30%),linear-gradient(110deg,#131d171c,transparent 50%)}
.sky-meteors>i{position:absolute;width:125px;height:1.5px;left:92%;top:12%;background:linear-gradient(90deg,#fff0ca,transparent);border-radius:99px;opacity:0;transform:rotate(-35deg);animation:sky-meteor 16s linear infinite;animation-delay:-3s;filter:drop-shadow(0 0 2px #dfbf87)}
.sky-meteors>i:nth-child(2){left:76%;top:9%;width:90px;animation-duration:21s;animation-delay:-11s}.sky-meteors>i:nth-child(3){left:62%;top:25%;width:72px;animation-duration:27s;animation-delay:-19s}
.sky-mist{position:absolute;left:-8%;right:-8%;bottom:16%;height:23%;background:radial-gradient(ellipse at 78% 62%,#a4b09212,transparent 44%),radial-gradient(ellipse at 30% 60%,#a5ac8a0d,transparent 46%);filter:blur(20px);animation:sky-mist 28s ease-in-out infinite}
.ref-landscape{z-index:1}.ref-hero-copy{z-index:4}.hero-original-stage{z-index:3}
/* Text and illustration occupy separate rows, including on narrow screens. */
.ref-panels{align-items:stretch}
.ref-panels>.ref-panel{display:flex;flex-direction:column;min-height:430px;padding:24px;overflow:hidden}
.ref-panel .ref-user,.ref-panel .ref-assistant,.ref-panel .ref-receipt,.ref-panel .ref-caption{flex-shrink:0;position:relative;z-index:2}
.ref-panel .ref-user,.ref-panel .ref-assistant{align-self:flex-start}
.panel-portrait{display:flex;align-items:flex-end;justify-content:flex-end;flex:1;min-height:180px;margin-top:24px;position:relative}
.ref-panel .panel-portrait>.panel-mascot{position:relative;right:auto;bottom:auto;top:auto;left:auto;width:158px;height:170px;margin:0 -8px -14px 0}
.panel-portrait .ember-shadow{opacity:.1;filter:blur(5px)}
/* The new clock replaces abrupt two-pose strolling with a complete gait. */
.ember-mascot[data-motion-managed=true] .ember-travel{animation:none!important;transform:translate3d(calc(var(--walk-x,0px) + var(--gaze-x,0px)*.12),calc(var(--gaze-y,0px)*.08),0);transition:transform .18s ease-out}
.ember-mascot[data-motion-managed=true] .ember-sprite{animation:kinetic-breath 5.2s cubic-bezier(.37,0,.63,1) infinite!important;animation-delay:var(--blink-offset)!important}
.ember-mascot[data-motion-phase=walk] .ember-sprite{animation:kinetic-walk-body 1s ease-in-out infinite!important}
.ember-mascot[data-motion-phase=hello] .ember-sprite{animation:kinetic-hello 2.8s cubic-bezier(.37,0,.63,1) infinite!important}
.ember-mascot[data-motion-managed=true][data-mood=thinking] .ember-sprite{animation:kinetic-thought 4.8s ease-in-out infinite!important}
.ember-mascot[data-motion-managed=true][data-mood=remembered] .ember-sprite{animation:kinetic-kept 5.2s ease-in-out infinite!important}
.ember-mascot[data-motion-managed=true]:is([data-mood=happy],[data-mood=joy],[data-mood=dance]) .ember-sprite{animation:kinetic-happy 4.2s cubic-bezier(.34,0,.39,1) infinite!important}
.ember-mascot[data-motion-managed=true][data-mood=error] .ember-sprite{animation:kinetic-sigh 5s ease-in-out infinite!important}
.ember-mascot[data-motion-managed=true]:is([data-mood=sleeping],[data-mood=cozy]) .ember-sprite{animation:kinetic-sleep 6s ease-in-out infinite!important}
.ember-mascot[data-motion-managed=true][data-mood=speaking] .ember-sprite{animation:kinetic-speaking 2.3s ease-in-out infinite!important}
.ember-mascot[data-mood=remembered] .ember-sprite{background-image:url('/assets/yumio-memory-hug-v118.webp');background-size:100% 100%;background-position:center;animation:kinetic-kept 5.2s ease-in-out infinite}
@keyframes kinetic-breath{0%,100%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-3px) rotate(.35deg) scale(1.003,1.007)}70%{transform:translateY(-1px) rotate(-.25deg)}}
@keyframes kinetic-walk-body{0%,50%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-.25deg)}75%{transform:translateY(-2px) rotate(.25deg)}}
@keyframes kinetic-hello{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-1.1deg) translateY(-3px)}42%{transform:rotate(.6deg) translateY(-1px)}68%{transform:rotate(-.4deg) translateY(-2px)}}
@keyframes kinetic-thought{0%,100%{transform:rotate(0) translateY(0)}28%,44%{transform:rotate(-1.4deg) translateY(-2px)}70%{transform:rotate(.3deg) translateY(1px)}}
@keyframes kinetic-kept{0%,100%{transform:translateY(0) rotate(0)}28%{transform:translateY(-2px) rotate(-.8deg) scale(1.006)}55%{transform:translateY(1px) rotate(.5deg)}80%{transform:translateY(-1px)}}
@keyframes kinetic-happy{0%,14%,65%,100%{transform:translateY(0) scale(1)}22%{transform:translateY(2px) scale(1.015,.985)}34%{transform:translateY(-11px) scale(.995,1.008) rotate(-.5deg)}44%{transform:translateY(1px) scale(1.01,.99)}53%{transform:translateY(-3px)}}
@keyframes kinetic-sigh{0%,100%{transform:translateY(0)}40%{transform:translateY(3px) rotate(-.5deg)}65%{transform:translateY(2px)}}
@keyframes kinetic-sleep{0%,100%{transform:scale(1)}50%{transform:translateY(-1px) scale(1.005,1.012)}}
@keyframes kinetic-speaking{0%,100%{transform:translateY(0) rotate(0)}32%{transform:translateY(-2px) rotate(.4deg)}70%{transform:translateY(1px) rotate(-.25deg)}}
@keyframes sky-twinkle{0%,100%{opacity:.35}48%{opacity:.78}72%{opacity:.5}}
@keyframes sky-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,4px)}}
@keyframes moon-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes sky-mist{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(4%);opacity:1}}
@keyframes sky-meteor{0%,78%,100%{opacity:0;transform:translate(0,0) rotate(-35deg)}80%{opacity:.8;transform:translate(-28px,20px) rotate(-35deg)}88%{opacity:0;transform:translate(-285px,205px) rotate(-35deg)}}
.no-motion .night-sky *,.no-motion .ember-mascot *{animation:none!important;transition:none!important}.no-motion .sky-meteors{display:none}
@media(prefers-reduced-motion:reduce){.night-sky *,.ember-mascot *{animation:none!important;transition:none!important}.sky-meteors{display:none}}
@media(max-width:900px){.sky-moon{right:10%;width:120px;height:120px;top:117px}}
@media(max-width:700px){.sky-moon{width:78px;height:78px;top:102px;right:5%;opacity:.7}.sky-stars{opacity:.65}.sky-meteors>i{width:75px}.sky-mist{bottom:10%}.ref-panels>.ref-panel{min-height:410px}.panel-portrait{min-height:170px;margin-top:24px}.ref-panel .panel-portrait>.panel-mascot{width:153px;height:165px;margin-bottom:-10px}.ember-mascot[data-motion-managed=true] .ember-travel{transform:translate3d(calc(var(--walk-x,0px)*.5),0,0)}}
.no-motion .ember-mascot[data-motion-managed=true] .ember-sprite,.no-motion .ember-mascot[data-motion-managed=true] .ember-travel{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.ember-mascot[data-motion-managed=true] .ember-sprite,.ember-mascot[data-motion-managed=true] .ember-travel{animation:none!important;transition:none!important}}