/* Living hero (Raj, 14 Oct): the Upscaleads superhero breathes, glows, lands, celebrates, warns, thinks and sleeps. */
.hx { position: relative; display: grid; place-items: end center; isolation: isolate; perspective: 900px; }
.hx-body { position: relative; animation: hxBreath 4.8s ease-in-out infinite; transform-origin: 50% 100%; will-change: transform; }
.hx-body img { display: block; height: 100%; width: auto; max-height: inherit; filter: drop-shadow(0 0 22px rgba(47,164,255,.28)) drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.hx-glow { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom;
  background: linear-gradient(180deg, rgba(79,160,255,.0) 0%, rgba(79,160,255,.85) 45%, rgba(255,60,80,.85) 55%, rgba(255,60,80,0) 100%); background-size: 100% 300%; mix-blend-mode: screen; opacity: .0; animation: hxScan 5.5s ease-in-out infinite; }
.hx-aura { position: absolute; left: 50%; bottom: 8%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(47,164,255,.30), rgba(91,35,112,.16) 40%, transparent 68%); animation: hxAura 4.8s ease-in-out infinite; }
.hx-floor { position: absolute; left: 50%; bottom: -6px; width: 78%; height: 26px; transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(47,164,255,.55), rgba(47,164,255,.12) 45%, transparent 70%); animation: hxFloor 4.8s ease-in-out infinite; }
.hx-ring { position: absolute; left: 50%; bottom: 0; width: 60%; height: 22px; transform: translateX(-50%) scale(.2); border-radius: 50%; border: 2px solid rgba(120,190,255,.9); opacity: 0; pointer-events: none; }
.hx-fx { position: absolute; inset: -10% -30%; pointer-events: none; z-index: 2; }
.hx-bubble { position: absolute; z-index: 3; left: 50%; top: 2%; transform: translate(-90%, -10px) scale(.9); opacity: 0; pointer-events: none; max-width: 230px; width: max-content;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px; font: 600 13px/1.35 var(--display, inherit); color: #fff;
  background: linear-gradient(135deg, rgba(30,58,138,.92), rgba(91,35,112,.92)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); backdrop-filter: blur(8px); transition: opacity .3s, transform .3s; }
