/* ==========================================================================
   Effets de cartes partages — SIL Caunes Valley
   Charge par Accueil.dc.html et les 4 pages service.

   Deux familles de cartes :
   .svc-card   cartes services de l'accueil (liens cliquables, dont une sur fond
               anthracite, d'ou l'accent vert menthe)
   .incl-card  cartes des pages service (blocs informatifs sur fond clair,
               d'ou l'accent vert emeraude, plus lisible sur clair)

   Note technique : le flottement passe par la propriete `translate`, qui est
   independante de `transform`. Les deux se composent au lieu de s'ecraser, ce
   qui permet de cohabiter avec le lift au survol et avec l'apparition au
   scroll, tous deux poses en `transform` inline par le JS.
   ========================================================================== */

@keyframes silCardFloat{0%,100%{translate:0 0;}50%{translate:0 -16px;}}

/* --- Socle commun : flottement continu, en pause au survol ---------------- */
.svc-card,.incl-card{position:relative;isolation:isolate;animation:silCardFloat 5s ease-in-out infinite;}
.svc-card:hover,.incl-card:hover{animation-play-state:paused;}
/* Variante sans flottement : garde la bordure, l'icone et la fleche, mais reste
   immobile. Pour les blocs de liens secondaires, ou le mouvement d'ambiance
   ferait concurrence au contenu principal de la page. */
.incl-card--flat{animation:none;}

/* --- Decalage par carte, pour eviter que la rangee bouge d'un bloc --------
   Accueil : 4 cartes reparties sur les quarts du cycle.
   Pages service : pas de 0,83 s, ce qui couvre le cycle sur 6 cartes et
   produit une cascade sur les sections qui en comptent moins. */
.svc-card:nth-child(2){animation-delay:-1.25s;}
.svc-card:nth-child(3){animation-delay:-2.5s;}
.svc-card:nth-child(4){animation-delay:-3.75s;}
.incl-card:nth-child(2){animation-delay:-0.83s;}
.incl-card:nth-child(3){animation-delay:-1.67s;}
.incl-card:nth-child(4){animation-delay:-2.5s;}
.incl-card:nth-child(5){animation-delay:-3.33s;}
.incl-card:nth-child(6){animation-delay:-4.17s;}

/* --- Bordure lumineuse au survol ------------------------------------------
   Deux couches superposees : tout le contour s'illumine (linear-gradient),
   plus un point chaud qui suit le curseur (radial-gradient positionne par les
   variables --mx / --my alimentees en JS par assets/cards.js).
   Le masque XOR ne laisse visible que l'anneau de 1,5 px du bord. */
.svc-card{--glow:52,211,153;--glow-base:0.5;}
.incl-card{--glow:5,150,105;--glow-base:0.45;}
/* Variante pour une carte posee sur fond anthracite : l'emeraude y est trop
   sombre, on repasse au vert menthe comme sur la carte sombre de l'accueil. */
.incl-card--dark{--glow:52,211,153;--glow-base:0.5;}
.svc-card::after,.incl-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;padding:1.5px;background:radial-gradient(circle 180px at var(--mx,50%) var(--my,50%),rgba(var(--glow),1),rgba(var(--glow),0) 62%),linear-gradient(rgba(var(--glow),var(--glow-base)) 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;}
.svc-card:hover::after,.incl-card:hover::after{opacity:1;}

/* --- Icones ---------------------------------------------------------------- */
.svc-icon,.incl-icon{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,filter .3s ease;}
.svc-card:hover .svc-icon{transform:scale(1.14);box-shadow:0 0 0 1px rgba(52,211,153,0.45),0 10px 26px -8px rgba(52,211,153,0.6);filter:drop-shadow(0 0 5px rgba(52,211,153,0.45));}
.incl-card:hover .incl-icon{transform:scale(1.14);box-shadow:0 10px 24px -8px rgba(5,150,105,0.65);}
.incl-card--dark:hover .incl-icon{box-shadow:0 10px 24px -8px rgba(52,211,153,0.7);}

/* --- Fleche "En savoir plus" (toutes les cartes cliquables) ---------------- */
.svc-card>span svg,.incl-card>span svg{transition:transform .25s cubic-bezier(.2,.7,.3,1);}
.svc-card:hover>span svg,.incl-card:hover>span svg{transform:translateX(4px);}

/* --- Mouvement reduit ------------------------------------------------------
   Le JS teste deja prefers-reduced-motion avant de poser l'apparition au
   scroll ; cette regle couvre le cas ou l'utilisateur change de reglage en
   cours de visite. */
@media(prefers-reduced-motion:reduce){
  .svc-card,.incl-card{animation:none;}
  .svc-card::after,.incl-card::after,.svc-icon,.incl-icon,.svc-card>span svg,.incl-card>span svg{transition:none;}
  .svc-card:hover .svc-icon,.incl-card:hover .incl-icon,.svc-card:hover>span svg,.incl-card:hover>span svg{transform:none;}
  [data-reveal]{transition:none !important;animation:none !important;}
}