/* ILSSI — animations supplémentaires de l'accueil (apparitions, animations continues, effets au pointeur).
   Tout est neutralisé si le visiteur préfère réduire les animations. */

/* 1. Bandeaux de mots-clés en défilement continu */
#ilssi-site .kw-ticker{background:#031f42;padding:18px 0;overflow:hidden;position:relative;border-block:1px solid rgba(124,198,255,.12)}
#ilssi-site .kw-ticker.kw-light{background:linear-gradient(90deg,#fff7e0,#fcfaf5 40%,#fff0f3)}
#ilssi-site .kw-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#ilssi-site .kw-row+.kw-row{margin-top:10px}
#ilssi-site .kw-track{display:flex;gap:26px;width:max-content;align-items:center;animation:kw-left 46s linear infinite}
#ilssi-site .kw-reverse .kw-track{animation-name:kw-right;animation-duration:54s}
#ilssi-site .kw-track span{font-weight:800;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.6px;color:transparent;-webkit-text-stroke:1px rgba(124,198,255,.55);white-space:nowrap;transition:color .25s}
#ilssi-site .kw-track span:nth-of-type(4n+1){color:#ffc221;-webkit-text-stroke:0}
#ilssi-site .kw-reverse .kw-track span{font-size:clamp(13px,1.4vw,17px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9dbcd7;-webkit-text-stroke:0}
#ilssi-site .kw-reverse .kw-track span:nth-of-type(5n+2){color:#ff7a93}
#ilssi-site .kw-track i{font:700 22px/1 Georgia,serif;color:#e72e51;font-style:normal;opacity:.8;animation:kw-spin 6s linear infinite}
#ilssi-site .kw-light .kw-track span{-webkit-text-stroke:1px rgba(3,31,66,.28)}
#ilssi-site .kw-light .kw-track span:nth-of-type(4n+1){color:#c62142}
#ilssi-site .kw-light .kw-reverse .kw-track span{color:#617082}
#ilssi-site .kw-light .kw-reverse .kw-track span:nth-of-type(5n+2){color:#087cf0}
#ilssi-site .kw-ticker:hover .kw-track span{-webkit-text-stroke-color:rgba(255,194,33,.8)}
@keyframes kw-left{to{transform:translateX(-50%)}}
@keyframes kw-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes kw-spin{to{transform:rotate(360deg)}}

/* 2. Apparitions au défilement (classes posées par home-motion.js) */
#ilssi-site .mv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
#ilssi-site .mv.mv-left{transform:translateX(-40px)}
#ilssi-site .mv.mv-right{transform:translateX(40px)}
#ilssi-site .mv.mv-zoom{transform:scale(.92)}
#ilssi-site .mv.in{opacity:1;transform:none}

/* 3. Halos lumineux qui dérivent derrière les sections */
#ilssi-site .mv-host{position:relative;isolation:isolate;overflow:clip}
#ilssi-site .mv-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:orb-drift 22s ease-in-out infinite alternate}
#ilssi-site .mv-orb.o1{width:420px;height:420px;left:-120px;top:10%;background:radial-gradient(circle,rgba(255,194,33,.45),transparent 65%)}
#ilssi-site .mv-orb.o2{width:520px;height:520px;right:-160px;bottom:-10%;background:radial-gradient(circle,rgba(8,124,240,.30),transparent 65%);animation-duration:28s;animation-direction:alternate-reverse}
#ilssi-site .mv-orb.o3{width:300px;height:300px;left:45%;top:-80px;background:radial-gradient(circle,rgba(231,46,81,.22),transparent 65%);animation-duration:18s}
@keyframes orb-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.12)}100%{transform:translate(-40px,50px) scale(.95)}}