.hx-bubble.on { opacity: 1; transform: translate(-90%, 0) scale(1); }
.hx-zz { position: absolute; right: 18%; top: 6%; font: 800 18px/1 var(--display, inherit); color: #9DB8FF; opacity: 0; pointer-events: none; }
.hx[data-mood="sleep"] .hx-zz { animation: hxZ 3.2s ease-in-out infinite; }
.hx[data-mood="sleep"] .hx-zz:nth-of-type(2) { animation-delay: 1.1s; right: 12%; font-size: 14px; }
.hx-halo { position: absolute; left: 50%; top: 4%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 2px dashed rgba(120,190,255,.0); pointer-events: none; }

/* moods */
.hx[data-mood="sleep"] .hx-body { animation-duration: 7s; filter: brightness(.6) saturate(.7); }
.hx[data-mood="sleep"] .hx-aura { opacity: .35; }
.hx[data-mood="alert"] .hx-aura { background: radial-gradient(circle, rgba(255,43,58,.42), rgba(255,43,58,.12) 40%, transparent 68%); animation: hxAlert 1.2s ease-in-out infinite; }
.hx[data-mood="alert"] .hx-floor { background: radial-gradient(ellipse, rgba(255,43,58,.6), rgba(255,43,58,.12) 45%, transparent 70%); }
.hx[data-mood="alert"] .hx-body { animation: hxBreath 4.8s ease-in-out infinite, hxShake 3.6s ease-in-out infinite; }
.hx[data-mood="think"] .hx-halo { border-color: rgba(120,190,255,.75); animation: hxSpin 2.4s linear infinite; box-shadow: 0 0 18px rgba(47,164,255,.5); }
.hx[data-mood="think"] .hx-glow { animation-duration: 1.6s; }
.hx[data-mood="celebrate"] .hx-body { animation: hxJump 1.1s cubic-bezier(.3,.7,.4,1) 2, hxBreath 4.8s ease-in-out 2.2s infinite; }
.hx[data-mood="celebrate"] .hx-aura { background: radial-gradient(circle, rgba(74,222,128,.38), rgba(47,164,255,.14) 42%, transparent 68%); }
.hx.landing .hx-body { animation: hxLand 1.1s cubic-bezier(.2,.8,.25,1) both, hxBreath 4.8s ease-in-out 1.2s infinite; }
.hx.landing .hx-ring { animation: hxRing 1s ease-out .75s both; }
.hx.landing .hx-ring.r2 { animation-delay: .9s; }
.hx.pulse .hx-glow { animation: hxScan 1s ease-in-out 2; }

@keyframes hxBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.012); } }
@keyframes hxAura { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(.95); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }
@keyframes hxFloor { 0%, 100% { opacity: .9; transform: translateX(-50%) scale(1); } 50% { opacity: .55; transform: translateX(-50%) scale(.9); } }
@keyframes hxScan { 0%, 100% { opacity: 0; background-position: 0 100%; } 45% { opacity: .55; } 50% { opacity: .65; background-position: 0 0%; } 60% { opacity: 0; } }
@keyframes hxAlert { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hxShake { 0%, 86%, 100% { translate: 0 0; } 88% { translate: -3px 0; } 90% { translate: 3px 0; } 92% { translate: -2px 0; } 94% { translate: 2px 0; } }
@keyframes hxSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes hxJump { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(6px) scale(1.02, .97); } 60% { transform: translateY(-34px) scale(.99, 1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes hxLand { 0% { transform: translateY(-120%) scale(.96); opacity: 0; } 55% { opacity: 1; } 75% { transform: translateY(6px) scale(1.03, .95); } 100% { transform: translateY(0) scale(1); } }
@keyframes hxRing { 0% { opacity: .9; transform: translateX(-50%) scale(.2); } 100% { opacity: 0; transform: translateX(-50%) scale(2.2); } }
@keyframes hxZ { 0% { opacity: 0; transform: translate(0, 10px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .hx *, .hx { animation: none !important; transition: none !important; } }

/* inside the home / control-room stage */
.stage-hero .hx { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); height: min(520px, calc(100% - 70px)); z-index: 2; }
.stage-hero .hx { width: 100%; }
.stage-hero .hx .hx-tilt { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.stage-hero .hx .hx-body { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.stage-hero .hx img { position: static; transform: none; animation: none; left: auto; bottom: auto; height: 100%; max-height: 100%; width: auto; max-width: none; object-fit: contain; }
.hx[data-mood] .hx-body.hx-swap, .hx .hx-body.hx-swap { animation: hxPop .6s cubic-bezier(.3,1.5,.5,1), hxBreath 4.8s ease-in-out .6s infinite; }
@keyframes hxPop { 0% { transform: translateY(14px) scale(.94, 1.04); } 45% { transform: translateY(-18px) scale(1.02, .98); } 100% { transform: translateY(0) scale(1); } }
@media (max-width: 900px) { .stage-hero .hx { height: 270px; bottom: 26px; } .hx-bubble { max-width: 180px; font-size: 12px; } }
@media (min-width: 1500px) { .stage-hero .hx { height: min(580px, calc(100% - 70px)); } }
.hx-tilt { transition: transform .25s ease-out; transform-style: preserve-3d; }
/* Live clips (Flow videos keyed to transparent) */
.hx-body canvas.hx-clip { display: block; height: 100%; width: auto; max-height: inherit; filter: drop-shadow(0 0 22px rgba(47,164,255,.28)) drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.stage-hero .hx canvas.hx-clip { height: 100%; max-height: 100%; width: auto; }
/* With live clips the video already moves: no CSS breathing / shaking / jumping on top (Raj: "shake aagudhu") */
.hx.has-clip .hx-body, .hx.has-clip[data-mood] .hx-body, .hx.has-clip .hx-body.hx-swap, .hx.has-clip.landing .hx-body { animation: none !important; transform: none !important; }
.hx.has-clip .hx-tilt { transform: none !important; }