/* =========================================================
   V3 SPORT AGENCY — Intro d'arrivée « À vos marques »
   Pur motion design, dans la DA du site (noir encre / beige),
   aucune vidéo :

   1. Une ligne de départ se trace. « À vos marques. » monte
      lettre par lettre au-dessus de la ligne.
   2. Huit bandes noires — les huit couloirs — recouvrent
      l'écran en décalé. « Prêts. » se ramasse, comme un
      sprinteur qui lève les hanches, et frémit.
   3. « PARTEZ. » claque, s'étire et s'arrache vers la droite
      avec des traînées de vitesse.
   4. Les huit bandes partent une à une vers la droite, comme
      des coureurs qui sortent des blocs : le site apparaît.

   - Une seule fois par visite (onglet).
   - « Passer », clic n'importe où ou Échap pour couper.
   - Jamais jouée si le visiteur a demandé moins d'animations.

   POUR LA DÉSACTIVER : retirer dans index.html la ligne
     <link rel="stylesheet" href="intro.css">
   le petit <script> « intro » dans le <head>, le bloc
   <div class="intro"> et la ligne <script src="intro.js">.
   ========================================================= */

.intro{ display:none; }

.intro-on body{ overflow:hidden; }
.intro-on .intro,
.intro.is-ouvert{               /* reste visible pendant le départ des couloirs */
  display:block;
  position:fixed;
  inset:0;
  z-index:10001;                 /* au-dessus du grain papier (9999) */
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  cursor:pointer;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-io:cubic-bezier(.76,0,.24,1);
}
/* une fois les bandes parties, le fond beige disparaît aussi */
.intro.is-ouvert{ background:transparent; pointer-events:none; }

/* Le hero attend la fin de l'intro pour faire sa propre entrée. */
.intro-on .hero__content > *,
.intro-on .hero__media .frame,
.intro-on .hero__media video{ animation-play-state:paused !important; }

/* ---------- La scène : tout est centré sur la ligne de départ ---------- */
.intro__scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
}
.intro__bloc{ position:relative; display:grid; justify-items:center; }

/* ---------- Ligne de départ ---------- */
.intro__ligne{
  position:absolute;
  left:50%;
  top:100%;
  width:min(78vw, 980px);
  height:2px;
  margin-left:calc(min(78vw, 980px) / -2);
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
}
.intro.t-ligne .intro__ligne{ transform:scaleX(1); transition:transform .7s var(--ease-io); }
.intro.t-sombre .intro__ligne{ opacity:0; transition:opacity .2s; }

/* ---------- Les mots, lettre par lettre ---------- */
.intro__mot{
  grid-area:1/1;
  align-self:end;
  white-space:nowrap;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.6rem, 10vw, 8.6rem);
  line-height:1;
  letter-spacing:-.02em;
  padding-bottom:.14em;
}
.intro__l{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .02em .14em; margin-bottom:-.14em; }
.intro__l > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(115%) rotate(6deg);
  transform-origin:left bottom;
  will-change:transform;
}
.intro__mot.is-in  .intro__l > i{ transform:none; transition:transform .7s var(--ease-out); transition-delay:calc(var(--i) * 22ms); }
.intro__mot.is-out .intro__l > i{ transform:translateY(115%); transition:transform .32s var(--ease-in); transition-delay:calc(var(--i) * 10ms); }

/* « Prêts. » : couleur papier sur les bandes noires, et il se ramasse */
.intro__mot--prets{ color:var(--paper); }
.intro__mot--prets.is-tendu{ animation:ramasse .45s var(--ease-io) forwards; }
@keyframes ramasse{ to{ transform:scale(1.06, .9); } }
/* à la sortie, le frémissement s'arrête pour que les lettres puissent tomber */
.intro__mot--prets.is-out .intro__l > i{ animation:none; }

/* « PARTEZ. » : droit, gras, il claque puis s'arrache vers la droite */
.intro__mot--partez{
  font-style:normal;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--paper);
  opacity:0;
}
.intro__mot--partez .intro__l > i{ transform:none; }
.intro__mot--partez{ will-change:transform; }
.intro__mot--partez.is-in{ opacity:1; animation:claque .26s var(--ease-out) both; }
.intro__mot--partez.is-parti{ opacity:1; animation:arrache .42s var(--ease-in) forwards; }
@keyframes claque{
  from{ transform:scale(1.25); opacity:0; }
  to  { transform:none; opacity:1; }
}
@keyframes arrache{
  0%  { transform:none; }
  25% { transform:translateX(-1.5vw) skewX(6deg) scaleX(.97); }   /* l'appui */
  100%{ transform:translateX(120vw) skewX(-18deg) scaleX(1.8); }
}

/* ---------- Traînées de vitesse au « Partez » ---------- */
.intro__trainees{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.intro__trainees span{
  position:absolute;
  left:-40vw;
  height:1px;
  width:40vw;
  background:linear-gradient(90deg, transparent, rgba(244,242,237,.85));
  opacity:0;
}
.intro.t-vitesse .intro__trainees span{ animation:trainee .45s var(--ease-in) forwards; animation-delay:var(--d); }
@keyframes trainee{
  0%  { transform:translateX(0); opacity:0; }
  20% { opacity:1; }
  100%{ transform:translateX(190vw); opacity:0; }
}

/* ---------- Les huit couloirs ---------- */
.intro__couloirs{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  grid-template-rows:repeat(8, 1fr);
  pointer-events:none;
}
.intro__couloirs span{
  background:var(--ink);
  transform:translateX(-101%);
  will-change:transform;
  border-bottom:1px solid rgba(244,242,237,.06);   /* on devine les couloirs, sans les dessiner */
}
.intro.t-sombre .intro__couloirs span{
  transform:none;
  transition:transform .5s var(--ease-io);
  transition-delay:calc(var(--i) * 32ms);
}
/* le départ : chaque couloir s'arrache à son tour, comme un coureur */
.intro.t-sortie .intro__couloirs span{
  transform:translateX(101%);
  transition:transform .6s var(--ease-io);
  transition-delay:var(--depart);
}

/* ---------- Passer ---------- */
.intro__passer{
  position:absolute;
  z-index:4;
  right:clamp(16px, 3vw, 40px);
  bottom:clamp(16px, 3vw, 34px);
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:0 0 3px;
  font:500 10.5px/1 var(--sans);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  transition:color .3s, opacity .3s;
}
.intro.t-sombre .intro__passer{ color:rgba(244,242,237,.5); }
.intro.t-sortie .intro__passer{ opacity:0; }