/* =========================================================
   ADESIVOS COM VIDA — os ícones desenhados (wwwroot/img/icones) ganham micro-animação
   no mesmo estilo fofo. O js/animacoes-icones.js dá o "plim" de entrada ao rolar.
   Regras da casa: só transform/opacity; tudo dentro de (prefers-reduced-motion: no-preference);
   hover só em ponteiro fino, no toque vale :active. Amplitude pequena, nunca distrai.
   ========================================================= */

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

  /* ---------- IDLE: respiro/balanço bem leve e lento ---------- */

  .kind__sticker,
  .perk__sticker,
  .explore__sticker,
  .footer__sticker,
  .co-quem__icon,
  .sec-head__icon,
  .shortcut__icon,
  .co-opt__icon {
    animation: ic-respira 5s ease-in-out infinite;
    transform-origin: 50% 85%;
  }

  @keyframes ic-respira {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    25%      { transform: translateY(-2px) rotate(-1.4deg) scale(1.012); }
    50%      { transform: translateY(0) rotate(0deg) scale(1); }
    75%      { transform: translateY(-1px) rotate(1.4deg) scale(0.994); }
  }

  /* dessincroniza: cada ícone com a sua duração/fase (o que dá cara "viva", não robótica) */
  .kinds li:nth-child(2n) .kind__sticker { animation-duration: 6.1s; animation-delay: -2.3s; }
  .kinds li:nth-child(3n) .kind__sticker { animation-duration: 4.4s; animation-delay: -1.2s; }
  .kinds li:nth-child(4n) .kind__sticker { animation-duration: 5.6s; animation-delay: -3.1s; }

  .perks li:nth-child(2n) .perk__sticker { animation-duration: 5.7s; animation-delay: -2.6s; }
  .perks li:nth-child(3n) .perk__sticker { animation-duration: 4.6s; animation-delay: -1.5s; }
  .perks li:nth-child(4n) .perk__sticker { animation-duration: 6.3s; animation-delay: -0.8s; }

  .explore__sticker--a { animation-duration: 5.4s; animation-delay: -1.1s; }
  .explore__sticker--b { animation-duration: 6.6s; animation-delay: -3.4s; }
  .explore__sticker--c { animation-duration: 4.8s; animation-delay: -2.2s; }

  .co-opt__icon--sky  { animation-delay: -1.7s; animation-duration: 5.5s; }
  .co-opt__icon--peach { animation-delay: -3.2s; animation-duration: 4.7s; }

  /* ---------- caráter de cada adesivo ---------- */

  /* o caminhão (envio) anda: balança como quem roda na estrada */
  .finder__truck,
  :is(.kind__sticker, .perk__sticker, .co-quem__icon, .co-opt__icon, .shortcut__icon, .footer__sticker)[src*="caminhao"],
  :is(.kind__sticker, .perk__sticker, .co-quem__icon, .co-opt__icon, .shortcut__icon, .footer__sticker)[src*="envio"] {
    animation: ic-caminha 2.9s ease-in-out infinite;
    transform-origin: 50% 90%;
  }

  @keyframes ic-caminha {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    25%      { transform: translateY(-2px) rotate(0.6deg); }
    50%      { transform: translateY(0) rotate(1deg); }
    75%      { transform: translateY(-1.6px) rotate(-0.4deg); }
  }

  /* a lupa procura: vira de um lado para o outro, como quem vasculha */
  :is(.kind__sticker, .perk__sticker, .co-quem__icon, .co-opt__icon, .shortcut__icon, .footer__sticker)[src*="lupa"] {
    animation: ic-procura 4.6s ease-in-out infinite;
    transform-origin: 60% 40%;
  }

  @keyframes ic-procura {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    20%      { transform: rotate(-9deg) translateX(-1px); }
    50%      { transform: rotate(0deg) translateX(0); }
    80%      { transform: rotate(9deg) translateX(1px); }
  }

  /* o troféu brilha de leve: um orgulho de vez em quando (quase sempre parado) */
  :is(.kind__sticker, .perk__sticker, .co-quem__icon, .co-opt__icon, .shortcut__icon, .footer__sticker)[src*="trofeu"] {
    animation: ic-trofeu 6.5s ease-in-out infinite;
    transform-origin: 50% 90%;
  }

  @keyframes ic-trofeu {
    0%, 70%, 100% { transform: scale(1) rotate(0deg); }
    80%           { transform: scale(1.08) rotate(-3deg); }
    88%           { transform: scale(1.04) rotate(3deg); }
    94%           { transform: scale(1.02) rotate(-1deg); }
  }

  /* a bolinha de captura do selo do banner: pulsa de leve (o "ponto" vivo) */
  .promo__badge-ball {
    animation: ic-bola 4.2s ease-in-out infinite;
    transform-origin: 50% 50%;
  }

  @keyframes ic-bola {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.08) rotate(8deg); }
  }

  /* ---------- HOVER/ACTIVE: pop fofo com overshoot ---------- */

  .kind:active .kind__sticker,
  .perk:active .perk__sticker,
  .co-opt:active .co-opt__icon,
  .shortcut:active .shortcut__icon {
    animation: ic-pop 0.6s var(--anima-mola);
  }

  @media (hover: hover) and (pointer: fine) {
    .kind:hover .kind__sticker,
    .perk:hover .perk__sticker,
    .co-opt:hover .co-opt__icon,
    .shortcut:hover .shortcut__icon,
    a:hover > .footer__sticker,
    a:hover > .sec-head__icon {
      animation: ic-pop 0.6s var(--anima-mola);
    }
  }

  @keyframes ic-pop {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.18) rotate(-6deg); }
    55%  { transform: scale(0.94) rotate(4deg); }
    78%  { transform: scale(1.07) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  /* ---------- "plim" de entrada (o JS liga esta classe quando o ícone surge ao rolar) ---------- */

  .ic-plim {
    animation: ic-plim 0.62s var(--anima-mola) !important;
  }

  @keyframes ic-plim {
    0%   { opacity: 0.35; transform: scale(0.4) rotate(-12deg); }
    45%  { opacity: 1; transform: scale(1.16) rotate(5deg); }
    70%  { transform: scale(0.95) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
}