/* MASCOTE DA UFOODY · camada da propria Ufoody por cima do molde 3 (8a volta, 13/10/2026).
   A arte e a oficial (Brandbook, p. 7, "Sistema do mascote"), recortada do video de
   apresentacao do app que a Ufoody fez. Regras do manual seguidas: paleta oficial, volumes
   originais, rosto simples, sem acessorio, nunca espelhado (o garfo fica no alto, a direita).
   Uso recomendado pelo manual (p. 8): acolhimento, onboarding, suporte, confirmacao.
   Fora de camada (@layer): vence o cine.css sem !important. */

.mascote{position:relative;display:block;isolation:isolate;pointer-events:none;user-select:none;-webkit-user-select:none}
.mascote img{display:block;position:static;width:100%;height:auto;max-width:none;
  -webkit-mask-image:none;mask-image:none;mix-blend-mode:normal;filter:none;animation:none;translate:none;scale:none;opacity:1}
/* o chao: um brilho quente e fraco sob os pes, para o boneco nao flutuar no preto */
.mascote::after{content:"";position:absolute;z-index:-1;left:20%;right:16%;bottom:-1.5%;height:6%;
  border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklch,var(--sinal) 34%,transparent),transparent);
  filter:blur(5px)}

/* ---------- 0. A ABERTURA: o U grande vira o boneco e volta a ser o U da logo ----------
   O molde: o U se desenha 3x maior no centro da logo (300 a 1800 ms), depois assenta no lugar
   dele (simb-assenta) e a logo inteira surge. Agora, entre o desenho e o assentar, ele vira o
   boneco (pulinho), e o boneco encolhe pelo MESMO caminho do U, voltando a ser o U plano.
   Geometria (viewBox da logo 1658 x 384; U de x 59 a 415, centro 237,263): o U grande tem
   0,644 da largura da logo e centro no centro dela. O U do boneco (x 145 a 580, y 9 a 527 num
   quadro de 626 x 697) cobre isso com o boneco a 92,7% da largura da logo. O caminho ate o
   lugar do U e -0,3926 da largura da logo = -42,36% da largura do boneco, com escala 1/3.
   Tempos: troca em 1800 ms; assenta em 2760 (era 1820); a logo surge em 3180 (era 2240); a
   abertura sai em 4040 (era 3100). Fica 940 ms mais longa. */
.abre-marca .mascote-abre{position:absolute;z-index:1;width:92.7%;left:-3.68%;top:-121.28%;
  transform-origin:57.907% 38.451%;opacity:0;
  animation-name:abre-boneco;animation-duration:calc(var(--t-marca) + var(--t-gesto));
  animation-timing-function:var(--ease-out);animation-delay:1800ms;animation-fill-mode:both}
.abre-marca .mascote-abre::after{display:none}
/* sem "fantasma": nas duas trocas, quem chega fica inteiro antes de quem sai sumir.
   Na ida, o boneco aparece por baixo do U plano, e o U plano se dissolve por cima.
   Na volta, o U plano cobre o corpo do boneco em ~115 ms, e os bracos e pernas somem por tras. */
/* dentro de @keyframes o navegador nao aceita var() no animation-timing-function: a curva vai
   escrita por extenso, a mesma do --ease-in-out (a do simb-assenta) e a do --ease-out */
@keyframes abre-boneco{
  0%{opacity:0;scale:.9;translate:0 4%;filter:blur(4px)}
  12%{opacity:1;filter:blur(0)}
  30%{scale:1.04;translate:0 -3.5%}
  42%{scale:1;translate:0 0}
  60.76%{opacity:1;scale:1;translate:0 0;animation-timing-function:cubic-bezier(.77,0,.175,1)}
  76%{opacity:0}
  100%{opacity:0;scale:.33333;translate:-42.36% 0}}
