/* The Curious Crew: lightweight articulated vector characters. */
.cr-stage{display:flex;align-items:center;gap:22px;position:relative;z-index:2;margin-top:48px;isolation:isolate;text-align:left;flex-shrink:0;width:100%}
.cr-stage:nth-child(even){justify-content:flex-end}
.cr-creature{width:210px;flex:0 0 210px;position:relative;color:inherit;border-radius:32px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cr-creature svg{width:100%;overflow:visible;transition:transform .3s}
.cr-creature:hover svg{transform:rotate(-3deg) scale(1.06)}
.cr-hint{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.cr-caption .mono{opacity:.55;font-size:9px;letter-spacing:.12em}.cr-caption p{font-size:18px;max-width:28ch;margin-top:8px}.cr-caption b{font-family:var(--serif);font-size:27px;font-weight:400}.cr-response{display:block;font-size:12px;min-height:22px;opacity:.8;margin-top:5px}
.cr-body,.cr-wing,.cr-tail,.cr-ears,.cr-prop,.cr-eye,.cr-fire,.cr-spark,.cr-tongue,.cr-fly{transform-box:fill-box;transform-origin:center}
.cr-body{animation:cr-bob 3.4s ease-in-out infinite}.cr-wing{transform-origin:right bottom;animation:cr-flap 1.8s ease-in-out infinite}.cr-tail,.cr-ears{animation:cr-wiggle 2.8s ease-in-out infinite}.cr-eye{animation:cr-blink 5s infinite}.cr-fire{transform-origin:left center;animation:cr-breathe 4.8s ease-in-out infinite}.cr-horn{animation:cr-glow 2.6s ease-in-out infinite}.cr-spark{animation:cr-twinkle 2.6s ease-in-out infinite}.cr-fly{animation:cr-fly 2s ease-in-out infinite}.cr-tongue{transform-origin:left top;animation:cr-breathe 5s infinite}.cr-steam{animation:cr-twinkle 2s infinite}.cr-prop{animation:cr-sip 4s ease-in-out infinite}
.cr-stage *{animation-play-state:paused!important}.cr-visible *{animation-play-state:running!important;animation-delay:var(--cr-delay,0s)}
.cr-active .cr-fire,.cr-active .cr-tongue{animation:cr-blast .4s ease-in-out infinite;opacity:1}.cr-active .cr-horn{filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px #DDF784)}.cr-active .cr-body{animation:cr-hop .5s ease-in-out 4}.cr-active .cr-spark{animation:cr-twinkle .5s infinite}
@keyframes cr-bob{50%{transform:translateY(-5px) rotate(2deg)}}@keyframes cr-flap{50%{transform:rotate(15deg) scaleX(.85)}}@keyframes cr-wiggle{50%{transform:rotate(-9deg)}}@keyframes cr-blink{0%,43%,49%,100%{transform:scaleY(1)}46%{transform:scaleY(.12)}}@keyframes cr-breathe{0%,55%,100%{transform:scale(.05);opacity:0}65%,85%{transform:scale(1);opacity:1}75%{transform:scale(.85,1.1);opacity:1}}@keyframes cr-glow{50%{filter:drop-shadow(0 0 9px #DDF784) drop-shadow(0 0 16px #fff)}}@keyframes cr-twinkle{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:1;transform:translateY(-5px)}}@keyframes cr-fly{50%{transform:translate(9px,-12px) rotate(12deg)}}@keyframes cr-sip{50%{transform:translateY(-12px) rotate(-12deg)}}@keyframes cr-blast{50%{transform:scale(1.12,.85)}}@keyframes cr-hop{50%{transform:translateY(-18px) rotate(-5deg)}}
@media(min-width:901px){.hero .cr-stage{margin-top:12px;justify-content:center}.hero .cr-creature{width:140px;flex-basis:140px}.hero .cr-caption p{font-size:15px}.hero .cr-caption b{font-size:22px}}
@media(max-width:600px){.cr-stage{gap:4px;margin-top:28px;justify-content:center!important}.cr-creature{width:145px;flex-basis:145px}.cr-caption p{font-size:14px}.cr-caption b{font-size:22px}.cr-caption .mono{font-size:8px}.cr-hint{font-size:8px}.cr-response{font-size:11px}.cr-caption{min-width:0}.cr-stage{padding-left:16px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){.cr-stage *{animation:none!important;transition:none!important}.cr-fire,.cr-tongue{opacity:0}.cr-active .cr-fire,.cr-active .cr-tongue{opacity:1}.cr-horn{filter:drop-shadow(0 0 6px #DDF784)}}
.hero>.cr-stage{flex:0 0 auto;flex-direction:row;align-items:center;min-height:160px;padding-top:12px;padding-bottom:12px}

/* action effects synced to the creature sounds */
.cr-active.cr-dragon svg{animation:cr-rumble .09s linear 14}
.cr-active.cr-dragon .cr-fire{animation:cr-blast .18s ease-in-out infinite;opacity:1;filter:drop-shadow(0 0 10px #FF916C) drop-shadow(0 0 22px #F9EC8D)}
.cr-active.cr-dragon .cr-wing{animation:cr-flap .3s ease-in-out infinite}
.cr-active.cr-unicorn .cr-horn{animation:cr-glow .35s ease-in-out infinite}
.cr-active.cr-unicorn .cr-spark{animation:cr-twinkle .35s infinite}
.cr-active.cr-unicorn .cr-body{animation:cr-rear 1s cubic-bezier(.3,1.4,.6,1) .45s 1 both}
.cr-active.cr-unicorn .cr-tail{animation:cr-wiggle .25s ease-in-out infinite}
.cr-active.cr-cat .cr-prop{animation:cr-sip-big .55s ease-in-out 1 both}
.cr-active.cr-cat .cr-steam{animation:cr-twinkle .3s infinite}
.cr-active.cr-cat .cr-body{animation:cr-meow .7s ease-in-out .85s 1 both}
.cr-active.cr-cat .cr-tail{animation:cr-wiggle .4s ease-in-out infinite}
.cr-active.cr-frog .cr-tongue{animation:cr-lick .45s ease-out 1 both;opacity:1}
.cr-active.cr-frog .cr-fly{animation:cr-eaten .45s ease-in 1 forwards}
.cr-active.cr-frog .cr-body{animation:cr-croak .25s ease-in-out .45s 4}
.cr-active.cr-bunny .cr-body{animation:cr-hop .5s ease-in-out 4}
.cr-active.cr-bunny .cr-ears{animation:cr-wiggle .25s ease-in-out infinite}
@keyframes cr-rumble{25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
@keyframes cr-rear{40%{transform:rotate(-14deg) translateY(-10px)}100%{transform:none}}
@keyframes cr-sip-big{50%{transform:translateY(-22px) rotate(-28deg)}}
@keyframes cr-meow{30%{transform:scale(1.06,.95) translateY(2px)}60%{transform:scale(.97,1.05) translateY(-6px)}}
@keyframes cr-lick{0%{transform:scale(.05);opacity:0}35%{transform:scale(1.25,1);opacity:1}100%{transform:scale(.05);opacity:0}}
@keyframes cr-eaten{40%{transform:translate(-20px,8px) scale(.8)}100%{transform:translate(-75px,22px) scale(0);opacity:0}}
@keyframes cr-croak{50%{transform:scale(1.07,.94)}}

/* v2 clay creatures: soft drop shadow + burst particles */
.cr-creature svg{filter:drop-shadow(0 14px 18px rgba(23,12,64,.22))}
.cr-fx{position:absolute;left:50%;top:42%;width:0;height:0;z-index:3;pointer-events:none}
.cr-p{position:absolute;left:0;top:0;font-style:normal;font-size:18px;line-height:1;opacity:0;transform:translate(-50%,-50%) scale(.2);animation:cr-pop 1.4s cubic-bezier(.2,.8,.3,1) forwards}
.cr-p-spark{color:#DDF784;text-shadow:0 0 10px #fff,0 0 18px #DDF784}
.cr-p-spark:nth-child(3n){color:#F5B8D5}.cr-p-spark:nth-child(3n+1){color:#A6E8E4}
.cr-p-heart{color:#FF7E9A;font-size:16px}.cr-p-heart:nth-child(2n){color:#F5B8D5}
.cr-p-steam{color:#fff;font-size:15px;animation-name:cr-rise;animation-duration:1.8s;left:-8px;top:10px}
.cr-p-ember{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#FFFBD6,#FF916C 60%,transparent 70%);left:56px;top:-20px;animation-duration:1.1s}
.cr-p-drop{width:8px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#A6E8E4;box-shadow:inset -2px -2px 0 rgba(0,0,0,.08);left:58px;top:-20px}
@keyframes cr-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--s)) rotate(40deg)}}
@keyframes cr-rise{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.95}100%{opacity:0;transform:translate(calc(var(--dx) * .3),var(--dy)) scale(var(--s))}}
@media(prefers-reduced-motion:reduce){.cr-p{display:none}}

/* v3: six new characters, compact placements, unique actions */
.cr-head{transform-box:fill-box;transform-origin:50% 100%}
.cr-compact{display:block;position:relative;width:auto;margin:0;flex:none}
.cr-compact .cr-creature{width:100%;flex-basis:auto}
.cr-compact .cr-hint{text-align:center}
.cr-at-fox{width:200px;margin-top:6px}
.fc-review{position:relative}
.cr-at-penguin{position:absolute;right:3%;bottom:4%;width:clamp(140px,13vw,190px);z-index:2}
.cr-bubble{position:absolute;left:55%;top:-6px;max-width:190px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;line-height:1.3;padding:8px 12px;border-radius:14px 14px 14px 4px;opacity:1;white-space:normal;pointer-events:none;z-index:4}
.cr-bubble:empty{display:none}
@media (min-width:901px){.ft-screen .fc-review h4,.ft-screen .fc-review>div p{max-width:60%}}
@media (max-width:900px){.cr-at-penguin{width:120px;top:20px;bottom:auto}.cr-at-fox{width:170px}}

/* idle touches */
.cr-raccoon .cr-prop{transform-origin:50% 0;animation:cr-swing 3.2s ease-in-out infinite}
.cr-penguin .cr-wing{transform-origin:20% 90%;animation:cr-wave 2.6s ease-in-out infinite}
.cr-fox .cr-head{animation:cr-tilt 5s ease-in-out infinite}
.cr-bear .cr-prop{animation:cr-pulse 2.4s ease-in-out infinite}
.cr-owl .cr-wing{transform-origin:80% 20%}

/* click actions */
.cr-active.cr-raccoon .cr-prop{animation:cr-swing .32s ease-in-out 6}
.cr-active.cr-raccoon .cr-tail{animation:cr-wiggle .2s ease-in-out infinite}
.cr-active.cr-owl .cr-prop{animation:cr-lift .7s cubic-bezier(.34,1.56,.64,1) 2}
.cr-active.cr-owl .cr-wing{animation:cr-flap .22s ease-in-out infinite}
.cr-active.cr-octopus .cr-prop{animation:cr-shake .1s linear 14}
.cr-active.cr-octopus .cr-steam{animation:cr-twinkle .3s infinite}
.cr-active.cr-octopus .cr-body{animation:cr-croak .3s ease-in-out .9s 3}
.cr-active.cr-bear .cr-prop{animation:cr-pulse .38s ease-in-out 5}
.cr-active.cr-bear .cr-body{animation:cr-meow .6s ease-in-out 2}
.cr-active.cr-fox .cr-head{animation:cr-tilt-q .9s cubic-bezier(.34,1.56,.64,1) 1 both}
.cr-active.cr-fox .cr-spark{animation:cr-pop-q .5s cubic-bezier(.34,1.56,.64,1) 1 both}
.cr-active.cr-penguin .cr-wing{animation:cr-wave .24s ease-in-out infinite}
.cr-active.cr-penguin .cr-body{animation:cr-waddle .3s ease-in-out 6}
@keyframes cr-swing{50%{transform:rotate(-7deg)}}
@keyframes cr-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
@keyframes cr-tilt{50%{transform:rotate(-5deg)}}
@keyframes cr-tilt-q{40%{transform:rotate(-14deg) translateY(-3px)}100%{transform:rotate(-8deg)}}
@keyframes cr-pop-q{0%{transform:scale(.3);opacity:.2}100%{transform:scale(1.12);opacity:1}}
@keyframes cr-pulse{50%{transform:scale(1.1)}}
@keyframes cr-lift{50%{transform:translateY(-18px) rotate(-8deg)}}
@keyframes cr-shake{25%{transform:translate(-3px,1px) rotate(-3deg)}75%{transform:translate(3px,-1px) rotate(3deg)}}
@keyframes cr-waddle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}

/* new burst particles */
.cr-p-coin{color:#C9971A;font-weight:800;font-size:17px;text-shadow:0 0 8px #FFF6C2}
.cr-p-confetti{width:9px;height:6px;border-radius:2px;background:#DDF784}
.cr-p-confetti:nth-child(4n){background:#F5B8D5}.cr-p-confetti:nth-child(4n+1){background:#A6E8E4}.cr-p-confetti:nth-child(4n+2){background:#F7D44C}
.cr-p-bubble{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:rgba(166,232,228,.35);animation-name:cr-rise;animation-duration:1.6s}
.cr-p-q{color:#6546E8;font-weight:800;font-size:22px;left:60px;top:-50px}
.cr-p-snow{color:#fff;font-size:15px;text-shadow:0 0 6px #A6E8E4}

/* v4: CK-branded crew, ~1.5x larger */
.cr-creature{width:315px;flex-basis:315px}
.cr-glint{transform-box:fill-box;transform-origin:center;animation:cr-glint 3.4s ease-in-out infinite}
@keyframes cr-glint{0%,60%,100%{opacity:0;transform:scale(.3) rotate(0)}75%{opacity:1;transform:scale(1) rotate(45deg)}}
.cr-at-fox{width:270px}
.cr-at-penguin{width:clamp(160px,15vw,210px)}
@media(max-width:900px){.cr-at-penguin{width:150px}.cr-at-fox{width:220px}}
@media(max-width:600px){.cr-creature{width:190px;flex-basis:190px}.cr-stage{gap:8px}}
@media(prefers-reduced-motion:reduce){.cr-glint{opacity:1;transform:none}}

/* v5: CK kid section poses as clay SVG (replaces cut-out PNGs) */
.ckm svg.ckm-art{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 16px 22px rgba(23,12,64,.22))}
.ckm.in svg.ckm-art .ckp-body{animation:ckmFloat 6s ease-in-out infinite}
.ckm-art .ckp-float{animation:cr-bob 4.2s ease-in-out infinite}
.ckm-art .ckp-spin{transform-box:fill-box;transform-origin:center;animation:ckp-spin 9s linear infinite}
.ckm-art .ckp-mug{transform-box:fill-box;transform-origin:50% 100%;animation:cr-sip 5s ease-in-out infinite}
.ckm-art .cr-steam,.ckm-art .cr-glint{transform-box:fill-box;transform-origin:center}
.ckm-art .cr-steam{animation:cr-twinkle 2s infinite}
@keyframes ckp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ckm-art *{animation:none!important}}

/* v6: perched placements (each animal sits on the element it belongs to) + jointed props */
.cr-perch-row{position:relative;height:0;z-index:6}
.cr-perch{position:absolute;bottom:calc(100% - var(--sink,4px));width:var(--pw,170px);z-index:6;margin-bottom:calc(var(--pw,170px) * -.06)}
.cr-perch-row>.cr-perch{bottom:calc(0px - var(--sink,4px))}
.cr-side-right{right:clamp(8px,4%,48px)}
.cr-side-left{left:clamp(8px,4%,48px)}
.cr-side-center{left:50%;translate:-50% 0}
.cr-perch .cr-creature{width:100%;flex:none;display:block}
.cr-perch .cr-hint,.cr-compact .cr-hint{position:absolute;left:50%;top:-6px;translate:-50% -100%;white-space:nowrap;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;opacity:0;scale:.9;transition:opacity .2s,scale .2s;pointer-events:none}
.cr-perch .cr-hint b{font-family:var(--serif);font-weight:400;text-transform:none;font-size:13px;letter-spacing:0}
.cr-perch .cr-creature:hover .cr-hint,.cr-perch .cr-creature:focus-visible .cr-hint,.cr-compact .cr-creature:hover .cr-hint,.cr-compact .cr-creature:focus-visible .cr-hint{opacity:1;scale:1}
.cr-perch .cr-bubble{left:62%;top:4%}
.cr-perch *{animation-play-state:paused!important}.cr-perch.cr-visible *{animation-play-state:running!important;animation-delay:var(--cr-delay,0s)}
.cr-creature:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
/* arms live inside the prop group, so props pivot at the shoulders instead of sliding off the body */
.cr-creature .cr-prop{transform-box:fill-box;transform-origin:50% 0;animation:cr-hold 4.4s ease-in-out infinite}
@keyframes cr-hold{50%{transform:rotate(-3deg) translateY(-2px)}}
.cr-active.cr-cat .cr-prop{animation:cr-hold-big .7s ease-in-out 1 both}
.cr-active.cr-owl .cr-prop{animation:cr-hold-big .7s ease-in-out 2}
.cr-active.cr-bear .cr-prop{animation:cr-hug .38s ease-in-out 5}
.cr-active.cr-raccoon .cr-prop{animation:cr-hug .32s ease-in-out 6}
.cr-active.cr-octopus .cr-prop{animation:cr-shake .1s linear 14}
@keyframes cr-hold-big{50%{transform:rotate(-8deg) translateY(-5px)}}
@keyframes cr-hug{50%{transform:scale(1.04,.97)}}
.cr-penguin .cr-wing{transform-box:fill-box;transform-origin:0% 100%}
.cr-owl .cr-wing{transform-box:fill-box;transform-origin:80% 10%}
@media (max-width:900px){.cr-perch{--pw:130px!important}.cr-side-right{right:8px}}
@media (max-width:600px){.cr-perch{--pw:112px!important}.cr-perch .cr-bubble{left:auto;right:70%;max-width:150px}}
.cr-side-at{translate:-50% 0}
.cr-side-in-right{bottom:6px!important;right:6px;margin:0!important}
.cr-side-in-right .cr-bubble{left:auto;right:60%;top:-10%}
@media (max-width:900px){.cr-side-in-right{--pw:96px!important}}
/* phones: each perched animal gets its own row right above the element it sits on */
.cr-perch-row.cr-flow{height:auto;display:flex;padding:0 4px;margin-bottom:calc(var(--flow-pw,112px) * -.07)}
.cr-flow-right{justify-content:flex-end}.cr-flow-left{justify-content:flex-start}.cr-flow-center{justify-content:center}
.cr-flow>.cr-perch{position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;translate:none!important;margin:0!important}

/* ===== v7 rig: every part pivots at its real joint, all driven by one breathing cycle ===== */
[class^="rg-"],[class*=" rg-"]{transform-box:view-box}
.rg-torso{animation:rg-breath var(--cyc,4.6s) ease-in-out infinite}
.rg-upper{animation:rg-rise var(--cyc,4.6s) ease-in-out infinite}
.rg-head{animation:rg-head var(--cyc,4.6s) ease-in-out infinite}
.rg-neck{animation:rg-neck var(--cyc,4.6s) ease-in-out infinite}
.rg-hold{animation:rg-hold var(--cyc,4.6s) ease-in-out infinite}
.rg-tail{animation:rg-tail var(--cyc,4.6s) ease-in-out infinite}
.rg-armL{animation:rg-armL var(--cyc,4.6s) ease-in-out infinite}
.rg-armR{animation:rg-armR var(--cyc,4.6s) ease-in-out infinite}
.rg-foreR{animation:rg-foreR var(--cyc,4.6s) ease-in-out infinite}
.rg-earL{animation:rg-earL var(--cyc,4.6s) ease-in-out infinite}
.rg-earR{animation:rg-earR var(--cyc,4.6s) ease-in-out infinite}
.rg-wingL{animation:rg-wingL var(--cyc,4.6s) ease-in-out infinite}
.rg-wingR{animation:rg-wingR var(--cyc,4.6s) ease-in-out infinite}
.rg-flipL{animation:rg-flipL var(--cyc,4.6s) ease-in-out infinite}
.rg-flipR{animation:rg-wave var(--cyc,4.6s) ease-in-out infinite}
.rg-tentA{animation:rg-tentA var(--cyc,4.6s) ease-in-out infinite}
.rg-tentB{animation:rg-tentB var(--cyc,4.6s) ease-in-out infinite}
@keyframes rg-breath{0%,100%{transform:none}50%{transform:scale(1.014,1.032)}}
@keyframes rg-rise{0%,100%{transform:none}50%{transform:translateY(var(--rise,-1.8px))}}
@keyframes rg-head{0%,100%{transform:none}25%{transform:rotate(-2.6deg)}50%{transform:translateY(-.8px)}75%{transform:rotate(2.2deg)}}
@keyframes rg-neck{0%,100%{transform:none}50%{transform:rotate(-3deg)}}
@keyframes rg-hold{0%,100%{transform:none}50%{transform:translateY(-1.6px) rotate(-1.2deg)}}
@keyframes rg-tail{0%,100%{transform:none}50%{transform:rotate(var(--tw,-8deg))}}
@keyframes rg-armL{0%,100%{transform:none}50%{transform:rotate(var(--al,4deg))}}
@keyframes rg-armR{0%,100%{transform:none}50%{transform:rotate(var(--ar,-4deg))}}
@keyframes rg-foreR{0%,100%{transform:none}30%{transform:rotate(var(--fr,-6deg))}50%{transform:none}70%{transform:rotate(var(--fr,-6deg))}}
@keyframes rg-earL{0%,64%,100%{transform:none}74%{transform:rotate(-7deg)}86%{transform:rotate(3deg)}}
@keyframes rg-earR{0%,66%,100%{transform:none}76%{transform:rotate(7deg)}88%{transform:rotate(-3deg)}}
@keyframes rg-wingL{0%,100%{transform:none}50%{transform:rotate(var(--wl,6deg))}}
@keyframes rg-wingR{0%,100%{transform:none}50%{transform:rotate(var(--wr,-5deg))}}
@keyframes rg-flipL{0%,100%{transform:none}50%{transform:rotate(var(--fl,5deg))}}
@keyframes rg-wave{0%,100%{transform:none}15%{transform:rotate(-14deg)}30%{transform:rotate(5deg)}45%{transform:rotate(-11deg)}60%{transform:rotate(2deg)}}
@keyframes rg-tentA{0%,100%{transform:none}50%{transform:rotate(5deg)}}
@keyframes rg-tentB{0%,100%{transform:none}50%{transform:rotate(-5deg)}}

/* click actions: the whole body moves together */
.cr-active .rg-root{animation:rg-hop .55s ease-in-out 2}
.cr-active .rg-head{animation:rg-nod .55s ease-in-out 2}
@keyframes rg-hop{0%,100%{transform:none}30%{transform:translateY(-12px)}55%{transform:scale(1.05,.95)}75%{transform:translateY(-3px)}}
@keyframes rg-nod{0%,100%{transform:none}35%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}}
@keyframes rg-wag{0%,100%{transform:none}50%{transform:rotate(12deg)}}
.cr-active.cr-cat .rg-root{animation:none}
.cr-active.cr-cat .rg-hold{animation:rg-sip 1.2s ease-in-out both}
.cr-active.cr-cat .rg-head{animation:rg-sip-head 1.2s ease-in-out both}
.cr-active.cr-cat .rg-torso{animation:rg-sip-torso 1.2s ease-in-out both}
@keyframes rg-sip{0%,100%{transform:none}40%,70%{transform:translateY(-6px) rotate(-1deg)}}
@keyframes rg-sip-head{0%,100%{transform:none}40%,70%{transform:translateY(-2px) rotate(-5deg)}}
@keyframes rg-sip-torso{0%,100%{transform:none}40%,70%{transform:scale(1.02,1.07)}}
.cr-active.cr-raccoon .rg-root{animation:none}
.cr-active.cr-raccoon .rg-armL{animation:rg-swingL .4s ease-in-out 3}
.cr-active.cr-raccoon .rg-armR{animation:rg-swingR .4s ease-in-out 3}
.cr-active.cr-raccoon .rg-tail{animation:rg-wag .2s ease-in-out 6}
@keyframes rg-swingL{0%,100%{transform:none}50%{transform:rotate(14deg)}}
@keyframes rg-swingR{0%,100%{transform:none}50%{transform:rotate(-14deg)}}
.cr-active.cr-bear .rg-root{animation:none}
.cr-active.cr-bear .rg-hold{animation:rg-squeeze .42s ease-in-out 4}
.cr-active.cr-bear .rg-torso{animation:rg-squash .42s ease-in-out 4}
@keyframes rg-squeeze{0%,100%{transform:none}50%{transform:translateY(-2px) scale(.95,1.03)}}
@keyframes rg-squash{0%,100%{transform:none}50%{transform:scale(1.03,.98)}}
.cr-active.cr-bunny .rg-root{animation:rg-hop .5s ease-in-out 3}
.cr-active.cr-bunny .rg-earL{animation:rg-flopL .25s ease-in-out 6}
.cr-active.cr-bunny .rg-earR{animation:rg-flopR .25s ease-in-out 6}
@keyframes rg-flopL{50%{transform:rotate(-14deg)}}
@keyframes rg-flopR{50%{transform:rotate(14deg)}}
.cr-active.cr-fox .rg-root{animation:none}
.cr-active.cr-fox .rg-head{animation:rg-ponder .9s cubic-bezier(.34,1.56,.64,1) both}
.cr-active.cr-fox .rg-foreR{animation:rg-tap .3s ease-in-out 3}
.cr-active.cr-fox .rg-tail{animation:rg-wag .25s ease-in-out 4}
@keyframes rg-ponder{40%{transform:rotate(-10deg) translateY(-2px)}100%{transform:rotate(-6deg)}}
@keyframes rg-tap{50%{transform:rotate(-10deg)}}
.cr-active.cr-frog .rg-root{animation:none}
.cr-active.cr-frog .rg-torso{animation:rg-croak .25s ease-in-out .45s 4}
@keyframes rg-croak{50%{transform:scale(1.07,.94)}}
.cr-active.cr-owl .rg-root{animation:none}
.cr-active.cr-owl .rg-wingR{animation:rg-raise .7s cubic-bezier(.34,1.56,.64,1) 2}
.cr-active.cr-owl .rg-wingL{animation:rg-flap .22s ease-in-out 6}
@keyframes rg-raise{50%{transform:rotate(-16deg) translateY(-4px)}}
@keyframes rg-flap{50%{transform:rotate(16deg)}}
.cr-active.cr-octopus .rg-root{animation:none}
.cr-active.cr-octopus .rg-armL{animation:rg-shakeL .1s linear 12}
.cr-active.cr-octopus .rg-armR{animation:rg-shakeR .1s linear 12}
.cr-active.cr-octopus .rg-head{animation:rg-wobble .6s ease-in-out .9s 2}
@keyframes rg-shakeL{25%{transform:rotate(-6deg)}75%{transform:rotate(4deg)}}
@keyframes rg-shakeR{25%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}
@keyframes rg-wobble{30%{transform:rotate(-5deg) scale(1.03,.97)}70%{transform:rotate(4deg)}}
.cr-active.cr-penguin .rg-root{animation:rg-waddle .3s ease-in-out 6}
.cr-active.cr-penguin .rg-flipR{animation:rg-wave .6s ease-in-out 3}
@keyframes rg-waddle{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.cr-active.cr-dragon .rg-root{animation:none}
.cr-active.cr-dragon .rg-head{animation:rg-roar 1.3s ease-in-out both}
.cr-active.cr-dragon .rg-wingL{animation:rg-flapD .3s ease-in-out 4}
.cr-active.cr-dragon .rg-tail{animation:rg-wag .25s ease-in-out 5}
@keyframes rg-roar{0%,100%{transform:none}25%{transform:rotate(-8deg)}45%,80%{transform:rotate(4deg) translateX(2px)}}
@keyframes rg-flapD{50%{transform:rotate(-18deg)}}
.cr-active.cr-unicorn .rg-root{animation:rg-rear 1.1s cubic-bezier(.3,1.4,.6,1) .3s both}
.cr-active.cr-unicorn .rg-tail{animation:rg-wag .22s ease-in-out 5}
@keyframes rg-rear{40%{transform:rotate(-10deg) translateY(-6px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){[class^="rg-"],[class*=" rg-"]{animation:none!important}}

/* ===== v8: frosted-glass name card (hover/focus) + glass speech bubble (click) ===== */
.cr-hint{display:none!important}
.cr-card,.cr-bubble{color:var(--ink);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.52));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 18px 38px -16px rgba(23,12,64,.45),0 2px 6px -2px rgba(23,12,64,.18)}
.cr-card{position:absolute;left:50%;bottom:calc(100% - 6px);z-index:9;display:grid;gap:3px;width:max-content;max-width:220px;padding:11px 14px 12px;border-radius:18px;text-align:left;
  translate:-50% 0;opacity:0;transform:translateY(8px) scale(.94);transform-origin:50% 100%;transition:opacity .2s ease,transform .32s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.cr-card b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1;letter-spacing:-.01em}
.cr-card span{font-size:12.5px;line-height:1.35;color:#3C394F}
.cr-card span:empty{display:none}
.cr-card em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-top:4px}
.cr-creature:hover .cr-card,.cr-creature:focus-visible .cr-card{opacity:1;transform:none}
.cr-active .cr-card{opacity:0!important}
.cr-side-right .cr-card{left:auto;right:4%;translate:none;transform-origin:85% 100%}
.cr-side-left .cr-card{left:4%;translate:none;transform-origin:15% 100%}
.cr-bubble{position:absolute;left:56%;top:2%;translate:0 -100%;z-index:10;width:max-content;max-width:210px;padding:10px 14px;border-radius:16px 16px 16px 5px;font-size:13px;font-weight:600;line-height:1.32;white-space:normal;pointer-events:none;opacity:1;
  animation:crBubble .45s cubic-bezier(.34,1.56,.64,1)}
.cr-bubble::after{content:"";position:absolute;left:12px;bottom:-6px;width:12px;height:12px;background:rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.9);transform:rotate(45deg);border-radius:0 0 3px 0;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.cr-bubble:empty{display:none}
.cr-side-right .cr-bubble,.cr-side-in-right .cr-bubble{left:auto;right:52%;border-radius:16px 16px 5px 16px}
.cr-side-right .cr-bubble::after,.cr-side-in-right .cr-bubble::after{left:auto;right:12px}
@keyframes crBubble{0%{opacity:0;transform:translateY(8px) scale(.8)}100%{opacity:1;transform:none}}
@media (max-width:600px){.cr-card{max-width:180px;padding:9px 12px}.cr-card b{font-size:17px}.cr-bubble{max-width:170px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.cr-card,.cr-bubble{transition:none;animation:none}}