/* Generated by bin/import-site-pages.mjs: aimai-design/mascot/component/mascot.css + bin/mascot.mjs (sizes, site placements). */
/* iAmAI mascot – "ה־A החי". Decorative only. States via data-state on the <svg>:
   idle | typing | scanning | done | oops | waiting.
   Size: set width on .iam-mascot (24–120px). Add .iam-mascot--sm when width <= 40px (bigger eyes).
   --iam-mascot-ink: shape colour. --iam-mascot-bg: eye colour = the surface behind it (eyes read as holes).
   --iam-mascot-look: horizontal look offset for "typing" (negative = left, toward an input on the left). */
.iam-mascot{--iam-mascot-ink:#0a0a0a;--iam-mascot-bg:#fff;--iam-mascot-look:-5px;
  width:56px;height:auto;display:inline-block;overflow:visible;vertical-align:middle;flex:none}
.iam-mascot *{transform-box:view-box}
.iam-mascot .m-legs,.iam-mascot .m-top{fill:var(--iam-mascot-ink)}
.iam-mascot .m-open{fill:var(--iam-mascot-bg);transform-box:fill-box;transform-origin:center}
.iam-mascot .m-happy{fill:none;stroke:var(--iam-mascot-bg);stroke-width:4;stroke-linecap:round;opacity:0}
.iam-mascot .m-eye{transform-box:fill-box;transform-origin:center}
.iam-mascot--sm .m-eye{transform:scale(1.55)}
.iam-mascot .m-body{transform-origin:128px 228px}
.iam-mascot .m-head,.iam-mascot .m-eyes{transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.iam-mascot .m-body{transition:transform .45s cubic-bezier(.3,.7,.3,1)}

/* blink – used by idle / typing / scanning / waiting */
@keyframes iamBlink{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
.iam-mascot:is([data-state=idle],[data-state=typing],[data-state=scanning],[data-state=waiting]) .m-open{animation:iamBlink 4.8s ease-in-out infinite}
.iam-mascot[data-state=typing] .m-open{animation-duration:3.6s}

/* typing: lean + look toward the input */
.iam-mascot[data-state=typing] .m-body{transform:rotate(-6deg)}
.iam-mascot[data-state=typing] .m-eyes{transform:translate(var(--iam-mascot-look),4px)}

/* scanning: eyes read L/R, gap pulses (head lifts) */
@keyframes iamRead{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes iamGap{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.iam-mascot[data-state=scanning] .m-eyes{animation:iamRead 1.2s ease-in-out infinite}
.iam-mascot[data-state=scanning] .m-head{animation:iamGap 1.2s ease-in-out infinite}
.iam-mascot[data-state=scanning] .m-open{animation-duration:3.4s}

/* waiting: slow reading, no gap pulse */
.iam-mascot[data-state=waiting] .m-eyes{animation:iamRead 3.2s ease-in-out infinite}

/* done: ^ ^ and one small bounce (plays once) */
@keyframes iamBounce{0%{transform:none}18%{transform:scale(1.06,.9)}45%{transform:translateY(-34px) scale(.97,1.04)}70%{transform:none}84%{transform:translateY(-8px)}100%{transform:none}}
.iam-mascot[data-state=done] .m-body{animation:iamBounce .9s cubic-bezier(.3,.7,.3,1) 1 both}
.iam-mascot[data-state=done] .m-open{opacity:0}
.iam-mascot[data-state=done] .m-happy{opacity:1}

/* oops: eyes slightly down and flatter, head settles, no motion */
.iam-mascot[data-state=oops] .m-eyes{transform:translateY(5px)}
.iam-mascot[data-state=oops] .m-open{transform:scaleY(.7)}
.iam-mascot[data-state=oops] .m-head{transform:translateY(4px)}

@media (prefers-reduced-motion: reduce){
  .iam-mascot *{animation:none!important;transition:none!important}
  .iam-mascot:not([data-state=done]):not([data-state=oops]) .m-body,
  .iam-mascot:not([data-state=done]):not([data-state=oops]) .m-eyes,
  .iam-mascot:not([data-state=done]):not([data-state=oops]) .m-head{transform:none}
}

.iam-mascot{display:block;height:auto;overflow:visible}
.iam-mascot.m32{width:32px}.iam-mascot.m40{width:40px}.iam-mascot.m48{width:48px}.iam-mascot.m56{width:56px}.iam-mascot.m64{width:64px}.iam-mascot.m120{width:120px}
/* a white spot where the page has a glow behind (home hero, 404), so the eyes match the surface exactly */
.m-spot{display:grid;place-items:center;border-radius:50%;background:#fff;--iam-mascot-bg:#fff}
/* home, desktop: on the LEFT of the scan box (physical left), 16px away, vertically centred (Yosef, 19.10) */
.hero .scan-row{position:relative}
.hero .hm{position:absolute;right:calc(100% + 16px);top:50%;transform:translateY(-50%);width:80px;height:80px;z-index:1;transition:opacity .2s}
.hero .hm[hidden]{display:none}
 /* narrow screens: centred above the box, 16px above it (Yosef via Maayan, 19.10: replaces the left-side rule) */
@media (max-width:979px){.hero .hm{position:static;right:auto;transform:none;margin:0 auto 16px;width:64px;height:64px}}
@media (max-width:699px){.hero .hm{width:56px;height:56px}}
.hero .hm .iam-mascot{width:56px;margin-top:4px}
.hero .hm{--iam-mascot-look:5px} /* desktop: the input is on its right */
@media (max-width:979px){.hero .hm{--iam-mascot-look:0px}} /* narrow: the input is right below, eyes look down */
@media (max-width:699px){.hero .hm .iam-mascot{width:40px}}
/* result: centred above the loading title; fades out once the result is there */
.rm{display:flex;justify-content:center;margin:8px auto 18px;--iam-mascot-bg:#fafafa;transition:opacity .3s ease}
.rm:not([hidden]) + .prog > .eyebrow,.rm:not([hidden]) + .prog > .ins-h{text-align:center}
.rm.out{opacity:0}
.rm[hidden]{display:none}
@media (max-width:640px){.rm .iam-mascot.m120{width:88px}}
/* scan errors: at the start of the error line, before the text (card is white) */
.scan-err .head .iam-mascot{flex:none;--iam-mascot-bg:var(--paper,#fff)}
@media (max-width:699px){.scan-err .head .iam-mascot{order:2;margin-inline-start:auto}}
/* 404: centred above the heading */
.nf .m-spot{width:96px;height:96px;margin:0 auto 16px}
.nf .m-spot .iam-mascot{margin-top:6px}
/* thanks pages: above the heading, centred (Maayan, 19.10), on the white card */
.auth-box .m-start{display:flex;justify-content:center;margin-bottom:16px;--iam-mascot-bg:var(--paper,#fff)}
@media (prefers-reduced-motion:reduce){.hero .hm,.rm{transition:none}}

.iam-mascot.m88{width:88px}
/* connect status: on a white disc (the page has a glow behind it), so the eyes match exactly */
.cx-mascot{width:112px;height:112px;margin:0 auto 28px;border-radius:50%;background:#fff;display:grid;place-items:center;--iam-mascot-bg:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.06)}
.cx-mascot .iam-mascot{margin-top:6px}

/* waiting = Turnstile still checking: same calm eyes as idle */
.iam-mascot[data-state="waiting"] .m-open{opacity:1}
.iam-mascot[data-state="waiting"] .m-happy{opacity:0}