/* NoxTools Site Kit — Nox panda motion (see panda-motion.js). Ported from Codex's landing concept 1. */

/* ---------- home hero performance ---------- */
/* No layout shift: the still img.nx-hero-panda (site.css: 350px, 250px on phones) is the performance's first frame
   (nox-anim-hello, 720/740 canvas) and already takes its box — same width, centred, nothing below it (owner, 27 Sep: no
   Pause button) — before the
   script moves it into the stage as .nox-hello (so it is downloaded once). html.nx-js is set in <head> by the kit, so
   without JavaScript the still keeps its own look. */
html.nx-js img.nx-hero-panda{display:block;aspect-ratio:720/740;object-fit:contain;object-position:50% 100%;margin:0 auto}
.nox-performance{position:relative;width:350px;max-width:100%;aspect-ratio:720/740;margin:0 auto;isolation:isolate;z-index:1;container:nox/inline-size;text-align:left}
.nox-performance::before{content:"";position:absolute;left:4%;right:4%;top:6%;bottom:2%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(167,139,250,.34),rgba(99,102,241,.16) 60%,transparent 100%)}
.nox-actor{position:absolute;inset:0;transform-origin:54% 81%;animation:nox-settle 7s ease-in-out infinite}
.nox-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .32s ease}
.nox-performance .nox-hello{opacity:1}
.nox-performance:is([data-phase="looking"],[data-phase="typing"],[data-phase="opening"],[data-phase="surprise"]) .nox-hello{opacity:0}
.nox-performance:is([data-phase="looking"],[data-phase="typing"],[data-phase="opening"]) .nox-typing{opacity:1}
.nox-performance[data-phase="surprise"] .nox-surprise{opacity:1;animation:nox-wow .9s ease-out both;transform-origin:52% 86%}
.nox-motion-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.nox-typing{filter:url(#nox-paw-flex)}
.nox-screen-glow{position:absolute;left:56%;top:54%;width:34%;height:21%;border-radius:50%;background:#cbb9ff;filter:blur(23px);opacity:0;mix-blend-mode:screen;transition:opacity .4s;pointer-events:none}
.nox-performance:is([data-phase="opening"],[data-phase="surprise"]) .nox-screen-glow{opacity:.3}
/* speech: .nox-speech is a zero-size anchor at the bubbles' top-right corner; every line of the script is its own bubble
   (.nox-say--<phase>, built by panda-motion.js) and only the current phase's bubble is shown. Switching lines is a
   cross-fade, so nothing is re-laid out while Nox talks. */
.nox-speech{position:absolute;right:-6%;top:2%;width:0;height:0;z-index:3;pointer-events:none}
.nox-say{position:absolute;right:0;top:0;padding:10px 15px;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:16px 16px 16px 4px;
  box-shadow:0 12px 28px rgba(8,6,30,.35);font:600 13px/1.3 var(--nx-body,'Inter',sans-serif);color:#4338CA;white-space:nowrap;
  opacity:0;transform:rotate(3deg) translateY(5px) scale(.96);transform-origin:0 100%;
  transition:opacity .16s ease,transform .36s cubic-bezier(.2,.7,.3,1)}
.nox-performance[data-phase="hello"] .nox-say--hello,.nox-performance[data-phase="looking"] .nox-say--looking,
.nox-performance[data-phase="typing"] .nox-say--typing,.nox-performance[data-phase="opening"] .nox-say--opening,
.nox-performance[data-phase="surprise"] .nox-say--surprise,.nox-performance[data-phase="happy"] .nox-say--happy{opacity:1;transform:rotate(3deg);
  /* the incoming line waits for the outgoing one to finish fading, so two bubbles are never legible at once */
  transition-delay:.16s,0s}
.nox-tool-window{position:absolute;right:-14%;bottom:6%;width:210px;background:#fff;border:1px solid #E6DDF2;border-radius:13px;box-shadow:0 18px 40px rgba(8,6,30,.40);z-index:4;
  opacity:0;transform:translateY(7px) scale(.98);transition:opacity .45s,transform .55s;pointer-events:none;font-family:var(--nx-body,'Inter',sans-serif);color:#0F172A;
  text-align:left;white-space:nowrap}
.nox-performance:is([data-phase="opening"],[data-phase="surprise"],[data-phase="happy"]) .nox-tool-window{opacity:1;transform:none}
.nox-window-bar{display:flex;gap:8px;align-items:center;border-bottom:1px solid #F1EDF7;padding:8px 11px;font-size:9px;line-height:1.2;color:#7C6A99}
.nox-window-bar>span{flex:none;font-size:7px;letter-spacing:1px;color:#B9ACD0}.nox-window-bar b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.nox-window-bar small{flex:none;font-size:7px;margin-left:auto;color:#8B8497}
.nox-window-content{display:flex;gap:10px;align-items:center;padding:12px 12px 7px}
.nox-app-icon{background:#17B5B7;color:#fff;border-radius:8px;font:700 19px/1 Georgia,serif;width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px}
.nox-app-text{min-width:0;line-height:1.3}
.nox-app-name{display:block;font-size:13px}
/* status: both texts share one grid cell and cross-fade, so the window never changes size */
.nox-app-status{display:grid;font-size:10px;color:#6B5E7A}.nox-app-status>span{grid-area:1/1;transition:opacity .3s}
.nox-status-done{opacity:0}
.nox-performance:is([data-phase="surprise"],[data-phase="happy"]) .nox-status-wait{opacity:0}
.nox-performance:is([data-phase="surprise"],[data-phase="happy"]) .nox-status-done{opacity:1}
.nox-app-check{margin-left:auto;color:#15803D;font-weight:700;opacity:0;transition:opacity .3s}
.nox-performance:is([data-phase="surprise"],[data-phase="happy"]) .nox-app-check{opacity:1}
.nox-app-preview{height:38px;display:flex;gap:7px;align-items:flex-end;padding:0 13px 10px;overflow:hidden}
.nox-app-preview>span{flex:1;height:95%;background:#CBEEE9;border-radius:3px;transform:rotate(-4deg)}.nox-app-preview>span:nth-child(even){background:#EFDAED;transform:rotate(4deg)}
.nox-delight{position:absolute;color:#C4B5FD;font-size:34px;line-height:1;opacity:0;pointer-events:none;z-index:3}
.nox-delight-one{top:21%;right:3%}.nox-delight-two{top:32%;left:4%;font-size:24px}
.nox-performance[data-phase="surprise"] .nox-delight{animation:nox-spark 1.1s ease-out both}
.nox-performance[data-phase="surprise"] .nox-delight-two{animation-delay:.12s}
.nox-motion-paused .nox-actor,.nox-motion-paused .nox-frame,.nox-motion-paused .nox-delight{animation-play-state:paused!important}
@keyframes nox-settle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes nox-wow{0%{transform:scale(1)}40%{transform:translateY(-3px) scale(1.006)}100%{transform:scale(1)}}
@keyframes nox-spark{0%{opacity:0;transform:scale(.3) rotate(-15deg)}40%,70%{opacity:1}100%{opacity:0;transform:translateY(-12px) scale(1.1) rotate(12deg)}}
@media (max-width:1024px){.nox-tool-window{right:-6%;width:190px}.nox-speech{right:-2%}}
/* a small stage (phones, and the narrow hero column on small tablets): a compact window and bubbles. The @container rule
   follows the stage's own width; the media rule is the fallback for browsers without container queries. */
@media (max-width:767px){html.nx-js img.nx-hero-panda{width:250px!important;max-width:80%;height:auto!important;margin-bottom:0!important}
  .nox-performance{width:250px;max-width:80%}
  .nox-tool-window{right:-12%;bottom:2%;width:168px}.nox-window-bar{gap:6px;padding:7px 9px}.nox-window-bar>span{letter-spacing:0}.nox-window-content{gap:9px;padding:9px 10px 6px}
  .nox-app-icon{width:28px;height:28px;flex-basis:28px;font-size:17px}.nox-app-name{font-size:12px}.nox-app-preview{height:26px;padding:0 11px 9px}
  .nox-speech{right:-14%;top:3%}.nox-say{font-size:13px;padding:8px 12px}}
@container nox (max-width:300px){
  .nox-tool-window{right:-12%;bottom:2%;width:168px}.nox-window-bar{gap:6px;padding:7px 9px}.nox-window-bar>span{letter-spacing:0}.nox-window-content{gap:9px;padding:9px 10px 6px}
  .nox-app-icon{width:28px;height:28px;flex-basis:28px;font-size:17px}.nox-app-name{font-size:12px}.nox-app-preview{height:26px;padding:0 11px 9px}
  .nox-say{font-size:13px;padding:8px 12px}}

@media (prefers-reduced-motion:reduce){
  .nox-performance *{animation:none!important;transition:none!important}
  .nox-actor{transform:none!important}
}