/* RankVII — THE PANEL (three animated judges). Pairs with assets/js/judges.js.
   States on .judges[data-state]: idle | thinking | scoring | done. Per-judge classes: .is-scored .is-final
   .is-thinking .mood-high/.mood-mid/.mood-low. Eyes follow --gx/--gy (set by JS). Reduced-motion: static. */
.judges{position:relative;width:100%;max-width:420px;margin:0 auto;--gx:0px;--gy:0px}
.judges svg{width:100%;height:auto;display:block;overflow:visible}
.judge{--jt:var(--violet);color:var(--jt)}
.jg-shoulders{fill:color-mix(in srgb,var(--jt) 22%,var(--bg-3));stroke:color-mix(in srgb,var(--jt) 55%,transparent);stroke-width:1.5}
.jg-head{fill:#f5d5c2;stroke:rgba(0,0,0,.18);stroke-width:1.2}
.judge[data-judge="photo"] .jg-head{fill:#e9c3a6}
.judge[data-judge="head"] .jg-head{fill:#c9946b}
.jg-hair{fill:color-mix(in srgb,var(--jt) 70%,#1a1630);}
.jg-brow{fill:none;stroke:#2a1f33;stroke-width:2.6;stroke-linecap:round;transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.jg-white{fill:#fff}
.jg-pupil{fill:#221a2e;transform:translate(var(--gx),var(--gy));transition:transform .12s linear}
.jg-mouth{fill:none;stroke:#2a1f33;stroke-width:2.4;stroke-linecap:round;transition:d .3s}
.jg-acc{color:var(--jt)}
.jg-think{opacity:0;transition:opacity .3s}
.jg-think circle{fill:var(--jt)}
.jg-paddle{opacity:0;transform:translate(44px,40px) rotate(18deg) translateY(30px);transform-origin:44px 86px;transition:transform .55s cubic-bezier(.2,.9,.2,1.2),opacity .3s}
.jg-stick{fill:color-mix(in srgb,var(--jt) 60%,#fff)}
.jg-card{fill:#0d0d16;stroke:var(--jt);stroke-width:2.2;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
[data-theme="light"] .jg-card{fill:#fff}
.jg-score{font-family:var(--font-display,"Unbounded",system-ui,sans-serif);font-weight:800;font-size:19px;fill:var(--ink);letter-spacing:-.02em}
.jg-name{font-family:var(--font-body,Manrope,system-ui,sans-serif);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}

/* ---- idle: gentle bob, blink ---- */
@keyframes jg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes jg-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.jg-body{animation:jg-bob 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.judge:nth-child(2) .jg-body{animation-delay:-1.2s}
.judge:nth-child(3) .jg-body{animation-delay:-2.4s}
.jg-eye{animation:jg-blink 5.2s infinite;transform-box:fill-box;transform-origin:center}
.judge:nth-child(2) .jg-eye{animation-delay:-2s}
.judge:nth-child(3) .jg-eye{animation-delay:-3.7s}

/* ---- thinking: eyes scan the photo (to the start side), brows furrow, dots pulse, small head tilt ---- */
@keyframes jg-scan{0%,100%{transform:translate(-2px,1px)}30%{transform:translate(-2px,-1.5px)}55%{transform:translate(1.5px,-1px)}80%{transform:translate(-1.5px,1.5px)}}
@keyframes jg-dots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes jg-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
.judges[data-state="thinking"] .jg-pupil,.judge.is-thinking .jg-pupil{animation:jg-scan 2.8s ease-in-out infinite;transition:none}
.judges[data-state="thinking"] .jg-brow.l,.judge.is-thinking .jg-brow.l{transform:rotate(8deg) translateY(1px)}
.judges[data-state="thinking"] .jg-brow.r,.judge.is-thinking .jg-brow.r{transform:rotate(-8deg) translateY(1px)}
.judges[data-state="thinking"] .jg-think,.judge.is-thinking .jg-think{opacity:1}
.judges[data-state="thinking"] .jg-think circle,.judge.is-thinking .jg-think circle{animation:jg-dots 1.2s infinite}
.jg-think circle:nth-child(2){animation-delay:.2s!important}
.jg-think circle:nth-child(3){animation-delay:.4s!important}
.judges[data-state="thinking"] .jg-head-wrap,.judge.is-thinking .jg-head-wrap{animation:jg-tilt 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.judge.is-scored .jg-head-wrap{animation:none}

/* ---- scored: paddle up, mood ---- */
.judge.is-scored .jg-paddle{opacity:1;transform:translate(44px,40px) rotate(0) translateY(0)}
.judge.is-scored .jg-think{opacity:0}
.judge.is-scored .jg-brow{transform:none}
.judge.mood-high .jg-mouth{d:path("M-9,12 q9,9 18,0")}
.judge.mood-mid .jg-mouth{d:path("M-7,14 q7,4 14,0")}
.judge.mood-low .jg-mouth{d:path("M-7,16 q7,-3 14,0")}
.judge.mood-high .jg-brow.l{transform:translateY(-2px)}
.judge.mood-high .jg-brow.r{transform:translateY(-2px)}
.judge.is-final .jg-card{stroke:url(#gaugeGrad);stroke-width:3;filter:drop-shadow(0 0 16px rgba(255,79,216,.55))}
@keyframes jg-pop{0%{transform:translate(44px,40px) scale(.9)}60%{transform:translate(44px,40px) scale(1.12)}100%{transform:translate(44px,40px) scale(1)}}
.judge.is-final .jg-paddle{animation:jg-pop .5s cubic-bezier(.2,.9,.3,1.3)}

/* ---- placements ---- */
/* hero: heads peek over the top edge of the drop zone */
.drop{overflow:visible}
.judges-peek{position:absolute;left:50%;top:-46px;transform:translateX(-50%);width:min(64%,340px);pointer-events:none;z-index:2}
.judges-peek svg{clip-path:inset(0 0 68px 0)}
.judges-peek .jg-name,.judges-peek .jg-paddle,.judges-peek .jg-think{display:none}
[dir="rtl"] .judges-peek{left:auto;right:50%;transform:translateX(50%)}
/* analysing: full panel */
.judges-live{max-width:440px;margin:0 0 .4rem;padding:.6rem .4rem 0;border-radius:var(--r-s);background:var(--card);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
/* results: compact strip under the formula */
.judges-result{max-width:380px;margin:.6rem 0 0}
.judges-result .jg-name{font-size:12px}
@media (max-width:640px){
  .judges-peek{top:-42px;width:min(70%,270px)}
  .judges-live{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .jg-body,.jg-eye,.jg-pupil,.jg-think circle,.jg-head-wrap,.judge.is-final .jg-paddle{animation:none!important}
  .jg-paddle,.jg-brow,.jg-pupil{transition:none}
}