/* =========================================================================
   AXagency — Animations d'apparition (CSS)
   Déclenché par la classe "is-in" ajoutée par js/animations.js.

   Effet (identique sur tous les éléments ciblés) :
     - apparition : montée + grandissement (scale 0.8 -> 1) en fondu, très smooth ;
     - une lumière BLANCHE fait UN TOUR du border puis disparaît.

   Cibles actuelles :
     .services-card   (section Services)
     .apropos-image   (image de la section À propos)
     .confaince-card  (cartes de la section Confiance — orthographe du HTML)
   Pour ajouter une autre cible : l'ajouter aux listes ci-dessous ET dans
   js/animations.js (variable SELECTEURS).
   ========================================================================= */

/* Angle "animable" pour la lumière qui tourne (CSS Houdini @property).
   Indispensable : sans @property, le navigateur ne sait pas interpoler un angle. */
@property --ax-svc-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* --- État de DÉPART : caché, un peu plus bas et plus petit --- */
.services-card,
.apropos-image,
.confaince-card {
  position: relative;                 /* nécessaire pour la lumière en ::after */
  opacity: 0;
  transform: translateY(28px) scale(0.8);
  /* easing très doux (sortie type "expo") pour un rendu smooth */
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* --- À l'APPARITION : en place, taille réelle --- */
.services-card.is-in,
.apropos-image.is-in,
.confaince-card.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- La lumière qui tourne : un anneau en ::after, masqué pour ne garder
       QUE le border. Au repos il est invisible (opacity 0). --- */
.services-card::after,
.apropos-image::after,
.confaince-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;             /* suit l'arrondi 12px de l'élément */
  padding: 1px;                       /* épaisseur de l'anneau = comme le border 1px */
  background: conic-gradient(
    from var(--ax-svc-angle),
    transparent 0deg,
    rgba(255, 255, 255, 0.9) 28deg,
    rgba(255, 255, 255, 0) 80deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

/* À l'apparition : la lumière fait 1 tour (0 -> 360°) puis s'efface. */
.services-card.is-in::after,
.apropos-image.is-in::after,
.confaince-card.is-in::after {
  animation: ax-svc-tour 1.4s ease-out 0.15s forwards;
}

@keyframes ax-svc-tour {
  0%   { --ax-svc-angle: 0deg;   opacity: 1; }
  85%  { opacity: 1; }
  100% { --ax-svc-angle: 360deg; opacity: 0; }
}

/* NB : volontairement PAS de "@media (prefers-reduced-motion)" — sinon, si
   l'option "réduire les animations" du système est active, l'effet ne se
   verrait pas. À réactiver plus tard pour un comportement 100% accessible. */