/* =================================================================
   AJES — animations.css
   Scroll reveal · anneau tournant des boutons · prefers-reduced-motion
   ================================================================= */

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ---------- Portion 4px du filet qui tourne ---------- */
/* filet 1px fixe (components.css) ; par-dessus, une portion bleu uni 4px
   en surépaisseur, posée au coin haut-gauche au repos.
   Au survol cette portion fait le tour du bouton. Bleu unique, pas de dégradé. */
@property --bd-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-1.5px;                        /* bande 4px centrée sur le filet 1px */
  border-radius:inherit;
  padding:4px;                         /* surépaisseur de la portion = 4px */
  /* arc bleu uni couvrant le coin haut-gauche, bords nets (pas de dégradé) ;
     filet un peu allongé par rapport à l'ancien : ~268°→326° */
  background:conic-gradient(
    from var(--bd-angle),
    transparent 0deg 268deg,
    var(--blue) 268deg 326deg,
    transparent 326deg 360deg
  );
  /* on ne garde que l'anneau (masque centre vidé) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:-1;
}
/* variante claire : pas de filet tournant */
.btn--light::before{ display:none; }

/* au survol : la portion épaisse fait le tour */
.btn:hover::before,
.btn:focus-visible::before{
  animation:btnSpin 3.5s linear infinite;
}
@keyframes btnSpin{
  to{ --bd-angle:360deg; }
}

/* Fallback navigateurs sans @property : pas d'animation, portion statique */
@supports not (background:conic-gradient(from 0deg, #000, #000)){
  .btn::before{ display:none; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn::before{ animation:none; }
  *{ transition-duration:.01ms !important; }
}