/*
  Micro-interactions discrètes. Le contenu est toujours visible par défaut
  en CSS ; ces classes ne sont ajoutées/retirées que par JavaScript (voir
  main.js), qui vérifie lui-même prefers-reduced-motion avant de les
  utiliser. reset.css réduit déjà toutes les durées à ~0 sous
  prefers-reduced-motion, en filet de sécurité supplémentaire.
*/

/* Reveal-on-scroll très subtil */
.reveal {
  transition: opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

.reveal.is-pending {
  opacity: 0;
  transform: translateY(10px);
}

/* Soulignement animé pour les liens de navigation, de pied de page et le logo */
.nav-link,
.footer-link,
a.logo-mark {
  position: relative;
}

.nav-link::after,
.footer-link::after,
a.logo-mark .logo-mark-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right var(--duration-base) var(--ease-standard);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.footer-link:hover::after,
.footer-link:focus-visible::after,
a.logo-mark:hover .logo-mark-text::after,
a.logo-mark:focus-visible .logo-mark-text::after {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .browser-frame {
    transform: none !important;
  }
}