/* =========================================================
   ANIMAÇÕES FOFAS (site inteiro; o js/animacoes.js cuida da parte que depende de clique e rolagem)
   Regras da casa:
   - só transform e opacity. As propriedades soltas translate, scale e rotate somam com o
     transform/rotate que os adesivos e cards já têm, sem apagar a pose deles;
   - tudo o que se mexe fica dentro de (prefers-reduced-motion: no-preference). Quem pede menos
     movimento continua vendo as mudanças de estado (botão "Adicionado!", coração cheio);
   - hover só em ponteiro fino; no toque vale o :active e o clique.
   ========================================================= */

:root {
  /* mola: passa um pouquinho do ponto e volta */
  --anima-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anima-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --anima-pele: rgb(220 172 236); /* cor do corpo da geleia do logo (pálpebras) */
}

/* ---------- mudanças de estado (valem sempre) ---------- */

/* botão de comprar vira "✓ Adicionado!" por um instante (o JS põe o texto em data-anima-ok) */
.kbtn.anima-ok {
  position: relative;
  background: var(--ok);
  color: transparent;
}

.kbtn.anima-ok > * {
  visibility: hidden;
}

.kbtn.anima-ok::after {
  content: "\2713\00a0" attr(data-anima-ok);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  white-space: nowrap;
}

/* camadas soltas que o JS cria (voo até o carrinho, confete, coraçõezinhos) */
.anima-camada {
  position: fixed;
  inset: 0;
  z-index: 1000; /* acima do cabeçalho fixo; não pega cliques */
  overflow: hidden;
  pointer-events: none;
}

.anima-voo {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--sun-soft, #f1e8fb);
  box-shadow: 0 0 0 2px var(--navy), 0 6px 14px -6px rgb(42 23 71 / 0.5);
  overflow: hidden;
}

