/* Professor Hoot — shared homepage / browse-page mascot + "pick a quiz" helper.
   Self-contained (no dependency on quiz.css); uses only CSS vars defined on those pages.
   Inline SVG, CSS-only animation, reduced-motion safe, height reserved to avoid CLS. */
/* One unified card (matches the site's card language): Hoot seated inside on the left,
   a tight text + button stack on the right. No floating bubble, no orphaned whitespace. */
.mg-picker{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:nowrap;
  max-width:480px;margin:18px auto 16px;min-height:140px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px;box-shadow:0 10px 30px rgba(22,22,28,.08);text-align:left}
/* sound / haptics toggles live inside the picker card (these pages have no title card) */
.mg-fx{position:absolute;top:11px;right:13px;z-index:2;display:inline-flex;align-items:center;gap:7px}
.mg-fx .fxtoggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;
  border:1px solid var(--line);border-radius:99px;background:linear-gradient(180deg,#7433e6,#5620c6);
  color:#fff;box-shadow:0 2px 7px rgba(217,77,24,.35);cursor:pointer;font-family:inherit;line-height:0;
  transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s}
.mg-fx .fxtoggle:hover{transform:translateY(-1px);filter:brightness(1.05)}
.mg-fx .fxtoggle:active{transform:scale(.94)}
.mg-fx .fxtoggle.is-off{background:var(--primtint,#e4e2ff);border-color:var(--line);color:var(--muted);box-shadow:none}
.mg-fx .fxtoggle.is-off:hover{filter:none;color:var(--primary,#5a4be3)}
.mg-fx .fxtoggle svg{display:block}
.mg-picker .mg-side{flex:0 0 84px;width:84px;cursor:pointer}
.mg-picker .mg-side .mg-owl{width:84px;height:108px}
.mg-bubble{flex:1 1 auto;min-width:0;background:none;border:0;box-shadow:none;padding:0}
/* structured hierarchy: kicker → headline → support line → action.
   Scoped under .mg-picker so page-level rules (e.g. the homepage's `.hero p`) can't override them. */
.mg-picker .mg-kick{font-weight:800;font-size:10.5px;line-height:1.3;letter-spacing:1.4px;text-transform:uppercase;color:var(--primary);margin:0 0 5px;max-width:none}
.mg-picker .mg-title{font-weight:800;font-size:16px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px;max-width:none;
  min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mg-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mg-pick{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:14.5px;color:#fff;padding:11px 18px;border-radius:11px;
  background:linear-gradient(100deg,#5620c6,#682ae3);box-shadow:0 8px 20px rgba(104,42,227,.30);
  transition:transform .12s,filter .15s;text-decoration:none}
.mg-pick:hover{filter:brightness(1.05)} .mg-pick:active{transform:scale(.97)}
.mg-again{background:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
  color:var(--primary);padding:9px 4px}
.mg-again:hover{text-decoration:underline}
@media(max-width:420px){ .mg-picker{gap:14px;padding:16px} .mg-picker .mg-side{flex:0 0 68px;width:68px} .mg-picker .mg-side .mg-owl{width:68px;height:88px} }

/* ---------- owl ---------- */
.mg-owl{display:block;width:100%;height:100%;overflow:visible}
.mg-shadow{fill:rgba(22,22,28,.18);transform-box:fill-box;transform-origin:center;animation:mgShadow 12s cubic-bezier(.37,0,.35,1) infinite}
.mg-float{transform-box:fill-box;transform-origin:center bottom;animation:mgIdle 12s cubic-bezier(.37,0,.35,1) infinite;will-change:transform}
.mg-ears{transform-box:fill-box;transform-origin:center bottom;animation:mgEar 4.6s ease-in-out infinite}
.mg-eyes{transform-box:fill-box;transform-origin:center;animation:mgBlink 5.4s ease-in-out infinite}
.mg-wing-l{transform-box:fill-box;transform-origin:right bottom}
.mg-glasses{transform-box:fill-box;transform-origin:center}
.mg-beak{transform-box:fill-box;transform-origin:top center}
.mg-smile{display:none}
.mg-love{transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes mgIdle{
  0%{transform:translateY(0) scale(1,1) rotate(-1.2deg)}
  9%{transform:translateY(-6px) scale(.985,1.035) rotate(1deg)}
  16%{transform:translateY(0) scale(1.035,.97) rotate(-1deg)}
  33%{transform:translateY(0) scale(1.02,.985) rotate(-1.2deg)}
  45%{transform:translateY(-3px) scale(1,1) rotate(7deg)}
  55%{transform:translateY(0) scale(1,1) rotate(-1.2deg)}
  64%{transform:translateY(-6px) scale(.985,1.035) rotate(1deg)}
  71%{transform:translateY(0) scale(1.035,.97) rotate(-1deg)}
  83%{transform:translateY(-3px) scale(1,1) rotate(-7deg)}
  92%,100%{transform:translateY(0) scale(1,1) rotate(-1.2deg)}
}
@keyframes mgShadow{
  0%{transform:scaleX(1);opacity:.5}9%{transform:scaleX(.78);opacity:.28}16%{transform:scaleX(1.03);opacity:.52}
  33%{transform:scaleX(1);opacity:.5}55%{transform:scaleX(1);opacity:.5}64%{transform:scaleX(.78);opacity:.28}
  71%{transform:scaleX(1.03);opacity:.52}92%,100%{transform:scaleX(1);opacity:.5}
}
@keyframes mgEar{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes mgBlink{0%,36%{transform:scaleY(1)}38%{transform:scaleY(.06)}43%{transform:scaleY(1)}84%{transform:scaleY(1)}86%{transform:scaleY(.06)}90%{transform:scaleY(1)}100%{transform:scaleY(1)}}
/* thinking (while picking): a calm in-place "pondering" bob — stays put (no horizontal drift) and
   only the tiniest tilt, so Hoot never shifts around or leans over the message box */
.mg-owl.is-think .mg-float{animation:mgThink .8s ease-in-out infinite}
@keyframes mgThink{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
/* happy announce */
.mg-owl.is-happy .mg-eyes{display:none}
.mg-owl.is-happy .mg-smile{display:block}
.mg-owl.is-happy .mg-float{animation:mgHappy 1s ease}
@keyframes mgHappy{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-12px) scale(.94,1.1)}55%{transform:translateY(0) scale(1.08,.9)}75%{transform:translateY(-4px) scale(.98,1.03)}100%{transform:translateY(0) scale(1,1)}}
.mg-owl.is-happy .mg-wing-l{animation:mgFlap .46s ease-in-out 3}
@keyframes mgFlap{0%,100%{transform:rotate(0)}45%{transform:rotate(-34deg)}70%{transform:rotate(-6deg)}}
/* hover / tap: JS adds .is-react + ONE random .is-react-<name> so Hoot does a different action each
   time (wiggle, spin-around, dance/sway, hop, head-tilt); happy face + a stream of hearts for all */
.mg-owl.is-react .mg-eyes{display:none}
.mg-owl.is-react .mg-smile{display:block}
.mg-owl.is-react .mg-love{animation:mgLove 1.4s ease-in-out infinite}
.mg-owl.is-react .mg-love2{animation:mgLove 1.4s ease-in-out .48s infinite}
.mg-owl.is-react .mg-love3{animation:mgLove 1.4s ease-in-out .92s infinite}
.mg-owl.is-react-pet  .mg-float{animation:mgPet .9s ease-in-out}
.mg-owl.is-react-pet  .mg-wing-l{animation:mgWave 1s ease-in-out}
.mg-owl.is-react-spin .mg-float{transform-origin:center;animation:mgSpin 1.05s cubic-bezier(.5,0,.3,1)}
.mg-owl.is-react-sway .mg-float{transform-origin:center bottom;animation:mgSway 1s ease-in-out}
.mg-owl.is-react-hop  .mg-float{animation:mgHop 1s cubic-bezier(.3,1.2,.5,1)}
.mg-owl.is-react-tilt .mg-float{transform-origin:center bottom;animation:mgTilt 1.05s ease-in-out}
@keyframes mgPet{0%,100%{transform:translateY(0) rotate(-3deg) scale(1.02)}25%{transform:translateY(-6px) rotate(3deg) scale(1.03)}50%{transform:translateY(-1px) rotate(-2deg) scale(1.02)}75%{transform:translateY(-5px) rotate(4deg) scale(1.03)}}
@keyframes mgWave{0%,100%{transform:rotate(4deg)}15%{transform:rotate(-26deg)}35%{transform:rotate(4deg)}50%{transform:rotate(-18deg)}70%{transform:rotate(-2deg)}}
@keyframes mgSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes mgSway{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-6px) rotate(-6deg)}40%{transform:translateX(5px) rotate(5deg)}60%{transform:translateX(-4px) rotate(-4deg)}80%{transform:translateX(4px) rotate(4deg)}}
@keyframes mgHop{0%{transform:translateY(0) scaleY(1)}18%{transform:translateY(-15px) scaleY(1.08)}42%{transform:translateY(0) scaleY(.9)}58%{transform:translateY(-7px) scaleY(1.02)}100%{transform:translateY(0) scaleY(1)}}
@keyframes mgTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-13deg)}62%{transform:rotate(11deg)}}
@keyframes mgLove{0%{opacity:0;transform:translateY(6px) scale(.35)}22%{opacity:1;transform:translateY(-4px) scale(1.05)}55%{opacity:.9;transform:translateY(-16px) scale(1)}100%{opacity:0;transform:translateY(-34px) scale(.8)}}
@media (prefers-reduced-motion:reduce){
  .mg-shadow,.mg-float,.mg-ears,.mg-eyes,.mg-wing-l,.mg-beak,.mg-love,
  .mg-owl.is-think .mg-float,.mg-owl.is-happy .mg-float,.mg-owl.is-happy .mg-wing-l,
  .mg-owl.is-react .mg-float,.mg-owl.is-react .mg-wing-l,.mg-owl.is-react .mg-love,
  .mg-owl.is-react .mg-love2,.mg-owl.is-react .mg-love3{animation:none}
}