:root{
  --playerDur: 1000ms;
}

/* ======================
   HERO
====================== */
#section-hero-anime-rh-rugby{
  position:relative;
  overflow:hidden;
  background:#f5f5f5;
}

/* ======================
   WRAPPERS
====================== */
.player-left-wrap,
.player-center-wrap,
.player-right-wrap,
.streaks-left-wrap,
.streaks-right-wrap{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ======================
   TEXTE
====================== */
.hero__content{
  position:relative;
  z-index:5 !important;
  opacity:0;
  transform:translateY(20px);
  animation:text-in 600ms ease 120ms forwards;
}

@keyframes text-in{
  to{opacity:1; transform:translateY(0);}
}

/* ======================
   JOUEURS (BASE)
====================== */
.player-left,
.player-center,
.player-right{
  position:absolute;
  bottom:-15px;
  width:auto;
  opacity:0;
  animation:player-in var(--playerDur) ease forwards;
}

/* Positions desktop */
.player-left{
  right:30%;
  height:clamp(420px, 28vw, 600px);
  z-index:2;
  animation-delay:600ms;
}

.player-center{
  right:17%;
  height:clamp(460px, 32vw, 680px);
  z-index:3;
  animation-delay:200ms;
}

.player-right{
  right:6%;
  height:clamp(420px, 28vw, 600px);
  z-index:2;
  animation-delay:400ms;
}

/* Animation factorisée */
@keyframes player-in{
  0%{opacity:0; transform:translateY(120px);}
  60%{opacity:1; transform:translateY(-10px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ======================
   ECLAIRS
====================== */
.streaks-left,
.streaks-right{
  position:absolute;
  top:0;
  height:100%;
  width:auto;
  object-fit:contain;
  opacity:0;
}

/* Gauche */
.streaks-left{
  left:0;
  animation:streak-left 900ms ease forwards;
}

/* Droite */
.streaks-right{
  right:0;
  animation:streak-right 900ms ease 150ms forwards;
}

@keyframes streak-left{
  from{opacity:0; transform:translateX(-4vw);}
  to{opacity:0.9; transform:translateX(0);}
}

@keyframes streak-right{
  from{opacity:0; transform:translateX(4vw);}
  to{opacity:0.9; transform:translateX(0);}
}

/* ======================
   TABLET (48em)
====================== */
@media (max-width: 48em){

  #section-hero-anime-rh-rugby::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:300px;
    z-index:2;
    pointer-events:none;

    background:linear-gradient(
      to top,
      #ffffff 0px,
      #ffffff 240px,
      rgba(255,255,255,0) 300px
    );
  }

  .streaks-left,
  .streaks-right{ z-index:0; }

  .player-left,
  .player-center,
  .player-right{
    bottom:220px;
  }

  .player-left{
    right:35%;
    height:clamp(340px, 23vw, 480px);
    z-index:1;
  }

  .player-center{
    right:17%;
    height:clamp(380px, 26vw, 540px);
    z-index:2;
  }

  .player-right{
    right:2%;
    height:clamp(340px, 23vw, 480px);
    z-index:1;
  }

  .hero__content{ z-index:4 !important; }
}

/* ======================
   MOBILE (35em)
====================== */
@media (max-width: 35em){

  #section-hero-anime-rh-rugby::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:300px;
    pointer-events:none;

    background:linear-gradient(
      to top,
      #ffffff 0px,
      #ffffff 240px,
      rgba(255,255,255,0) 300px
    );
  }

  .hero__content{ z-index:4 !important; }

  .player-left,
  .player-center,
  .player-right{
    bottom:220px;
  }

  .player-left{
    left:1%;
    height:clamp(280px, 40vw, 420px);
    z-index:0;
  }

  .player-center{
    right:30%;
    height:clamp(320px, 46vw, 480px);
    z-index:2;
  }

  .player-right{
    right:1%;
    height:clamp(280px, 40vw, 420px);
    z-index:0;
  }

  @keyframes player-in{
    0%{opacity:0; transform:translateY(160px);}
    60%{opacity:1; transform:translateY(-10px);}
    100%{opacity:1; transform:translateY(0);}
  }

  .streaks-left,
  .streaks-right{
    display:none;
  }
}