/* Motion — Projetos (#projetos)
   Só efeitos decorativos de hover, escopados em html.gsap-on (failsafe:
   sem GSAP nada aqui se aplica e o card fica 100% visível).
   O hide/reveal do span só vale em dispositivos com hover real — no touch
   a legenda "Projeto 3D" permanece sempre visível. */

@media (hover: hover) and (pointer: fine) {
  /* Legenda "Projeto 3D" sobe e aparece no hover do card */
  html.gsap-on .project-card figcaption span {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms var(--ease-out);
  }
  html.gsap-on .project-card:hover figcaption span,
  html.gsap-on .project-card:focus-within figcaption span {
    opacity: 1;
    transform: none;
  }

  /* Linha vermelha que "se monta" da esquerda pra direita no hover */
  html.gsap-on .project-card figcaption::after {
    content: '';
    position: absolute;
    left: 1.3rem;
    bottom: 0.75rem;
    width: 2.2rem;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms var(--ease-out);
  }
  html.gsap-on .project-card:hover figcaption::after,
  html.gsap-on .project-card:focus-within figcaption::after {
    transform: scaleX(1);
  }
}