/* Isolierter Maskottchen-Bundle für help.ivos.ir — 1:1 aus design-system.css (Zeilen 791-902).
   Hauptsite nutzt weiter design-system.css; bei Mascot-Änderungen BEIDE synchron halten. */
/* Animiertes KI-Maskottchen (Logo) — offene Augen, blinzelt, folgt der Maus, reagiert */
/* Kopierschutz-Hürde: kein Drag/Markieren/Speichern auf Maskottchen & Bildern */
.ivos-mascot, .ivos-mascot svg, .aw-stylethumb, .aw-modal-img, img {
  -webkit-user-drag:none; -khtml-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ivos-mascot { display:inline-block; line-height:0; width:42px; cursor:pointer; }
.ivos-mascot svg { width:100%; height:auto; overflow:visible; }
.ivos-mascot .iv-frame { animation:iv-pulse 3.2s ease-in-out infinite; }
@keyframes iv-pulse { 0%,100%{stroke-opacity:.85} 50%{stroke-opacity:1} }

/* Standard: offene Augen; caret/round/smile/spark/dollar/sad/frown versteckt */
.iv-caret, .iv-round, .iv-smile, .iv-spark, .iv-dollar, .iv-sad, .iv-frown { display:none; }
.iv-open { display:block; }

/* Gutschein RICHTIG: Dollar-Augen blinken 3× + Lächeln + Hüpfer. */
.ivos-mascot[data-state="cash"] .iv-open { display:none; }
.ivos-mascot[data-state="cash"] .iv-dollar { display:block; animation:iv-cash .24s ease-in-out 3; }
.ivos-mascot[data-state="cash"] .iv-smile { display:block; }
.ivos-mascot[data-state="cash"] svg { animation:iv-bounce .55s ease; transform-origin:50% 82%; }
@keyframes iv-cash { 0%,100%{opacity:1} 50%{opacity:.12} }
@keyframes iv-bounce { 0%,100%{transform:translateY(0) scale(1)} 35%{transform:translateY(-4px) scale(1.06)} 70%{transform:translateY(0) scale(1)} }
/* Gutschein FALSCH: traurige Augen + umgekehrter Mund + kurzes Zittern. */
.ivos-mascot[data-state="sad"] .iv-open { display:none; }
.ivos-mascot[data-state="sad"] .iv-sad { display:block; }
.ivos-mascot[data-state="sad"] .iv-frown { display:block; }
.ivos-mascot[data-state="sad"] svg { animation:iv-shake-sm .42s ease; }
@keyframes iv-shake-sm { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }

/* Maus-Tracking: Augen verschieben sich leicht zum Cursor (JS setzt --ex/--ey) */
.iv-eyes { transform:translate(var(--ex,0px), var(--ey,0px)); transition:transform .12s ease; }
/* Perspektive: das Auge in Blickrichtung wird schmaler UND niedriger, zur äußeren Kante hin (JS setzt --eye-*) */
.iv-eye-l { transform-box:fill-box; transform-origin:left center; transform:scale(var(--eye-lx,1), var(--eye-ly,1)); transition:transform .12s ease; }
.iv-eye-r { transform-box:fill-box; transform-origin:right center; transform:scale(var(--eye-rx,1), var(--eye-ry,1)); transition:transform .12s ease; }
/* Blinzeln auf dem inneren Blink-Layer (kein Konflikt mit Tracking) */
.iv-blink { transform-box:fill-box; transform-origin:center; }
.ivos-mascot.is-blinking .iv-blink { animation:iv-blink .2s ease-in-out; }
@keyframes iv-blink { 0%,100%{transform:scaleY(1)} 45%{transform:scaleY(.1)} }

.ivos-mascot[data-state="thinking"] .iv-frame { animation:iv-pulse .9s ease-in-out infinite; }
@keyframes iv-pop { 0%{transform:scale(.4)} 100%{transform:scale(1)} }

/* Hover/Klick: sauberes Wackeln/Kribbeln (kein Nicken nach unten, kein Erfolgsgesicht) */
.ivos-mascot.is-wiggle svg { animation:iv-wiggle .5s ease-in-out; transform-origin:50% 75%; }
@keyframes iv-wiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg)} 45%{transform:rotate(4deg)} 70%{transform:rotate(-2.5deg)} 88%{transform:rotate(1.2deg)} }

/* Step-Zahl: kurz beim Vorwärtsgehen statt Augen (Roboter-Schrift) */
.iv-num { display:none; transform-box:fill-box; transform-origin:center;
  font-family:'Orbitron','Vazirmatn',system-ui,sans-serif; font-weight:800; font-size:30px; }