@keyframes abre-u-troca{
  0%,6%{opacity:1;filter:blur(0)}
  20%{opacity:0;filter:blur(4px)}
  60.76%{opacity:0;filter:blur(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  68%,100%{opacity:1;filter:blur(0)}}
.abre-simbolo{animation-name:simb-u,simb-d,abre-u-troca;
  animation-duration:var(--t-marca),var(--t-gesto),calc(var(--t-marca) + var(--t-gesto));
  animation-timing-function:var(--ease-in-out),var(--ease-out),linear;
  animation-delay:300ms,1180ms,1800ms;animation-fill-mode:both,both,both}
.abre-simbolo .simb{animation-delay:2760ms}
.abre-marca .abre-logo{animation-delay:3180ms}
.abre-sub{animation-delay:3360ms}
.abre-local{animation-delay:3540ms}
.abre{animation-delay:4040ms}
:root{--entra:3940ms}

/* ---------- 1. TOPO: recebe quem chega, ao lado do celular ---------- */
.poco-loja .mascote-oi{position:absolute;z-index:3;width:40%;left:-15%;bottom:-2%}
@keyframes mascote-chega{
  0%{opacity:0;translate:0 16%;scale:.9}
  62%{opacity:1;translate:0 -4%;scale:1.015}
  100%{opacity:1;translate:0 0;scale:1}}
@keyframes mascote-respira{from{translate:0 0}to{translate:0 -2.2%}}
.poco-loja .mascote-oi{transform-origin:50% 100%;
  animation:mascote-chega var(--t-marca) var(--ease-out) both;animation-delay:calc(var(--entra) + 760ms)}
.poco-loja .mascote-oi img{animation:mascote-respira 2600ms var(--ease-in-out) infinite alternate;
  animation-delay:calc(var(--entra) + 1600ms)}

/* ---------- 2. A DISTRIBUIDORA: sobe junto com "Seu vendedor tem horario" ---------- */
.foco-frase{align-content:center;gap:clamp(8px,1.8vh,20px)}
.mascote-frase{width:auto;transform-origin:50% 100%}
.mascote-frase img{width:auto;height:min(30svh,250px)}
.mascote-frase::after{left:24%;right:18%}

/* ---------- 3. O FECHO: o U da logo se desenha e vira o boneco ---------- */
.fecho-vira{position:relative;width:clamp(150px,15vw,200px);aspect-ratio:626/697;view-timeline:--vira block}
.fecho-vira .mascote{position:absolute;inset:0}
/* o U plano em cima do U do boneco: mesmo centro e mesma largura (medidos no recorte:
   o corpo vai de x 145 a 580 e de y 9 a 527, num quadro de 626 x 697) */
.fecho-vira .fecho-simbolo{position:absolute;z-index:2;left:23.16%;width:69.5%;top:4.6%;height:auto}

/* ---------- 4. A 404: o boneco de suporte ---------- */
.e404 .mascote-404{width:clamp(110px,13vw,160px);margin-bottom:-8px}

/* ---------- MOVIMENTO (so com a rolagem do CSS; sem JavaScript) ---------- */
@supports (animation-timeline:view()){
  @keyframes mascote-pula{
    0%,84%{opacity:0;translate:0 18%;scale:.84}
    93%{opacity:1;translate:0 -4%;scale:1.02}
    100%{opacity:1;translate:0 0;scale:1}}
  .mascote-frase{animation:mascote-pula linear both;animation-timeline:--k4;animation-range:contain 0% contain 100%}

  /* o U desenha mais cedo que no molde, para dar tempo de virar boneco antes do fim da pagina */
  @keyframes vira-some{
    0%{opacity:1;scale:1;filter:blur(0)}
    100%{opacity:0;scale:1.06;filter:blur(3px)}}
  @keyframes vira-surge{
    0%{opacity:0;scale:.9;translate:0 4%;filter:blur(4px)}
    45%{opacity:1;filter:blur(0)}
    70%{scale:1.03;translate:0 -3.5%}
    100%{opacity:1;scale:1;translate:0 0;filter:blur(0)}}
  .fecho-vira .fecho-simbolo{transform-origin:50% 50%;
    animation-name:simb-u,simb-d,vira-some;
    animation-timing-function:linear,linear,linear;
    animation-fill-mode:both,both,both;
    animation-duration:auto,auto,auto;
    animation-timeline:--vira,--vira,--vira;
    animation-range:entry 10% cover 30%,cover 27% cover 38%,cover 39% cover 49%}
  .fecho-vira .mascote{transform-origin:50% 100%;
    animation:vira-surge linear both;animation-timeline:--vira;animation-range:cover 39% cover 55%}
}

/* sem rolagem animada, ou com movimento reduzido: o boneco ja parado, sem o U plano por cima */
@supports not (animation-timeline:view()){
  .fecho-vira .fecho-simbolo{display:none}
  .fecho-vira .mascote{opacity:1;animation:none}
}
@media (prefers-reduced-motion:reduce){
  .fecho-vira .fecho-simbolo{display:none}
  .mascote,.mascote img{animation:none!important;opacity:1!important;translate:none!important;scale:none!important;filter:none!important}
}
@media print{
  .fecho-vira .fecho-simbolo{display:none}
  .mascote,.mascote img{animation:none!important;opacity:1!important}
}

/* ---------- CELULAR ---------- */
@media (max-width:899px){
  .poco-loja .mascote-oi{width:36%;left:1%;bottom:-2%}
}
@media (max-width:560px){
  .mascote-frase img{height:min(24svh,190px)}
}