/* The animated Dr. Lily AI scene, shared by the homepage and the sign-in page.
   Characters and logo are masked from the original MBC poster; nothing was redrawn. */


.scene{height:370px;margin-top:12px;position:relative;isolation:isolate;perspective:700px}.scene-halo{position:absolute;inset:15% -10% -5%;z-index:-2;background:radial-gradient(ellipse at 60% 60%,#0f76904a,transparent 65%);filter:blur(15px)}.building{position:absolute;inset:30px 45px 60px;border:1px solid #2d5971;border-radius:24px 24px 0 0;overflow:hidden;background:linear-gradient(120deg,#12354c22,#418b9d0b,#0e344322);opacity:.8}.building-sign{position:absolute;top:25px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:5px;color:#80c7cf}.glass{position:absolute;top:65px;width:44%;bottom:0;border:1px solid #36778b70;background:linear-gradient(120deg,#b9ffff02,#7fdddf12,#75b5c307)}.glass-left{left:6%}.glass-right{right:6%}.door-handle{position:absolute;top:58%;height:45px;border-radius:3px;width:3px;background:#63e5e8;box-shadow:0 0 10px #5be3ec70}.door-handle.left{left:47%}.door-handle.right{right:47%}.inside-light{position:absolute;inset:40% 0 0;background:radial-gradient(ellipse at bottom,#ffc87614,transparent 60%)}.floor{position:absolute;left:0;right:0;bottom:26px;height:100px;background:linear-gradient(0deg,#0f3d4b35,transparent);border-bottom:1px solid #4ec6cf22;transform:rotateX(25deg);border-radius:50%}.orbit{position:absolute;left:3%;right:0;bottom:34px;height:86px;border:1.5px solid #37d5dd77;border-top-color:#37d5dd22;border-radius:50%;box-shadow:0 8px 25px #28cfde13;transform:rotate(-6deg)}.character{position:absolute;display:block;border:0;background:transparent;padding:0;z-index:3;animation:stroll 11s ease-in-out infinite alternate;transform-origin:50% 95%}.character svg{display:block;width:100%;height:auto;overflow:visible}.sprite{display:block;animation:bob 3.8s ease-in-out infinite alternate;filter:drop-shadow(0 10px 9px #0006)}.character:hover .sprite,.character:focus-visible .sprite{filter:drop-shadow(0 0 12px #6ee5e166);animation-play-state:paused}.character:hover,.character:focus-visible{z-index:5;animation-play-state:paused}.character-label{opacity:0;position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);background:#092333f2;border:1px solid #5ba7b2;color:#d5ffff;padding:5px 10px;border-radius:20px;font-size:10px;white-space:nowrap;transition:opacity .15s}.character:hover .character-label,.character:focus-visible .character-label{opacity:1}.duck{width:119px;left:0;bottom:57px;animation-delay:-2s;--travel:20px}.panda{width:151px;left:123px;bottom:49px;animation-duration:13s;--travel:13px}.sprout{width:108px;left:282px;bottom:33px;animation-duration:12s;animation-delay:-3s;--travel:18px}.robot{width:202px;right:0;bottom:68px;animation-duration:14s;animation-delay:-5s;--travel:-16px}.panda .sprite{animation-delay:-2s}.sprout .sprite{animation-delay:-1s}.robot .sprite{animation-delay:-3s}.welcome-bubble{position:absolute;right:18px;top:9px;border:1px solid #39717c;border-radius:12px 12px 0 12px;background:#113047cc;color:#c8ffff;font-size:10px;padding:10px 13px;z-index:5;max-width:270px;text-align:center;box-shadow:0 8px 24px #0002}.scene-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:8px;color:#6d8aa3;letter-spacing:2px}
@keyframes stroll{from{transform:translateX(0)}to{transform:translateX(var(--travel,15px))}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-5px) rotate(.6deg)}}
.paused .character,.paused .sprite,.form-focused .character,.form-focused .sprite,.tab-hidden .character,.tab-hidden .sprite{animation-play-state:paused!important}
@media(max-width:1100px){.scene{height:340px}.duck{width:100px}.panda{left:90px;width:130px}.sprout{left:220px;width:95px}.robot{width:172px}.welcome-bubble{font-size:9px;top:9px;right:0}}
@media(max-width:900px){.scene{height:360px}.duck{width:120px;left:5%}.panda{width:150px;left:27%}.sprout{width:110px;left:51%}.robot{width:195px;right:0}.welcome-bubble{right:20px}}
@media(max-width:560px){.scene{height:292px;margin-inline:-7px;margin-top:22px}.building{inset:25px 16px 55px}.building-sign{font-size:8px;letter-spacing:3px;top:20px}.glass{top:55px}.duck{width:83px;left:0;bottom:51px;--travel:8px}.panda{width:106px;left:21%;bottom:45px;--travel:8px}.sprout{width:77px;left:48%;bottom:36px;--travel:8px}.robot{width:142px;right:0;bottom:66px;--travel:-7px}.welcome-bubble{font-size:8px;max-width:220px;top:0;right:0;padding:8px 11px}.scene-caption{font-size:6px;letter-spacing:1.6px}}

/* Someone who asks for less movement gets a still scene. */
@media(prefers-reduced-motion:reduce){
  .scene *,.scene{animation:none!important;transition:none!important}
}
