/* ══════════════════════════════════════════════
   RIDEAU PODIUM — rideau.css
   Classes préfixées rp- (rideau-podium)
   Couleur : tons #EEBD40 / hsl(44, 84%, …)
   Usage : ajouter .rp-wrap autour du podium,
           y insérer un .rp-inner > 10×.rp-unit
══════════════════════════════════════════════ */

/* Conteneur du podium — relatif + masque le débordement */
.rp-wrap {
  position: relative;
  overflow: hidden;
}

/* Les lames de rideau (overlay absolu, pointer-events none
   pour laisser passer les clics sur le lien en dessous) */
.rp-inner {
  position: absolute;
  top: -10%;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 2.8s ease;
  transform-origin: -120% top;
  z-index: 5;
}

/* Chaque lame verticale */
.rp-unit {
  flex: 1;
  height: 150%;
  background: repeating-linear-gradient(
    to left,
    hsl(44, 84%, 50%) 40%,
    hsl(44, 84%, 30%) 80%,
    hsl(44, 84%, 70%) 100%
  );
  transform-origin: 0 0%;
  transform: rotate(3deg);
  animation: rpUnit 2s ease infinite;
}

@keyframes rpUnit {
  50% { transform: rotate(-3deg); }
}

/* Décalages progressifs pour l'effet vague */
.rp-unit:nth-child(1)  { animation-delay: -0.1s; }
.rp-unit:nth-child(2)  { animation-delay: -0.2s; }
.rp-unit:nth-child(3)  { animation-delay: -0.3s; }
.rp-unit:nth-child(4)  { animation-delay: -0.4s; }
.rp-unit:nth-child(5)  { animation-delay: -0.5s; }
.rp-unit:nth-child(6)  { animation-delay: -0.6s; }
.rp-unit:nth-child(7)  { animation-delay: -0.7s; }
.rp-unit:nth-child(8)  { animation-delay: -0.8s; }
.rp-unit:nth-child(9)  { animation-delay: -0.9s; }
.rp-unit:nth-child(10) { animation-delay: -1s; }

/* ── OUVERTURE : le rideau glisse vers la gauche au survol ── */
.rp-wrap.rp-open .rp-inner {
  transform-origin: -120% top;
  transform: scaleX(0);
}