.anima-voo > img,
.anima-voo > span {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.anima-confete {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.55rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.275rem;
  border: 1.5px solid var(--navy);
  border-radius: 2px;
}

.anima-confete--bola {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.anima-coracaozinho {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.95rem;
  height: 0.95rem;
  margin: -0.475rem 0 0 -0.475rem;
  background: var(--peach-deep, #e2739a);
  -webkit-mask: var(--anima-coracao) center / contain no-repeat;
  mask: var(--anima-coracao) center / contain no-repeat;
}

:root {
  --anima-coracao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.2 5.3 3.1 1.7-1.9 3.1-3.1 5.3-3.1 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}

/* logo da geleia: o JS embrulha a imagem para pôr as pálpebras por cima dos olhos */
.anima-logo {
  position: relative;
  display: inline-flex;
  flex: none;
  margin: -0.35rem -0.15rem -0.35rem -0.35rem;
  transform-origin: 50% 90%;
}

.anima-logo > .packmark--geleia,
.logo:hover .anima-logo > .packmark--geleia {
  margin: 0;
  transform: none;
}

.anima-palpebra {
  position: absolute;
  top: 46.1%;
  left: 27.3%;
  width: 10.5%;
  height: 11.7%;
  border-bottom: 1.5px solid #2a1c3a;
  border-radius: 50%;
  background: var(--anima-pele);
  scale: 1 0;
  transform-origin: 50% 0;
  pointer-events: none;
}

.anima-palpebra + .anima-palpebra {
  left: 62.5%;
  top: 46.5%;
}

/* pokébola (e os outros desenhos do meio) dos divisores: cópia por cima que gira ao aparecer */
.anima-divisor {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  background: var(--anima-img) center / var(--anima-tam) no-repeat;
  pointer-events: none;
}

/* geleia animada (WebP animado) pulando no canto da ilha do catálogo */
.cx__geleia {
  position: absolute;
  right: -0.5rem;
  top: -1.25rem;
  z-index: 2;
  width: clamp(4.5rem, 3rem + 4vw, 6.5rem);
  height: auto;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .cx__geleia { display: none; }
}

/* =========================================================
   MOVIMENTO (só para quem não pediu menos movimento)
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- entrada ao rolar: o JS esconde, observa e anima uma vez ---------- */

  .anima-espera {
    opacity: 0;
  }

  /* ---------- botões de borracha ---------- */

  :where(.kbtn) {
    position: relative;
    isolation: isolate;
  }

  /* brilho macio no hover (só opacity) */
  .kbtn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 30% 0%, rgb(255 255 255 / 0.3), transparent 62%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
  }

  .kbtn:active:not(:disabled) {
    scale: 0.94;
  }

  @media (hover: hover) and (pointer: fine) {
    .kbtn:hover:not(:disabled)::before {
      opacity: 1;
    }
  }

  /* ---------- card de produto: levanta, inclina (o JS segue o mouse), foto chega perto, selo balança ---------- */

  @media (hover: hover) and (pointer: fine) {
    body :is(.tile, .toy):hover :is(.tile__stage, .toy__stage) {
      transform: perspective(800px) translateY(-6px) rotateX(var(--anima-rx, 0deg)) rotateY(var(--anima-ry, 0deg)) rotate(-1deg);
      transition: transform 0.35s var(--anima-mola);
    }

    :is(.tile, .toy) .photo__subject {
      transition: scale 0.45s var(--anima-mola);
    }

    :is(.tile, .toy):hover .photo__subject {
      scale: 1.06;
    }

    :is(.tile, .toy):hover :is(.tile__sticker, .toy__sticker) {
      animation: wiggle 0.6s var(--ease-out);
    }
  }

  /* ---------- mascote: respira, flutua e cada pose tem o seu ritmo ---------- */

  @keyframes anima-respira {
    0%, 100% { scale: 1 1; }
    50% { scale: 1.035 0.965; }
  }

  @keyframes anima-flutua {
    0%, 100% { translate: var(--anima-x, 0) var(--anima-y, 0); }
    50% { translate: var(--anima-x, 0) calc(var(--anima-y, 0px) - var(--anima-altura, 6px)); }
  }

  @keyframes anima-boia {
    0%, 100% { translate: var(--anima-x, 0) var(--anima-y, 0); rotate: 0deg; }
    33% { translate: var(--anima-x, 0) calc(var(--anima-y, 0px) - 5px); rotate: -2deg; }
    66% { translate: var(--anima-x, 0) calc(var(--anima-y, 0px) - 2px); rotate: 2deg; }
  }

  .anima-logo {
    animation: anima-respira 3.4s ease-in-out infinite;
  }

  .logo:hover .anima-logo,
  .anima-logo.anima-pula {
    animation: anima-pulinho 0.7s var(--anima-suave);
  }

  @keyframes anima-pulinho {
    0% { translate: 0 0; scale: 1 1; }
    18% { translate: 0 0; scale: 1.12 0.86; }
    45% { translate: 0 -0.45rem; scale: 0.92 1.1; }
    72% { translate: 0 0; scale: 1.08 0.92; }
    86% { scale: 0.98 1.02; }
    100% { translate: 0 0; scale: 1 1; }
  }

  /* imagens da geleia pelas páginas (não as WebP animadas, que já se mexem sozinhas) */
  .geleia:not(.footer__geleia):not([src$="-anim.webp"]),
  .footer__geleia-pinga {
    transform-origin: 50% 100%;
    animation: anima-respira 3.8s ease-in-out infinite, anima-flutua 5.2s ease-in-out -1.3s infinite;
  }

  .mc-hero__geleia {
    animation-duration: 3.2s, 6s;
  }

  /* poses desenhadas em ::after (laterais da home, ilha de leitura, carrinho, produto, busca) */
  .ks::after,
  .ks:has(> .wrap > .island:first-child) > .wrap::after,
  .cart-hero__island::after,
  .pay-hero::after,
  .results::after,
  .pdp-gallery::after {
    animation: anima-flutua 4.6s ease-in-out infinite;
  }

  .ks:has(> .wrap > .island:first-child) > .wrap::after {
    --anima-y: -78%;
    transform: none;
    translate: 0 -78%;
    animation-duration: 5.4s;
    animation-delay: -2s;
  }

  .results::after {
    --anima-x: -50%;
    animation-duration: 4s;
  }

  .ks:nth-of-type(6n+1)::after { animation-name: anima-boia; animation-duration: 5.8s; }
  .ks:nth-of-type(6n+2)::after { animation-duration: 3.9s; animation-delay: -1.1s; }
  .ks:nth-of-type(6n+3)::after { animation-name: anima-boia; animation-duration: 6.6s; animation-delay: -3s; }
  .ks:nth-of-type(6n+4)::after { animation-duration: 4.3s; animation-delay: -0.6s; }
  .ks:nth-of-type(6n+5)::after { animation-name: anima-boia; animation-duration: 5.1s; animation-delay: -2.4s; }
  .ks:nth-of-type(6n)::after { animation-duration: 3.6s; animation-delay: -1.7s; --anima-altura: 9px; }
  .cart-hero__island::after { animation-duration: 3.8s; }
  .pdp-gallery::after { animation-name: anima-boia; animation-duration: 5.6s; }
  .pay-hero::after { --anima-altura: 10px; animation-duration: 2.6s; }

  /* o mascote balança quando o mouse passa perto (o JS liga .anima-balanca) */
  .anima-balanca {
    animation: anima-balanca 0.8s var(--anima-suave) !important;
    transform-origin: 50% 90%;
  }

  @keyframes anima-balanca {
    0%, 100% { rotate: 0deg; }
    20% { rotate: -9deg; }
    45% { rotate: 7deg; }
    70% { rotate: -3deg; }
    85% { rotate: 1deg; }
  }

  /* ---------- enfeites: títulos, estrelinhas e energias das ilhas flutuam devagar ---------- */

  .khead__title::after {
    animation: anima-boia 4.8s ease-in-out infinite;
  }

  .ks:nth-of-type(2n) .khead__title::after { animation-duration: 5.6s; animation-delay: -2.1s; }
  .ks:nth-of-type(3n) .khead__title::after { animation-duration: 4.1s; animation-delay: -1s; }

  .island__star,
  .buybox__star,
  .trade__star,
  .promo__star,
  .explore__dot,
  .trade__dot,
  .promo__dot,
  [class*="cx__star"] {
    --anima-altura: 7px;
    animation: anima-boia 5.5s ease-in-out infinite;
  }

  :is(.island__star, .buybox__star, .trade__star, .promo__star, .explore__dot, .trade__dot, .promo__dot, [class*="cx__star"]):is([class*="--b"]) {
    animation-duration: 6.8s;
    animation-delay: -2.3s;
  }

  :is(.island__star, .buybox__star, .trade__star, .promo__star, .explore__dot, .trade__dot, .promo__dot, [class*="cx__star"]):is([class*="--c"], [class*="--d"]) {
    animation-duration: 4.6s;
    animation-delay: -3.7s;
  }

  .island::after {
    --anima-altura: 5px;
    animation: anima-flutua 6.2s ease-in-out -1.5s infinite;
  }

  .cx__sticker--a {
    animation: anima-flutua-centro 5s ease-in-out infinite;
  }

  @keyframes anima-flutua-centro {
    0%, 100% { translate: -50% -52%; }
    50% { translate: -50% calc(-52% - 7px); }
  }

  /* ---------- toasts e avisos entram com mola ---------- */

  .toast {
    scale: 0.85;
    transition: transform 0.5s var(--anima-mola), scale 0.5s var(--anima-mola), opacity var(--t2) var(--ease-out), visibility 0s var(--t3);
  }

  .toast.is-on {
    scale: 1;
    transition-delay: 0s;
  }

  .mc-aviso,
  .rv-flash,
  .adm-toast {
    animation: anima-aviso 0.6s var(--anima-mola) both;
  }

  @keyframes anima-aviso {
    0% { opacity: 0; translate: 0 -0.6rem; scale: 0.94; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
  }

  /* ---------- estados vazios: o mascote triste suspira, o que procura olha para os lados ---------- */

  .void__art,
  .pdp-404__lupa {
    transform-origin: 50% 90%;
    animation: anima-procura 4.2s ease-in-out infinite;
  }

  @keyframes anima-procura {
    0%, 100% { rotate: 0deg; translate: 0 0; }
    20% { rotate: -6deg; translate: -3px -2px; }
    45% { rotate: 0deg; translate: 0 0; }
    65% { rotate: 6deg; translate: 3px -2px; }
  }

  .co-empty__art,
  .mc-empty__art,
  .pay-hero__art,
  .negado__adesivo--a {
    transform-origin: 50% 100%;
    animation: anima-suspira 4.4s ease-in-out infinite;
  }

  @keyframes anima-suspira {
    0%, 70%, 100% { scale: 1 1; translate: 0 0; }
    80% { scale: 1.04 0.95; translate: 0 2px; }
    90% { scale: 0.99 1.02; translate: 0 -1px; }
  }

  /* ---------- pedido confirmado: o mascote comemora pulando ---------- */

  .ok-stickers__a {
    transform-origin: 50% 100%;
  }
}