/* =========================================================
   The living mascot (with mascot.js). Self-contained on purpose:
   remove the <link>/<script> lines for mascot.css / mascot.js (or add ?mascot=off to the address)
   and every page goes back to exactly how it was.
   ========================================================= */

/* the moving eye sits exactly over the drawn one (same 434 x 611 picture space as the logo) */
.mm-eyes{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.mm-lid{ transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0); }
.mm-wrap{ position:relative; display:block; }

/* ---- Film: the mascot stands on the horizon line before the planet appears ---- */
/* centred and lifted to stand on the line by mascot.js (GSAP owns this element's transform) */
.mm-cameo{ position:absolute; left:50%; top:0; width:clamp(92px, 15vw, 132px); transform-origin:50% 100%; opacity:0; }
.mm-cameo .mm-disc{ position:absolute; inset:-18% -30% -6%; border-radius:50%; background:radial-gradient(circle at 50% 46%, rgba(255,240,210,0.9) 0%, rgba(243,221,176,0.55) 40%, rgba(217,169,78,0.18) 62%, transparent 72%); filter:blur(2px); }
.mm-cameo .mm-body{ position:relative; transform-origin:50% 100%; }
.mm-cameo img{ display:block; width:100%; height:auto; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.5)); }

/* ---- Sign-in card: the mascot peeks over the top edge (its body is tucked behind the card) ---- */
/* (only while the mascot is on: mascot.js adds html.mm-on, so ?mascot=off leaves the page untouched) */
.mm-on #cardWrap > .card{ z-index:1; }
.mm-on #cardWrap.card-wrap{ margin-top:clamp(56px, 7.5vh, 72px); }   /* room for the peek so it never covers the tagline */
.mm-peek{ position:absolute; right:34px; top:-62px; width:84px; height:62px; overflow:hidden; z-index:0; pointer-events:none; }
.mm-peek .mm-body{ position:relative; width:84px; transform-origin:50% 100%; }   /* mascot.js starts it tucked below the edge */
.mm-peek .mm-disc{ position:absolute; left:-10px; right:-10px; top:-6px; height:84px; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 60%, rgba(255,240,210,0.55), rgba(217,169,78,0.12) 60%, transparent 72%); }
.mm-peek img{ display:block; width:100%; height:auto; }
@media (max-width:520px){ .mm-peek{ right:22px; } }

@media (prefers-reduced-motion: reduce){ .mm-lid{ transform:scaleY(0) !important; } }