/* Producer Z launcher (loads with the page; small). Three states, all position:fixed (no layout shift):
   1. entrance card: the claymation director walks on with a speech bubble (once per visit, after page load)
   2. spotlight: a real movie-set spotlight in the corner until someone needs him
   3. chat panel: guide-z.css (lazy)
   prefers-reduced-motion: stills only, no flicker, no motion. */
.zgl{position:fixed;right:16px;bottom:16px;z-index:90;font:600 14px/1.35 Inter,system-ui,sans-serif;color:#F4F0FA}
.zgl button{font:inherit}
.zgl button:focus-visible{outline:3px solid #7ED321;outline-offset:3px}

/* ---- spotlight ---- */
.zgl-btn{position:relative;z-index:2;display:block;width:64px;height:64px;padding:0;border:0;border-radius:50%;cursor:pointer;overflow:hidden;
  background:#08070B;box-shadow:0 8px 24px rgba(10,8,16,.5),0 0 0 2px rgba(255,214,140,.55);transition:transform .25s,box-shadow .25s}
.zgl-btn img{display:block;width:64px;height:64px;transition:filter .2s}
.zgl-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,8,16,.55),0 0 0 2px #FFD60A}
.zgl-glow{position:absolute;z-index:3;left:17px;top:15px;width:30px;height:30px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,252,240,.95) 0,rgba(255,236,190,.55) 35%,rgba(255,200,110,0) 70%)}
.zgl-beam{position:absolute;z-index:1;right:34px;bottom:30px;width:230px;height:110px;pointer-events:none;
  transform-origin:100% 50%;transform:rotate(28deg);opacity:.85;transition:opacity .6s}
.zgl-beam i{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 44%,100% 56%,0 100%)}
.zgl-beam .h{inset:-18px -4px -18px 0;background:linear-gradient(270deg,rgba(255,196,90,.55),rgba(255,180,70,.22) 50%,rgba(255,180,70,0));filter:blur(12px)}
.zgl-beam .c{background:linear-gradient(270deg,rgba(255,250,232,.95),rgba(255,214,130,.5) 35%,rgba(255,196,96,.16) 75%,rgba(255,196,96,0));filter:blur(2px)}
.zgl-beam .d{opacity:.8;mix-blend-mode:screen;background:radial-gradient(1.4px 1.4px at 22% 38%,#fff 98%,transparent),radial-gradient(1px 1px at 40% 62%,#fff 98%,transparent),
  radial-gradient(1.2px 1.2px at 58% 45%,#fff 98%,transparent),radial-gradient(1px 1px at 70% 55%,#fff 98%,transparent),
  radial-gradient(1.6px 1.6px at 31% 70%,#fff 98%,transparent),radial-gradient(1px 1px at 12% 30%,#fff 98%,transparent);
  background-size:120px 80px;animation:zgl-dust 10s linear infinite}
.zgl.is-dim .zgl-beam{opacity:.4}
.zgl:hover .zgl-beam,.zgl-btn:focus-visible~.zgl-beam{opacity:1}
.zgl.is-open .zgl-beam{opacity:0}
.zgl.is-open .zgl-glow{opacity:.3}
/* rare attention flicker (JS adds it at most a few times per page) */
.zgl.is-flicker .zgl-glow,.zgl.is-flicker .zgl-beam{animation:zgl-flicker 1.1s steps(1,end)}
.zgl.is-flicker .zgl-btn img{animation:zgl-flicker-img 1.1s steps(1,end)}
/* power-on when he turns into the spotlight */
.zgl.is-on .zgl-btn{animation:zgl-pop .45s cubic-bezier(.2,1.4,.4,1)}
.zgl.is-on .zgl-beam{animation:zgl-poweron 1.2s ease-out}
.zgl.is-card .zgl-btn,.zgl.is-card .zgl-beam,.zgl.is-card .zgl-glow{visibility:hidden}

/* ---- entrance card ---- */
.zgl-card{position:absolute;right:-8px;bottom:-8px;display:flex;align-items:flex-end;gap:6px}
.zgl-card[hidden]{display:none}
.zgl-actor{position:relative;display:block;width:216px;height:198px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.zgl-actor video,.zgl-actor img{display:block;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 46%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at 50% 46%,#000 68%,transparent 100%)}
.zgl-say{position:relative;margin-bottom:110px;width:min(250px,calc(100vw - 236px));padding:12px 14px;border-radius:16px 16px 4px 16px;
  background:#15121F;border:1px solid #3A3350;box-shadow:0 12px 32px rgba(10,8,16,.4)}
.zgl-say p{margin:0 0 10px;font-weight:500}
.zgl-say .go,.zgl-say .help{display:block;width:100%;min-height:40px;margin-top:6px;padding:0 12px;border-radius:999px;border:1px solid #3A3350;background:#221D30;color:#F4F0FA;cursor:pointer;text-align:left}
.zgl-say .go{background:#FF2E93;border-color:#FF2E93;color:#fff}
.zgl-x{position:absolute;top:-12px;right:-12px;width:32px;height:32px;padding:0;border:1px solid #3A3350;border-radius:50%;background:#15121F;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.zgl-x::after{content:"";position:absolute;inset:-6px}          /* 44px touch target */
.zgl-card.is-in .zgl-actor{animation:zgl-walkon .7s cubic-bezier(.2,1.2,.4,1) both}
.zgl-card.is-in .zgl-say{animation:zgl-bubble .4s .55s ease-out both}
.zgl-card.is-out{animation:zgl-shrink .5s ease-in forwards}

@keyframes zgl-dust{to{background-position:-120px -24px}}
@keyframes zgl-flicker{0%{opacity:1}12%{opacity:.25}20%{opacity:1}34%{opacity:.4}42%{opacity:1}100%{opacity:1}}
@keyframes zgl-flicker-img{0%{filter:none}12%{filter:brightness(.55)}20%{filter:brightness(1.25)}34%{filter:brightness(.7)}42%,100%{filter:none}}
@keyframes zgl-poweron{0%{opacity:0}15%{opacity:.9}22%{opacity:.2}35%{opacity:1}100%{opacity:.85}}
@keyframes zgl-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes zgl-walkon{from{transform:translateX(120px);opacity:0}to{transform:none;opacity:1}}
@keyframes zgl-bubble{from{transform:translateY(8px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes zgl-shrink{to{transform:translate(40px,40px) scale(.25);opacity:0}}

@media (max-width:480px){
  .zgl{right:10px;bottom:10px}.zgl-beam{width:160px}
  .zgl-card{flex-direction:column;align-items:flex-end;gap:0}
  .zgl-actor{width:156px;height:143px}
  .zgl-say{margin:0 4px -6px 0;width:min(260px,calc(100vw - 28px))}
  .zgl-x{right:-6px;top:-14px}
}
@media (prefers-reduced-motion:reduce){
  .zgl *,.zgl-card.is-in .zgl-actor,.zgl-card.is-in .zgl-say{animation:none!important;transition:none!important}
}
@media print{.zgl{display:none}}