@import url("https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap");

/* Los textos existen visualmente sólo dentro del globo. */
#rz-language,
#rzTituloResultados{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

.rz-mascot-overlay{
    position:fixed;
    inset:0;
    z-index:9997;
    display:none;
    overflow:hidden;
    pointer-events:none;
}

.rz-mascot-active{display:block;}

.rz-mascot-stage{
    position:absolute;
    left:50%;
    top:58%;
    width:min(34vmin,260px);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    transform-origin:50% 70%;
    will-change:transform,opacity;
}

.rz-mascot-character{
    width:100%;
    height:100%;
    background:transparent url("rz-mascot-sprite-v6b.webp") no-repeat;
    background-size:500% 100%;
    filter:drop-shadow(0 18px 22px rgba(35,24,73,.3));
    transform-origin:50% 72%;
}

.rz-mascot-frame-roll{background-position:0 0;}
.rz-mascot-frame-reach{background-position:25% 0;}
.rz-mascot-frame-reveal{background-position:50% 0;}
.rz-mascot-frame-open{background-position:75% 0;}
.rz-mascot-frame-closed{background-position:100% 0;}

.rz-mascot-dialog,
.rz-mascot-dialog-shadow{
    position:absolute;
    top:calc(58% - 205px);
    left:calc(50% + 145px);
    width:min(54vw,430px);
    padding:20px 30px;
    box-sizing:border-box;
    border-radius:42px;
    font-family:"Comic Relief","Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;
    font-size:clamp(20px,2.5vw,31px);
    font-weight:700;
    line-height:1.25;
    letter-spacing:.01em;
    text-align:center;
}

.rz-mascot-dialog{
    z-index:2;
    border:4px solid #7c197f;
    background:#f38121;
    color:#fff;
    box-shadow:9px 11px 0 rgba(124,25,127,.22),
        0 15px 26px rgba(30,22,50,.16);
    border-radius:50% / 44%;
    opacity:0;
    transform:translate(-50%,-18px) scale(.92);
    transition:opacity .18s ease,transform .22s ease;
}

.rz-mascot-dialog-shadow{
    display:none;
}

.rz-mascot-dialog::before{
    content:"";
    position:absolute;
    left:27%;
    bottom:-29px;
    width:39px;
    height:34px;
    background:#7c197f;
    clip-path:polygon(0 0,100% 0,18% 100%);
    transform:rotate(-7deg);
}

.rz-mascot-dialog::after{
    content:"";
    position:absolute;
    left:calc(27% + 5px);
    bottom:-20px;
    width:28px;
    height:26px;
    background:#f38121;
    clip-path:polygon(0 0,100% 0,18% 100%);
    transform:rotate(-7deg);
}

.rz-dialog-visible{
    opacity:1;
    transform:translate(-50%,0) scale(1);
}

.rz-shadow-visible{
    display:none;
}

.rz-position-high .rz-mascot-stage{top:45%;}
.rz-position-high .rz-mascot-dialog{top:calc(45% - 205px);}
.rz-position-low .rz-mascot-stage{top:72%;}
.rz-position-low .rz-mascot-dialog{top:calc(72% - 205px);}

.rz-mascot-entering .rz-mascot-stage{
    animation:rz-roll-zigzag-in 2.1s cubic-bezier(.12,.72,.2,1) both;
}

.rz-mascot-reveal{
    animation:rz-compass-pop .75s cubic-bezier(.2,.8,.22,1) both;
}

.rz-mascot-celebrate .rz-mascot-stage{
    animation:rz-jump-place .72s ease-in-out 2;
}

.rz-mascot-leaving .rz-mascot-stage{
    animation:rz-roll-out 1.8s cubic-bezier(.55,.05,.82,.32) both;
}

.rz-motion-normal.rz-mascot-leaving .rz-mascot-stage{
    animation:rz-jump-out 1.9s ease-in both;
}

.rz-motion-reverse.rz-mascot-entering .rz-mascot-stage{
    animation:rz-jump-zigzag-in 2.1s ease-out both;
}

@keyframes rz-roll-zigzag-in{
    0%{
        opacity:0;
        transform:translate(-155vw,22vh) rotate(-1080deg) scale(.06);
    }
    22%{
        opacity:.55;
        transform:translate(-112vw,-78vh) rotate(-810deg) scale(.2);
    }
    44%{
        opacity:.8;
        transform:translate(-82vw,28vh) rotate(-570deg) scale(.4);
    }
    64%{
        opacity:1;
        transform:translate(-28vw,-72vh) rotate(-330deg) scale(.68);
    }
    82%{
        transform:translate(-62%,-38%) rotate(-100deg) scale(.9);
    }
    100%{
        opacity:1;
        transform:translate(-50%,-50%) rotate(0) scale(1);
    }
}

@keyframes rz-compass-pop{
    0%{transform:scale(.88) rotate(-5deg);}
    55%{transform:scale(1.09) rotate(3deg);}
    100%{transform:scale(1) rotate(0);}
}

@keyframes rz-jump-place{
    0%,100%{transform:translate(-50%,-50%) scale(1);}
    42%{transform:translate(-50%,calc(-50% - 12vh)) scale(.96,1.04);}
    78%{transform:translate(-50%,-47%) scale(1.05,.95);}
}

@keyframes rz-roll-out{
    0%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
    100%{
        opacity:0;
        transform:translate(120vw,-50%) scale(.38) rotate(900deg);
    }
}

@keyframes rz-jump-zigzag-in{
    0%{opacity:0;transform:translate(-145vw,30vh) scale(.16);}
    28%{opacity:.7;transform:translate(-105vw,-65vh) scale(.36);}
    52%{opacity:1;transform:translate(-70vw,18vh) scale(.58);}
    74%{transform:translate(-35vw,-46vh) scale(.78);}
    90%{transform:translate(-58%,-70%) scale(.92);}
    100%{transform:translate(-50%,-50%) scale(1);}
}

@keyframes rz-jump-out{
    0%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    28%{transform:translate(5vw,-105%) scale(.9);}
    52%{transform:translate(42vw,-38%) scale(.72);}
    74%{transform:translate(78vw,-95%) scale(.5);}
    100%{opacity:0;transform:translate(135vw,-25%) scale(.2);}
}

@media (max-width:600px){
    .rz-mascot-stage{
        top:61%;
        width:48vw;
    }

    .rz-mascot-dialog,
    .rz-mascot-dialog-shadow{
        top:calc(61% - 38vw);
        left:62%;
        width:68vw;
        padding:17px 22px;
        border-radius:50% / 42%;
        font-size:clamp(18px,4.7vw,25px);
    }

    .rz-position-high .rz-mascot-stage{top:47%;}
    .rz-position-high .rz-mascot-dialog{top:20%;}
    .rz-position-low .rz-mascot-stage{top:74%;}
    .rz-position-low .rz-mascot-dialog{top:49%;}
}

@media (prefers-reduced-motion:reduce){
    .rz-mascot-stage,
    .rz-mascot-character{
        animation:none!important;
    }
}