/* =========================================================
   V3 SPORT AGENCY — Motion design
   Animations ajoutées par-dessus le site, sans toucher à la DA :
   titres qui montent mot par mot, entrée du hero, chiffres qui
   défilent, filets qui se tracent, boutons « aimantés ».

   POUR TOUT DÉSACTIVER : retirer la ligne
     <link rel="stylesheet" href="motion.css">
   et la ligne
     <script src="motion.js"></script>
   dans index.html. Le site redevient exactement comme avant.

   Tout est coupé automatiquement pour les visiteurs qui ont
   demandé « réduire les animations » dans leur système.
   ========================================================= */

/* ---------- 1. Barre de progression sous le header ---------- */
.progress{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:var(--ink);
  transform-origin:left center;
  transform:scaleX(0);
  pointer-events:none;
}

/* ---------- 2. Titres : chaque mot monte derrière un masque ---------- */
.mot{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.12em;
  margin-bottom:-.12em;
}
.mot__in{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s cubic-bezier(.2,.75,.2,1);
}
.is-visible .mot__in,
.mot__in.is-in{ transform:none; }

/* Les titres sont déjà animés mot à mot : on retire le glissé
   du bloc parent pour éviter un double mouvement. */
.section__head.reveal{ transform:none; }

/* ---------- 3. Entrée du hero, en cascade ---------- */
.motion-on .hero__content > *{
  opacity:0;
  transform:translateY(22px);
  animation:entree 1.1s cubic-bezier(.2,.75,.2,1) forwards;
}
.motion-on .hero__content > *:nth-child(1){ animation-delay:.10s; }
.motion-on .hero__content > *:nth-child(2){ animation-delay:.22s; }
.motion-on .hero__content > *:nth-child(3){ animation-delay:.38s; }
.motion-on .hero__content > *:nth-child(4){ animation-delay:.52s; }

.motion-on .hero__media .frame,
.motion-on .hero__media video{
  animation:devoile 1.4s cubic-bezier(.7,0,.2,1) .25s both;
}

@keyframes entree{
  to{ opacity:1; transform:none; }
}
/* Le showreel se dévoile de bas en haut, comme un rideau. */
@keyframes devoile{
  from{ clip-path:inset(100% 0 0 0); transform:scale(1.08); }
  to  { clip-path:inset(0 0 0 0);    transform:scale(1); }
}

/* Le hero s'anime lui-même : pas de fondu générique en plus. */
.motion-on .hero .reveal{ opacity:1; transform:none; transition:none; }

/* ---------- 4. Parallaxe douce ---------- */
.hero__media,
.carriere__item{ will-change:transform; }

/* ---------- 5. Cartes en cascade ---------- */
.motion-on .offres .offre,
.motion-on .formules .formule,
.motion-on .livrables .livrable,
.motion-on .methode li,
.motion-on .works .work{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
  transition-delay:var(--d, 0ms);
}
.motion-on .is-visible .offre,
.motion-on .is-visible .formule,
.motion-on .is-visible .livrable,
.motion-on .is-visible li,
.motion-on .is-visible .work,
.motion-on .offre.is-visible{
  opacity:1;
  transform:none;
}
/* Les offres sont chacune un .reveal : elles portent la classe elles-mêmes. */
.motion-on .offres .offre.reveal{ transition-delay:var(--d, 0ms); }

/* Survol : la carte se soulève légèrement. */
@media (hover:hover){
  .motion-on .is-visible .formule:hover,
  .motion-on .offre.is-visible:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px -24px rgba(23,22,19,.35);
    transition-delay:0ms;
  }
}

/* ---------- 6. Filet des livrables qui se trace ---------- */
.livrables{
  position:relative;
  border-top-color:transparent;
}
.livrables::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.4s cubic-bezier(.7,0,.2,1);
}
.livrables.is-visible::before{ transform:scaleX(1); }

/* ---------- 7. Réalisations : la vidéo respire au survol ---------- */
@media (hover:hover){
  .work__frame video,
  .work__frame img{ transition:transform 1.2s var(--ease); }
  .work:hover .work__frame video,
  .work:hover .work__frame img{ transform:scale(1.045); }
}

/* ---------- 8. Boutons aimantés ---------- */
.btn{ transition-property:background-color, color, border-color, transform; }
.btn.is-aimant{ transition:transform .25s ease-out, background-color .3s, color .3s; }

/* ---------- 9. Bandeau « Ils nous font confiance » ----------
   Noms en noir (charte). motion.js fait glisser la piste vers la droite
   et met en avant le nom qui passe au centre : il grossit, prend le bleu
   --marque-accent et un trait fin se dessine dessous. */
.references{
  --marque-accent:#C8102E;
  position:sticky;            /* visible en bas de l'écran dès l'arrivée */
  bottom:0;
  z-index:5;
  background:var(--paper);
  padding-block:14px 18px;
  border-top:1px solid var(--line-soft);
  overflow:hidden;
}
.references__label{
  text-align:center;
  font-size:10px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.references__fenetre{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.references__piste{
  display:flex;
  width:max-content;
  will-change:transform;
}
.references__piste ul{
  display:flex;
  align-items:center;
}
.references__piste li{
  position:relative;
  padding-inline:clamp(22px, 3vw, 36px);
  font-family:var(--serif);
  font-size:clamp(1.15rem, 2vw, 1.5rem);
  color:var(--ink);
  white-space:nowrap;
  transform-origin:center;
  will-change:transform, opacity;
}
/* petit point entre deux noms */
.references__piste li::after{
  content:"";
  position:absolute;
  right:-2.5px; top:50%;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--ink);
  opacity:.22;
  transform:translateY(-50%);
}
/* trait qui se dessine sous le nom mis en avant */
.references__trait{
  position:absolute;
  left:clamp(22px, 3vw, 36px);
  right:clamp(22px, 3vw, 36px);
  bottom:-6px;
  height:1.5px;
  background:var(--marque-accent);
  transform:scaleX(0);
  transform-origin:center;
}
.references__piste img{
  height:30px;
  width:auto;
  filter:grayscale(1) contrast(1.1);
  opacity:.75;
}

/* ---------- 10. Réduire les animations : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  .mot__in{ transform:none; transition:none; }
  .progress{ display:none; }
  .references__piste{ flex-wrap:wrap; justify-content:center; width:auto; transform:none !important; }
  .livrables::before{ transform:none; }
}