/* Flutuações no desktop (mouse; telas 1x).
   Conflito físico: flutuação suave = posição fracionária = camada de texto reamostrada (borrão); travar em
   pixel inteiro = texto nítido, mas movimento em degraus. Não há CSS que dê as duas coisas ao MESMO elemento
   com texto. Por isso as camadas são separadas por tipo de componente:

   1. Cards de texto (Soluções, Para quem): o corpo com o texto fica parado e sempre nítido. A flutuação passa
      para camadas decorativas — o ícone sobe e desce e uma sombra projetada "respira" embaixo do card.
      Só transform/opacity: roda no compositor, contínuo, sem degraus.
   2. Ilustrações (telas da demo, cards dos criadores): deslocamento contínuo original. A rotação contínua
      sai, porque reamostra o texto em todo quadro e é o que mais borra.

   No celular (2x/3x) nada disso se aplica: lá o deslocamento original já é nítido. */
@media (hover: hover) and (pointer: fine) {
  /* 1. Cards de texto: os keyframes viram "parado" (as regras que acionam a animação continuam valendo). */
  @keyframes step-bob { from, to { translate: 0 0; } }
  @keyframes eco-card-bob { from, to { translate: 0 0; } }

  @keyframes card-shadow-breathe { 50% { opacity: .55; scale: .84 1; } }
  @keyframes card-icon-bob { 50% { translate: 0 -4px; } }

  #solucoes .steps-showcase .step::after,
  #para-quem .eco-card::after {
    content: ""; display: block; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: -16px; height: 22px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(14, 112, 80, .3), rgba(14, 112, 80, .1) 60%, transparent);
  }
  #para-quem .eco-card::after { bottom: -12px; height: 16px; }

  @media (prefers-reduced-motion: no-preference) {
    #solucoes .steps-showcase .step.reveal-complete::after,
    #para-quem .eco-card::after { animation: card-shadow-breathe 5.2s ease-in-out infinite; }
    #solucoes .steps-showcase .step.reveal-complete:not(.is-flipped) .step-icon,
    #para-quem .eco-card:not(.is-flipped) .eco-card-icon { animation: card-icon-bob 5.2s ease-in-out infinite; }
    #solucoes .steps-showcase .step:nth-child(2)::after, #solucoes .steps-showcase .step:nth-child(2) .step-icon { animation-delay: -1.3s; }
    #solucoes .steps-showcase .step:nth-child(3)::after, #solucoes .steps-showcase .step:nth-child(3) .step-icon { animation-delay: -2.6s; }
    #solucoes .steps-showcase .step:nth-child(4)::after, #solucoes .steps-showcase .step:nth-child(4) .step-icon { animation-delay: -3.9s; }
    #para-quem .eco-card--1::after, #para-quem .eco-card--1 .eco-card-icon { animation-delay: -.9s; }
    #para-quem .eco-card--2::after, #para-quem .eco-card--2 .eco-card-icon { animation-delay: -1.8s; }
    #para-quem .eco-card--3::after, #para-quem .eco-card--3 .eco-card-icon { animation-delay: -2.7s; }
    #para-quem .eco-card--4::after, #para-quem .eco-card--4 .eco-card-icon { animation-delay: -3.5s; }
    #para-quem .eco-card--5::after, #para-quem .eco-card--5 .eco-card-icon { animation-delay: -4.3s; }
  }

  /* 2. Ilustrações: deslocamento contínuo original; sem rotação contínua nem will-change. */
  @keyframes demo-tilt-phone { from, to { rotate: 0deg; } }
  @keyframes makers-breeze-one { 0%, 100% { transform: translate(0, 0); } 22% { transform: translate(2px, -6px); } 48% { transform: translate(-3px, -3px); } 73% { transform: translate(1px, 4px); } }
  @keyframes makers-breeze-two { 0%, 100% { transform: translate(0, 0); } 18% { transform: translate(-2px, 5px); } 43% { transform: translate(3px, -4px); } 69% { transform: translate(-1px, -8px); } 85% { transform: translate(2px, -2px); } }
  #produto .demo-handset, #produto .demo-workspace { will-change: auto; backface-visibility: visible; }
  /* Telas da demo: deslocamento horizontal fracionado amolece as hastes verticais das letras (o que mais
     pesa na leitura). Flutuação só no eixo Y via translate: fluida no compositor e com o texto legível. */
  @keyframes demo-float-ws { 0%,100% { translate: 0 0; } 25% { translate: 0 -6px; } 50% { translate: 0 -9px; } 75% { translate: 0 -3px; } }
  @keyframes demo-float-phone { 0%,100% { translate: 0 0; } 30% { translate: 0 -8px; } 55% { translate: 0 -11px; } 80% { translate: 0 -2px; } }
}