/* 4. Médailles des niveaux : flottement + anneau tournant */
#ilssi-site .belt-card .belt-seal{animation:seal-bob 4.6s ease-in-out infinite;position:relative}
#ilssi-site .belt-card:nth-child(2) .belt-seal{animation-delay:-1.5s}
#ilssi-site .belt-card:nth-child(3) .belt-seal{animation-delay:-3s}
#ilssi-site .belt-card .belt-seal::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px dashed rgba(255,194,33,.55);animation:kw-spin 14s linear infinite;pointer-events:none}
#ilssi-site .belt-card.green .belt-seal::before{border-color:rgba(31,157,98,.5)}
#ilssi-site .belt-card.black .belt-seal::before{border-color:rgba(3,31,66,.4)}
@keyframes seal-bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes res-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 5. Reflet qui balaie les boutons dorés et bleus */
#ilssi-site .btn-gold,#ilssi-site .btn-blue{position:relative;overflow:hidden;isolation:isolate}
#ilssi-site .btn-gold::after,#ilssi-site .btn-blue::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:btn-sheen 4.8s ease-in-out infinite;z-index:1;pointer-events:none}
#ilssi-site .btn-blue::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation-delay:1.6s}
@keyframes btn-sheen{0%,62%{left:-60%}100%{left:130%}}

/* 6. Lettres DMAIC qui s'illuminent tour à tour */
#ilssi-site .dmaic-tabs button{position:relative}
#ilssi-site .dmaic-tabs button::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,194,33,.0);animation:dmaic-glow 5s ease-in-out infinite;pointer-events:none}
#ilssi-site .dmaic-tabs button:nth-child(2)::before{animation-delay:1s}#ilssi-site .dmaic-tabs button:nth-child(3)::before{animation-delay:2s}
#ilssi-site .dmaic-tabs button:nth-child(4)::before{animation-delay:3s}#ilssi-site .dmaic-tabs button:nth-child(5)::before{animation-delay:4s}
@keyframes dmaic-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,194,33,0)}10%{box-shadow:0 0 0 3px rgba(255,194,33,.55),0 0 26px rgba(255,194,33,.35)}22%{box-shadow:0 0 0 0 rgba(255,194,33,0)}}

/* 7. Cartes : reflet continu sur les visuels de formation, cartes de ressources qui flottent */
#ilssi-site .course-art{position:relative;overflow:hidden}
#ilssi-site .course-art::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:btn-sheen 6.5s ease-in-out infinite;pointer-events:none}
#ilssi-site .course-card:nth-child(2) .course-art::after{animation-delay:2.1s}#ilssi-site .course-card:nth-child(3) .course-art::after{animation-delay:4.2s}
#ilssi-site .resource-illustration{animation:res-bob 7s ease-in-out infinite}
#ilssi-site .resource-card:nth-child(2) .resource-illustration{animation-delay:-2.3s}#ilssi-site .resource-card:nth-child(3) .resource-illustration{animation-delay:-4.6s}
#ilssi-site .contact-card-icon{position:relative}
#ilssi-site .contact-card-icon::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(231,46,81,.45);animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
#ilssi-site .section-heading .eyebrow,#ilssi-site .section-intro .eyebrow{background:linear-gradient(90deg,currentColor 0 40%,#ffc221 50%,currentColor 60% 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:eyebrow-shine 6s linear infinite}
@keyframes eyebrow-shine{from{background-position:100% 0}to{background-position:-150% 0}}

/* 8. Effets au pointeur : inclinaison 3D des cartes, lueur qui suit la souris dans les sections sombres */
#ilssi-site .mv-tilt{transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .25s ease-out;will-change:transform}
#ilssi-site .mv-tilt.tilting{box-shadow:0 28px 60px -28px rgba(3,31,66,.45)}
#ilssi-site .mv-glow{position:relative}
#ilssi-site .mv-glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(124,198,255,.16),transparent 60%);opacity:var(--go,0);transition:opacity .4s}

@media (prefers-reduced-motion:reduce){
  #ilssi-site .kw-track,#ilssi-site .kw-track i,#ilssi-site .mv-orb,#ilssi-site .belt-seal,#ilssi-site .belt-seal::before,#ilssi-site .btn-gold::after,#ilssi-site .btn-blue::after,#ilssi-site .dmaic-tabs button::before,#ilssi-site .course-art::after,#ilssi-site .resource-illustration,#ilssi-site .contact-card-icon::after,#ilssi-site .eyebrow{animation:none!important}
  #ilssi-site .mv{opacity:1!important;transform:none!important;transition:none!important}
  #ilssi-site .mv-tilt{transform:none!important}
}