/* =========================================================
   MAIS VIDA (camada por cima da animacoes.css; o animacoes-extra.js cuida da parte
   que depende de rolagem, foco e mudança de valor).
   Mesmas regras da casa:
   - só transform e opacity (as propriedades soltas translate/scale/rotate somam com o
     transform que o elemento já tem, sem apagar a pose dele);
   - tudo o que se mexe fica dentro de (prefers-reduced-motion: no-preference);
   - hover/parallax só em ponteiro fino; no toque vale :active.
   ========================================================= */

/* brilho do campo de busca ao focar vale sempre (só sombra/cor, sem movimento) */
.search__field:focus-within {
  box-shadow: 0 0 0 2px var(--royal), 0 0 0 7px rgb(122 79 208 / 0.16), 0 10px 24px -12px rgb(42 23 71 / 0.4);
}

.hsearch__box:focus-within {
  box-shadow: 0 0 0 3px var(--royal), 0 0 0 9px rgb(122 79 208 / 0.14), 0 14px 30px -16px rgb(42 23 71 / 0.4);
}

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

  /* ---------- barra de navegação: o underline do item cresce no hover ---------- */

  @media (hover: hover) and (pointer: fine) {
    .nv-pill:hover:not(.is-current) .nv-pill__label::before {
      opacity: 1;
      transform: translateX(-50%) scaleX(0.8);
    }
  }

  /* leve escala no campo de busca ao focar */
  .search__field,
  .hsearch__box {
    transition: background-color var(--t1) var(--ease-out), box-shadow var(--t2) var(--ease-out), scale var(--t2) var(--anima-suave);
  }

  .search__field:focus-within {
    scale: 1.015;
  }

  .hsearch__box:focus-within {
    scale: 1.01;
  }

  /* ---------- sugestões da busca: entram em sequência ---------- */

  .suggest:not([hidden]) .sg__opt {
    animation: anima-ex-sg 0.34s var(--anima-suave) both;
  }

  .suggest:not([hidden]) .sg__opt:nth-child(2) { animation-delay: 0.03s; }
  .suggest:not([hidden]) .sg__opt:nth-child(3) { animation-delay: 0.06s; }
  .suggest:not([hidden]) .sg__opt:nth-child(4) { animation-delay: 0.09s; }
  .suggest:not([hidden]) .sg__opt:nth-child(5) { animation-delay: 0.12s; }
  .suggest:not([hidden]) .sg__opt:nth-child(n+6) { animation-delay: 0.15s; }

  @keyframes anima-ex-sg {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ---------- cards da loja: brilho (sheen) passando no hover ---------- */

  @media (hover: hover) and (pointer: fine) {
    .toy__stage,
    .tile__stage {
      overflow: clip;
    }

    .toy__stage::after,
    .tile__stage::after {
      content: "";
      position: absolute;
      top: -30%;
      bottom: -30%;
      left: -60%;
      width: 45%;
      z-index: 2;
      background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
      transform: translateX(0) rotate(8deg);
      opacity: 0;
      pointer-events: none;
    }

    .toy:hover .toy__stage::after,
    .tile:hover .tile__stage::after {
      animation: anima-ex-sheen 0.8s var(--ease-out);
    }

    @keyframes anima-ex-sheen {
      0% { opacity: 0; transform: translateX(0) rotate(8deg); }
      12% { opacity: 1; }
      100% { opacity: 0; transform: translateX(360%) rotate(8deg); }
    }
  }

  /* selo "Novo/Oferta/1º lugar": micro-pulso ocasional (fica quase o tempo todo parado) */
  .toy__sticker,
  .tile__sticker {
    animation: anima-ex-pulso 7s ease-in-out infinite;
    transform-origin: 50% 60%;
  }

  .toy:nth-of-type(2n) .toy__sticker { animation-delay: -2.4s; }
  .toy:nth-of-type(3n) .toy__sticker { animation-delay: -4.8s; }
  .toy__sticker--sale { animation-duration: 5.5s; }

  /* o hover já faz o wiggle (animacoes.css): ali o pulso não atrapalha */
  .toy:hover .toy__sticker,
  .tile:hover .tile__sticker {
    animation: none;
  }

  @keyframes anima-ex-pulso {
    0%, 86%, 100% { transform: scale(1) rotate(0deg); }
    90% { transform: scale(1.09) rotate(-1deg); }
    94% { transform: scale(0.97); }
    97% { transform: scale(1.03); }
  }

  /* ---------- botões +/- da quantidade: afundam ao apertar ---------- */

  .qty button:active:not(:disabled) {
    scale: 0.86;
  }

  .qty button {
    transition: scale var(--t1) var(--anima-mola), background-color var(--t1) var(--ease-out), color var(--t1) var(--ease-out);
  }

  /* ---------- etapas do checkout: o número "preenche" ao concluir/avançar ---------- */

  .steps__item .steps__node {
    transition: background-color var(--t2) var(--ease-out), color var(--t2) var(--ease-out);
  }

  .steps__item.anima-ex-passo .steps__node {
    animation: anima-ex-no 0.6s var(--anima-mola);
  }

  @keyframes anima-ex-no {
    0% { transform: scale(0.72) rotate(-18deg); }
    55% { transform: scale(1.18) rotate(6deg); }
    78% { transform: scale(0.96); }
    100% { transform: scale(1); }
  }

  /* ---------- links/botões secundários: hover consistente ---------- */

  .promo__more,
  .khead__more,
  .cartpop__go,
  .co-link,
  .nv-all,
  .conta-pop__email + * {
    transition: transform var(--t2) var(--anima-suave), color var(--t1) var(--ease-out), gap var(--t1) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .khead__more:hover,
    .cartpop__go:hover,
    .nv-all:hover {
      transform: translateX(3px);
    }

    .promo__more:hover {
      transform: translateX(2px);
    }
  }

  /* =========================================================
     BANNER DO TOPO (só na home): entrada em sequência, flutuação e brilhos
     ========================================================= */

  .page-home .hero .promo__copy > * {
    animation: anima-ex-sobe 0.62s var(--anima-suave) both;
  }

  .page-home .hero .promo__badge { animation-delay: 0.05s; }
  .page-home .hero .promo__title { animation-delay: 0.14s; }
  .page-home .hero .promo__lede { animation-delay: 0.22s; }
  .page-home .hero .promo__facts { animation-delay: 0.3s; }
  .page-home .hero .promo__cta { animation-delay: 0.38s; }

  .page-home .hero .promo__art {
    animation: anima-ex-entra-art 0.75s var(--anima-mola) 0.28s both;
  }

  @keyframes anima-ex-sobe {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes anima-ex-entra-art {
    0% { opacity: 0; transform: translateY(14px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* o personagem/produto flutua devagar em loop (transform; o parallax usa translate, somam) */
  .promo__char,
  .promo__palco {
    animation: anima-ex-flutua 5.4s ease-in-out infinite;
  }

  .promo__palco {
    animation-duration: 4.6s;
    animation-delay: -1.4s;
  }

  @keyframes anima-ex-flutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  /* brilhos/energias ao redor do banner piscando de leve */
  .promo__star,
  .promo__dot {
    animation: anima-ex-brilha 3.6s ease-in-out infinite;
    transform-origin: 50% 50%;
  }

  .promo__star--b,
  .promo__dot--b { animation-duration: 4.4s; animation-delay: -1.2s; }
  .promo__star--c,
  .promo__dot--d { animation-duration: 3s; animation-delay: -2.1s; }

  @keyframes anima-ex-brilha {
    0%, 100% { opacity: 0.75; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.08); }
  }

  /* o parallax (JS) mexe o translate dos enfeites com suavidade */
  .promo__star,
  .promo__dot,
  .promo__char,
  .promo__palco {
    transition: translate 0.4s var(--anima-suave);
  }
}