/* Perpetuum — Mr. G avatar pass (4 Oct 2026). Loaded last.
   Canonical character: the original lime giraffe in glasses.
   Large: one circular bubble beside the app; his head rises out of it once, ossicones breaking the rim, then a quiet lime halo.
   Small (hero, app, thesis credit): one consistent face crop in a lime-ringed disc. */

/* ---------- small avatar ---------- */
.gmk{position:relative;display:block;flex:none;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 38%,#3A4122,#1B1E12 78%);box-shadow:inset 0 0 0 1.5px #D2F154,0 0 0 0 rgba(210,241,84,0)}
.gmk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.gmk::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px #D2F154;pointer-events:none}
/* hero: the halo answers the film beat ("Mr. G widens it") — film-clock driven, so it holds still when paused */
.hb .gmk{width:34px;height:34px;filter:none;box-shadow:0 0 0 calc(var(--w,0) * 5px) rgba(210,241,84,.22),0 0 calc(var(--w,0) * 18px) rgba(210,241,84,.55)}
.mq-id .gmk{width:30px;height:30px}
.mc-av--mk{background:none!important}
.mc-av--mk .gmk{width:100%;height:100%}
@container site (max-width:719.98px){.hb .gmk{width:30px;height:30px;margin-top:0}}

/* ---------- large avatar ---------- */
.mav{--rim:#D2F154}
.mq-avatar{align-self:end;display:grid;justify-items:center;gap:18px;width:clamp(150px,15cqi,224px);margin:0 clamp(16px,4cqi,64px) clamp(4px,1cqi,16px) 0}
.mav__b{position:relative;display:block;width:100%;aspect-ratio:1;container-type:inline-size;isolation:isolate}
/* bubble disc + rim */
.mav__b::before{content:"";position:absolute;inset:0;z-index:0;border-radius:50%;background:radial-gradient(circle at 50% 36%,#3D4524 0,#232716 58%,#16180F 100%);box-shadow:inset 0 0 0 1.5px var(--rim),inset 0 -14cqi 24cqi rgba(0,0,0,.35)}
/* halo: a soft lime ring of light outside the rim */
.mav__b::after{content:"";position:absolute;inset:-5cqi;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(210,241,84,0) 84%,rgba(210,241,84,.34) 92%,rgba(210,241,84,0) 100%);opacity:.75}
/* the clip: the disc plus a narrow window above it, so only the ossicones break the rim */
.mav__clip{position:absolute;z-index:1;left:0;top:-22cqi;width:100cqi;height:122cqi;overflow:hidden;
  -webkit-mask:radial-gradient(circle 49.4cqi at 50cqi 72cqi,#000 99%,transparent 100%),linear-gradient(#000,#000) 18cqi 0/36cqi 72cqi no-repeat;
          mask:radial-gradient(circle 49.4cqi at 50cqi 72cqi,#000 99%,transparent 100%),linear-gradient(#000,#000) 18cqi 0/36cqi 72cqi no-repeat}
/* character: 760 source framed on the face and upper bust (glasses at ~42% height, ossicones above the rim) */
.mav__c{position:absolute;left:-46cqi;top:12.6cqi;width:172.7cqi;height:172.7cqi;max-width:none;filter:drop-shadow(0 2cqi 3cqi rgba(0,0,0,.35));transform-origin:58% 60%}
.mq-avatar figcaption{display:grid;gap:4px;text-align:center;font-size:13px;line-height:1.2;color:#AAA497}
.mq-avatar figcaption b{font-size:17px;font-weight:600;color:var(--ivory)}

/* thesis artwork slot: same avatar, contained in its 760 box (bubble 600, rising part stays inside the box) */
.tx-mrg .mav--tx{position:absolute;left:80px;top:160px;display:block;width:600px}
.tx-mrg .mav--tx .mav__b::before{box-shadow:inset 0 0 0 4px var(--rim),inset 0 -84px 140px rgba(0,0,0,.35)}

/* ---------- motion: one entrance, then a slow halo breath. Only with motion allowed and not paused. ---------- */
html.motion-ok:not(.motion-paused) .mq-avatar:not(.is-in) .mav__c{transform:translateY(46cqi) rotate(-4deg)}
html.motion-ok:not(.motion-paused) .mq-avatar:not(.is-in) .mav__b::before{transform:scale(.86);opacity:0}
html.motion-ok:not(.motion-paused) .mq-avatar:not(.is-in) .mav__b::after{opacity:0}
html.motion-ok:not(.motion-paused) .mq-avatar:not(.is-in) figcaption{opacity:0;transform:translateY(8px)}
html.motion-ok:not(.motion-paused) .mq-avatar.is-in .mav__b::before{animation:mavDisc .55s cubic-bezier(.2,.9,.3,1.25) both}
html.motion-ok:not(.motion-paused) .mq-avatar.is-in .mav__c{animation:mavRise 1.05s cubic-bezier(.22,1.2,.36,1) .18s both}
html.motion-ok:not(.motion-paused) .mq-avatar.is-in .mav__b::after{animation:mavHaloIn 1.2s ease-out .75s both,mavHalo 6.5s ease-in-out 2s infinite}
html.motion-ok:not(.motion-paused) .mq-avatar.is-in figcaption{animation:mavCap .6s var(--ease-out) .6s both}
/* app: when a screen opens, his disc arrives with a small lift — once per screen change */
html.motion-ok:not(.motion-paused) .gq-s.is-on .gmk{animation:mavPop .6s cubic-bezier(.2,.9,.3,1.3) .45s both}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gmk img{animation:mavPeek .7s cubic-bezier(.22,1.2,.36,1) .5s both}
/* thesis: rises when the chapter-02 artwork lands */
html.motion-ok:not(.motion-paused) .tx-mrg .mav__c{transition:transform .9s cubic-bezier(.22,1.2,.36,1) .5s}
@keyframes mavDisc{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes mavRise{0%{transform:translateY(46cqi) rotate(-4deg)}62%{transform:translateY(-3.5cqi) rotate(1.5deg)}100%{transform:none}}
@keyframes mavHaloIn{from{opacity:0;transform:scale(.92)}60%{opacity:1}to{opacity:.75;transform:none}}
@keyframes mavHalo{0%,100%{opacity:.75}50%{opacity:.4}}
@keyframes mavCap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mavPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:none;opacity:1}}
@keyframes mavPeek{from{transform:translateY(38%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.mav *,.mav__b::before,.mav__b::after,.gmk,.gmk img{animation:none!important;transition:none!important}}

.motion-ok .mq-avatar[data-reveal]{opacity:1;transform:none;transition:none}
.tx-mrg{width:760px;height:760px}
.tx-mrg .mav__c{width:172.7cqi;height:172.7cqi}

/* ---------- responsive ---------- */
@container site (max-width:1079.98px){.mq-avatar{width:150px;margin-right:clamp(12px,3cqi,40px)}}
@container site (max-width:719.98px){
  .mq-head{grid-template-columns:minmax(0,1fr)}
  .mq-avatar{justify-self:start;display:flex;align-items:center;gap:16px;width:auto;margin:6px 0 0}
  .mq-avatar .mav__b{width:84px;flex:none}
  .mq-avatar figcaption{text-align:left;font-size:13px}
  .mq-avatar figcaption b{font-size:16px}
}