/* Efeitos visuais do site (só CSS, sem JavaScript). Quem prefere menos movimento no aparelho não vê animações. */

/* Fotos: zoom suave e um pouco mais de brilho ao passar o mouse (só em aparelhos com mouse) */
@media (hover: hover) {
  main section:not([data-screen-label^="Hero"]) img:not([style*="transition"]):not([aria-hidden="true"]),
  main section:not([data-screen-label^="Hero"]) image-slot::part(image) {
    transition: scale .8s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
  }
  main section:not([data-screen-label^="Hero"]) img:not([style*="transition"]):not([aria-hidden="true"]):hover,
  main section:not([data-screen-label^="Hero"]) image-slot:hover::part(image) {
    scale: 1.06;
    filter: brightness(1.06) saturate(1.08);
  }
  /* as fotos que já têm efeito próprio (cards e galeria) ganham o mesmo brilho */
  main section:not([data-screen-label^="Hero"]) img[style*="transition:transform"]:hover {
    filter: brightness(1.06) saturate(1.08);
  }

  /* Menu: sublinhado dourado que cresce no hover */
  header nav div a {
    background: linear-gradient(#F7E3A1, #F7E3A1) 0 100% / 0 1px no-repeat;
    padding-bottom: 4px;
    transition: background-size .35s ease, color .3s;
  }
  header nav div a:hover { background-size: 100% 1px; }
}

/* Teclado: contorno dourado bem visível ao navegar com Tab */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #E9C46A;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Respeita quem desativa animações no sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  main img, image-slot::part(image) { scale: none !important; }
}

/* Vídeo do topo: entra com fade depois de começar a tocar */
@keyframes videoFade { from { opacity: 0; } to { opacity: 1; } }