.ivos-mascot[data-state="count"] .iv-open,
.ivos-mascot[data-state="count"] .iv-smile { display:none; }
.ivos-mascot[data-state="count"] .iv-num { display:block; animation:iv-numpop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes iv-numpop { 0%{transform:scale(.2);opacity:0} 35%{transform:scale(1.15);opacity:1} 100%{transform:scale(1);opacity:1} }

/* کد ملی: schüchtern — zwei Hände schwingen hoch und decken die Augen zu, Wangen erröten */
.iv-hands, .iv-blush { display:none; }
.ivos-mascot[data-state="cover"] .iv-hands { display:block; }
.ivos-mascot[data-state="cover"] .iv-blush { display:block; }
.ivos-mascot[data-state="cover"] .iv-eyes { opacity:0; }            /* Augen verdeckt */
.ivos-mascot[data-state="cover"] .iv-smile { display:block; }
.iv-hand { transform-box:fill-box; transform-origin:50% 120%; }
.ivos-mascot[data-state="cover"] .iv-hand-l { animation:iv-hand-up .42s cubic-bezier(.34,1.56,.64,1) both; }
.ivos-mascot[data-state="cover"] .iv-hand-r { animation:iv-hand-up .42s cubic-bezier(.34,1.56,.64,1) .05s both; }
@keyframes iv-hand-up { 0%{transform:translateY(28px) rotate(-8deg); opacity:0} 55%{opacity:1} 100%{transform:translateY(0) rotate(0); opacity:1} }

/* Schwindlig: Spiral-Augen drehen sich, Sterne kreisen überm Kopf, Mascot wackelt benommen */
.iv-dizzy, .iv-stars { display:none; }
.ivos-mascot[data-state="dizzy"] .iv-open { display:none; }
.ivos-mascot[data-state="dizzy"] .iv-dizzy { display:block; }
.ivos-mascot[data-state="dizzy"] .iv-stars { display:block; }
.iv-swirl { transform-box:view-box; }
.iv-swirl-l { transform-origin:50px 59px; }
.iv-swirl-r { transform-origin:70px 59px; }
.iv-stars-rot { transform-box:view-box; transform-origin:60px 24px; }
.ivos-mascot[data-state="dizzy"] .iv-swirl-l { animation:iv-spin .6s linear infinite; }
.ivos-mascot[data-state="dizzy"] .iv-swirl-r { animation:iv-spin .6s linear infinite reverse; }
.ivos-mascot[data-state="dizzy"] .iv-stars-rot { animation:iv-spin 1.1s linear infinite; }
.ivos-mascot[data-state="dizzy"] svg { animation:iv-woozy 1s ease-in-out infinite; transform-origin:50% 85%; }
@keyframes iv-spin { to { transform:rotate(360deg); } }
@keyframes iv-woozy { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }

/* Singt beim Laden: Mund auf/zu, zufriedene ^^-Augen, schwebende Noten, leichtes Wiegen */
.iv-notes { display:none; }
.ivos-mascot[data-state="sing"] .iv-notes { display:block; }
.ivos-mascot[data-state="sing"] .iv-open { display:none; }
.ivos-mascot[data-state="sing"] .iv-caret { display:block; }
.ivos-mascot[data-state="sing"] .iv-omouth { display:block; transform-box:fill-box; transform-origin:center;
  animation:iv-sing-mouth .42s ease-in-out infinite; }
.ivos-mascot[data-state="sing"] svg { animation:iv-sing-sway 1.1s ease-in-out infinite; transform-origin:50% 82%; }
.iv-note { transform-box:fill-box; transform-origin:center; }
.ivos-mascot[data-state="sing"] .iv-note1 { animation:iv-note-float 1.4s ease-in infinite; }
.ivos-mascot[data-state="sing"] .iv-note2 { animation:iv-note-float 1.4s ease-in infinite .45s; }
.ivos-mascot[data-state="sing"] .iv-note3 { animation:iv-note-float 1.4s ease-in infinite .9s; }
@keyframes iv-sing-mouth { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }
@keyframes iv-sing-sway { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes iv-note-float { 0%{transform:translateY(5px) scale(.6); opacity:0} 25%{opacity:1} 100%{transform:translateY(-16px) scale(1) rotate(14deg); opacity:0} }

/* Sauer (nach 2× schwindlig): rote zornige Augen + roter Rahmen + wütendes Zittern */
.iv-angry { display:none; }
.ivos-mascot[data-state="angry"] .iv-open { display:none; }
.ivos-mascot[data-state="angry"] .iv-angry { display:block; }
.ivos-mascot[data-state="angry"] .iv-frown { display:block; }
.ivos-mascot[data-state="angry"] .iv-frame { stroke:#ff3b30; }
.ivos-mascot[data-state="angry"] svg { animation:iv-anger .22s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes iv-anger { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-1.6px) rotate(-2.2deg)} 75%{transform:translateX(1.6px) rotate(2.2deg)} }

/* Erschrocken beim Scrollen (Handy): weit aufgerissene Augen + offener O-Mund (Mascot „fällt") */
.iv-omouth { display:none; }
.ivos-mascot.is-falling .iv-open { display:none; }
.ivos-mascot.is-falling .iv-round { display:block; }
.ivos-mascot.is-falling .iv-smile { display:none; }
.ivos-mascot.is-falling .iv-omouth { display:block; }

@media (prefers-reduced-motion: reduce) { .ivos-mascot svg, .ivos-mascot .iv-frame, .iv-hand, .iv-swirl, .iv-stars-rot, .iv-note, .iv-omouth { animation:none; } }